How to make several consecutive svg animations

Question

I want to get some kind of animation only on SVG like this:

The letter X is transformed into a black square and then this square becomes white and the word should appear on the center of this square as with align-items: center; justify-content: center; - well, for example Lorem.

I drew a letter in inkscape and took all the transformations from there and it turned out the animation. That's what happened

<svg viewBox="-200 25 329 223" xmlns="http://www.w3.org/2000/svg"> <g transform="scale(1.1 .94)" aria-label="x"> <path style="fill:#000000;"> <animate id="steps1" attributeName="d" values="M 58.755625,235.87639 H 17.601031 l -55.046439,-74.49503 -55.393736,74.49503 h -38.028926 l 75.710558,-96.72198 -75.015968,-97.24292 h 41.154594 l 54.699143,73.27949 54.872791,-73.27949 h 38.202577 l -76.231505,95.50644 z;M 58.755625,235.87639 H 17.601031 l -59.300239,2.0799 -51.139936,-2.0799 h -38.028926 l 1.97802,-91.07962 -1.28343,-102.88528 h 41.154594 l 54.699143,1.540872 54.872791,-1.540872 h 38.202577 l -1.789997,86.63987 z;" begin="0s;steps2.end" dur="3s" /> <animate id="steps2" attributeName="d" values="M 58.755625,235.87639 H 17.601031 l -59.300239,2.0799 -51.139936,-2.0799 h -38.028926 l 1.97802,-91.07962 -1.28343,-102.88528 h 41.154594 l 54.699143,1.540872 54.872791,-1.540872 h 38.202577 l -1.789997,86.63987 z;M 58.755625,235.87639 H 17.601031 l -55.046439,-74.49503 -55.393736,74.49503 h -38.028926 l 75.710558,-96.72198 -75.015968,-97.24292 h 41.154594 l 54.699143,73.27949 54.872791,-73.27949 h 38.202577 l -76.231505,95.50644 z;" begin="steps1.end" dur="3s" /> </path> </g> </svg>

Since my knowledge of SVG smil is not deep, I ask for help from stackoverlow public to help figure out how to make several consecutive svg animations. The animation should not be cycles - I did it only for training. Ie, after the appearance of Lorem, the animation should stop and that's it. How can I do it ...

My idea is not commercial, but as a training

You can write in more detail how the word LOREM should appear 1. animation opacity or 2. drawing the outline of the letters of the word 3. Or should the word come to the center?
Well, I'm not Russian and I have a discount ... 1) letter X 2) transformation into a square 3) fill: white 4) lorem exactly in the center ... like that - I just have to see the sequence
I already understood from the question in the topic that we need a technique for implementing sequential animations.
I am interested in the last stage - the stage of animation. Words LOREM 1. animation opacity or 2. drawing the outlines of the letters of the word 3. Or should the word come to the center?
Well, opacity is not critical ... the sequence itself is needed ...
although it is also possible to draw contours ... but the main thing is that the state is preserved ... that is, a lorem appears and everything .. stop frame ... although I can wait 2 days and assign a

Accepted Answer · 2018-12-13T10:21:59

The animation sequence in SVG is implemented using the begin attribute.
Unlike CSS, SVG does not need to calculate timing. All this will make for us the core language of SVG.

Sequential animations
Translated into the language of people, it sounds like this: the launch of the second animation id="an2" begins after the end of the first animation id="an1" -> begin="an1.end"

The launch of the third animation id="an3" will begin after the end of the second animation id="an2"

begin="an2.end"

Parallel animations

Run the second and third animations together after the first animation ends.

 <animate id="an1" begin="0s" ../> <animate id="an2" begin="an1.end" ../> <animate id="an3" begin="an1.end" ../>

Looping animations

After the end of the last animation id="an3" perform the first animation and further, as in the first cycle

 <animate id="an1" begin="0s;an3.end" ../> <animate id="an2" begin="an1.end" ../> <animate id="an3" begin="an2.end" ../>

