The beauty of lines, play with SVG line animation

What is line animation

Generally speaking, for the Web front end to achieve animation, nothing more than through the following schemes:

CSS animation: Use cSS3 style effects to animate DOM elements.
Canvas animation: Use the API provided by Canvas to continuously clear — draw such frame by frame to make animation effect.
SVG Animation: SVG stands for scalable vector graphics and is also a tag in HTML. It is a bit of a niche in animation, but it provides a number of apis for animation and compatibility.

And line animation is a line or path as the main element, the use of a variety of combinations and actions to achieve the animation effect, usually using SVG path to achieve, this article mainly explains how to make SVG line animation.

Let’s start with a few demos:

The apple logo
Apple logo2
The nuggets words

These effects are achieved by using SVG line animation, combined with CSS3 and SVG-related API, without using a line of JavaScript code, and Canvas is easier than, the following explains the principle of achieving these effects.

Basics of SVG

SVG is rendered primarily in HTML documents as a < SVG > tag, for example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>
Copy the code

Its related API is very similar to Canvas, which provides drawing of text, line, rectangle, circle, curve, path and other related shapes, as well as some effects such as filters, shadows and gradients. However, different from Canvas, SVG is used as a label in web pages. Is affected by CSS3 style or animation related parameters, with this implementation SVG path animation is much easier.

The path`<path>`:

The element is one of the most powerful SVG base shapes, and it can create not only other base shapes, but many more, such as Bezier curves, quadratic curves, and so on. The shape of the element is defined by attribute D, whose value is a sequence of “commands + arguments” as follows:

<path> element d attribute command: M = moveto(M X,Y) : moves the brush to the specified coordinate position L = lineto(L X,Y) : draws the lineto the specified coordinate position H = horizontal lineto(H X) : C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY) : C = curveto(C X1,Y1,X2, ENDX,ENDY) Quadratic Belzier curve Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY) : Secondary free-form curves T = smooth quadratic Belzier curveto (T ENDX, ENDY) : mapping A = elliptical Arc (A RX and RY, XROTATION, FLAG1, FLAG2, X, Y) : Arc Z = Closepath () : Closes the pathCopy the code

With these commands from we can implement any combination of lines we want, taking a simple line as an example:

<path id="path" fill="none" stroke="# 000" stroke-width="1px" d="Regulation M452, 293 c0, 0, 0-61-44 c0, 0, 10-67 - s - 47117,81,57 s5-110-51,77.979-50,33.989"/>
Copy the code

The effect is as follows:

It looks simple, but how do you make this line work? Here we use some of the main attributes of in SVG:

Stroke: Identifies the color of the path.
D: Identifies a collection of path commands. This property mainly determines the shape of the line.
Stroke-width: indicates the path’s width, in px. ;
Stroke-dasharray: It is a sequence of and numbers separated by commas or Spaces, specifying the length of the dash and the gap. If an odd number of values are provided, the sequence of values is repeated once, resulting in an even number of values. So 5,3,2 is the same as 5,3,2,5,3,2.
Stroke-dashoffset: identifies the offset of the entire path.

Stroke – dasharray and stroke – dashoffset

The core of line animation is to use stroke-Dasharray and stroke-dashoffset properties. For stroke-Dasharray, you can refer to the following figure for understanding:

stroke-dashoffset
translate

#path {
        stroke-dasharray: 3px.1px;
        stroke-dashoffset: 0;
}
Copy the code

Effect:

Below, we can use these two attributes respectively and combine them with CSS3 animation to draw lines dynamically, so as to achieve simple animation.

#path {
    animation: move 3s linear forwards;
}
 
@keyframes move {
      0%{
          stroke-dasharray: 0.511px;
      }
      100%{
          stroke-dasharray: 511px.0; }}Copy the code

Effect:

document.getElementById('path').getTotalLength()
Copy the code

Stroke-dasharray: 0, 511px indicates that the solid line and the gap are 0 and 511px respectively, so the entire path is empty at first. Then I transition to stroke-Dasharray: 511px, 0 because the entire line is 511px, and the solid line is slowly becoming 511px, so the entire line appears.

This effect can also be achieved using stroke-Dashoffset. The principle is that the original line is divided into 511px solid line and 511px gap, but the offset is set so that the line offset is not visible. After changing the offset, the line gradually appears.

#path {
    animation: move 3s linear forwards;
    stroke-dasharray: 511px.511px;
}
 
