Animation of the image of the WINTER BASH 2020 season - javascript
WINTER BASH 2020 season is coming to an end, and I thought it would be instructive to figure out the CSS and other markup for generating the excellent logo shown here:
In the image below, the numbers indicate the desired objects for animation
Animation script:
Hat generator.
Should move unevenly up and down
The question mark should float in space with a simultaneous change in size.
What does the collection of information about the disclosure of the conditions for obtaining "secret hats" symbolize.
The balloon should wiggle evenly.
The small blue hat should move along the path of the word WINTER
Moon wiggle. Should start after completing point 4 of the scenario
The big blue hat moves forward in search of new hats.
Some time after the start of step 6, hats should begin to fall from above.
Animation of stars, should start after finding all the hats.
I managed to implement the first point of the scenario.
Hat animation starts after clicking on the canvas
.container {
width:100vw;
height:100vh;
}
.s0{
fill:none;
stroke:#000;
}
#hat {
stroke:#000;
fill:#30BAE4;
}
<div class="container" >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2787 768"preserveAspectRatio="xMinYMin meet" style="border:1px solid;">
<image xlink:href="https://i.stack.imgur.com/Qe1A9.jpg" height="100%" width="100%"/>
<g id="hat" transform="translate(-1320,-180)" >
<path d="m1299.3 183.9 46.5-16.7 2.7 6-46.7 16.7zM1308.9 180.6l-10.2-29.1 28.5-9.9 10.4 28.8" />
<path d="m1308.9 180.6-10.2-29.1 28.5-9.9 10.4 28.8z" />
</g>
<g id="winterHat" stroke="#971B59" stroke-width="2" >
<path fill="#2FBAE5" d="M938.7 261.2H1063.9V631.7H938.7Z" />
<path d="M957.4 261.2V631.7" />
<path d="M976.1 261.2V631.7" />
<path d="M993.2 261.2V631.7" />
<path d="M1009.4 261.2V631.7" />
<path d="M1025.5 261.2V631.7" />
<path d="M1045.1 261.2V631.7" />
<path d="M1063.9 261.2V631.7" />
<path id="brimHat" fill="#FCB660" d="M938.7 194.3 927.9 194.1c0 0-13.2 0.4-18.7 3.5-3.8 2.2-7.1 5.8-8.7 9.9-1.8 4.4-1 9.4-0.6 14.2 0.4 4.7 1.2 9.5 3 13.9 1.9 4.5 4.8 8.6 7.8 12.3 4 4.9 8.3 9.7 13.6 13.3 6.4 4.3 13.8 6.9 21.1 9.3 6.9 2.3 14.2 3.7 21.4 4.8 6.1 1 12.2 1.2 18.4 1.8 5.9 0.5 11.8 1.4 17.8 1.5 4.9 0.1 9.9-0.2 14.8-0.6 5.6-0.5 11.3-1.1 16.9-2.1 6.7-1.2 13.3-2.6 19.9-4.5 8.3-2.4 16.9-4.3 24.4-8.6 6.4-3.6 12.1-8.5 16.9-14 4.5-5.3 8.4-11.3 10.8-17.8 2-5.4 4-11.5 2.7-17.2-1.3-5.8-5.1-11.3-9.9-14.8-3.6-2.5-12.6-3.3-12.6-3.3l-12.9-0.6z" />
<path id="brimHat2" fill="#971B59" d="m924.2 194.3c0 0-5.5 6.6-6.6 10.5-0.9 3.3-0.6 6.9 0 10.2 0.8 4.3 2.3 8.6 4.5 12.3 2.2 3.8 5.3 6.9 8.4 9.9 4 3.9 8.4 7.5 13.3 10.2 6.3 3.5 13.2 5.7 20.2 7.5 7 1.9 14.2 2.9 21.4 3.6 5.1 0.6 10.2 0.7 15.4 0.8 5.7 0 11.5-0.4 17.2-0.8 6.5-0.4 13.1-0.7 19.6-1.8 6.3-1.1 12.7-2.3 18.7-4.8 6.5-2.7 12.8-6.2 18.1-10.8 6-5.4 11.9-11.7 14.8-19.3 2.1-5.8 2.9-12.5 1.1-18.4-1.1-3.6-7.1-8.7-7.1-8.7z" />
<path id="topHat" fill="#FCB660" d="m938.7 217.8c0 0-1.2-24.8-1.9-37.1-1.2-21.7-2.3-42.8-3.9-65-0.3-4-2.2-10.5 5.8-10.5 40 0 84.2-2.1 125.6 0.5 4.1 0.3 10.9-0.5 11.8 3.4 0.7 3-0.4 7.8-0.4 7.8l-4.2 53.6-2.9 47.1z" />
<path id="bottomHat" fill="#FEFBFE" d="m938.7 221.1 129.4 0.1-0.5 16.7c0 0-38.7 5.5-58.2 5.7-22.6 0.2-67.7-5.4-67.7-5.4z" />
</g>
<path id="cloud" stroke="#971B59" stroke-width="2" fill="#FFFCFF" d="m843.3 766.3c-14.1-0.4-27.4-11.9-34.9-23.8-7-11.2-10.2-26.7-6-39.2 3.7-10.8 24.7-23.8 24.7-23.8 0 0 15.3-5.2 23-4.3 9.9 1.2 17.8 5.5 27.3 12.1 5.2 3.6 15.5 1.3 17-2.7 4.6-12.1 6.8-23 12.7-33.4 5.7-10 12.2-20.5 21.7-27.1 10.1-7 23-8.8 34.9-11.4 7.1-1.5 14.4-2.6 21.7-2.4 8.1 0.3 16.4 1.4 24 4.2 7 2.6 11.9 9.8 19.2 11.3 5.5 1.1 16.6-2.2 16.6-2.2 0 0 6-19.3 11.3-27.7 9.9-15.6 21.8-30.9 37.3-41 15.6-10.1 34.4-16.2 53-17.5 14.7-1 29.7 2.5 43.4 7.8 15.7 6.1 30.9 15.1 42.8 27.1 6.2 6.2 9 14.1 13.9 22.3 1.9 3.2 6.9-0.6 10.2 0 3.9 0.7 7.5 5.8 11.1 4.2 9.9-4.4 17.8-9.1 27.4-11.4 8.4-2.1 17.2-3 25.9-2.4 11.5 0.8 23.2 3.2 33.7 7.8 10.9 4.9 21.4 11.6 29.5 20.5 9.3 10.2 16.1 23 20.5 36.1 2.4 7.1 2.4 14.9 2.8 22.4 0.4 6.5-2.5 13.6 0 19.6 0.9 2.2 3.3 3.6 5.1 5.1 2.7 2.2 5.8 8.1 8.5 6 6.4-5.2 13.6-8.3 21.3-9.4 7.7-1 16.7-1.2 23 3.4 9.9 7.3 15.6 20.9 16.2 33.2 0.4 8.8-3.4 18.2-9.4 24.7-4.9 5.3-19.6 9.4-19.6 9.4 0 0-408 8.1-609.9 2.6z" />
<!-- Hat animation on blue rectangles -->
<animateTransform id="an_BigHat" xlink:href="#winterHat" attributeName="transform" type="translate" begin="svg1.click;an_BigHat.end+3s" dur="4s" values="0,0;0,250;0,0;0,300;0,250;0,400;0,100;0,500;0,0" repeatCount="1" />
</svg>
</div>
When implementing the moon wobble animation, I was unable to achieve the desired moon wobble trajectory.
.container {
width:100vw;
height:100vh;
}
.s0{
fill:none;
stroke:#000;
}
#hat {
stroke:#000;
fill:#30BAE4;
}
<div class="container" >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2787 768"preserveAspectRatio="xMinYMin meet" style="border:1px solid;">
<image xlink:href="https://i.stack.imgur.com/Qe1A9.jpg" height="100%" width="100%"/>
<g id="hat" transform="translate(-1320,-180)" >
<path d="m1299.3 183.9 46.5-16.7 2.7 6-46.7 16.7zM1308.9 180.6l-10.2-29.1 28.5-9.9 10.4 28.8" />
<path d="m1308.9 180.6-10.2-29.1 28.5-9.9 10.4 28.8z" />
</g>
<g id="winterHat" stroke="#971B59" stroke-width="2" >
<path fill="#2FBAE5" d="M938.7 261.2H1063.9V631.7H938.7Z" />
<path d="M957.4 261.2V631.7" />
<path d="M976.1 261.2V631.7" />
<path d="M993.2 261.2V631.7" />
<path d="M1009.4 261.2V631.7" />
<path d="M1025.5 261.2V631.7" />
<path d="M1045.1 261.2V631.7" />
<path d="M1063.9 261.2V631.7" />
<path id="brimHat" fill="#FCB660" d="M938.7 194.3 927.9 194.1c0 0-13.2 0.4-18.7 3.5-3.8 2.2-7.1 5.8-8.7 9.9-1.8 4.4-1 9.4-0.6 14.2 0.4 4.7 1.2 9.5 3 13.9 1.9 4.5 4.8 8.6 7.8 12.3 4 4.9 8.3 9.7 13.6 13.3 6.4 4.3 13.8 6.9 21.1 9.3 6.9 2.3 14.2 3.7 21.4 4.8 6.1 1 12.2 1.2 18.4 1.8 5.9 0.5 11.8 1.4 17.8 1.5 4.9 0.1 9.9-0.2 14.8-0.6 5.6-0.5 11.3-1.1 16.9-2.1 6.7-1.2 13.3-2.6 19.9-4.5 8.3-2.4 16.9-4.3 24.4-8.6 6.4-3.6 12.1-8.5 16.9-14 4.5-5.3 8.4-11.3 10.8-17.8 2-5.4 4-11.5 2.7-17.2-1.3-5.8-5.1-11.3-9.9-14.8-3.6-2.5-12.6-3.3-12.6-3.3l-12.9-0.6z" />
<path id="brimHat2" fill="#971B59" d="m924.2 194.3c0 0-5.5 6.6-6.6 10.5-0.9 3.3-0.6 6.9 0 10.2 0.8 4.3 2.3 8.6 4.5 12.3 2.2 3.8 5.3 6.9 8.4 9.9 4 3.9 8.4 7.5 13.3 10.2 6.3 3.5 13.2 5.7 20.2 7.5 7 1.9 14.2 2.9 21.4 3.6 5.1 0.6 10.2 0.7 15.4 0.8 5.7 0 11.5-0.4 17.2-0.8 6.5-0.4 13.1-0.7 19.6-1.8 6.3-1.1 12.7-2.3 18.7-4.8 6.5-2.7 12.8-6.2 18.1-10.8 6-5.4 11.9-11.7 14.8-19.3 2.1-5.8 2.9-12.5 1.1-18.4-1.1-3.6-7.1-8.7-7.1-8.7z" />
<path id="topHat" fill="#FCB660" d="m938.7 217.8c0 0-1.2-24.8-1.9-37.1-1.2-21.7-2.3-42.8-3.9-65-0.3-4-2.2-10.5 5.8-10.5 40 0 84.2-2.1 125.6 0.5 4.1 0.3 10.9-0.5 11.8 3.4 0.7 3-0.4 7.8-0.4 7.8l-4.2 53.6-2.9 47.1z" />
<path id="bottomHat" fill="#FEFBFE" d="m938.7 221.1 129.4 0.1-0.5 16.7c0 0-38.7 5.5-58.2 5.7-22.6 0.2-67.7-5.4-67.7-5.4z" />
</g>
<path id="cloud" stroke="#971B59" stroke-width="2" fill="#FFFCFF" d="m843.3 766.3c-14.1-0.4-27.4-11.9-34.9-23.8-7-11.2-10.2-26.7-6-39.2 3.7-10.8 24.7-23.8 24.7-23.8 0 0 15.3-5.2 23-4.3 9.9 1.2 17.8 5.5 27.3 12.1 5.2 3.6 15.5 1.3 17-2.7 4.6-12.1 6.8-23 12.7-33.4 5.7-10 12.2-20.5 21.7-27.1 10.1-7 23-8.8 34.9-11.4 7.1-1.5 14.4-2.6 21.7-2.4 8.1 0.3 16.4 1.4 24 4.2 7 2.6 11.9 9.8 19.2 11.3 5.5 1.1 16.6-2.2 16.6-2.2 0 0 6-19.3 11.3-27.7 9.9-15.6 21.8-30.9 37.3-41 15.6-10.1 34.4-16.2 53-17.5 14.7-1 29.7 2.5 43.4 7.8 15.7 6.1 30.9 15.1 42.8 27.1 6.2 6.2 9 14.1 13.9 22.3 1.9 3.2 6.9-0.6 10.2 0 3.9 0.7 7.5 5.8 11.1 4.2 9.9-4.4 17.8-9.1 27.4-11.4 8.4-2.1 17.2-3 25.9-2.4 11.5 0.8 23.2 3.2 33.7 7.8 10.9 4.9 21.4 11.6 29.5 20.5 9.3 10.2 16.1 23 20.5 36.1 2.4 7.1 2.4 14.9 2.8 22.4 0.4 6.5-2.5 13.6 0 19.6 0.9 2.2 3.3 3.6 5.1 5.1 2.7 2.2 5.8 8.1 8.5 6 6.4-5.2 13.6-8.3 21.3-9.4 7.7-1 16.7-1.2 23 3.4 9.9 7.3 15.6 20.9 16.2 33.2 0.4 8.8-3.4 18.2-9.4 24.7-4.9 5.3-19.6 9.4-19.6 9.4 0 0-408 8.1-609.9 2.6z" />
<!-- Hat animation on blue rectangles -->
<animateTransform id="an_BigHat" xlink:href="#winterHat" attributeName="transform" type="translate" begin="svg1.click;an_BigHat.end+3s" dur="4s" values="0,0;0,250;0,0;0,300;0,250;0,400;0,100;0,500;0,0" repeatCount="1" />
<!-- Moon -->
<g id="moon" stroke="#971B59" stroke-width="2" transform="rotate(30,1750,10.4)">
<path fill="#8BECBD" d="m1729 45 28-35 36 31-28 33zM1717 37l58 48-5 8-57-49M1717 37l58 48-5 8-57-49" />
<path fill="#8BECBD" d="m1717 37 58 48-5 8-57-49z" />
<path fill="#FFFBFF" d="m1724 54c0 0-11 15-15 23-4 9-7 19-8 30-1 10 0 21 3 31 2 9 6 18 11 25 5 7 10 13 17 18 8 6 16 11 25 15 11 4 23 6 34 5 9 0 19-3 27-6 5-2 11-4 15-7 6-4 11-8 16-13 2-2 5-7 5-7l-15 3-17 0-20-5-14-7-14-13-10-15-3-6c0 0 3-1 4-1 1-1 2-2 3-3 1-2 1-4 0-6 0-1-2-1-2-2-1-1-3-2-4-4-1-1-2-2-3-4-1-2-2-4-3-6 0-4 2-13 2-13z" />
<path d="m1746 128c0 0 6 6 9 7 4 1 12 0 12 0" />
<path d="m1745 96c2 0 4 1 4 2 1 1 1 3 0 4-1 1-2 2-3 2-1 0-3-1-4-2-1-1-1-2 0-4 1-1 2-2 3-2z" />
<!-- Moon animation an_hat.end-->
<animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="svg1.click" dur="6s" values="30,1450,10.4;
10,1450,10.4;
20,1450,10.4;
-30,1450,10.4;
0,1450,10.4;
30,1450,10.4"
keyTimes="0;0.15;0.25;0.45;0.85;1"
repeatCount="indefinite"
/>
</g>
</svg>
</div>
I hope that this question will leave all readers with warm memories of the 2020 holiday season. Also, I hope that this question and answer will be helpful to others in the future.
LIVE DEMO
The code turned out to be quite large, to place it in a snippet with a limit of 30,000 characters, I had to optimize it quite a lot and get rid of some embellishments.
Comments remained on the main points of the program, I hope they will help you understand, if there is a need, I will make an additional answer with detailed explanations of the animation elements.
The animation will start after clicking the Start button
The music track sounds: Candy Dulfer / Dave Stewart - Lily Was Here
.container {
width:100vw;
height:100vh;
}
.s0{
fill:none;
stroke:#000;
}
#hat {
stroke:#000;
fill:#30BAE4;
}
#Stroke_bottom {
fill:#8DEBB5;
stroke:#971B59;
stroke-width:4;
stroke-dashoffset:350;
stroke-dasharray:350;
fill-opacity:0;
filter:url(#dropShadow);
}
#q {
fill:#8DEBB5;
stroke:#971B59;
stroke-width:4;
stroke-dashoffset:1366;
stroke-dasharray:1366;
fill-opacity:0;
filter:url(#dropShadow);
}
#cloud {
fill:#FFFCFF;
stroke:#971B59;
stroke-width:6;
stroke-dashoffset:1649;
stroke-dasharray:1649;
filter:url(#dropShadow);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<!-- Trail running along the word "Winter" of the little blue hat -->
<path id="trace" stroke="none" d="m1115 163 46 98 25-52 26 53 46-97 25 1v97h33l1-97 81 99v-99l57 1 1 98 3-1-1-98h37 22v98l61 1 1-3-58-2v-46l55 1v-5h-54v-41l79-4v99h4l-1-40 27-1 22 41 4-1-21-40c0 0 10-4 14-8 4-3 7-7 9-12 2-6 3-13 1-19-2-6-6-10-11-14-4-3-9-4-14-5-10-2-31-1-31-1" />
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
<filter id="shadow" x="-10%" y="-10%" width="200%" height="200%">
<feOffset result="offsetResult" in="SourceAlpha" dx="2" dy="2" />
<feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="4" />
<feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
</filter>
<mask id="msk" >
<!-- Stars in the background -->
<rect width="100%" height="100%" fill="white" />
<path d="m280 446c0 0-1 7-3 11-1 3-3 6-6 8-3 2-6 3-9 4-2 1-6 3-6 3 0 0 4 1 6 2 3 1 5 1 8 3 2 2 4 4 6 6 1 2 2 5 3 7 1 2 2 7 2 7 0 0 1-5 2-8 1-3 2-6 4-8 2-2 5-4 7-5 4-2 14-4 14-4 0 0-5-1-8-2-3-1-5-2-8-4-3-2-5-5-6-8-2-4-2-5-4-12zM166 315" />
<path d="m166 315c0 0-1 5-3 8-1 2-2 5-4 6-3 2-10 4-10 4 0 0 5 1 8 3 2 1 4 2 5 4 1 2 3 3 3 5 1 2 1 5 1 5 0 0 1-5 2-7 1-2 2-3 3-4 1-1 3-2 5-3 2-1 7-2 7-2 0 0-3-1-5-2-2-1-4-1-6-3-2-2-3-4-4-6-1-2-3-7-3-7z" />
<path d="m1715 288c-2 5-3 9-5 12-2 4-5 7-8 10-3 2-7 3-11 4-3 1-8 2-8 2 0 0 6 1 9 2 4 1 8 2 11 5 3 2 6 6 8 9 3 5 5 15 5 15 0 0 2-11 5-15 2-3 5-6 8-8 3-2 7-3 11-5 2-1 7-2 7-2 0 0-5-2-8-3-3-1-6-1-9-3-3-2-6-5-8-8-3-4-3-9-6-14z" />
<path d="m1557 61c0 0-1 4-2 6-1 2-2 3-3 4-2 2-4 2-6 3-1 1-4 1-4 1 0 0 4 2 6 3 2 1 3 2 5 4 1 2 2 3 3 5 1 1 2 4 2 4 0 0 1-4 2-5 1-2 2-3 4-5 2-1 4-2 5-3 1-1 4-2 4-2 0 0-3-1-5-2-2-1-4-2-5-4-1-1-2-3-3-5-1-1-2-4-2-4z" />
<path d="m2380 375c0 0-2 7-3 10-1 4-3 7-5 10-2 3-6 4-9 6-3 2-10 3-10 3 0 0 6 2 9 3 4 2 8 3 11 6 3 3 4 8 6 12 1 3 2 8 2 8 0 0 2-6 3-9 1-3 3-7 5-10 2-3 5-5 9-6 4-2 12-4 12-4 0 0-6-2-8-3-2-1-5-2-7-3-2-1-4-3-6-6-2-2-2-5-3-7-1-3-4-10-4-10z" />
<path d="m2473 233c0 0-1 4-3 6-1 2-2 3-4 5-2 2-3 3-5 4-1 1-4 1-4 1 0 0 4 2 6 3 2 1 4 2 5 4 1 2 2 4 3 6 1 2 2 5 2 5 0 0 1-4 2-6 1-2 2-4 3-5 1-1 3-2 4-3 2-1 7-3 7-3 0 0-5-2-8-3-2-1-3-2-4-4-1-1-1-3-2-5 0-1-1-3-1-3z" />
<path d="m2269 59c0 0-2 1-3 2-2 1-3 3-5 4-2 1-5 1-7 1-2 0-6 0-6 0 0 0 3 3 5 5 1 2 2 3 2 5 1 3 0 5 0 8 0 1 0 3 0 3 0 0 4-3 6-5 1-1 3-2 4-2 2 0 4 0 6 0 2 0 6 1 6 1 0 0-3-3-4-4-1-2-3-3-4-6-1-2 0-4 0-6 0-2 1-5 1-5z" />
<path d="m1477 596c0 0-1 3-2 5-1 2-2 4-3 5-2 2-5 3-8 5-1 1-4 1-4 1 0 0 4 1 5 1 2 1 4 2 6 3 2 2 3 4 4 7 1 2 2 5 2 5 0 0 1-4 2-6 1-2 2-3 4-5 1-1 3-2 5-3 2-1 5-2 5-2 0 0-3-2-5-3-2-1-3-2-5-3-2-2-3-4-4-6-1-1-2-4-2-4z" />
<path d="m830 136c0 0-1 8-2 11-1 2-2 4-4 5-1 1-3 2-4 3-2 1-6 2-6 2 0 0 4 2 6 3 2 1 4 2 5 4 1 1 2 3 3 5 1 2 2 6 2 6 0 0 1-5 2-7 1-1 2-3 3-4 2-1 4-2 5-3 2-1 6-3 6-3 0 0-4-1-6-2-2-1-3-2-4-3-1-1-2-3-3-4-1-3-2-11-2-11" />
</mask>
<radialGradient id="grad_bl" cx="20%" cy="20%" r="30%" fx="30%" fy="30%">
<stop stop-color="white" offset="20%"/>
<stop stop-color="#31BCE5" offset="90%"/>
</radialGradient>
</defs>
<!-- Bottom background -->
<rect width="100%" height="100%" fill="yellow" >
<!-- Animation of stars twinkling through the mask -->
<animate id="back" attributeName="fill" begin="btn1.click+80s;back.end+5s" dur="1s" values="red;yellow;cyan" fill="freeze" repeatcount="10" />
</rect>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" mask="url(#msk)" height="100%" width="100%"/>
<!-- Moon -->
<g id="moon" stroke="#971B59" stroke-width="2" filter="url(#shadow)" transform="rotate(30,1750,10.4)">
<path fill="#8BECBD" d="m1729 45 28-35 36 31-28 33zM1717 37l58 48-5 8-57-49M1717 37l58 48-5 8-57-49" />
<path fill="#8BECBD" d="m1717 37 58 48-5 8-57-49z" />
<path fill="#FFFBFF" d="m1724 54c0 0-11 15-15 23-4 9-7 19-8 30-1 10 0 21 3 31 2 9 6 18 11 25 5 7 10 13 17 18 8 6 16 11 25 15 11 4 23 6 34 5 9 0 19-3 27-6 5-2 11-4 15-7 6-4 11-8 16-13 2-2 5-7 5-7l-15 3-17 0-20-5-14-7-14-13-10-15-3-6c0 0 3-1 4-1 1-1 2-2 3-3 1-2 1-4 0-6 0-1-2-1-2-2-1-1-3-2-4-4-1-1-2-2-3-4-1-2-2-4-3-6 0-4 2-13 2-13z" />
<path d="m1746 128c0 0 6 6 9 7 4 1 12 0 12 0" />
<path d="m1745 96c2 0 4 1 4 2 1 1 1 3 0 4-1 1-2 2-3 2-1 0-3-1-4-2-1-1-1-2 0-4 1-1 2-2 3-2z" />
<!-- Moon animation an_hat.end-->
<animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="an_hat.end" dur="6s" values="30,1750,10.4;
10,1750,10.4;
20,1750,10.4;
-30,1750,10.4;
0,1750,10.4;
30,1750,10.4"
keyTimes="0;0.15;0.25;0.45;0.85;1"
repeatCount="indefinite"
/>
</g>
<!-- Hat on the far right with a spring -->
<g stroke="#971B59" stroke-width="2" filter="url(#shadow)" >
<path fill="#971B59" d="m2648 190c0 0 35 19 52 30 22 14 63 45 63 45l-37 61-22 36-49-35-34-20-34-19zM2588 287l68 40 49 36-13 20-115-74" />
<path fill="#FFFBFF" d="m2588 287 68 40 49 36-13 20-115-74z" />
<path fill="#31BCE5" d="m2537 290c1-1 3-1 4 0 8 4 15 7 22 11 9 5 18 11 27 16 15 9 29 18 44 27 20 13 39 26 58 39 5 4 11 7 16 11 5 3 9 6 14 10 1 1 4 2 4 4 0 3-1 7-4 7-2 1-3-1-4-2-5-3-10-8-15-12-12-9-25-17-37-26-15-10-46-27-46-29 0-1-27-18-41-27-9-5-18-10-27-16-4-2-8-4-11-6-2-1-4-2-4-5 0-2 2-3 3-4z"/>
<path fill="#911A5B" d="m2533 294-2 4 12 11 18 13 26 18 20 14 21 13 19 12 27 17 17 9 10 6 10 5 8-1-9-6-10-8-15-11-13-9-32-21-27-15-33-22-9-5-15-8-14-8z" />
<!-- Hat animation on the far right -->
<animateTransform id="Hat_right" attributeName="transform" type="translate" begin="btn1.click;Hat_right.end+2s" dur="1.0s" values="0,0;-60,180;0,0" repeatCount="2" keyTimes="0;0.7;1" />
</g>
<!-- Question mark -->
<path id="q" d="m560 343c-5-16-3-35 2-51 4-16 14-30 24-42 10-12 23-22 37-30 14-8 30-13 45-16 17-3 35-4 53-2 19 2 38 5 55 12 18 8 35 18 48 33 15 17 27 37 32 58 6 27 4 55-4 81-6 18-18 33-30 48-10 12-25 21-36 32-11 11-25 21-33 35-4 7-6 16-8 24-2 9 0 20-5 28-5 9-13 17-23 21-10 4-22 4-32 1-9-3-17-9-23-17-5-8-7-18-8-28-1-14 0-29 4-43 3-11 8-21 14-30 6-9 14-16 21-23 10-10 22-19 32-28 10-9 23-17 30-29 5-7 8-15 9-23 2-10 2-20-2-29-3-9-9-19-17-25-9-7-21-10-32-11-11-1-22 1-32 5-8 4-17 9-22 16-5 6-5 15-7 22-2 7-4 15-8 22-4 6-8 13-15 16-8 4-19 4-28 4-8-1-17-2-24-7-7-5-12-12-14-20z" >
<animate id="q_Stroke" attributeName="stroke-dashoffset" begin="btn1.click;q_scale.end+4s" dur="4s" values="1366;0" fill="freeze" />
<animate id="q_Fill" attributeName="fill-opacity" begin="q_Stroke.end" dur="4s" values="0;0.5;1" fill="freeze" />
<animateTransform id="q_move" attributeName="transform" type="translate" begin="q_Fill.end" dur="8s" values="0 0;0 -100;-200 -100;0 0" repeatCount="1" additive="sum" />
<animateTransform id="q_scale" attributeName="transform" type="scale" begin="q_Fill.end" dur="8s" values="1,;0.75;0.75;1;1" repeatCount="1" additive="sum" />
</path>
<!-- Question mark tail -->
<path fill="#8DEBB5" stroke="#971B59" stroke-width="2" d="m696 575c-3 1-5 3-7 5-1 1-2 2-2 3 0 1 1 3 2 4 1 1 3 0 4 0 1 0 1 0 2 0 1 1 1 2 1 3 1 1 2 1 3 0 1 0 1-1 2-2 0 0 0-1 1-1 1 0 2 2 3 2 1 0 3-1 4-2 1-1 0-3 0-4-1-2-2-3-4-4-1-1-2-2-3-2-1-1-3-1-4-1z" />
<!-- Bottom question ball -->
<path id="Stroke_bottom" d="m691 709c0 2-3 3-4 4-1 1-2 2-3 4-1 1-1 2-1 4 0 1 1 3 2 4 1 1 3-2 4-1 1 0 1 2 2 3 1 0 2 0 3 0 1-1 1-2 2-3 1 0 3 2 4 1 1 0 2-2 2-3 0-2-2-3-3-5-1-1-2-2-3-3-1-1-3-1-3-2 0-4 6-6 9-9 3-3 6-6 9-9 4-5 9-9 13-14 3-4 6-8 8-13 2-5 4-11 3-16 0-6-2-11-4-17-2-5-4-9-8-13-4-4-9-7-14-10-4-2-9-3-14-4-3 0-7 0-10 0-5 1-10 2-14 3-4 2-9 5-12 8-5 5-9 10-11 17-2 7-3 14-2 21 1 5 3 9 5 13 2 4 5 8 8 12 3 4 6 7 9 11 3 4 7 7 10 10 2 2 4 3 6 5 2 2 5 2 5 5z" >
<animate id="an_Stroke_bottom" attributeName="stroke-dashoffset" begin="btn1.click+1s;q_scale.end+4s" dur="4s" values="350;0" fill="freeze" />
<animate id="q_Fill" attributeName="fill-opacity" begin="q_Stroke.end" dur="4s" values="0;0.5;1" fill="freeze" />
<animateTransform id="Stroke_bottom_move" attributeName="transform" type="translate" begin="q_Fill.end" dur="8s" values="0 0;0 -100;-200 -100;0 0" repeatCount="1" additive="sum" />
<animateTransform id="Stroke_bottom_scale" attributeName="transform" type="scale" begin="q_Fill.end" dur="8s" values="1,;0.75;0.75;1;1" repeatCount="1" additive="sum" />
</path>
<!-- Blue balloon -->
<g id="AirBall" transform="rotate(-15 536 395.8)">
<path fill="url(#grad_bl)" stroke="#2A9EC1" stroke-width="4" filter="url(#dropShadow)" d="m360 167c11-8 24-13 37-13 13 0 27 4 38 11 13 8 24 20 30 34 8 16 7 34 9 52 1 13 2 27 1 40 0 6 2 13-2 16-3 3-8 1-13 1-8 0-17-1-25-3-11-2-22-4-33-8-11-3-23-6-32-12-9-5-17-13-23-21-6-9-12-20-13-31-2-12-1-25 4-36 5-11 13-22 24-29z" />
<!-- Ball tail -->
<path fill="#FFFBFF" stroke="#971B59" stroke-width="4" d="m474 305c2-1 4 0 6 0 2 0 5 0 7 2 1 1 1 3 1 4 0 1 0 3-1 3-1 1-4-1-4 1-1 1 1 3 0 4 0 1-1 3-2 3-2 1-3-3-5-2-1 1 0 3-1 4-1 1-2 2-3 2-2 0-4-2-4-4-1-2 0-5 0-8 0-1 0-3 1-4 1-2 4-3 6-4z" />
<!-- Ball rope -->
<path fill="none" stroke="#971B59" stroke-width="4" d="m 536.08463,395.61831 c 0,0 -12.58625,-24.39313 -19.91851,-35.97377 -4.23232,-6.68457 -8.89916,-13.10432 -13.85276,-19.27342 -3.20473,-3.9911 -6.65792,-7.7864 -10.239,-11.44359 -2.88203,-2.94329 -9.03442,-8.43212 -9.03442,-8.43212" />
<!-- Balloon animation -->
<animateTransform id="an_AirBall" attributeName="transform" type="rotate" begin="an_hat.end;an_AirBall.end+12s" dur="5s"
values="-15 536 395.8;40 536 395.8;60 536 395.8;-15 536 395.8" fill="freeze" repeatCount="5" />
</g>
<g id="hat" transform="translate(-1320,-180)" filter="url(#shadow)" >
<path d="m1299 184 47-17 3 6-47 17zM1309 181l-10-29 29-10 10 29M1309 181l-10-29 29-10 10 29" />
<path d="m1309 181-10-29 29-10 10 29z" />
</g>
<!-- Hat animation along "the winter" path -->
<animateMotion id="an_hat" xlink:href="#hat" begin="an_BigHat.end+0.5s" dur="5s" fill="freeze" repeatCount="1" >
<mpath xlink:href="#trace" />
</animateMotion>
<!-- Hat on blue rectangles -->
<g id="winterHat" stroke="#971B59" stroke-width="2" >
<path fill="#2FBAE5" d="M938.7 261.2H1063.9V631.7H938.7Z" />
<path d="M957.4 261.2V631.7" />
<path d="M976.1 261.2V631.7" />
<path d="M993.2 261.2V631.7" />
<path d="M1009.4 261.2V631.7" />
<path d="M1025.5 261.2V631.7" />
<path d="M1045.1 261.2V631.7" />
<path d="M1063.9 261.2V631.7" />
<path id="brimHat" fill="#FCB660" d="M939 194 928 194c0 0-13 0-19 4-4 2-7 6-9 10-2 4-1 9-1 14 0 5 1 10 3 14 2 5 5 9 8 12 4 5 8 10 14 13 6 4 14 7 21 9 7 2 14 4 21 5 6 1 12 1 18 2 6 1 12 1 18 2 5 0 10 0 15-1 6 0 11-1 17-2 7-1 13-3 20-4 8-2 17-4 24-9 6-4 12-8 17-14 5-5 8-11 11-18 2-5 4-11 3-17-1-6-5-11-10-15-4-2-13-3-13-3l-13-1z" />
<path id="brimHat2" fill="#971B59" d="m924 194c0 0-5 7-7 11-1 3-1 7 0 10 1 4 2 9 5 12 2 4 5 7 8 10 4 4 8 8 13 10 6 4 13 6 20 8 7 2 14 3 21 4 5 1 10 1 15 1 6 0 12 0 17-1 7 0 13-1 20-2 6-1 13-2 19-5 7-3 13-6 18-11 6-5 12-12 15-19 2-6 3-12 1-18-1-4-7-9-7-9z" />
<path id="topHat" fill="#FCB660" d="m939 218c0 0-1-25-2-37-1-22-2-43-4-65 0-4-2-10 6-10 40 0 84-2 126 1 4 0 11 0 12 3 1 3 0 8 0 8l-4 54-3 47z" />
<path id="bottomHat" fill="#FEFBFE" d="m939 221 129 0 0 17c0 0-39 6-58 6-23 0-68-5-68-5z" />
<!-- Hat animation on blue rectangles -->
<animateTransform id="an_BigHat" attributeName="transform" type="translate" begin="btn1.click" dur="5s" values="0,0;0,250;0,0;0,250;0,0;0,400;0,100;0,500;0,0" repeatCount="1" />
</g>
<path id="cloud" transform="translate(0 -4)" d="m843 766c-14 0-27-12-35-24-7-11-10-27-6-39 4-11 25-24 25-24 0 0 15-5 23-4 10 1 18 6 27 12 5 4 16 1 17-3 5-12 7-23 13-33 6-10 12-20 22-27 10-7 23-9 35-11 7-1 14-3 22-2 8 0 16 1 24 4 7 3 12 10 19 11 6 1 17-2 17-2 0 0 6-19 11-28 10-16 22-31 37-41 16-10 34-16 53-17 15-1 30 3 43 8 16 6 31 15 43 27 6 6 9 14 14 22 2 3 7-1 10 0 4 1 8 6 11 4 10-4 18-9 27-11 8-2 17-3 26-2 12 1 23 3 34 8 11 5 21 12 30 21 9 10 16 23 21 36 2 7 2 15 3 22 0 7-2 14 0 20 1 2 3 4 5 5 3 2 6 8 9 6 6-5 14-8 21-9 8-1 17-1 23 3 10 7 16 21 16 33 0 9-3 18-9 25-5 5-20 9-20 9 0 0-408 8-610 3z" >
<animate id="an_cloud" attributeName="stroke-dashoffset" begin="btn1.click+85s;an_cloud.end+5s" dur="8s" values="1649;0;0;1649" fill="freeze" />
</path>
<g id="Hat+Legs" >
<g id="LegL" stroke="#971B59" stroke-width="2">
<path fill="#FFFBFF" d="m1721 765 5-66 46 0-12 28c0 0-1 8 0 12 1 3 3 6 6 8 2 2 5 3 8 3 2 1 4 0 5 1 2 1 3 3 4 5 0 1 0 3-1 4-1 1-2 3-4 3-19 1-58 0-58 0zM1734 698l1-11" />
<path fill="#8DEBBC" d="m1734 698 1-11v-13l-1-8c0 0-1-20-3-30-1-5-4-16-4-16l33-13 5 10 5 10c0 0 3 10 5 14 1 4 3 7 4 11 0 4-1 11-1 11l-3 13-4 11-4 10z" />
<!-- Big Hat Left Leg Animation-->
<animateTransform id="LeftForward" attributeName="transform" type="rotate" begin="RightBack.end" dur="0.5s"
values="0 1731 607;-28 1731 607;0 1731 607" fill="freeze" />
</g>
<g id="LegR" stroke="#971B59" stroke-width="2" transform="rotate(28 1817 587)">
<path fill="#FEFAFE" d="m1886 682 38 54c0 0 33-18 48-30 1-1 3-2 3-3 1-1 1-3 0-5-1-2-2-3-4-4-2-1-4 0-6 0-2 0-4 2-5 2-2 0-3 0-5 0-3 0-6 0-9-2-3-2-4-7-6-10-5-8-15-25-15-25zM1915 663" />
<path fill="#8DEBBC" d="m1915 663c0 0-8-14-13-21-4-5-8-11-13-16-2-2-5-4-8-6-3-3-6-5-9-8-8-6-15-15-24-19-9-3-22-9-29-2-3 3-1 9 0 14 1 5 5 10 8 15 2 3 5 7 8 10 4 4 9 6 13 9 5 4 8 8 13 12 6 5 12 9 18 15 3 3 8 9 8 9l4 7z" />
<!-- Big Hat Right Leg Animation -->
<animateTransform id="RightBack" attributeName="transform" type="rotate" begin="an_hat.end;LeftForward.end" dur="0.5s"
values="28 1817 587;0 1817 587;28 1817 587" fill="freeze" />
</g>
<g id="Hand" stroke="#971B59" stroke-width="2">
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
<!-- Animation of the horizontal movement of a large hat -->
<animateTransform id="an_Horiz" attributeName="transform" type="translate" begin="an_hat.end+5s;an_Horiz.end+2s" dur="20s"
values="0, 0;600 0;600,-350;0,0" fill="freeze" additive="sum" repeatCount="1" />
<g>
<!-- eyes + mouth of a big hat -->
<path stroke="#725598" stroke-width="4" stroke-linecap="round" fill="none" d="m1831.7 535.5c0 0 10.1 14.4 16.8 9.9 5.9-4 4.4-17.1 4.4-17.1" />
<path stroke="#725598" stroke-width="4" d="m1824.1 509.1c1.1-0.6 2.6 0.1 3.5 0.9 1.7 1.5 2.5 3.9 2.6 6.1 0.1 1.3 0.1 3.1-1.1 3.7-1.2 0.7-3.1-0.3-4-1.3-1.6-1.6-1.9-4.2-1.9-6.4 0-1.1-0.1-2.6 0.9-3.1zM1824.7 510.4" />
<path stroke="#725598" stroke-width="4" d="m1824.7 510.4c0.5-0.3 1.2 0.3 1.7 0.7 0.6 0.4 0.9 1.1 1.2 1.7 0.4 0.8 0.7 1.6 1 2.5 0.1 0.5 0.3 1 0.2 1.5-0.1 0.7 0 1.7-0.6 2-0.7 0.3-1.5-0.4-2-0.9-0.6-0.6-0.8-1.4-1.1-2.2-0.4-1.1-0.6-2.3-0.7-3.5 0-0.6-0.3-1.5 0.2-1.8z" />
<g transform="translate(18.821694,-6.6252361)">
<path stroke="#725598" stroke-width="4" d="m1824.1 509.1c1.1-0.6 2.6 0.1 3.5 0.9 1.7 1.5 2.5 3.9 2.6 6.1 0.1 1.3 0.1 3.1-1.1 3.7-1.2 0.7-3.1-0.3-4-1.3-1.6-1.6-1.9-4.2-1.9-6.4 0-1.1-0.1-2.6 0.9-3.1zM1824.7 510.4" />
<path stroke="#725598" stroke-width="4" d="m1824.7 510.4c0.5-0.3 1.2 0.3 1.7 0.7 0.6 0.4 0.9 1.1 1.2 1.7 0.4 0.8 0.7 1.6 1 2.5 0.1 0.5 0.3 1 0.2 1.5-0.1 0.7 0 1.7-0.6 2-0.7 0.3-1.5-0.4-2-0.9-0.6-0.6-0.8-1.4-1.1-2.2-0.4-1.1-0.6-2.3-0.7-3.5 0-0.6-0.3-1.5 0.2-1.8z" />
<!-- Animation of eyes + mouth up and down -->
</g>
<animateTransform attributeName="transform" type="translate" begin="an_hat.end+5s" dur="1s"
values="0 0;0 -20;-5 -20;0 0" fill="freeze" additive="sum" repeatCount="indefinite" />
</g>
</g>
<!-- Flying hats -->
<g>
<image filter="url(#dropShadow)" id="GimmeSpace" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/4CE3b.png" width="206px" height="218px">
<animateTransform id="an_Gimme" attributeName="transform" type="translate" begin="34s;an_Gimme.end+50s" dur="3s"
values="0 0;-400 800" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Carnaval" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/e2Khg.png" width="206px" height="218px">
<animateTransform attributeName="transform" type="translate" begin="24s;Carnaval.end+5s" dur="3s"
values="0 0;-250 800" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="ThisIsFine" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/SFTT7.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="40s" dur="3s"
values="0 0;50 780" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Samovar" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/E1O31.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="50s" dur="3s"
values="0 0;-800 400;400 200;-100 780" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Balalaika" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/JC5za.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="53s" dur="3s"
values="0 0;-800 400;400 200;-800 680" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Milliner" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/ztauc.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="56s" dur="3s"
values="0 0;-800 400;640 390" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Kitsune" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/q507j.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="60s" dur="3s"
values="0 0;-800 400;640 390;-150 680" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="SocialDistancing" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/d4XGr.png" width="150px" height="150px">
<animateTransform attributeName="transform" type="translate" begin="64s" dur="3s"
values="0 0;-800 400;400 200;-271 285" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Matryoshka" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/4mtVe.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="67s" dur="3s"
values="0 0;-800 400;640 390;-450 570" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="WarmWelcome" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/LE0tq.png" width="150px" height="150px">
<animateTransform attributeName="transform" type="translate" begin="70s" dur="3s"
values="0 0;-800 400;400 200;-1085 700" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Vexillologist" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/vVOzH.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="73s" dur="3s"
values="0 0;-800 400;640 390;-150 470" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="World" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/j2xFc.png" width="150px" height="150px">
<animateTransform attributeName="transform" type="translate" begin="76s" dur="3s"
values="0 0;-800 400;400 200;315 760" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Movin" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/G51nw.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="78s" dur="3s"
values="0 0;-800 400;640 390;420 777" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Bouncer" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/FhnHn.png" width="150px" height="150px">
<animateTransform attributeName="transform" type="translate" begin="80s" dur="3s"
values="0 0;-800 400;400 200;-580 850" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g id="btn1" fill-opacity="1" transform="translate(-700,-200)" filter="url(#dropShadow)" onclick='play()' >
<circle cx="880" cy="255" r="16" fill="#30BBE4" />
<text id="txt1" x="750" y="270" font-size="3rem" fill="white" >Start</text>
<animate attributeName="fill-opacity" begin="btn1.click" dur="1s" values="1;0" fill="freeze" repeatcount="1" />
</g>
</svg>
<script>
var zodiac = new Audio();
zodiac.src = src="https://svg-art.ru/files/Kendi Dalfer–Meeting.mp3";
function play() {
zodiac.play();
}
</script>
Explanation of how animation elements work
#1. Moon wiggle
For a uniform wobble of the moon, you need to find the exact coordinates of the top corner of the green hat in order to substitute them in the rotation animation command.
let bb = moon.getBBox();
console.log( bb.x + bb.width / 2 ); // coordinate X = 1753
console.log(bb.y); // coordinate Y = 10
Add coordinate values to the moon rotation animation command
<animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="svg1.click" dur="6s" values="30,1753,10.4;
10,1753,10;
20,1753,10;
-30,1753,10;
0,1753,10;
30,1753,10"
keyTimes="0;0.15;0.25;0.45;0.85;1"
repeatCount="indefinite"
/>
The attribute keyTimes ="0;0.15;0.25;0.45;0.85;1" sets the uneven rotation speed of the moon.
.container {
width:100vw;
height:100vh;
}
.s0{
fill:none;
stroke:#000;
}
#hat {
stroke:#000;
fill:#30BAE4;
}
<div class="container" >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2787 768"preserveAspectRatio="xMinYMin meet" style="border:1px solid;">
<image xlink:href="https://i.stack.imgur.com/bhgP9.jpg" height="100%" width="100%"/>
<g id="hat" transform="translate(-1320,-180)" >
<path d="m1299.3 183.9 46.5-16.7 2.7 6-46.7 16.7zM1308.9 180.6l-10.2-29.1 28.5-9.9 10.4 28.8" />
<path d="m1308.9 180.6-10.2-29.1 28.5-9.9 10.4 28.8z" />
</g>
<g id="winterHat" stroke="#971B59" stroke-width="2" >
<path fill="#2FBAE5" d="M938.7 261.2H1063.9V631.7H938.7Z" />
<path d="M957.4 261.2V631.7" />
<path d="M976.1 261.2V631.7" />
<path d="M993.2 261.2V631.7" />
<path d="M1009.4 261.2V631.7" />
<path d="M1025.5 261.2V631.7" />
<path d="M1045.1 261.2V631.7" />
<path d="M1063.9 261.2V631.7" />
<path id="brimHat" fill="#FCB660" d="M938.7 194.3 927.9 194.1c0 0-13.2 0.4-18.7 3.5-3.8 2.2-7.1 5.8-8.7 9.9-1.8 4.4-1 9.4-0.6 14.2 0.4 4.7 1.2 9.5 3 13.9 1.9 4.5 4.8 8.6 7.8 12.3 4 4.9 8.3 9.7 13.6 13.3 6.4 4.3 13.8 6.9 21.1 9.3 6.9 2.3 14.2 3.7 21.4 4.8 6.1 1 12.2 1.2 18.4 1.8 5.9 0.5 11.8 1.4 17.8 1.5 4.9 0.1 9.9-0.2 14.8-0.6 5.6-0.5 11.3-1.1 16.9-2.1 6.7-1.2 13.3-2.6 19.9-4.5 8.3-2.4 16.9-4.3 24.4-8.6 6.4-3.6 12.1-8.5 16.9-14 4.5-5.3 8.4-11.3 10.8-17.8 2-5.4 4-11.5 2.7-17.2-1.3-5.8-5.1-11.3-9.9-14.8-3.6-2.5-12.6-3.3-12.6-3.3l-12.9-0.6z" />
<path id="brimHat2" fill="#971B59" d="m924.2 194.3c0 0-5.5 6.6-6.6 10.5-0.9 3.3-0.6 6.9 0 10.2 0.8 4.3 2.3 8.6 4.5 12.3 2.2 3.8 5.3 6.9 8.4 9.9 4 3.9 8.4 7.5 13.3 10.2 6.3 3.5 13.2 5.7 20.2 7.5 7 1.9 14.2 2.9 21.4 3.6 5.1 0.6 10.2 0.7 15.4 0.8 5.7 0 11.5-0.4 17.2-0.8 6.5-0.4 13.1-0.7 19.6-1.8 6.3-1.1 12.7-2.3 18.7-4.8 6.5-2.7 12.8-6.2 18.1-10.8 6-5.4 11.9-11.7 14.8-19.3 2.1-5.8 2.9-12.5 1.1-18.4-1.1-3.6-7.1-8.7-7.1-8.7z" />
<path id="topHat" fill="#FCB660" d="m938.7 217.8c0 0-1.2-24.8-1.9-37.1-1.2-21.7-2.3-42.8-3.9-65-0.3-4-2.2-10.5 5.8-10.5 40 0 84.2-2.1 125.6 0.5 4.1 0.3 10.9-0.5 11.8 3.4 0.7 3-0.4 7.8-0.4 7.8l-4.2 53.6-2.9 47.1z" />
<path id="bottomHat" fill="#FEFBFE" d="m938.7 221.1 129.4 0.1-0.5 16.7c0 0-38.7 5.5-58.2 5.7-22.6 0.2-67.7-5.4-67.7-5.4z" />
</g>
<!-- Анимация шляпы на синих прямоугольниках -->
<animateTransform id="an_BigHat" xlink:href="#winterHat" attributeName="transform" type="translate" begin="svg1.click;an_BigHat.end+3s" dur="4s" values="0,0;0,250;0,0;0,300;0,250;0,400;0,100;0,500;0,0" repeatCount="1" />
<!-- Луна -->
<g stroke="#971B59" stroke-width="2" transform="rotate(30,1753,10.4)">
<path id="moon" fill="#8BECBD" d="m1729 45 28-35 36 31-28 33zM1717 37l58 48-5 8-57-49M1717 37l58 48-5 8-57-49" />
<path fill="#8BECBD" d="m1717 37 58 48-5 8-57-49z" />
<path fill="#FFFBFF" d="m1724 54c0 0-11 15-15 23-4 9-7 19-8 30-1 10 0 21 3 31 2 9 6 18 11 25 5 7 10 13 17 18 8 6 16 11 25 15 11 4 23 6 34 5 9 0 19-3 27-6 5-2 11-4 15-7 6-4 11-8 16-13 2-2 5-7 5-7l-15 3-17 0-20-5-14-7-14-13-10-15-3-6c0 0 3-1 4-1 1-1 2-2 3-3 1-2 1-4 0-6 0-1-2-1-2-2-1-1-3-2-4-4-1-1-2-2-3-4-1-2-2-4-3-6 0-4 2-13 2-13z" />
<path d="m1746 128c0 0 6 6 9 7 4 1 12 0 12 0" />
<path d="m1745 96c2 0 4 1 4 2 1 1 1 3 0 4-1 1-2 2-3 2-1 0-3-1-4-2-1-1-1-2 0-4 1-1 2-2 3-2z" />
<!-- Анимация луны an_hat.end-->
<animateTransform id="an_Moon" attributeName="transform" type="rotate" begin="svg1.click" dur="6s" values="30,1753,10.4;
10,1753,10.4;
20,1753,10.4;
-30,1753,10.4;
0,1753,10.4;
30,1753,10.4"
keyTimes="0;0.15;0.25;0.45;0.85;1"
repeatCount="indefinite"
/>
</g>
</svg>
</div>
<script>
let bb = moon.getBBox();
console.log( bb.x + bb.width / 2 ); // координата X
console.log(bb.y); // координата Y
</script>
#2. Flying hats
The hats (bitmaps) are initially hidden behind the top edge of the canvas.
When a certain time or other conditions come, the command for transforming the hats' movement is turned on.
<image filter="url(#dropShadow)" id="Carnaval" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/e2Khg.png" width="206px" height="218px">
<animateTransform attributeName="transform" type="translate" begin="svg1.click+3s" dur="3s"
values="0 0;-250 800" fill="freeze" additive="sum" repeatCount="1" />
</image>
<style>
.container {
width:100vw;
height:100vh;
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/bhgP9.jpg" height="100%" width="100%"/>
<g>
<image filter="url(#dropShadow)" id="GimmeSpace" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/4CE3b.png" width="206px" height="218px">
<!-- Hat animation GimmeSpace -->
<animateTransform id="an_Gimme" attributeName="transform" type="translate" begin="svg1.click+0.25s" dur="3s"
values="0 0;-400 800" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Carnaval" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/e2Khg.png" width="206px" height="218px">
<animateTransform attributeName="transform" type="translate" begin="svg1.click+3s" dur="3s"
values="0 0;-250 800" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="ThisIsFine" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/SFTT7.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="svg1.click+6s" dur="3s"
values="0 0;50 780" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Kitsune" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/q507j.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="svg1.click+8s" dur="3s"
values="0 0;-800 400;640 390;-150 680" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
<g>
<image filter="url(#dropShadow)" id="Samovar" transform="translate(1200,-200)" xlink:href="https://i.stack.imgur.com/E1O31.png" width="200px" height="200px">
<animateTransform attributeName="transform" type="translate" begin="svg1.click+10s" dur="3s"
values="0 0;-800 400;400 200;-100 780" fill="freeze" additive="sum" repeatCount="1" />
</image>
</g>
</svg>
</div>
# 3. Walking hat
You must first cut out the outline of the hat
draw the legs of the hat in the vector editor
in the bitmap editor, replace the place occupied by the hat with the background.
The imitation of walking can be realized by alternately raising the left and right legs and simultaneously moving the entire figure.
3.1 Raising the left leg
it is essentially a rotation around the highest point of the leg.
For this, it was necessary to draw the entire contour of the leg in order to find the coordinates of the pivot point using getBBox (), as was done in step 1 Rotation of the moon
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" height="100%" width="100%"/>
<g id="LegL" stroke="#971B59" stroke-width="2">
<path fill="#FFFBFF" d="m1721 765 5-66 46 0-12 28c0 0-1 8 0 12 1 3 3 6 6 8 2 2 5 3 8 3 2 1 4 0 5 1 2 1 3 3 4 5 0 1 0 3-1 4-1 1-2 3-4 3-19 1-58 0-58 0zM1734 698l1-11" />
<path fill="#8DEBBC" d="m1734 698 1-11v-13l-1-8c0 0-1-20-3-30-1-5-4-16-4-16l33-13 5 10 5 10c0 0 3 10 5 14 1 4 3 7 4 11 0 4-1 11-1 11l-3 13-4 11-4 10z" />
<!-- Left leg animation -->
<animateTransform id="LeftForward" attributeName="transform" type="rotate" begin="svg1.click" dur="0.5s"
values="0 1731 607;-28 1731 607;0 1731 607" fill="freeze" repeatCount="2" />
</g>
<g id="LegR" stroke="#971B59" stroke-width="2" transform="rotate(28 1817 587)">
<path fill="#FEFAFE" d="m1886 682 38 54c0 0 33-18 48-30 1-1 3-2 3-3 1-1 1-3 0-5-1-2-2-3-4-4-2-1-4 0-6 0-2 0-4 2-5 2-2 0-3 0-5 0-3 0-6 0-9-2-3-2-4-7-6-10-5-8-15-25-15-25zM1915 663" />
<path fill="#8DEBBC" d="m1915 663c0 0-8-14-13-21-4-5-8-11-13-16-2-2-5-4-8-6-3-3-6-5-9-8-8-6-15-15-24-19-9-3-22-9-29-2-3 3-1 9 0 14 1 5 5 10 8 15 2 3 5 7 8 10 4 4 9 6 13 9 5 4 8 8 13 12 6 5 12 9 18 15 3 3 8 9 8 9l4 7z" />
</g>
<g id="Hand" stroke="#971B59" stroke-width="2">
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
</svg>
</div>
3.2 Raising your right leg
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" height="100%" width="100%"/>
<g id="LegL" stroke="#971B59" stroke-width="2">
<path fill="#FFFBFF" d="m1721 765 5-66 46 0-12 28c0 0-1 8 0 12 1 3 3 6 6 8 2 2 5 3 8 3 2 1 4 0 5 1 2 1 3 3 4 5 0 1 0 3-1 4-1 1-2 3-4 3-19 1-58 0-58 0zM1734 698l1-11" />
<path fill="#8DEBBC" d="m1734 698 1-11v-13l-1-8c0 0-1-20-3-30-1-5-4-16-4-16l33-13 5 10 5 10c0 0 3 10 5 14 1 4 3 7 4 11 0 4-1 11-1 11l-3 13-4 11-4 10z" />
</g>
<g id="LegR" stroke="#971B59" stroke-width="2" transform="rotate(28 1817 587)">
<path fill="#FEFAFE" d="m1886 682 38 54c0 0 33-18 48-30 1-1 3-2 3-3 1-1 1-3 0-5-1-2-2-3-4-4-2-1-4 0-6 0-2 0-4 2-5 2-2 0-3 0-5 0-3 0-6 0-9-2-3-2-4-7-6-10-5-8-15-25-15-25zM1915 663" />
<path fill="#8DEBBC" d="m1915 663c0 0-8-14-13-21-4-5-8-11-13-16-2-2-5-4-8-6-3-3-6-5-9-8-8-6-15-15-24-19-9-3-22-9-29-2-3 3-1 9 0 14 1 5 5 10 8 15 2 3 5 7 8 10 4 4 9 6 13 9 5 4 8 8 13 12 6 5 12 9 18 15 3 3 8 9 8 9l4 7z" />
<!-- Right leg animation -->
<animateTransform id="RightBack" attributeName="transform" type="rotate" begin="svg1.click" dur="0.5s"
values="28 1817 587;0 1817 587;28 1817 587" repeatCount="2" fill="freeze" />
</g>
<g id="Hand" stroke="#971B59" stroke-width="2">
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
</svg>
</div>
3.3 Alternating leg raises
It is implemented using logical chains, which can be expressed in words:
animation of the right leg (1 time) -> animation of lifting the left leg (1 time) -> animation of the right leg (1 time) and so to loop
begin="svg1.click" -> begin="RightBack.end"->begin="svg1.click;LeftForward.end"
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" height="100%" width="100%"/>
<g id="LegL" stroke="#971B59" stroke-width="2">
<path fill="#FFFBFF" d="m1721 765 5-66 46 0-12 28c0 0-1 8 0 12 1 3 3 6 6 8 2 2 5 3 8 3 2 1 4 0 5 1 2 1 3 3 4 5 0 1 0 3-1 4-1 1-2 3-4 3-19 1-58 0-58 0zM1734 698l1-11" />
<path fill="#8DEBBC" d="m1734 698 1-11v-13l-1-8c0 0-1-20-3-30-1-5-4-16-4-16l33-13 5 10 5 10c0 0 3 10 5 14 1 4 3 7 4 11 0 4-1 11-1 11l-3 13-4 11-4 10z" />
<!-- Left leg animation -->
<animateTransform id="LeftForward" attributeName="transform" type="rotate" begin="RightBack.end" dur="0.5s"
values="0 1731 607;-28 1731 607;0 1731 607" fill="freeze" repeatCount="1" />
</g>
<g id="LegR" stroke="#971B59" stroke-width="2" transform="rotate(28 1817 587)">
<path fill="#FEFAFE" d="m1886 682 38 54c0 0 33-18 48-30 1-1 3-2 3-3 1-1 1-3 0-5-1-2-2-3-4-4-2-1-4 0-6 0-2 0-4 2-5 2-2 0-3 0-5 0-3 0-6 0-9-2-3-2-4-7-6-10-5-8-15-25-15-25zM1915 663" />
<path fill="#8DEBBC" d="m1915 663c0 0-8-14-13-21-4-5-8-11-13-16-2-2-5-4-8-6-3-3-6-5-9-8-8-6-15-15-24-19-9-3-22-9-29-2-3 3-1 9 0 14 1 5 5 10 8 15 2 3 5 7 8 10 4 4 9 6 13 9 5 4 8 8 13 12 6 5 12 9 18 15 3 3 8 9 8 9l4 7z" />
<!-- Right leg animation -->
<animateTransform id="RightBack" attributeName="transform" type="rotate" begin="svg1.click;LeftForward.end" dur="0.5s"
values="28 1817 587;0 1817 587;28 1817 587" fill="freeze" />
</g>
<g id="Hand" stroke="#971B59" stroke-width="2">
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
</svg>
</div>
3.4 Adding the movement of the hat in space to the animation of the legs
<!-- Animating the horizontal movement of the hat -->
<animateTransform id="an_Horiz" attributeName="transform" type="translate" begin="an_hat.end+5s;an_Horiz.end+2s" dur="20s"
values="0, 0;600 0;600,-350;0,0" fill="freeze" additive="sum" repeatCount="1" />
<g>
<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 2787 768">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="4" stdDeviation="16" result="shadow"/>
<feComposite in2="mask" in="shadow" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/gNAr3.jpg" height="100%" width="100%"/>
<g id="Hat+Legs" >
<g id="LegL" stroke="#971B59" stroke-width="2">
<path fill="#FFFBFF" d="m1721 765 5-66 46 0-12 28c0 0-1 8 0 12 1 3 3 6 6 8 2 2 5 3 8 3 2 1 4 0 5 1 2 1 3 3 4 5 0 1 0 3-1 4-1 1-2 3-4 3-19 1-58 0-58 0zM1734 698l1-11" />
<path fill="#8DEBBC" d="m1734 698 1-11v-13l-1-8c0 0-1-20-3-30-1-5-4-16-4-16l33-13 5 10 5 10c0 0 3 10 5 14 1 4 3 7 4 11 0 4-1 11-1 11l-3 13-4 11-4 10z" />
<!-- Left leg animation -->
<animateTransform id="LeftForward" attributeName="transform" type="rotate" begin="RightBack.end" dur="0.5s"
values="0 1731 607;-28 1731 607;0 1731 607" fill="freeze" repeatCount="1" />
</g>
<g id="LegR" stroke="#971B59" stroke-width="2" transform="rotate(28 1817 587)">
<path fill="#FEFAFE" d="m1886 682 38 54c0 0 33-18 48-30 1-1 3-2 3-3 1-1 1-3 0-5-1-2-2-3-4-4-2-1-4 0-6 0-2 0-4 2-5 2-2 0-3 0-5 0-3 0-6 0-9-2-3-2-4-7-6-10-5-8-15-25-15-25zM1915 663" />
<path fill="#8DEBBC" d="m1915 663c0 0-8-14-13-21-4-5-8-11-13-16-2-2-5-4-8-6-3-3-6-5-9-8-8-6-15-15-24-19-9-3-22-9-29-2-3 3-1 9 0 14 1 5 5 10 8 15 2 3 5 7 8 10 4 4 9 6 13 9 5 4 8 8 13 12 6 5 12 9 18 15 3 3 8 9 8 9l4 7z" />
<!-- Right leg animation -->
<animateTransform id="RightBack" attributeName="transform" type="rotate" begin="svg1.click;LeftForward.end" dur="0.5s"
values="28 1817 587;0 1817 587;28 1817 587" fill="freeze" />
</g>
<g id="Hand" stroke="#971B59" stroke-width="2">
<path id=HandR fill="#8AEEB4" d="m1861 533c4-1 7 3 11 4 3 1 5 1 8 2 4 1 9 2 13 2 4 0 8 1 12 0 4 0 7-2 11-2 3 0 5-1 8-1 2 0 3-1 5-1 1 0 2-1 3-1 1 0 2 2 3 3 0 1 0 2 0 3 0 1 0 2-1 3-2 2-5 3-7 4-3 1-7 2-10 3-3 1-6 2-9 3-3 1-6 1-9 1-3 0-6 0-9 0-5 0-11-1-16-2-3-1-6-2-9-4-2-1-4-2-5-3-1-2-2-4-2-7 0-2 2-5 4-5zM1678 585" />
<path id=HandL fill="#8AEEB4" d="m1678 585c-2 0-5 2-7 3-3 1-6 3-8 5-3 2-5 4-7 7-3 3-5 6-8 10-2 2-3 4-4 6-2 3-2 6-4 9-1 3-2 5-3 8-1 3-1 5-1 8-1 3-2 6-2 9 0 1 1 3 2 4 1 1 2 3 4 3 1 0 2-2 3-3 1-2 2-5 2-7 1-3 2-6 3-10 2-4 3-8 5-11 2-3 4-5 6-7 2-3 4-6 7-8 2-2 5-3 7-4 2-1 5-2 7-4 2-1 4-2 5-4 1-2 3-5 2-7-1-3-5-5-8-5z" />
<path id="BigHat" fill="#FDB761" d="m1628 513c0 0-45-16-69-24-2-1-4-3-4-5 4-13 7-25 12-36 4-9 8-18 13-27 1-2 4-3 6-2 24 8 69 25 69 25 0 0-10 22-14 33-4 12-12 37-12 37zM1622 540l4-20 9-27 9-26 11-27 5-12" />
<path fill="#FDB761" d="m1622 540 4-20 9-27 9-26 11-27 5-12c0 0 2-7 5-9 1-1 2 0 3 0 2 0 6 2 6 2l2 1-7 8-8 18-10 24-8 20-7 19c0 0-4 11-5 16-1 5 0 7-1 16 0 3-8-1-8-1z" />
<path id="AngleHat" fill="#991458" d="m1641 530-8 13c0 0-1-1-2-1-2-4 0-10 1-14 1-5 4-15 4-15z" />
<path id="AngleHat2" fill="#991458" d="m1663 442 4-10 2-4 7-8c0 0 1 1 1 2 0 2 0 5 0 5l-1 7-7 4z" />
<path fill="#30BBE4" d="m1694 664-58-151c0 0 16-46 25-66 6-14 28-16 77-36 61-25 75-26 75-26l81 200c0 0-61 22-91 34-36 15-108 46-108 46z" />
<path fill="#30BBE4" d="m1634.1 695.2 55.2-28.6 94.7-41.3 126.2-45.7 41.6-12.2c0 0 4.7-2.4 6-0.9 3.7 4.7 7.1 11 4.3 12.4-5.3 2.5-20.4 5.7-20.4 5.7l-32 9.6-97.1 36-133.4 56.1c0 0-18.8 8.4-27.5 14-4.2 2.7-8.5 5.7-11.7 9.4-2.7 3.2-6-14.5-6-14.5z" />
<path fill="#921D57" d="m1962.3 579.8 0.9 3.3-11.1 8.4-30.1 13.6-31.6 13.9-52.4 22-56.6 22.9-50.9 19.9-25.9 8.7-27.4 9.3-20.5 6.9c0 0-12.3 5.8-17.2 2.7-4.6-3 12.3-10.8 12.3-10.8l23.2-11.7 59.6-24.7 44.3-18.7 55.7-23.8 37.9-12.3 34.6-12.9 26.5-8.7 18.1-4.5 6.6-1.8z" />
</g>
<!-- Animating the horizontal movement of the hat -->
<animateTransform id="an_Horiz" attributeName="transform" type="translate" begin="svg1.click+3s;an_Horiz.end+2s" dur="20s"
values="0, 0;600 0;600,-350;0,0" fill="freeze" additive="sum" repeatCount="1" />
<g>
<!-- глаза + рот большой шляпы eyes + mouth of a big hat -->
<path stroke="#725598" stroke-width="4" stroke-linecap="round" fill="none" d="m1831.7 535.5c0 0 10.1 14.4 16.8 9.9 5.9-4 4.4-17.1 4.4-17.1" />
<path stroke="#725598" stroke-width="4" d="m1824.1 509.1c1.1-0.6 2.6 0.1 3.5 0.9 1.7 1.5 2.5 3.9 2.6 6.1 0.1 1.3 0.1 3.1-1.1 3.7-1.2 0.7-3.1-0.3-4-1.3-1.6-1.6-1.9-4.2-1.9-6.4 0-1.1-0.1-2.6 0.9-3.1zM1824.7 510.4" />
<path stroke="#725598" stroke-width="4" d="m1824.7 510.4c0.5-0.3 1.2 0.3 1.7 0.7 0.6 0.4 0.9 1.1 1.2 1.7 0.4 0.8 0.7 1.6 1 2.5 0.1 0.5 0.3 1 0.2 1.5-0.1 0.7 0 1.7-0.6 2-0.7 0.3-1.5-0.4-2-0.9-0.6-0.6-0.8-1.4-1.1-2.2-0.4-1.1-0.6-2.3-0.7-3.5 0-0.6-0.3-1.5 0.2-1.8z" />
<g transform="translate(18.821694,-6.6252361)">
<path stroke="#725598" stroke-width="4" d="m1824.1 509.1c1.1-0.6 2.6 0.1 3.5 0.9 1.7 1.5 2.5 3.9 2.6 6.1 0.1 1.3 0.1 3.1-1.1 3.7-1.2 0.7-3.1-0.3-4-1.3-1.6-1.6-1.9-4.2-1.9-6.4 0-1.1-0.1-2.6 0.9-3.1zM1824.7 510.4" />
<path stroke="#725598" stroke-width="4" d="m1824.7 510.4c0.5-0.3 1.2 0.3 1.7 0.7 0.6 0.4 0.9 1.1 1.2 1.7 0.4 0.8 0.7 1.6 1 2.5 0.1 0.5 0.3 1 0.2 1.5-0.1 0.7 0 1.7-0.6 2-0.7 0.3-1.5-0.4-2-0.9-0.6-0.6-0.8-1.4-1.1-2.2-0.4-1.1-0.6-2.3-0.7-3.5 0-0.6-0.3-1.5 0.2-1.8z" />
<!-- Animate eyes + mouth up and down -->
</g>
<animateTransform attributeName="transform" type="translate" begin="svg1.click+3s" dur="1s"
values="0 0;0 -20;-5 -20;0 0" fill="freeze" additive="sum" repeatCount="indefinite" />
</g>
</g>
</svg>
</div>
Related
react svg on hover not changing color
I am trying to make it so when you hover over the div containing an svg, that the svg changes color.
I have a total of 4 svg icons, and 3 of them work, but the second to last svg, for some reason, when I hover over it, does not change color, is it because my svg (below) is made up of multiple elements?
{/* toggle open projects tab */}
<a className="sidebarIcon" href="#">
<svg
className="sidebarSvg"
width="50px"
height="50px"
version="1.0"
viewBox="0 0 168.000000 149.000000"
>
<g
transform="translate(0.000000,149.000000) scale(0.100000,-0.100000)"
fill="#818181"
stroke="none"
>
<path d="M1045 1433 c-88 -29 -168 -56 -177 -59 -16 -5 -18 2 -18 45 l0 51 -190 0 -190 0 0 -730 0 -730 190 0 190 0 0 677 c0 373 4 673 9 668 4 -6 42 -111 84 -235 91 -273 379 -1114 381 -1117 1 -1 81 23 178 54 l176 56 -135 396 c-74 218 -177 522 -230 676 -52 154 -98 285 -102 291 -4 8 -58 -6 -166 -43z"></path>
<path d="M0 740 l0 -730 190 0 190 0 0 730 0 730 -190 0 -190 0 0 -730z"></path>
</g>
</svg>
</a>
Code sandbox link:
https://codesandbox.io/s/cranky-hooks-8hdktn?file=/src/App.js:182-193
remove the fill="#818181remove the fill="#818181remove the fill="#818181remove the fill="#818181
changing svg icon color into different color
Is there any way i could achieve this (see pictures), i have tried with fill="white" but that wont give white color to those parts where i want it, its easier to understand with picture below:
what i have done at the moment:
what i want to achieve:
my code:
import React from "react";
function Graph() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 64 64"
>
<path
fill="white"
d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
></path>
<path
fill="white"
d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
></path>
<path
fill="white"
d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
></path>
</svg>
);
}
export default Graph;
You can use react style to insert color to background
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 64 64"
style={{ backgroundColor: "black" }}
>
<path
fill="white"
d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
></path>
<path
fill="white"
d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
></path>
<path
fill="white"
d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
></path>
</svg>
I think your snippet is mostly fine as it is. If you change all 3 fill="white" to black, and set a white background, it will look as expected
How can I animate SVG text to be "written out"
I'm trying to animate an svg as if it's being written out, like this example on Codepen. I'm trying to understand how to do this by comparing svg elements but so far I'm not seeing much difference. I replaced the svg in the codepen with my own but it wouldn't work. Why is this? And how could I make my own SVG's (such as the one below) animate in the same fashion as on the Codepen? (Besides replacing the path id!) <svg xmlns="http://www.w3.org/2000/svg" width="417.773" height="224.047" viewBox="0 0 417.773 224.047"> <path id="Path_35" data-name="Path 35" d="M-3.875-234.323c-1.516,0-8.928,23.415-22.236,70.078-2.021.842-29.143,6.907-81.533,18.193-.505,0-.842-.674-1.348-2.021.842-1.179,6.57-22.742,16.846-64.687,0-.842-.505-1.179-1.348-1.348h-1.348c-1.179,0-7.581,22.91-18.867,68.73q-8.844,3.285-95.01,23.584c-35.881,7.917-53.906,12.3-53.906,13.477v2.021a4.017,4.017,0,0,1,2.021.674q56.1-14.15,143.525-33.691c0,.505.168.674.674.674h.674q0,1.516-23.584,92.988a4.017,4.017,0,0,1,.674,2.021h2.7l25.605-96.357c10.276-3.538,37.566-9.6,81.533-18.193h.674q-17.435,69.236-33.691,141.5c.674,1.853,1.348,2.7,2.021,2.7h.674l1.348-.674c11.624-53.738,23.415-101.916,35.039-144.873,38.408-8.591,66.035-12.8,82.881-12.8h5.391l3.369,3.369h.674c.674,0,1.348-.842,2.021-2.7,0-3.2-3.2-4.717-9.434-4.717h-.674c-15.5,0-42.451,3.875-80.859,11.455,0-.505-.505-.674-1.348-.674,2.7-11.624,9.265-33.86,19.541-66.709,0-1.348-.505-2.021-1.348-2.021Zm14.993,93.662c-8.254,0-13.982,6.738-17.519,20.215,0,6.57,4.548,10.276,13.477,11.455,9.434,0,19.036-7.917,28.975-23.584,0-1.348-.505-2.021-1.348-2.021H33.354c-8.76,13.477-16.677,20.215-23.584,20.215H2.358a7.891,7.891,0,0,1-4.043-4.043v-2.021a26.887,26.887,0,0,1,1.348-6.064c11.624-3.706,17.519-6.57,17.519-8.76v-2.021a5.721,5.721,0,0,0-5.391-3.369Zm-8.591,9.939c1.516-3.2,3.369-4.885,5.559-5.222l3.369-.168-4.717,2.864ZM98.716-238.029c-1.516,0-3.875,6.738-7.412,20.215q-4.3,20.973-34.365,78.838c-8.254,14.319-13.645,21.562-16.172,21.562H38.745c-1.853-.505-2.7-2.527-2.7-6.064v-10.107c14.487-43.63,24.089-76.311,28.975-97.7-.337-3.2-1.011-4.717-2.021-4.717H60.981l-4.043,4.043c-17.014,44.978-25.605,79.006-25.605,101.748v4.043c0,7.581,2.527,12.129,7.412,13.477,7.581,0,20.215-18.025,37.734-53.906h.674c-3.538,17.183-5.391,29.817-5.391,37.734v4.043c0,6.233,1.516,10.276,4.717,12.129h2.7c4.548,0,11.624-7.244,21.562-21.562-.505,0-.674-.505-.674-1.348H98.042C88.1-123.479,81.533-117.414,78.5-117.414c-1.348-.337-2.021-2.19-2.021-5.391v-4.717c0-12.971,3.2-31.838,9.434-56.6,10.276-31,15.5-48.347,15.5-51.885,0-1.348-.505-2.021-1.348-2.021Zm-41.1,17.519v.674c-2.19,11.118-6.738,26.448-13.477,45.82h-.674v-.674c0-5.054,4.548-20.383,13.477-45.82ZM106.3-139.482c-6.57,0-11.118,6.738-13.477,20.215,0,6.233,2.864,9.939,8.76,11.455,4.548,0,8.928-4.043,13.477-12.129,14.319-5.391,22.4-9.939,24.258-13.477v-.674c0-.842-.505-1.179-1.348-1.348h-1.348c-8.591,5.9-14.656,8.76-18.193,8.76h-.674C116.909-135.271,113.035-139.482,106.3-139.482Zm-1.348,5.391c3.875-1.516,6.57.168,8.086,5.391v2.021q-6.822,0-8.086-6.064Zm-4.717,5.391c4.885,3.706,8.423,5.9,10.781,6.738-2.021,5.9-4.885,8.76-8.76,8.76h-2.021c-1.348-.674-2.19-2.358-2.7-5.222C97.2-121.12,98.042-124.49,100.232-128.7Zm51.211,7.244c-4.043,0-7.075,2.19-8.928,6.738l3.032,2.864c5.728-1.685,8.928-3.538,9.6-5.728-.168-2.527-.842-3.875-1.685-3.875Z" transform="translate(262.624 238.029)" fill="#949ba5"/> </svg>
And how could I make my own SVG's (such as the one below) animate in the same fashion as on the Codepen? (Besides replacing the path id!) For this you need to change your SVG Your shapes is drawn with double paths: You need to redraw the shape using single paths and make the line thicker (stroke-width ="6") This is how it looks in the end: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8"> <g fill="none" stroke="#949BA5" stroke-width="6" stroke-linecap="round"> <!-- Length = 337px --> <path id="horizont" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3"/> <path id="vert1" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" /> <path id="vert2" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6" /> <path id="sign" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" /> <path id="dot" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" /> </g> </svg> Animating one element with stroke-dashoffset <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8" style="background:#151515"> <g fill="none" stroke="white" stroke-width="6" stroke-linecap="round"> <!-- Length = 750px --> <path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" > <animate id="anSign" attributeName="stroke-dashoffset" begin="0s;anSign.end+1s" dur="3s" values="750;0" repeatCount="1" fill="freeze" /> </path> </svg> Animating all the elements of the shape: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8" style="background:#151515"> <g fill="none" stroke="white" stroke-width="6" stroke-linecap="round"> <!-- Length = 337px --> <path id="Horizont" stroke-dashoffset="337" stroke-dasharray="337" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3"> <animate id="anHorizont" attributeName="stroke-dashoffset" begin="anVert1.end+0.25s" dur="0.3s" values="337;0" fill="freeze"/> </path> <!-- Length = 173px --> <path id="Vert1" stroke-dashoffset="173" stroke-dasharray="173" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" > <animate id="anVert1" attributeName="stroke-dashoffset" begin="anVert2.end+0.25s" dur="0.25s" values="173;0" fill="freeze" /> </path> <!-- Length = 232px --> <path id="Vert2" stroke-dashoffset="232" stroke-dasharray="232" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6"> <animate id="anVert2" attributeName="stroke-dashoffset" begin="anSign.end+0.25s" dur="0.25s" values="232;0" fill="freeze" /> </path> <!-- Length = 750px --> <path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" > <animate id="anSign" attributeName="stroke-dashoffset" begin="0s" dur="2s" values="750;0" fill="freeze" /> </path> <path id="Dot" stroke-width="4" stroke-dashoffset="25" stroke-dasharray="25" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" > <animate id="anDot" attributeName="stroke-dashoffset" begin="anSign.end+0.2s" dur="0.25s" values="25;0" fill="freeze" /> </path> </g> </svg> Color scheme option as in the question: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8"> <g fill="none" stroke="#949BA5" stroke-width="6" stroke-linecap="round"> <!-- Length = 337px --> <path id="Horizont" stroke-dashoffset="337" stroke-dasharray="337" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3"> <animate id="anHorizont" attributeName="stroke-dashoffset" begin="anVert1.end+0.25s" dur="0.3s" values="337;0" fill="freeze"/> </path> <!-- Length = 173px --> <path id="Vert1" stroke-dashoffset="173" stroke-dasharray="173" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" > <animate id="anVert1" attributeName="stroke-dashoffset" begin="anVert2.end+0.25s" dur="0.25s" values="173;0" fill="freeze" /> </path> <!-- Length = 232px --> <path id="Vert2" stroke-dashoffset="232" stroke-dasharray="232" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6"> <animate id="anVert2" attributeName="stroke-dashoffset" begin="anSign.end+0.25s" dur="0.25s" values="232;0" fill="freeze" /> </path> <!-- Length = 750px --> <path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" > <animate id="anSign" attributeName="stroke-dashoffset" begin="0s" dur="2s" values="750;0" fill="freeze" /> </path> <path id="Dot" stroke-width="6" stroke-dashoffset="25" stroke-dasharray="25" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" > <animate id="anDot" attributeName="stroke-dashoffset" begin="anSign.end+0.2s" dur="0.25s" values="25;0" fill="freeze" /> </path> </g> </svg>
How to do draw animation effect fill SVG?
I am trying to animate the SVG logo like drawing fill path without stroke. my logo is looking like that. Is it possible to create fill drawing instead of strokes? I saw many solutions about that but all are used by strokes. I also found This solution is pretty similar to my problem. but my SVG path is a bit complicated and can't create a fake path with stroke-like they created. I want it growing from nothing and drawing animation effect with fill. My full SVG code here <svg class="logo-white" xmlns="http://www.w3.org/2000/svg" width="184" height="90" viewBox="0 0 184 90.733" > <path class="draw-logo" id="logo-path" data-name="Path 1" d="M84.763,300a45.529,45.529,0,0,0-31.688,12.921l-.009-.009L37.2,328.748,9.482,356.417s-1.207,1.2-1.813,1.81c-.006.006-.012.012-.018.017A18.987,18.987,0,0,1-5.69,363.663c-10.664.118-18.855-7.748-18.965-18.213A18.247,18.247,0,0,1-6.319,326.813c10.148-.112,18.136,6.911,19.128,16.466L33.934,322.07C25.866,308.538,10.8,299.807-6.977,300c-25.612.282-45.29,20.283-45.021,45.763.272,25.694,20.383,45.254,46.566,44.963A46.86,46.86,0,0,0,26.933,377.55c.088-.085.178-.166.265-.252l.285-.285,15.235-15.206c6.542,17.268,22.741,29.1,43.1,28.875,26.209-.291,46.458-20.232,46.175-45.838-.285-25.679-20.775-45.133-47.233-44.842m1.288,63.661c-10.664.118-18.855-7.748-18.965-18.213a18.247,18.247,0,0,1,18.336-18.638c10.776-.119,19.122,7.8,19.237,18.263.115,10.429-7.934,18.469-18.608,18.587" fill="#f7f7f7" transform="translate(52 -300)" /> </svg>
Because your SVG file is not in the same shape as my logo. can you
please tell me how can I modify the path to achieve the exact same
shape. I don't have much knowledge about the illustrator by the way.
Unfortunately I do not use the illustrator. Path painted in Inkscape
Open the file from the previous answer to edit the path form inInkscape
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
<path class="draw-logo" fill="none" stroke="black" stroke-width="25" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" />
</svg>
Select in the vector editor on the toolbar Edit contour nodes F2 (arrow red -1)
Edit the shape of the curve by dragging the nodal points and change the length and position of the control levers of the nodal points (arrow red -2)
Vector editor saves a lot of overhead information. To remove it, you need to optimize the saved file using SVG Editor
Replace the old path with the new one from the optimized file
.container {
width:50%;
height:auto;
padding:1.5em;
background-color:#151515;
}
.draw-logo {
fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,443;
animation: draw 4s linear forwards;
animation-iteration-count: 2;
}
#keyframes draw {
0% {stroke-dasharray: 0,443;}
100% {stroke-dasharray: 443,0;}
}
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
<path class="draw-logo" d="m78 34.5c0 0-1.3-1.3-1.9-2.1C74.8 30.9 73.8 29.1 72.7 27.4 71.4 26.2 61.9 10.9 46.6 11.2c-5.1 0.1-10.4 1.5-14.9 4-4.7 2.5-8.8 6.3-11.8 10.7-2.6 3.9-4.3 8.5-4.9 13.1-0.9 6.7-0.5 13.9 2.1 20.2 2.4 5.7 6.5 11 11.6 14.3 5.1 3.3 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.1-38 55.1-52.2 5.4-3.7 11.4-7.3 17.9-8.2 6-0.8 12.6 0 17.9 2.9 6.8 3.9 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 8.1-22.2 7-9.7-1.3-20-7.4-24.5-16.1-2.7-5.3-4-10.1-4.4-15.4-0.4-4.7 0.5-11 1.6-14.1 1.9-5.2 8.5-12.4 8.5-12.4" />
</svg>
</div>
Your figure is drawn in double stroke
Therefore, it is impossible to animate its filling with color using stroke-dasharray
Consider creating a single outline that runs in the middle of the shape.
Set the width of this line 25px and we will animate its appearance by changing the attributes ofstroke-dasharray
Animation CSS
.container {
padding:10px;
background-color:#151515;
width:50%;
}
.draw-logo {
fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,425;
animation: draw 4s linear forwards;
animation-iteration-count: 2;
}
#keyframes draw {
0% {stroke-dasharray: 0,425;}
100% {stroke-dasharray: 425,0;}
}
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
<path class="draw-logo" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" />
</svg>
</div>
Animation SVG
To start the animation click on the black rectangle
.container {
width:50%;
height:auto;
padding:1.5em;
background-color:#151515;
}
.draw-logo {
fill:none;
stroke:#F7F7F7;
stroke-width:25;
stroke-dasharray:0,425;
}
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="logo-white" width="184" height="95" viewBox="0 0 184 90.7" version="1.1">
<path class="draw-logo" d="m81.3 30.4c0 0-11.7-9.8-17.5-13-3.8-2.2-9.9-4.6-15.3-5-5.7-0.4-11.7 0.4-16.8 2.9-4.8 2.3-8.7 6.3-11.8 10.7-3.2 4.5-5.6 9.8-6.3 15.2-0.9 6.2-0.4 12.9 2.3 18.6 2.7 5.7 7.5 10.6 12.9 13.8 5.2 3.1 11.6 4.8 17.7 4.5 5.8-0.2 11.6-2.7 16.6-5.7 21.6-13.1 34.2-37.9 55.1-52.2 5.8-4 12.1-8.3 19-9.1 5.7-0.6 11.9 0.9 16.8 3.9 6.7 4.1 12.3 10.6 15.2 17.9 2.8 6.9 3.4 15.1 1.4 22.2-1.8 6.3-6 12.2-11.3 16.1-6.3 4.6-14.5 7.8-22.2 7C127.1 77.2 118.6 70.3 111.3 63.7 104.7 57.8 95.9 42 95.9 42" >
<animate attributeName="stroke-dasharray" begin="svg1.click+0.5s" dur="4s" values="0,425;425,0" repeatCount="2" fill="freeze" />
</path>
</svg>
</div>
An additional example of filling the logo from one point with two lines
To start the animation, click on any letter in the circle
.container {
width:40%;
height="40%";
background:black;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
<!-- The midpoint of the beginning of the animation in the center of the figure. stroke-dashoffset="31.1" -->
<path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_C.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the left stroke-dashoffset="-159.5" -->
<path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_L.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint left top stroke-dashoffset="128.5" -->
<path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_T.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Midpoint lower right stroke-dashoffset="192.7" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_B.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Middle point on the right stroke-dashoffset="223.9" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_R.click" dur="4s" restart="whenNotActive" />
</path>
<g id="btn_L" transform="translate(-17 0)" >
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="green" >L</text>
</g>
<g id="btn_C" transform="translate(3 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="crimson" >C</text>
</g>
<g id="btn_T" transform="translate(23 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="orange" >T</text>
</g>
<g id="btn_B" transform="translate(43 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="dodgerblue" >B</text>
</g>
<g id="btn_R" transform="translate(63 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="purple" >R</text>
</g>
</svg>
</div>
As when using the animateMotion command, avoid turning the object moving
I created an svg application in which three objects move along a curved trajectory.
When moving, the yellow ball does not turn over as it has a symmetrical shape.
Two other objects in certain areas are turned upside down.
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
width="80%" height="80%"
viewBox="0 0 300 200" >
<defs>
<style type="text/css"><![CDATA[
#startButton:hover {
text-decoration: underline;
fill:green;
opacity: 0.5;
}
#stop:hover{
opacity: 0.5;
}
]]>
</style>
<marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
<linearGradient id="grad1" x2="0%" y2="100%"
spreadMethod="pad" >
<stop offset="0%" stop-color="skyblue"/>
<stop offset="90%" stop-color="white"/>
<stop offset="100%" stop-color="yellowgreen"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" />
<!-- Motion curve -->
<path id="t_path" d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none" />
<!-- balerina -->
<path id="balerina" transform="scale(0.08) translate(-100 -200) " fill="darkblue" d="M468 264c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C469 262 468 263 468 264z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="1" rotate="auto" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</path>
<!-- Witch on a broomstick -->
<path transform="scale(0.2) scale(-1 1) translate(-10 -200)" fill="black" d="m142.2 23.5c9-0.1 3.7-16.5 10.9-17.7 2.9-0.5 4 1.1 6.3 2.3 0.1 2.4-1.7 2.9-2.3 4.6 2.1 1.8 3.6-0.6 5.7-0.6 0.7 4-5.3 3.2-6.9 1.7-1.2-2.1 0.4-3.4 1.1-5.1-8.1-3.6-5 5.1-6.3 9.7-1.9 6.9-12.7 10.8-13.7 1.1-0.6-5.9 7.4-13.1 1.1-16.6-4.8 3.8-7.4 10.2-10.3 16-5.1 10.2-10.6 22.9-16.6 32.6 0.4 2.8 3.6 2.9 4.6 5.2 0.6 2.7-3.4 0.8-2.9 3.4 3.3 0.6 6.7-1.3 8.6-3.4 1.1-1.2 0.8-2.7 1.7-4 3.3-4.9 8-6.3 14.9-8.6 1.6-4 6.2-5.7 10.9-5.1 2-0.9 2.3-3.4 3.4-5.1 2.6-2.4 7.2-2.7 9.7-5.1-0.4-2.1-2.9-2.8-0.6-4.6 3.3-0.5 2.9 2.8 2.9 5.7-3 3-8.4 3.5-10.3 7.4 1.6 0.9 2.6 0 4.6 1.1 1.9-1.2 1.6-4.6 3.4-5.7 6.8-0.2 6.8-7.3 9.2-12 4.1 1.3-0.7 9.4-2.3 10.9-1.9 1.8-4.3 2-5.7 2.3-0.9 3.1-2.2 5.8-4.6 7.4-2 0.3-1.4-2-3.4-1.7-3 3-4.4 7.4-10.9 6.9-1.8 4.9-10.3 3-14.3 5.7-0.3 9.7-10.3 12.6-18.9 12 5.6 9.6 18 2.1 24.6-2.3 1.4-0.9 3-1.4 4.6-2.3 2.8-1.7 5.2-4.3 8-5.7 6.9-3.4 22.5-6 31.5-1.1-1.8 6.1-13.2-0.5-15.4 4.6 3.6 2.4 8.1 0.2 12 0.6 6.1 0.6 12.3 3.9 20.6 3.4 2.3 0.9 3 3.5 6.3 3.4 1.2 4.7 9.6 2.2 9.2 8.6-6.5 0.7-11.5-4.4-17.7-4.6-2.1-0.1-4.2 1.3-6.3 1.1-2.8-0.2-5.3-2.5-8-2.9-7.7-1-13.9 4.7-21.7 4.6-3.2 0-6.6-2.6-9.7-0.6 2.2 5 12 2.5 17.7 4 2.1-0.4 1.4 2 2.3 2.9 3.6-0.4 5.4 1 5.7 4 0.7 2.4-2.4 1-2.9 2.3 3 4.5 11.9 3 13.2 9.2-4.7 2.4-9.6-1.5-14.3-1.7-1.4-0.1-3.2 0.7-4.6 0.6-4.6-0.5-8.3-3.1-11.4-5.1-8.6-1.2-15.9 1.6-22.9 0-5.6-1.3-8.8-7.6-13.7-8.6-1.4 3.8 2.4 7 5.7 8 4.8 5.7 11.3 9.7 17.2 14.3 0.7 2.4 2.1 4 2.9 6.3 0.6 3.1-1.9 3-1.7 5.7 9.8 0.3 25-0.3 33.8 0 0.8 1 1.5 1.9 1.1 4-0.5-6.1 5.8-7.5 11.4-5.7 1 0.3 0 2.7 1.1 2.9 1.8 0.5 0.8-1.9 1.7-2.3 2 0.3 3.2-0.2 4.6-0.6 1.4 0.5 3.3 0.5 3.4 2.3 1.7 0 0.6-2.9 2.3-2.9 5.9-1.2 11.2-1.9 15.5-4.6 2.6-1.7 4.1-5.7 7.4-4.6 2-0.1 0.8 2.3 1.1 3.4 0.6 2.1 1.9 3.8 2.3 6.9 0.1 1.4-0.3 2.4-1.1 2.9 2.6 2.5-0.1 3.6 1.1 7.4 0.5 1.8-1.5 1.2-1.7 2.3-0.4 2.3 1.5 2.3 1.1 4.6-6.3 4.8-9.8-3.8-18.9-6.9-1.6-0.5-3.3-0.2-4.6-0.6-2.9-0.9-5-2.3-10.3-1.1-1.4-0.7-2.7-1.5-3.4-2.9-1.6 3.9-10.9 3.7-13.2 0.6-23-0.1-45 0.2-65.2-0.6 2.3 5.3 9 6.2 11.4 11.4 5.8 2.5 12.4 3.9 17.7 6.3 7 3.2 11.6 8.5 14.9 16 1.9-0.3 2.7 0.4 4 0.6 3.9 8.1 20.8 3.2 26.9 9.2 1.5-0.1-0.8-1 0-2.3 2.6 1.7 3.1 4.8 5.2 6.9 2 2 5.3 2.7 7.4 4.6 1.2 1 5.5 5.9 6.3 7.4 3.8 7.9 0.3 19.3-6.3 22.9-3.7 2-10.7 3.3-17.7 2.9-14.9-0.8-28.6-11.6-46.9-12.6-11.4-0.6-23.7 3-32.6 5.7-7.5 2.3-13.1 4.9-18.9 9.7-1.5 2.5-4 4.1-6.9 5.1-1.6-4.6 4.6-6.5 5.7-10.3 5.6-2.8 11.2-5.6 16.6-8.6 7.5-1.7 15.4-4.4 23.5-5.1 3.6-0.3 7.2 0.9 10.3-1.1 4.9 2 8.4 0.6 13.2 1.1 1.9 0.2 4.1 1.4 6.3 1.7 7.8 1 12.9 3.1 21.7 5.2 5.9 1.3 14.8 6.4 22.9 3.4 4.3-1.5 6.4-7.2 5.7-13.2-0.8-6.5-8.6-15.3-15.4-18.3-3.6-1.6-7.7-0.9-10.3-3.4-1.8-0.5-1.2 1.5-2.3 1.7-13.2-1.4-23.6-3.8-30.3-10.9-3.5-3.7-7.1-8.3-12.6-10.9-0.1 5.3 9.5 5.8 10.9 11.4-4-1.2-8-4.1-12.6-5.1-3.9-0.9-8.4-0.6-12-1.7-5.7-1.8-8.9-6-13.7-8-1-3.8-4.3-5.2-5.1-9.2-5.6-2-9.4-5.8-10.9-12-8.1 0.5-15.2 0.1-22.9 0-20-0.2-42 1.6-64.7-0.6-0.6-1.5-0.1-2.9 0.6-4.6 5.7 0.9 9.9 0 16 0 6.9-4.2 13.5-8.6 17.7-15.4-1.6-3-7.9-1.3-8.6-5.1-1.6 0.1-1.6 1.8-2.9 2.3-1.9-0.2-1.1-3.1-2.3-4 1.5-1.6 5.5-0.1 6.3-3.4-0.1-2.8-4-1.7-2.9-5.7 3-0.3 2.6 2.8 4 4 4.5 0.9 3.1-4.2 6.9-4 0.3 3.6 0.5 5.6 3.4 5.7 3.7 0.1 4.6-5.4 4.6-8 4.4-0.9 8.2-1.5 12-1.7-2.3-3.4-2.8-8.6-4.6-12.6 1.6-2.5 0.5-5.2 1.1-7.4 1.1-3.7 4-6.2 5.7-9.7 0.3-1.1-0.8-3.4 1.1-2.9-0.5-1.5-1.2-2.4-1.1-4 0.1-1.3 1.9-3.6 2.9-5.1 0.1-0.1 0.4-2.2 0.6-2.3 1.1-0.9 4.1-0.5 4.6-1.1 1.3 6.2 0.8 14.5-2.3 20.6-1.1 2.1-0.9 4.5-2.9 6.3 0.2 2.4 2 5.4 0 8.6 1.6 4.2 1.3 7.8 0.6 12.6-0.1 0.6 0.6 1.7 0.6 1.7-0.6 2.9-2.8 4.1-3.4 6.9-0.4 1.7 0.2 3.6 0 5.2-0.9 8.6-7.1 11.6-10.9 18.3 6.6 2.8 6.1-1.3 10.3-4.6 1.6-1.2 3.8-1.5 4.6-2.3 2.3-2.2 3-6.1 6.3-8 1.5-0.9 3.9-1.5 5.7-2.3 4.3-1.8 10.2-4 14.3-8 2.5-2.4 3-5.2 6.3-6.9 0.4-2.9 1.7-4.7 2.3-7.4 2.6-1.6 4.4-3.9 5.7-6.9-2.1-1.8-2.1 2.1-5.1 1.1-1.7-1.8-2.6-4.2-5.1-5.1-3.5 0.8-6.5 4.9-10.9 2.9 0.8-5.3 6.8-5.4 10.9-7.4-0.2-3.8-6.8-1.2-7.4-4.6 1.6-3.7 8.6-2 12-4 14.4-15.2 26.5-32.7 40.1-48.6 2.9 1.8 5.8 2.9 6.3 5.7 1 5.2-7.8 13.2-1.1 17.7zm1.1 20.6c1.2-1 4.7 0.1 5.7-1.1-2.1-0.4-5.2-1.3-5.7 1.1zm-26.3 55.5c-4.3-4.3-9.5-10.5-15.4-8.6-5.3 1.7-9.9 13.4-17.2 13.2-0.3 1.8-1.1 3.1-1.1 5.2 1.8 0.9 2 3.3 5.2 2.9 1.1-9 10-12.6 20.6-11.4 4.8 0.5 9.3 4.2 13.2 2.3-0.7-2.2-2.6-3.1-5.1-3.4zm-69.2-8.6c-2.2 4.2-5 8-9.7 9.7-2.3 5.9-9.4 7-12 12.6 4-0.6 8.5-0.7 13.2-0.6 5.8-4.8 16.2-12.4 12-21.7-1.1 0-2.3 0-3.4 0zm36.1 6.9c-3.2 3.7-10 3.8-14.3 6.3 0.3 4.5-3.3 5.1-4 8.6 2.3 0.9 5.3-1.1 6.9-2.3 4.4-3.4 7.8-8.8 12.6-11.4-0.1-0.7-0.2-1.4-1.1-1.1zm-25.7 14.9c2.2 1.1 4.5 0.3 4-2.9-2 0.2-3.1 1.4-4 2.9zm17.7 0c2.1-0.5 2.8 1.3 4 0 0.2-2.9-4-2.7-4 0zm49.2 23.5c0.8-1.7 0.5-3.3-1.7-3.4 0.5 1.3 0.3 3.1 1.7 3.4zm5.2 6.3c-0.3-2.3-1.3-4.1-3.4-4.6-1.3 2 1.6 3.9 3.4 4.6z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+1s" end="stopRed.mouseover"
dur="4s" repeatCount="4" rotate="auto" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</path>
<!-- Yellow ball -->
<circle r="7" cx="2.5" cy="2.5" fill="yellow" stroke="green" >
<animateMotion begin="startButton.mouseover+0.25s" end="stopYellow.mouseover"
dur="8s" repeatCount="2" rotate="auto" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</circle>
<!-- Button `Start` -->
<g id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"
fill="white" >Start</text>
</g>
<!-- Button group `Stop` -->
<g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >
<rect x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />
<g id="stopRed" >
<circle r="6" cx="190" cy="150" fill="none" stroke="black" />
<circle r="4" cx="190" cy="150" fill="black" />
</g>
<g id="stopYellow" >
<circle r="6" cx="190" cy="170" fill="none" stroke="black" />
<circle r="4" cx="190" cy="170" fill="yellow" stroke="orange" />
</g>
<g id="stopTeal" >
<circle r="6" cx="190" cy="190" fill="none" stroke="black" />
<circle r="4" cx="190" cy="190" fill="darkblue" stroke="orange" />
</g>
</g>
<text x="170" y="170" transform="rotate(-90 170,170)"
font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray" >Stop
</text>
</g>
</svg>
If there are any ways to avoid a coup of asymmetrical figures?
I would be grateful for any help in solving this problem.
Update
remove the rotate attribute on the animateMotion element
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
width="60%" height="60%"
viewBox="0 0 300 200" >
<defs>
<style type="text/css"><![CDATA[
#startButton:hover {
text-decoration: underline;
fill:green;
opacity: 0.5;
}
#stop:hover{
opacity: 0.5;
}
]]>
</style>
<marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
<linearGradient id="grad1" x2="0%" y2="100%"
spreadMethod="pad" >
<stop offset="0%" stop-color="skyblue"/>
<stop offset="90%" stop-color="white"/>
<stop offset="100%" stop-color="yellowgreen"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" />
<!-- Motion curve -->
<path id="t_path" d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none" />
<!-- balerina -->
<path id="balerina" transform="scale(0.08) translate(-100 -200) " fill="darkblue" d="M468 264c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C469 262 468 263 468 264z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="1" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</path>
<!-- Witch on a broomstick -->
<path transform="scale(0.2) scale(-1 1) translate(-10 -200)" fill="black" d="m142.2 23.5c9-0.1 3.7-16.5 10.9-17.7 2.9-0.5 4 1.1 6.3 2.3 0.1 2.4-1.7 2.9-2.3 4.6 2.1 1.8 3.6-0.6 5.7-0.6 0.7 4-5.3 3.2-6.9 1.7-1.2-2.1 0.4-3.4 1.1-5.1-8.1-3.6-5 5.1-6.3 9.7-1.9 6.9-12.7 10.8-13.7 1.1-0.6-5.9 7.4-13.1 1.1-16.6-4.8 3.8-7.4 10.2-10.3 16-5.1 10.2-10.6 22.9-16.6 32.6 0.4 2.8 3.6 2.9 4.6 5.2 0.6 2.7-3.4 0.8-2.9 3.4 3.3 0.6 6.7-1.3 8.6-3.4 1.1-1.2 0.8-2.7 1.7-4 3.3-4.9 8-6.3 14.9-8.6 1.6-4 6.2-5.7 10.9-5.1 2-0.9 2.3-3.4 3.4-5.1 2.6-2.4 7.2-2.7 9.7-5.1-0.4-2.1-2.9-2.8-0.6-4.6 3.3-0.5 2.9 2.8 2.9 5.7-3 3-8.4 3.5-10.3 7.4 1.6 0.9 2.6 0 4.6 1.1 1.9-1.2 1.6-4.6 3.4-5.7 6.8-0.2 6.8-7.3 9.2-12 4.1 1.3-0.7 9.4-2.3 10.9-1.9 1.8-4.3 2-5.7 2.3-0.9 3.1-2.2 5.8-4.6 7.4-2 0.3-1.4-2-3.4-1.7-3 3-4.4 7.4-10.9 6.9-1.8 4.9-10.3 3-14.3 5.7-0.3 9.7-10.3 12.6-18.9 12 5.6 9.6 18 2.1 24.6-2.3 1.4-0.9 3-1.4 4.6-2.3 2.8-1.7 5.2-4.3 8-5.7 6.9-3.4 22.5-6 31.5-1.1-1.8 6.1-13.2-0.5-15.4 4.6 3.6 2.4 8.1 0.2 12 0.6 6.1 0.6 12.3 3.9 20.6 3.4 2.3 0.9 3 3.5 6.3 3.4 1.2 4.7 9.6 2.2 9.2 8.6-6.5 0.7-11.5-4.4-17.7-4.6-2.1-0.1-4.2 1.3-6.3 1.1-2.8-0.2-5.3-2.5-8-2.9-7.7-1-13.9 4.7-21.7 4.6-3.2 0-6.6-2.6-9.7-0.6 2.2 5 12 2.5 17.7 4 2.1-0.4 1.4 2 2.3 2.9 3.6-0.4 5.4 1 5.7 4 0.7 2.4-2.4 1-2.9 2.3 3 4.5 11.9 3 13.2 9.2-4.7 2.4-9.6-1.5-14.3-1.7-1.4-0.1-3.2 0.7-4.6 0.6-4.6-0.5-8.3-3.1-11.4-5.1-8.6-1.2-15.9 1.6-22.9 0-5.6-1.3-8.8-7.6-13.7-8.6-1.4 3.8 2.4 7 5.7 8 4.8 5.7 11.3 9.7 17.2 14.3 0.7 2.4 2.1 4 2.9 6.3 0.6 3.1-1.9 3-1.7 5.7 9.8 0.3 25-0.3 33.8 0 0.8 1 1.5 1.9 1.1 4-0.5-6.1 5.8-7.5 11.4-5.7 1 0.3 0 2.7 1.1 2.9 1.8 0.5 0.8-1.9 1.7-2.3 2 0.3 3.2-0.2 4.6-0.6 1.4 0.5 3.3 0.5 3.4 2.3 1.7 0 0.6-2.9 2.3-2.9 5.9-1.2 11.2-1.9 15.5-4.6 2.6-1.7 4.1-5.7 7.4-4.6 2-0.1 0.8 2.3 1.1 3.4 0.6 2.1 1.9 3.8 2.3 6.9 0.1 1.4-0.3 2.4-1.1 2.9 2.6 2.5-0.1 3.6 1.1 7.4 0.5 1.8-1.5 1.2-1.7 2.3-0.4 2.3 1.5 2.3 1.1 4.6-6.3 4.8-9.8-3.8-18.9-6.9-1.6-0.5-3.3-0.2-4.6-0.6-2.9-0.9-5-2.3-10.3-1.1-1.4-0.7-2.7-1.5-3.4-2.9-1.6 3.9-10.9 3.7-13.2 0.6-23-0.1-45 0.2-65.2-0.6 2.3 5.3 9 6.2 11.4 11.4 5.8 2.5 12.4 3.9 17.7 6.3 7 3.2 11.6 8.5 14.9 16 1.9-0.3 2.7 0.4 4 0.6 3.9 8.1 20.8 3.2 26.9 9.2 1.5-0.1-0.8-1 0-2.3 2.6 1.7 3.1 4.8 5.2 6.9 2 2 5.3 2.7 7.4 4.6 1.2 1 5.5 5.9 6.3 7.4 3.8 7.9 0.3 19.3-6.3 22.9-3.7 2-10.7 3.3-17.7 2.9-14.9-0.8-28.6-11.6-46.9-12.6-11.4-0.6-23.7 3-32.6 5.7-7.5 2.3-13.1 4.9-18.9 9.7-1.5 2.5-4 4.1-6.9 5.1-1.6-4.6 4.6-6.5 5.7-10.3 5.6-2.8 11.2-5.6 16.6-8.6 7.5-1.7 15.4-4.4 23.5-5.1 3.6-0.3 7.2 0.9 10.3-1.1 4.9 2 8.4 0.6 13.2 1.1 1.9 0.2 4.1 1.4 6.3 1.7 7.8 1 12.9 3.1 21.7 5.2 5.9 1.3 14.8 6.4 22.9 3.4 4.3-1.5 6.4-7.2 5.7-13.2-0.8-6.5-8.6-15.3-15.4-18.3-3.6-1.6-7.7-0.9-10.3-3.4-1.8-0.5-1.2 1.5-2.3 1.7-13.2-1.4-23.6-3.8-30.3-10.9-3.5-3.7-7.1-8.3-12.6-10.9-0.1 5.3 9.5 5.8 10.9 11.4-4-1.2-8-4.1-12.6-5.1-3.9-0.9-8.4-0.6-12-1.7-5.7-1.8-8.9-6-13.7-8-1-3.8-4.3-5.2-5.1-9.2-5.6-2-9.4-5.8-10.9-12-8.1 0.5-15.2 0.1-22.9 0-20-0.2-42 1.6-64.7-0.6-0.6-1.5-0.1-2.9 0.6-4.6 5.7 0.9 9.9 0 16 0 6.9-4.2 13.5-8.6 17.7-15.4-1.6-3-7.9-1.3-8.6-5.1-1.6 0.1-1.6 1.8-2.9 2.3-1.9-0.2-1.1-3.1-2.3-4 1.5-1.6 5.5-0.1 6.3-3.4-0.1-2.8-4-1.7-2.9-5.7 3-0.3 2.6 2.8 4 4 4.5 0.9 3.1-4.2 6.9-4 0.3 3.6 0.5 5.6 3.4 5.7 3.7 0.1 4.6-5.4 4.6-8 4.4-0.9 8.2-1.5 12-1.7-2.3-3.4-2.8-8.6-4.6-12.6 1.6-2.5 0.5-5.2 1.1-7.4 1.1-3.7 4-6.2 5.7-9.7 0.3-1.1-0.8-3.4 1.1-2.9-0.5-1.5-1.2-2.4-1.1-4 0.1-1.3 1.9-3.6 2.9-5.1 0.1-0.1 0.4-2.2 0.6-2.3 1.1-0.9 4.1-0.5 4.6-1.1 1.3 6.2 0.8 14.5-2.3 20.6-1.1 2.1-0.9 4.5-2.9 6.3 0.2 2.4 2 5.4 0 8.6 1.6 4.2 1.3 7.8 0.6 12.6-0.1 0.6 0.6 1.7 0.6 1.7-0.6 2.9-2.8 4.1-3.4 6.9-0.4 1.7 0.2 3.6 0 5.2-0.9 8.6-7.1 11.6-10.9 18.3 6.6 2.8 6.1-1.3 10.3-4.6 1.6-1.2 3.8-1.5 4.6-2.3 2.3-2.2 3-6.1 6.3-8 1.5-0.9 3.9-1.5 5.7-2.3 4.3-1.8 10.2-4 14.3-8 2.5-2.4 3-5.2 6.3-6.9 0.4-2.9 1.7-4.7 2.3-7.4 2.6-1.6 4.4-3.9 5.7-6.9-2.1-1.8-2.1 2.1-5.1 1.1-1.7-1.8-2.6-4.2-5.1-5.1-3.5 0.8-6.5 4.9-10.9 2.9 0.8-5.3 6.8-5.4 10.9-7.4-0.2-3.8-6.8-1.2-7.4-4.6 1.6-3.7 8.6-2 12-4 14.4-15.2 26.5-32.7 40.1-48.6 2.9 1.8 5.8 2.9 6.3 5.7 1 5.2-7.8 13.2-1.1 17.7zm1.1 20.6c1.2-1 4.7 0.1 5.7-1.1-2.1-0.4-5.2-1.3-5.7 1.1zm-26.3 55.5c-4.3-4.3-9.5-10.5-15.4-8.6-5.3 1.7-9.9 13.4-17.2 13.2-0.3 1.8-1.1 3.1-1.1 5.2 1.8 0.9 2 3.3 5.2 2.9 1.1-9 10-12.6 20.6-11.4 4.8 0.5 9.3 4.2 13.2 2.3-0.7-2.2-2.6-3.1-5.1-3.4zm-69.2-8.6c-2.2 4.2-5 8-9.7 9.7-2.3 5.9-9.4 7-12 12.6 4-0.6 8.5-0.7 13.2-0.6 5.8-4.8 16.2-12.4 12-21.7-1.1 0-2.3 0-3.4 0zm36.1 6.9c-3.2 3.7-10 3.8-14.3 6.3 0.3 4.5-3.3 5.1-4 8.6 2.3 0.9 5.3-1.1 6.9-2.3 4.4-3.4 7.8-8.8 12.6-11.4-0.1-0.7-0.2-1.4-1.1-1.1zm-25.7 14.9c2.2 1.1 4.5 0.3 4-2.9-2 0.2-3.1 1.4-4 2.9zm17.7 0c2.1-0.5 2.8 1.3 4 0 0.2-2.9-4-2.7-4 0zm49.2 23.5c0.8-1.7 0.5-3.3-1.7-3.4 0.5 1.3 0.3 3.1 1.7 3.4zm5.2 6.3c-0.3-2.3-1.3-4.1-3.4-4.6-1.3 2 1.6 3.9 3.4 4.6z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+1s" end="stopRed.mouseover"
dur="4s" repeatCount="4" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</path>
<!-- Yellow ball -->
<circle r="7" cx="2.5" cy="2.5" fill="yellow" stroke="green" >
<animateMotion begin="startButton.mouseover+0.25s" end="stopYellow.mouseover"
dur="8s" repeatCount="2" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</circle>
<!-- Button `Start` -->
<g id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"
fill="white" >Start</text>
</g>
<!-- Button group `Stop` -->
<g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >
<rect x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />
<g id="stopRed" >
<circle r="6" cx="190" cy="150" fill="none" stroke="black" />
<circle r="4" cx="190" cy="150" fill="black" />
</g>
<g id="stopYellow" >
<circle r="6" cx="190" cy="170" fill="none" stroke="black" />
<circle r="4" cx="190" cy="170" fill="yellow" stroke="orange" />
</g>
<g id="stopTeal" >
<circle r="6" cx="190" cy="190" fill="none" stroke="black" />
<circle r="4" cx="190" cy="190" fill="darkblue" stroke="orange" />
</g>
</g>
<text x="170" y="170" transform="rotate(-90 170,170)"
font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray" >Stop
</text>
</g>
</svg>
Objects do not roll over, but do not track the direction of movement. Some sites go backwards
I'm not very sure if this is what you need. Anyway I've centered the ballerina path around the 0,0 point, which is what I usually do. Please take a look.
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
width="60%" height="60%"
viewBox="0 0 300 200" >
<defs>
<style type="text/css"><![CDATA[
#startButton:hover {
text-decoration: underline;
fill:green;
opacity: 0.5;
}
#stop:hover{
opacity: 0.5;
}
]]>
</style>
<marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
<linearGradient id="grad1" x2="0%" y2="100%"
spreadMethod="pad" >
<stop offset="0%" stop-color="skyblue"/>
<stop offset="90%" stop-color="white"/>
<stop offset="100%" stop-color="yellowgreen"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" />
<!-- Motion curve -->
<path id="t_path" d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none" />
<!-- balerina -->
<path id="balerina" transform="scale(0.08)" fill="darkblue" d="M126.4,-43.5c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C127.4,-45.5,126.4,-44.5,126.4,-43.5z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="1" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</path>
<!-- Button `Start` -->
<g id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"
fill="white" >Start</text>
</g>
<!-- Button group `Stop` -->
<g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >
<rect x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />
<g id="stopRed" >
<circle r="6" cx="190" cy="150" fill="none" stroke="black" />
<circle r="4" cx="190" cy="150" fill="black" />
</g>
<g id="stopYellow" >
<circle r="6" cx="190" cy="170" fill="none" stroke="black" />
<circle r="4" cx="190" cy="170" fill="yellow" stroke="orange" />
</g>
<g id="stopTeal" >
<circle r="6" cx="190" cy="190" fill="none" stroke="black" />
<circle r="4" cx="190" cy="190" fill="darkblue" stroke="orange" />
</g>
</g>
<text x="170" y="170" transform="rotate(-90 170,170)"
font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray" >Stop
</text>
</g>
</svg>
UPDATE
The OP is commenting:
in the second half of the journey a dancer should look left.
For this I'm using animateTransform type="scale" and calcMode="discrete" The scale is used to flip the dancer.
The only thing I don't like is that the track you are using is not symmetric and the dancer is not flipping exactly when you may expect.
svg{border:1px solid;overflow:visible;}
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
width="60%" height="60%"
viewBox="0 0 300 200" >
<defs>
<style type="text/css"><![CDATA[
#startButton:hover {
text-decoration: underline;
fill:green;
opacity: 0.5;
}
#stop:hover{
opacity: 0.5;
}
]]>
</style>
<marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
</defs>
<!-- Motion curve -->
<path id="t_path" d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none" />
<!-- balerina -->
<path id="balerina" transform="scale(0.08)" fill="darkblue" d="M126.4,-43.5c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C127.4,-45.5,126.4,-44.5,126.4,-43.5z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="1" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
<animateTransform attributeType="XML" attributeName="transform" type="scale" values="0.08,0.08;-0.08,0.08" calcMode="discrete" begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="1" fill="freeze" restart="whenNotActive" />
</path>
<!-- Button `Start` -->
<g id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"
fill="white" >Start</text>
</g>
<!-- Button group `Stop` -->
<g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >
<rect x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />
<g id="stopRed" >
<circle r="6" cx="190" cy="150" fill="none" stroke="black" />
<circle r="4" cx="190" cy="150" fill="black" />
</g>
<g id="stopYellow" >
<circle r="6" cx="190" cy="170" fill="none" stroke="black" />
<circle r="4" cx="190" cy="170" fill="yellow" stroke="orange" />
</g>
<g id="stopTeal" >
<circle r="6" cx="190" cy="190" fill="none" stroke="black" />
<circle r="4" cx="190" cy="190" fill="darkblue" stroke="orange" />
</g>
</g>
<text x="170" y="170" transform="rotate(-90 170,170)"
font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray" >Stop
</text>
</g>
</svg>
UPDATE 2
In which I'm using keyTimes and calcMode="linear"
svg{overflow:visible;}
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
width="60%" height="60%"
viewBox="0 0 300 200" >
<defs>
<style type="text/css"><![CDATA[
#startButton:hover {
text-decoration: underline;
fill:green;
opacity: 0.5;
}
#stop:hover{
opacity: 0.5;
}
]]>
</style>
<marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
</defs>
<!-- Motion curve -->
<path id="t_path" d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none" />
<!-- balerina -->
<path id="balerina" transform="scale(0.08)" fill="darkblue" d="M126.4,-43.5c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C127.4,-45.5,126.4,-44.5,126.4,-43.5z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="3" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
<animateTransform attributeType="XML" attributeName="transform" type="scale" values="0.08,0.08;
0.08,0.08;
-0.08,0.08;
-0.08,0.08;
0.08,0.08;"
keyTimes= "0;
0.45;
0.50;
0.95;
1" begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="3" fill="freeze" restart="whenNotActive" />
</path>
<!-- Button `Start` -->
<g id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"
fill="white" >Start</text>
</g>
<!-- Button group `Stop` -->
<g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >
<rect x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />
<g id="stopRed" >
<circle r="6" cx="190" cy="150" fill="none" stroke="black" />
<circle r="4" cx="190" cy="150" fill="black" />
</g>
<g id="stopYellow" >
<circle r="6" cx="190" cy="170" fill="none" stroke="black" />
<circle r="4" cx="190" cy="170" fill="yellow" stroke="orange" />
</g>
<g id="stopTeal" >
<circle r="6" cx="190" cy="190" fill="none" stroke="black" />
<circle r="4" cx="190" cy="190" fill="darkblue" stroke="orange" />
</g>
</g>
<text x="170" y="170" transform="rotate(-90 170,170)"
font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray" >Stop
</text>
</g>
</svg>