Below is the complete code of the entire application.

 .container { width:35%; height:35%; }

 <div class="container"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 850 800" preserveAspectRatio="xMinYMin meet" style="border:1px solid gray;" > <path fill="none" stroke="black" stroke-width="4" stroke-dashoffset="0" stroke-dasharray="3986" d="M20.4 58.1H198.9L427.9 323 658 58.1H819.8L499.8 404.5 819.8 760.4H646L415.9 492 179.8 760.4H20.4L340.4 410.5Z" class="s0"> <animate id="an_sd" attributeName="stroke-dashoffset" values="3986;0" dur="4s"/> <animate id="an_fill" attributeName="fill" values="white;black" dur="2s" begin="an_sd.end" fill="freeze" /> <animate id="an_rec" attributeName="d" values="M20.4 58.1H198.9L427.9 323 658 58.1H819.8L499.8 404.5 819.8 760.4H646L415.9 492 179.8 760.4H20.4L340.4 410.5Z;M20.4 58.1H198.9L427.9 59.3 658 58.1H819.8L822.2 406.9 819.8 760.4H646L427.9 760.5 179.8 760.4H20.4l0-353.5z" dur="4s" begin="an_fill.end" fill="freeze" /> </path> <text x="100" y="450" fill="crimson";font-family="sans-serif" font-size="192" letter-spacing="0";line-height="1.3"word-spacing="0" fill-opacity="0" >LOREM <animate id="an_opacity" attributeName="fill-opacity" values="0;0.25;0.5;0.75;1" dur="7s" begin="an_rec.end-0.5s" fill="freeze" /> </text> </svg> </div>

Answer 2 · 2018-12-13T13:44:11

How to animate letter stroke

A sequential animation will be used to draw outlines of letters.

To animate the drawing, the technique of changing the stroke-dashoffset from the maximum value to zero will be applied. Accordingly, the outline of the letter will be drawn from zero until the line appears.

# 1 Getting patches of each letter

There is a very simple way to do this.

Open Inkscape Select the text from the menu, set the desired size and write the word LOREM.
In the top menu of the editor, select - contour / contour object
Shpft + Ctrl + C

Save the file
Now each letter has its own personal patch.

 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="850" height="800" viewBox="0 0 850 800" preserveAspectRatio="xMinYMin meet" border="1"> <path d="M20.4 58.1H198.9L427.9 59.3 658 58.1H819.8L822.2 406.9 819.8 760.4H646L427.9 760.5 179.8 760.4H20.4l0-353.5z" class="s0" /> <g aria-label="LOREM" style="fill:none; stroke:white; stroke-width:2; font-family:sans-serif;font-size:192;letter-spacing:0;line-height:1.3;word-spacing:0"> <path id="L" d="M175.4 406.9H87.1V267.3h18.6v123.1h69.8zM296.1 283.3"/> <path id="O" d="m296.1 283.3q8.5 9.4 13 23 4.6 13.6 4.6 30.8 0 17.3-4.7 30.9-4.6 13.6-12.9 22.7-8.6 9.5-20.4 14.3-11.7 4.8-26.8 4.8-14.7 0-26.8-4.9-12-4.9-20.4-14.2-8.4-9.3-13-22.8-4.5-13.5-4.5-30.8 0-17.1 4.5-30.6 4.5-13.6 13.1-23.2 8.3-9.2 20.4-14.1 12.3-4.9 26.7-4.9 15 0 26.9 5 12 4.9 20.3 14zm-1.7 53.8q0-27.2-12.2-41.9-12.2-14.8-33.3-14.8-21.3 0-33.5 14.8-12.1 14.7-12.1 41.9 0 27.5 12.4 42.1 12.4 14.5 33.2 14.5 20.8 0 33.1-14.5 12.4-14.6 12.4-42.1z"/> <path id="R" d="m458.7 406.9h-24.1l-46.7-55.5h-26.2v55.5h-18.6V267.3h39.1q12.7 0 21.1 1.7 8.4 1.6 15.2 5.8 7.6 4.8 11.8 12.1 4.3 7.2 4.3 18.4 0 15.1-7.6 25.3-7.6 10.1-20.9 15.3zm-43.4-100.3q0-6-2.2-10.6-2.1-4.7-6.9-7.9-4-2.7-9.6-3.7-5.5-1.1-13-1.1h-21.8v52.7h18.8q8.8 0 15.4-1.5 6.6-1.6 11.2-5.8 4.2-3.9 6.2-9 2.1-5.2 2.1-13z"/> <path id="E" d="M568.7 406.9H476.7V267.3h92v16.5h-73.4v38.3h73.4v16.5h-73.4v51.8h73.4z"/> <path id="M" d="m722.5 406.9h-18.6V286.6l-38.8 81.8h-11.1L615.5 286.6V406.9H598.2V267.3h25.3l37.2 77.7 36-77.7h25.8z"/> </g> </svg>