@keyframes move {
  0%{
      stroke-dashoffset: 511px;
  }
  100%{
      stroke-dashoffset: 0; }}Copy the code

Effect:

Complex Path Path

Once we have mastered the above methods, the whole principle of using SVG for line animation is clear. All we need is an SVG path, but drawing simple lines is not perfect. How can we get complex SVG paths?

Ask the UI designer
Exporting the image to the SVG path yourself is a simple 2 step process

Take the Apple LOGO as an example:

Get a PNG image of the Apple LOGO.
Open the image in Photoshop, right click on the layer, and click Generate Work Path from Selection.

Select save SVG file in AI, then open SVG file with text and copy d of path.
Using the animation method described above, we can easily get the following effect.

Line animation advanced

and

in SVG are used to achieve the original animation effect.

SVG reuse:`<symbol>`and`<use>`

In SVG, the < Symbol > element is used to define a graphic template object, which can be instantiated with a

element. These two elements can be leveraged when the same graph is used multiple times in an SVG document. Note that a

element does not display itself. Only instances of the

element (a

element that references

) are rendered.

Using this idea, we can duplicate multiple copies of the original path for superposition, and set different colors and animation delay, so as to achieve a “pursuit line” animation effect, the code is as follows:

<svg version="1.1"
xmlns="http://www.w3.org/2000/svg">
<symbol id="pathSymbol">
    <path  class="path" stroke="# 000"  d="M344, 26 c3. 595,1.373, 3.172, 0.899, 5, 4 c16.619, 39.859-50.248, 119.052-93107 - c - 0.572-46.929, 22.555-81.661, 53-98 C320.666, 34.667, 332.334, 30.333, 344, 26 z"/>
    <path  class="path" stroke="# 000"  d="M338, c53 132. 094-1.055, 80.442, 15.317, 103, 44 c0, 1.333, 0,2.667, 0, 4 c - 40.96, 30.44-66.713, 87.897 34147 C6.417, 11.595, 21.062, 26.807, 32, 34 c5.333, 2.667, 10.667, 5.333, 16, 8-4.646 c, 40.842-57.294, 115.573 94124 C - 31.519, 7.236-54.682-11.118-77-16 - c - 37.039-8.102-61.021, 35.953, 12.37-87 - c - 16, 7.792-63.181-27.32-76-45 C - 59.011-81.386-102.75-270.669, 25-313 c37. 527-12.435, 76.171, 6.998, 106, 13 C271.355, 153.895, 325.573, 138.184, 338132 z"/>
</symbol>
<g>
  <use xlink:href="#pathSymbol"
    id="path1"></use>
    <use xlink:href="#pathSymbol"
      id="path2"></use>
</g>

</svg>
Copy the code

      #path1 {
        stroke: #9C27B0;
        stroke-dashoffset: 7%;
        stroke-dasharray: 0 35%;
        animation: animation 3s linear forwards;
      }

      @keyframes animation {
          100% {
            stroke-dasharray: 7% 7%;
            stroke-dashoffset: 7%; }}#path2 {
        stroke: red;
        stroke-dashoffset: 7%;
        stroke-dasharray: 0 35%;
        animation: animation2 3s linear forwards;
      }

      @keyframes animation2 {
          100% {
              stroke-dasharray: 7% 7%;
              stroke-dashoffset: 14%; }}Copy the code

Effect:

stroke-dasharray
stroke-dashoffset

In addition, you can write the text element directly in

, which automatically converts the text to the corresponding path path, as follows:

  <symbol id="text">
    <text x="10%" y="35%" class="text">I</text>
    <text x="30%" y="35%" class="text">❤</text>
    <text x="60%" y="35%" class="text">U</text>
  </symbol>
Copy the code

Add a line animation to the text by setting some of the attributes of the font and the color combinations of the different overlay paths:

Article related to the complete source code can be directly right-click – developer tools to view, as much as the imagination to achieve their own SVG line animation ~

The beauty of lines, play with SVG line animation

What is line animation

Basics of SVG

The path<path>:

Stroke – dasharray and stroke – dashoffset

Complex Path Path

Line animation advanced

SVG reuse:<symbol>and<use>

Related Posts

Vuex data state management, refresh data not lost this article is enough

Flutter for Windows startup process analysis

5 CSS errors to avoid

The path`<path>`:

SVG reuse:`<symbol>`and`<use>`