Tonight is Christmas Eve, in advance to send you a blessing.
I made an SVG stroke animation that looks like this:
SVG is drawn in Illustrator and the apple is drawn by hand (albeit with an ugly 0.0).
And by convention, after we see the effect we’re going to learn how it works.
Thought analysis
SVG is a technology for drawing vector images on web pages, including lines, polylines, polygon, React, circle, ellipsis, etc. It can also describe arbitrary shapes through path.
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"/>
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
Copy the codeWhere M is moveTo, which moves to a position to start drawing, L is lineTo, which draws a straight line, and Z is closePath, which completes the drawing. Of course, you can also draw curves and so on, the API is similar to the canvas drawing API.
Do we need to draw the path of the apple and the text by hand in code?
No, you can use Illastrator, a vector drawing software that has various drawing tools such as pen, text, etc. You can draw with these tools and export SVG.
SVG can set properties for two aspects, one for lines, mainly stroke, and one for fill, mainly fill.
Stroke-related styles have stroke-dasharray to specify dotted lines.
Such as stroke – dasharray: 10 20; The dotted lines are 10px long and 20px apart.
You can also use stroke-dasharray to specify the offset of the dotted line, that is, the offset position, which is positive to the left and negative to the right.
For example, stroke-Dashoffset: 1 is offset to the left by 1px.
Notice the stroke-dashoffset. We offset the entire length to the left and then slowly move it back to the original position, offset from positive to 0.
This is how SVG stroke animations work.
Knowing what properties this animation is going to change, should we use the timer to change them ourselves? No, you can modify the properties with animation frameworks such as animos.js, which also supports setting time functions such as constant speed, acceleration, and so on.
Now that we’ve got the general idea, let’s go ahead and implement it.
Code implementation
Let’s get the SVG ready first, using Illastrator:
Use the Type Tool (T) to write the blessing text, then select “Create Outline” to turn it into an outline data, then select Export SVG.
Apple can draw it by hand with a pen, click “Create composite Path”, change it to path, and export SVG:
After drawing the SVG, let’s animate it:
-
Start by setting stroke-Dashoffset to the length of SVG, then slowly animate it to 0.
-
After each path is drawn, fill the color with the fill attribute.
Let’s add a class to each path and animate it.
Use animos. js to change the stroke-Dashoffset animation for stroke.
These parameters need to be passed:
-
Specify targets, which is the element to animate
-
Specifies that the strokeDashOffset attribute value slowly changes from the length of SVG to 0.
-
Specify easing time function, linear is uniform
-
Duration Specifies the duration
-
Specifies the delay time for executing the animation for each element
-
You can also specify that some property values for each element are changed after the animation ends
const duration = 800;
anime({
targets: ".svg-path".strokeDashoffset: function(item) {
const svgLength = anime.setDashoffset(item);
return [svgLength, 0];
},
easing: "linear",
duration,
delay: function (item, index) {
return duration * index;
},
update: function (anim) {
const color = ['red'.'pink'.'purple'.'skyblue'.'blue'.'red'.'green'.'green'];
for(let i = 1; i <= color.length; i++) {
if (anim.currentTime >= duration * i) {
document.querySelector(".path" + i).style.fill = color[i-1]; }}},autoplay: true
});
Copy the codeWe set different animation delay time for each element, which is the effect of animation.
After each element is executed, determine the time and fill with color if it is an element that has already been animated.
The initial value of stokeDashOffset is the length of the SVG (offset to the left), then slowly changes to 0 (back to the origin).
Thus, we have achieved the desired effect of stroke animation.
Let’s take a look again:
Full code:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Happy Christmas Eve</title>
<script src="https://unpkg.com/[email protected]/lib/anime.min.js"></script>
<style>
body {
background-color: # 000;
}
.box {
width: 600px;
height: 300px;
text-align: center;
margin: 0 auto;
}
svg {
width: 600px;
height: 300px;
padding-top: 30px;
}
.svg-path {
fill: # 000;
stroke: #fff;
}
</style>
</head>
<body>
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.34 333.9">
<path class="svg-path path1"
d="M289.75, 295.3 v1.8 a8.37, 8.37, 0, 1 -. 24,2.1 c - 16.68, 0-29.94 -. 36-39.78-1.2 a7.41, 7.41, 0, 1 -. 17-2,6.49, 6.49, 0, 1,, 29-2 q269. Zm 92293.92, 289.75, 295.3-29.58, a9.45 22.92, 9.45, 0, 1-3.54, 2.22, 50.86, 50.86, 0, 1-5.82-8.58, 9.62, 9.62, 0,0,1,3.61-2.16 A98. 3,98.3, 0,0,1,260.17, 318.22 Zm26.76 a6.52 8.7, 6.52, 0, 1,. 18,1.86, 6,6,0,0,1 -. 18,1.86 c - 6.24-3.78.36-9.48.36 h - 4.86 - c -. 12,2.76 -. 3,5.22 -. 48,7.5 a6.22, 6.22, 0, 1, 2,. 24,4.7, 4.7, 0, 1-1.68 -. 24 c - 18-2.4-3-4.86 -. 36-7.5-9.54, 0-14.88 -. 12-15.95 -. 36 a5. 88, 5 .,0,0,1-88. 25-2,5.49 5.49, 0, 1, 3-2 c4. 92-12,10.2-18,15.78-18 v - 3.42 q0 - a10.57 5.85.36-12.24, 10.57, 0, 2 -. 24,9.05, 9.05 , 0, 2,. 24 q. 36,6.48. 36,11.88 v3.72 h4.74 A79, 79,0,0,1,286.93 a49.35 Zm5 326.92-15.12, 49.35, 0, 1-6.66, 9.54, 4.71, 4.71, 0, 1 - 3.06-1.8, 46.39, 46.39, 0 A6.85,0,1,6.18-9.84, 6.85, 0,0,1,291.91, 311.8 Z"
transform="Translate (245.6-293.92)" />
<path class="svg-path path2"
d="M254.11 a129.35 372.4, 129.35, 0, 1-71,13,6.56, 6.56, 0, 1-2.11.24, 2.82, 2.82, 0, 1-2 -. 48,88.15, 88.15, 0, 1, the 67-13,20.77, 2 0.77, 0,0,1,2.1 -. 12 a5. 79,5.79, 0,0,1,254.11, 372.4 Zm34.68 v2c 7.2.6-16.86-14.34, 1-21.54, 1.32, 9,2.52-1.74, 5.1, 2.58, 7.62, 4.08 ,8.16, 1, 1.8, 12.3, 2.64, 1-2.52, 1.92, 4.92, 2.88 7.08 q1.8.54, 3.78, 1.26 c - 66,2.28-1.38, 4.56, 2.22, 6.72 l5.46 a16.5 1.08, 16.5, 0, 0, C - 2-1-1.08, 3.66). 36-4-66-5.94-1-6,1.26-1.14, 2.52, 1.74, 3.78 a8.53, 8.53, 0, 1-3.54-1.74 c. 3-1. 6-2, 1-2.88-5.76-1.14-11.46-2 ,1.14. 46-17.16-4-3.42, 2.28, 6.66, 3.48-9.78-3,. 18-6. 3-8.87.36 a21.4, 21.4, 0, 1 -. 37-4 c3. 66-24,7.32-42,10.92-66 q1. 62-4.23 , a31.59 3.42 8.1, 31.59, 0,0,1,4,1.32 - c. 78,2.16-1.56, 4.32-2.28, 6.48.6, 0,1.2 -. 06,1.8-12,5.88-3,11.94 -. 54,18.06-72 a9. 87, 9. 87,0,0,1,288.79 ZM270.25 389.26, 372.4 c - 18-2-24-4.08-24-6.18.72-06,1.5-12,2.4-24 a19. 25,19.25, 0,0,1,2.16. 12 c0, 2.16.06 , 6.42 q8.64.18 4.26.06, and 17.1.54.36 5.4.36, a4.82 10.26, 4.82, 0, 1-1.8.24, 14.21, 14.21, 0, 1-2.1 -. 12 c - 24-1.38 -.. 48-3.66-72-6. 78-9.24, 0-18.6 -. 24 to 28-72 a6. 39,6.39, 0, 1 -. 24-2,8.5, 8.5, 0, 1, 12 - C263 1.68, 372.28, 266.65, 372.34, 270.25, 372.4 Z"
transform="Translate (245.6-293.92)" />
<path class="svg-path path3"
d="M263.41, 455.92-5.46 c, 2.88-10.74, 5.46, 15.89, 7.68 a6.9, 6.9, 0, 1-1.92-3.18, 175.82, 175.82, 0 A16.66,0,1,15.83-8.34, 16.66, 0, 0, 1263.41, 455.92 Zm9.66 15.9 h7.38 a87, 87,0,0,1,9. 42,6.32, 6.32, 0, 1,. 18,1.8, 5.26, 5.26, 0, 1 -. 18,1.8 c - 6.24-3.6.3-9,. 3-18.0 6, 0-27.9 -. 06-29.51-3 a5. 28,5.28, 0, 1 -. 25 to 1.92, 4.33, 4.33, 0, 1,. 31-1.86 l17.75. 18 a30. 6,30.6, 0, 1 -. 48-4 q1. 8 -. 27, 4 -. 54 c27 438.52, 273.07, 2.59, 437272.83, 440 zm - 13.26, a9.85 35.34, 9.85, 0, 1-3.66.66, 56.49, 56.49, 0, 1-3-13,16.28, 16.28, 0,0,1,3.48 -. 7 2 a65. 47,65.47, 0,0,1,259.81, a8.29 Zm8.1 475.36-10.32, 8.29, 0, 1-3.18-2.22, 65.29, 65.29, 0,0,1,11.4-13.26, 11.4, 11.4, 0,0,1,2.7, ,1.5 2.1 c - 48.72-1-1.56, 2.22, 4.5, 1.32, 9.3, 2.82, 14.46, 4.5-1.68, 4.8-3.54, 9.42-5.46, 13.86-78,1.86-1.5, 3.48, 2.1, 4.86, 2.52, 1, 5,2,7.38, 3 a20. 4,20.4, 0, 1-1.38, 3.42-2.64 - c. 78-5.16-1.62-7.68-2.52 a26.33, 26.33, 0, 1-2,3.9, 10.66, 10.66, 0, 1-3.84-1.74 c. 48-1.26, 1-2.52, 1.56-3.72-3.48-1.26-7-2.64-10.38-4.2 a13.37, 13.37, 0 c3.6,0,1,1.38-3.78, 1.32, 7.2, 2.64, 10.74, 4,2.1-4.92, 4.14 9.78, 6.18-14.58-4.08-1.14-7.86-2.34-11.34-3.66 C272.77, 459.58, 270.49, 462.22, 267.91, 465 zm12. 54,1.14 a14.75, 14.75, 0, 1-1.5, 19,19,0,0,1-6.3-3.3, 2.76, 17.21, 17.21, 0 C276.31,0,1,1.56-3.48, 464.14, 278.41, 465.1, 280.45, 466.18 Z"
transform="Translate (245.6-293.92)" />
<path class="svg-path path4"
d="M251.71, 539 a21. 77,21.77, 0, 1-3.9.36. C - 77-5.52-1.25-11-1.49-16.62 a22, 22,0,0,1,4.08-36 c250. 94528251.35, 533.62, 251.71, 539 zm7. 8 to 14 a64. 55,64.55, 0,0,1,6.54, 1.08, 20.77, 20.77, 0, 1 -. 42,3.6, 22.77, 22.77, 0, 1-5.82 -. 66 c. 36,5.64. 6,11.1. 66,16.38 a4. 87,4.87, 0, 1-1.74.24, 6.14, 6.14, 0, 1-1.68 -. 12 a261. 61261.61, 0,0,1,255,515.8 a11, 11,0,0,1,1.92-24 h1. 79 c259, 518.8, 259.27, 521.92, 259.51, 525 zm21 a9.67 18-13.5, 9.67, 0,0,1,3.84, 1.26 c -. 54,1.86-1.26, 4.44-2.16, 7.68, 3, 6,6.18. 18,9.66. 36.36, 3.24.72, 7 . 5,1.14 a13.74 12.9, 13.74, 0, 1-4. 54 c -, 6-3.84-1-7.08-1.38-9.84-2.4, 0-4.62 -. 06-6.6 -.,3.24 06-1-2, 7-3.18, 11.28 h9.42 a73.75, 7 3.75, 0,0,1,8.28. 42,5.65, 5.65, 0, 1,. 18,1.68, 4.47, 4.47, 0, 1 -. 18,1.62 c - 54.24-3.3.3-8.28.3 H276.91 c - 1.08 -, 3.84-2.28, 8-3.48, A11.64 12.42, 11.64, 0, 1-3.6-1.26 - c. 66-3.54, 1.5-7.26, 2.46-11.22 a77, 77,0,0,1-7.92-24,7,7,0,0,1-18-1.74, 4.26, 4.26, 0, 1,. 3 - 1.74 l8.76. 18 c1-3.6, 2.1-7.44, 3.3-11.46-3-6-5.52-18-7.68-3 a14. 37,14.37, 0, 1 -, 3-3.3 c3.24-12,6.3-18,9.18-24 c278. 65 , 517.48, 279.61, 514.48, 280.69, 511.48 Zm11.22 a9.05 36.06, 9.05, 0, 1 -. 9,1.68, 11.09, 11.09, 0, 1-1.14, 1.62, 28.41, 28.41, 0, 1-9 . 18-4.5, 9.93, 9.93, 0 C285.73,0,1,2.1-3.42, 544.3, 288.79, 545.86, 291.91, 547.54 Z"
transform="Translate (245.6-293.92)" />
<path class="svg-path path5"
d="M255.19 a66.44 591.4, 66.44, 0, 1-72,9.42 c2.1.6, 6.18, 1,12.3, 1.08-42-3.72-84-7.38-1.2-11.1 a18.16, 18.16, 0,0,1,4.2 -. 6 c. 6. 4,1.14, 7.86, 1.62, 11.76, 9.12, 0,15.36 -. 3,18.6 -. 9 a17. 86,17.86, 0, 1,. 48, 4 c - 2.88, 1.08-9,1.62-18.48, q1.08 1.74, 9.72, 1.62, 19.62 A31.7, 31.7, 0, 1-10.44, 1.44, 7.53, 7.53, 0, 1-84-3.42, 44.52, 44.52, 0,0,1,6.84 -. 9. C - 66-5.58-1.26-11.16-1.86-16.74-8.64-12 - 14.52-66-17.69-1.62 a94.48, 94.48, 0,0,1,1-13.86, 19.81, 19.81, 0,0,1,2.35 -. 12 c254. 42591.34, 255.19, 591.4, 255.19, 591.4 Zm32-7. 92 a14. 29,14.29, 0, 1, 12, 2 q - 18.54, 2.61-36.77, a4.47 3.9, 4.47, 0, 1 -. 48 - c12.35 2.1 v - 1.8-1.56, 24.59-2.76, 36.83 3.72 A6.24, 6.24 Zm, 0,0,1,287.17, 583.48-28.08, 31,6.6,3.12 c - 1-2-3.36, a8.26 10.38, 8.26, 0 A55.78, 1-4.14-1.32, 55.78, 0,0,1,255,613,20.2, 20.2, 0 , 0,1,259.09, 614.5 Zm29.16, 2.28 c. 72,1.44, 1.38, 2.82, 1.86, 4.08 a9.78, 9.78, 0, 1-4,1.74, 39.45, 39.45, 0, 1-4.38-8.7, 22.14, 22.14 , 0 C286.69,0,1,4.08-1.62, 613.84, 287.53, 615.34, 288.25, 616.78 Z"
transform="Translate (245.6-293.92)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219.1 246.81">
<path class="svg-path path6"
d="M326.34, 316.17 h32.53 l27.71, 25.3, 10.84, 36.14 V421l - 9.64, 37.35 L376, 486.05 l - 31.54, 14.46-28.92-6-15.66-10.84-5.37, 4.7 to 13.91, H262.48 12.17 l - 30.12-10.85 L201, 471.59, 186.58, 433 l - 7.23-51.81, 34.94, 39.76, 85.54, 9.64 Z"
transform="Translate (178.82-254.22)" />
<path class="svg-path path7"
d="M243.2, 296.89 l - 4.81-14.46 L248, 254.72 h14.46 l23.5, 12,23.49 v24.1 18.07 l - 9.64, 42.17 L262.48, 321 z"
transform="Translate (178.82-254.22)" />
<path class="svg-path path8" d="M248, l18.29 254.72, 24.63, 23.87, 40.7, 9.65, 31.06,"
transform="Translate (178.82-254.22)" />
</svg>
</div>
<script>
const duration = 800;
anime({
targets: ".svg-path".strokeDashoffset: function(item) {
const svgLength = anime.setDashoffset(item);
return [svgLength, 0];
},
easing: "linear",
duration,
delay: function (item, index) {
return duration * index;
},
update: function (anim) {
const color = ['red'.'pink'.'purple'.'skyblue'.'blue'.'red'.'green'.'green'];
for(let i = 1; i <= color.length; i++) {
if (anim.currentTime >= duration * i) {
document.querySelector(".path" + i).style.fill = color[i-1]; }}},autoplay: true
});
</script>
</body>
</html>
Copy the codeconclusion
SVG is a technique for drawing vector images on web pages. It can be used for drawing specific images such as Rect, Circle, line, etc., or for drawing more complex images using PATH.
The SVG Path API is similar to the canvas path API, such as M for moveTo, L for lineTo, and Z for closePath.
Complex graphics can be drawn using Illuastrator, a vector drawing software, and then exported as SVG.
The main attributes you can set in SVG are stroke for line style and fill for fill style.
Where stroke-dasharray specifies the dotted line length and stroke-dashoffset specifies the dotted line offset with positive numbers to the left and negative numbers to the right.
The stroke effect is achieved by changing the stroke-dashoffset value, slowly changing the overall length of the SVG to 0.
The modification of the attribute values can be done using the animation framework animo.js, which supports periodic modification of the attribute values of elements for animation, and supports time functions such as constant speed and acceleration.
For the animation in this paper, we specify the delay time for each path and set the fill attribute after each path is drawn.
SVG stroke animations are still quite nice and can be used in many ways. The implementation principle is not difficult, is a change in the value of the offset attribute. You can learn it very quickly.
Finally, I wish you a happy Christmas Eve again, plus today is Friday, double happiness ~