We assign each patch its own ID For example, the patch of the letter - L is assigned:
id="L" and in the future assign animation of this letter id="an_L"

Further, to animate the contours of letters, it is necessary to know their length exactly.

To do this, use the JS function - TotalLength()

Below is an example of determining the length of the contour for the letter M

  function TotalLength(){ var path = document.querySelector('#check'); var len = Math.round(path.getTotalLength() ); alert("Длина пути - " + len); };

  <input type="button" value="Total" onclick="TotalLength()"/> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="850" height="800" viewBox="0 0 850 800" > <path id="check" fill= "none" stroke ="grey" stroke-width ="1" d="m722.5 406.9h-18.6V286.6l-38.8 81.8h-11.1L615.5 286.6V406.9H598.2V267.3h25.3l37.2 77.7 36-77.7h25.8z" /> </svg>

Writing animation code

For the letter L, the maximum length of the line is 458px so the animated parameter stroke-dashoffset will vary from maximum to zero. values="458;0" For more information about this technique here

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="850" height="800" viewBox="0 0 850 800" preserveAspectRatio="xMinYMin meet" border="1"> <path d="M20.4 58.1H198.9L427.9 59.3 658 58.1H819.8L822.2 406.9 819.8 760.4H646L427.9 760.5 179.8 760.4H20.4l0-353.5z" class="s0" /> <g aria-label="LOREM" style="fill:none; stroke:white; stroke-width:2; font-family:sans-serif;font-size:192;letter-spacing:0;line-height:1.3;word-spacing:0"> <path id="L" stroke-dashoffset="458" stroke-dasharray="458" d="M175.4 406.9H87.1V267.3h18.6v123.1h69.8zM296.1 283.3"> <animate id="an_L" attributeName="stroke-dashoffset" values="458;0" dur="0.8s" begin="0s;" fill="freeze"/> </path> </svg>

