1. Introduction

Even if the front end of the animation is very cool, to put it simply a variety of @keyframe a, B, C and D combinations with their own creativity, it is not very difficult, until one day to see a earthworm like stroke animation, feel very good, later found that it is made by SVG, so learn Basic knowledge of SVG, make an animation to display his name

2. Basic knowledge of SVG required in this article

2.1 What is SVG

Refer to the w3c

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for networks
  • SVG uses an XML format to define graphics
  • SVG images can be enlarged or resized without loss of graphic quality
  • SVG is the World Wide Web Consortium standard
  • SVG is integrated with W3C standards such as DOM and XSL

2.2 the path

Defining a path in SVG is like building a path with a digging machine, and then you can walk the entire length of the path, and the stroke animation follows the path

<path d=" M153 334 C153 334 151 334" style="fill:white; stroke:red; stroke-width:2"/> />Copy the code

D is used to describe the path, and style is used to define the style of the path, but it is slightly different from a normal HTML tag

  • fill => background-color
  • stroke => border-color
  • stroke-width => border-width

We see that d has a lot of capital M’s and C’s, what does that mean? Capital letters stand for absolute positioning and lowercase letters for relative positioning

M = moveto moveto L = lineto connect a lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = Quadratic Belzier curve T = smooth Quadratic Belzier curveto A = quasiarc Elliptical line Bezier curve Z = Closepath to end the current pathCopy the code

These are the things that we need to use, and now that we know this we can write

3. Start writing the three characters Li Jinke

3.1 Defining styles

Let’s start by defining an SVG and PATH tag

<body>
<svg>
    <path></path>
</svg>
</body>
Copy the code

Definition of style

    svg.body.html {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    svg {
      background: #ccc;
    }
Copy the code

Set the SVG to full screen, the background color to gray, and set the colors for each of the three words

path { stroke-width: 3px; stroke-linecap: round; // Connect the two lines in a smooth way fill: none; } path:nth-child(1) {stroke: #396; } path:nth-child(2) { stroke: gold; } path:nth-child(3) { stroke: #06a; }Copy the code

3.2 Start drawing coordinates and write the word (li)

Since we have to write three characters, for the outside, we will use all capital letters (absolute positioning), using the knowledge we have just learned, we will start at x 50,y50 and then connect a line at X120, Y50, you can see the “one” of The Li character

    <path d="M50 50 "/>
Copy the code

Next we come to a little art van, write with a range of “wood” section First with A point on the “A” in an arc < y x, A radius radius, 0, big arc, end point x coordinates, the finish y > after written in “L” two left

    <path d="M50 50 L120 50 A15 2 0 1 0 110 30 L105 100 v -50 L 70 85 L141 70 L104 120"/>
Copy the code

The effect is as follows, a little abstract and requires a little artistic taste to appreciate




At the beginning of a little rusty, but then found a feeling, slowly luo seat, finally a Li word written out

    <path d="M50 50 L120 50 A15 2 0 1 0 110 30 L105 100 v -50 L 70 85 L141 70 L104 120 v 100 A 1 2 0 0 1 69 204 L31 167 L196 127"/>
Copy the code




As expected, the word is like its people, SAO of a batch,

3.3 Finish writing the remaining two words

Then follow suit and write the other two words. The code is as follows

  <svg>
    <path d="M50 50 L120 50 A15 2 0 1 0 110 30 L105 100 v -50 L 70 85 L141 70 L104 120 v 100 A 1 2 0 0 1 69 204 L31 167 L196 127"/>
    <path d="M500 50 L 410 136 M457 89 L 610 136 M 445 155 h 70 M 445 175 h 70 M 475 155 v 90 M 457 232 L 428 213 M 520 232 L 538 213 M 405 245 h 140"/>
    <path d="M780 50 h 90 h -45 v 70 h -50 h 100 h -50 v 80 L 740 233 L 932 157 A 4 3 0 0 1 1036 96 L 980 130 v 30 h 30 v -25 h -30 h 30 v 150 L 945 222"/>
</svg>
Copy the code

Results the following




4. Add animation

In fact, there are two key properties to achieve stroke animation

Strokedashoffset: Defines the offset of a virtual line stroke (not seen before the start of the path)Copy the code

Set the two values to the same value, relatively large, and you will notice that the words you have been working so hard on are no longer visible

stroke-dashoffset: 2000;
stroke-dasharray: 2000; 
Copy the code

Change the value to 0, so all you need is an animation that slowly changes the value to 0

    path {
      stroke-width: 3px;
      stroke-linecap: round;
      fill: none;
      stroke-dashoffset: 2000;
      stroke-dasharray: 2000; 
       animation: path 10s linear forwards;
    }
    @keyframes path {
      to {
        stroke-dashoffset: 0; }}Copy the code

Refresh, and we’re done

conclusion

There are a number of tools available to generate this SVG online, but again, it’s a lot of fun to play around with it