SVG path animation optimization website effect, how to achieve an SVG progress bar animation and dashed line animation

I am used to using canvas for animation effects, data display or image processing. SVG and Canvas have similar functions, but their application scenarios are completely different and each has its own characteristics. Recently used some SVG, patch ~~~

Difference between Canvas and SVG

  • Canvas is based on pixels, while SVG is a vector graph, that is, an enlarged image will not be distorted and does not depend on resolution. For UI students, it is probably the difference between Photoshop and Illustrator.

    • Canvas depends on resolution and is suitable for image processing. It can do some functions such as picture clipping and composition.
    • SVG is great for zoomed graphics, but vector graphics are not distorted because they preserve the lines and blocks of the graphics, so rendering speed is proportional to the complexity of the graphics, which means SVG is very good for drawing flat images, such as commonly used ICONS or flat style logos.

  • Canvas draws through the JS API, while SVG is based on XML documents.

    • In terms of XML, SVG’s ability to interact with DOM methods really beats Canvas’s.
    • Canvas is a Canvas that can be cleaned and redrawn in the rendering context through THE JS API. Compared to SVG manipulating DOM, Canvas is more suitable for complex scenes.

SVG circle percentage animation

Here, you can see that there are two simple circles and a number. The blue circle is drawn from scratch as a progress bar

In this case, I only wanted to show the SVG animation, but considering that I was implementing a progress bar after all, I used JS to dynamically change the numbers for the full effect, but JS only changed the numbers, and the animation was pure HTML.

Xyz /canvas-stor… SVG pure HTML code, canvas depends on JS API redrawing is much more complicated.

The naked eye can see the flow of this example:

  1. Draw a full white circle. This step is simple and unremarkablecycleThe label
<circle cx="50%" cy="50%" r="44" fill="none" stroke="#fff" stroke-width="8"></circle>
Copy the code

2. Overlay the white circle with a gradient fill and glow effect. It’s also a normal cycle tag, but the stroke fill changes from monochrome to gradient, so how do you make a gradient? Look at the linearGradient tag and use Filter and feGaussianBlur to create the glow effect.

<defs>
  <linearGradient id="gradient">
  	<stop offset="0%" stop-color="#10a5ff" />
  	<stop offset="50%" stop-color="#03c6fd" />
  	<stop offset="95%" stop-color="#11ffe4" />
  </linearGradient>
  <filter id="shadow" width="150%" height="150%" x="25%" y="25%">
  	<feGaussianBlur in="SourceGraphic" stdDeviation="6"/>
  	<feBlend in="SourceGraphic"  mode="normal" />
  </filter>
</defs>
<circle
  cx="50%"
  cy="50%"
  r="44"
  fill="none"
  transform="rotate(-90 70 70)"
  stroke="url(#gradient)"
  filter="url(#shadow)"
  stroke-linecap="round"
  stroke-width="8"
  stroke-dasharray="276"
  stroke-dashoffset="276"
></circle>
Copy the code

3. Move!! Let the blue circle from nothing, gradually become a complete circle.

<animate id="progress" attributeName="stroke-dashoffset" attributeType="XML" from="276" to="0" dur="2s" fill="freeze"></animate>
Copy the code

The animate tag transitions from one configuration to another. Css3 changes the style configuration, while the animate tag transitions the properties of the tag. The changing property in this example is stroke-Dashoffsst, but to really understand this example we also need to know stroke-dasharray.

I won’t bother you here. You can learn from MDN documents that stroke-Dasharray, stroke-Dashoffset and CSS-Tricks are also very good articles that can help you understand stroke-Dasharray and stroke-Dashoffset.

SVG dotted line lantern animation

We took these two properties a step further and made dasharray’s dotted line move, stamp here, and this animation was also used on the front page of the blog.

This example is a stack of four dotted lines in different colors, which are then animated by a Dashoffset offset