Repeat this code snippet for the remaining letters of the word LOREM
It is clear that for each letter we take our patch and substitute the appropriate lengths.
a chain of consecutive animations looks like commands: start the animation of the letter "O" after the animation of the letter "L" begin="an_L.end"
After drawing the letters, we start the animation of filling the letters.
<animate attributeName="fill" xlink:href="#letter" begin="an_M.end" dur="3s" values="black;red" fill="freeze"/>
Below is the full animation code.

 .container { width:50%; height:50%; }

 <div class="container"> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 850 800" preserveAspectRatio="xMinYMin meet" border="1"> <path d="M20.4 58.1H198.9L427.9 59.3 658 58.1H819.8L822.2 406.9 819.8 760.4H646L427.9 760.5 179.8 760.4H20.4l0-353.5z" class="s0" /> <g aria-label="LOREM" style="fill:none; stroke:white; stroke-width:2; font-family:sans-serif;font-size:192;letter-spacing:0;line-height:1.3;word-spacing:0"> <g id="letter" stroke-width="3"> <path id="L" stroke-dashoffset="458" stroke-dasharray="458" d="M175.4 406.9H87.1V267.3h18.6v123.1h69.8zM296.1 283.3"> <animate id="an_L" attributeName="stroke-dashoffset" values="458;0" dur="0.8s" begin="0s;" fill="freeze"/> </path> <path id="O" stroke-dashoffset="770" stroke-dasharray="770" d="m296.1 283.3q8.5 9.4 13 23 4.6 13.6 4.6 30.8 0 17.3-4.7 30.9-4.6 13.6-12.9 22.7-8.6 9.5-20.4 14.3-11.7 4.8-26.8 4.8-14.7 0-26.8-4.9-12-4.9-20.4-14.2-8.4-9.3-13-22.8-4.5-13.5-4.5-30.8 0-17.1 4.5-30.6 4.5-13.6 13.1-23.2 8.3-9.2 20.4-14.1 12.3-4.9 26.7-4.9 15 0 26.9 5 12 4.9 20.3 14zm-1.7 53.8q0-27.2-12.2-41.9-12.2-14.8-33.3-14.8-21.3 0-33.5 14.8-12.1 14.7-12.1 41.9 0 27.5 12.4 42.1 12.4 14.5 33.2 14.5 20.8 0 33.1-14.5 12.4-14.6 12.4-42.1z"> <animate id="an_O" attributeName="stroke-dashoffset" values="770;0" dur="1s" begin="an_L.end" fill="freeze"/> </path> <path id="R" stroke-dashoffset="774" stroke-dasharray="774" d="m458.7 406.9h-24.1l-46.7-55.5h-26.2v55.5h-18.6V267.3h39.1q12.7 0 21.1 1.7 8.4 1.6 15.2 5.8 7.6 4.8 11.8 12.1 4.3 7.2 4.3 18.4 0 15.1-7.6 25.3-7.6 10.1-20.9 15.3zm-43.4-100.3q0-6-2.2-10.6-2.1-4.7-6.9-7.9-4-2.7-9.6-3.7-5.5-1.1-13-1.1h-21.8v52.7h18.8q8.8 0 15.4-1.5 6.6-1.6 11.2-5.8 4.2-3.9 6.2-9 2.1-5.2 2.1-13z"> <animate id="an_R" attributeName="stroke-dashoffset" values="740;0" dur="1s" begin="an_O.end" fill="freeze"/> </path> <path id="E" stroke-dashoffset="757" stroke-dasharray="757" d="M568.7 406.9H476.7V267.3h92v16.5h-73.4v38.3h73.4v16.5h-73.4v51.8h73.4z"> <animate id="an_E" attributeName="stroke-dashoffset" values="757;0" dur="1s" begin="an_R.end" fill="freeze"/> </path> <path id="M" stroke-dashoffset="971" stroke-dasharray="971" d="m722.5 406.9h-18.6V286.6l-38.8 81.8h-11.1L615.5 286.6V406.9H598.2V267.3h25.3l37.2 77.7 36-77.7h25.8z"> <animate id="an_M" attributeName="stroke-dashoffset" values="971;0" dur="1s" begin="an_E.end" fill="freeze"/> </path> </g> <animate attributeName="fill" xlink:href="#letter" begin="an_M.end" dur="3s" values="black;red" fill="freeze"/> </svg> </div>

Combine two animation examples

Transformation of figures and drawing of contours of letters

Look more interesting in the full window. To view, click "Start"

 .container { width:50%; height:50%; }

 <div class="container"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="850" height="800" viewBox="0 0 850 800" preserveAspectRatio="xMinYMin meet" style="border:1px solid grey;" > <path fill="none" stroke="black" stroke-dashoffset="0" stroke-dasharray="3986" d="M20.4 58.1H198.9L427.9 323 658 58.1H819.8L499.8 404.5 819.8 760.4H646L415.9 492 179.8 760.4H20.4L340.4 410.5Z" class="s0"> <!-- Анимация рисования контура "X" --> <animate id="an_sd" attributeName="stroke-dashoffset" begin="start.click" values="3986;0" dur="4s" restart="whenNotActive"/> <!-- Анимация заполнения цветом "X" --> <animate id="an_fill" attributeName="fill" values="white;black" dur="2s" begin="an_sd.end" fill="freeze" restart="whenNotActive"/> <!-- Анимация из "X" в чёрный квадрат --> <animate id="an_rec" attributeName="d" values="M20.4 58.1H198.9L427.9 323 658 58.1H819.8L499.8 404.5 819.8 760.4H646L415.9 492 179.8 760.4H20.4L340.4 410.5Z;M20.4 58.1H198.9L427.9 59.3 658 58.1H819.8L822.2 406.9 819.8 760.4H646L427.9 760.5 179.8 760.4H20.4l0-353.5z" dur="4s" begin="an_fill.end" fill="freeze" restart="whenNotActive"/> </path> <g aria-label="LOREM" style="fill:none; stroke:white; stroke-width:2; font-family:sans-serif;font-size:192;letter-spacing:0;line-height:1.3;word-spacing:0"> <g id="letter" stroke-width="3"> <path id="L" stroke-dashoffset="458" stroke-dasharray="458" d="M175.4 406.9H87.1V267.3h18.6v123.1h69.8zM296.1 283.3"> <!-- Анимация первой буквы "L" слова "LOREM" --> <animate id="an_L" attributeName="stroke-dashoffset" values="458;0" dur="0.8s" begin="an_rec.end;" fill="freeze" restart="whenNotActive"/> </path> <path id="O" stroke-dashoffset="770" stroke-dasharray="770" d="m296.1 283.3q8.5 9.4 13 23 4.6 13.6 4.6 30.8 0 17.3-4.7 30.9-4.6 13.6-12.9 22.7-8.6 9.5-20.4 14.3-11.7 4.8-26.8 4.8-14.7 0-26.8-4.9-12-4.9-20.4-14.2-8.4-9.3-13-22.8-4.5-13.5-4.5-30.8 0-17.1 4.5-30.6 4.5-13.6 13.1-23.2 8.3-9.2 20.4-14.1 12.3-4.9 26.7-4.9 15 0 26.9 5 12 4.9 20.3 14zm-1.7 53.8q0-27.2-12.2-41.9-12.2-14.8-33.3-14.8-21.3 0-33.5 14.8-12.1 14.7-12.1 41.9 0 27.5 12.4 42.1 12.4 14.5 33.2 14.5 20.8 0 33.1-14.5 12.4-14.6 12.4-42.1z"> <!-- Анимация второй буквы "О" слова "LOREM" --> <animate id="an_O" attributeName="stroke-dashoffset" values="770;0" dur="1s" begin="an_L.end" fill="freeze" restart="whenNotActive"/> </path> <path id="R" stroke-dashoffset="774" stroke-dasharray="774" d="m458.7 406.9h-24.1l-46.7-55.5h-26.2v55.5h-18.6V267.3h39.1q12.7 0 21.1 1.7 8.4 1.6 15.2 5.8 7.6 4.8 11.8 12.1 4.3 7.2 4.3 18.4 0 15.1-7.6 25.3-7.6 10.1-20.9 15.3zm-43.4-100.3q0-6-2.2-10.6-2.1-4.7-6.9-7.9-4-2.7-9.6-3.7-5.5-1.1-13-1.1h-21.8v52.7h18.8q8.8 0 15.4-1.5 6.6-1.6 11.2-5.8 4.2-3.9 6.2-9 2.1-5.2 2.1-13z"> <animate id="an_R" attributeName="stroke-dashoffset" values="740;0" dur="1s" begin="an_O.end" fill="freeze" restart="whenNotActive"/> </path> <path id="E" stroke-dashoffset="757" stroke-dasharray="757" d="M568.7 406.9H476.7V267.3h92v16.5h-73.4v38.3h73.4v16.5h-73.4v51.8h73.4z"> <animate id="an_E" attributeName="stroke-dashoffset" values="757;0" dur="1s" begin="an_R.end" fill="freeze"restart="whenNotActive" /> </path> <path id="M" stroke-dashoffset="971" stroke-dasharray="971" d="m722.5 406.9h-18.6V286.6l-38.8 81.8h-11.1L615.5 286.6V406.9H598.2V267.3h25.3l37.2 77.7 36-77.7h25.8z"> <animate id="an_M" attributeName="stroke-dashoffset" values="971;0" dur="1s" begin="an_E.end" fill="freeze" restart="whenNotActive"/> </path> </g> <!-- Анимация анимация закраски слова "LOREM" --> <animate attributeName="fill" xlink:href="#letter" begin="an_M.end" dur="3s" values="black;red" fill="freeze" restart="whenNotActive"/> </g> <!-- Кнопка запуска анимации --> <g id="start"> <rect x="20" y="10" rx="5" width="80" height="30" fill="transparent" stroke="black"/> <text x="36" y="32" font-size="24">Start</text> </g> </svg> </div>

it is generally cool ... well, there are no two answers to accept?
@UbuntuUser Added an example where everything gathered together

How to make several consecutive svg animations

2 answers 2

How to animate letter stroke

Writing animation code

Combine two animation examples

More articles: