Animation SVG with SMIL
How do I make an animation svg with smil?
I made this animation with the new rules of SVG, there still some bug. sorry. if you understand why the fade does not go on the second lap write me or fork :). What is a animation svg with smil? How do you make a animation svg with smil? This script and codes were developed by Tommaso Poletti on 14 October 2022, Friday.
Animation SVG with SMIL Previews
Animation SVG with SMIL - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animation SVG with SMIL</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="block">
<div id="container">
<svg version="1.1" id="animazione" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 557" enable-background="new 0 0 1200 557" xml:space="preserve">
<g id="percorso"> <g> <path fill="none" stroke="#818181" stroke-width="2" stroke-miterlimit="10" d="M115,494c0,0-0.4-0.8-1.1-2.2"/> <path id="percorso-l" fill="none" stroke="#818181" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="4.996,4.996" d="M111.7,487.3 C92.6,447.2-0.1,237.3,91,103c61-90,294.8-86.4,315.5,10c13,60.6-100.5,66.5-80.5,188.7s78,82.3,76,49.3s-62-82-90,1 s82,126.4,118,135c75,18,908,84,648-273c-35.6-51.5-114.4-142.4-281-127.1"/> <path fill="none" stroke="#818181" stroke-width="2" stroke-miterlimit="10" d="M794.5,87.1c-0.8,0.1-1.7,0.2-2.5,0.3"/> </g>
</g>
<path id="omino" fill="#DA3D3E" d="M167.5,529.5h-43.1h-3.2v2.8v22.8h3.2v-22.8h6.9v4.9v9.9v2l0,0v4.4h14h1.7h14v-3.6l0,0v-17.6h6.9 v22.8h3.2v-22.8v-2.8H167.5L167.5,529.5z M133.3,532.3c-0.2,0.2-0.4,0.5-0.6,0.7v-0.7H133.3z M132.7,536.9c0.4-2.1,1.6-3.7,3.2-4.7 h5.8c1.7,1,3.1,2.7,3.3,4.9l0,0v6.6c-1.5-1.8-3.7-2.9-6-2.9c-2.6,0-4.8,1.2-6.2,3.2L132.7,536.9L132.7,536.9z M145.1,547.5v0.5 h-12.2c0.4-3.2,2.9-5.6,6.1-5.6C142,542.5,144.5,544.5,145.1,547.5z M145.1,549.8v2h-12.2v-2.1L145.1,549.8L145.1,549.8z M144.3,532.3h3.1c-0.6,0.6-1.1,1.3-1.5,2.2C145.4,533.6,144.9,532.9,144.3,532.3z M146.7,537.2c0.2-2.1,1.5-3.9,3.3-4.9h5.8 c1.7,1,3.1,2.7,3.3,4.9v6.9c-1.5-2-3.7-3.2-6.2-3.2c-2.6,0-4.8,1.3-6.2,3.3V537.2L146.7,537.2z M146.8,548.1 c0.4-3.2,2.9-5.6,6.1-5.6c3.2,0,5.8,2.4,6.1,5.6H146.8z M159.1,551.6h-12.2v-2h12.2V551.6z M159.1,533.1c-0.2-0.2-0.5-0.6-0.7-0.9 h0.7V533.1z M146.2,504.1L146.2,504.1c8.2,0,14.9-6.7,14.9-15.1c0-3.5-1-5.5-1.8-6.6c0,0-0.1-0.1-0.2-0.4l-0.1-0.1 c-1.1-1.1-4.7-3.5-12.7-3.5c0,0-0.1,0-0.4,0c-2.4,0-10.4,0.2-12.9,4c-0.7,1.1-1.7,3.1-1.7,6.6C131.2,497.4,138,504.1,146.2,504.1z M133.9,483.2L133.9,483.2c2.2-3.4,10.3-3.5,12-3.5c0.2,0,0.4,0,0.4,0c8,0,11.1,2.6,12,3.3l0.1,0.1c0.1,0.1,0.2,0.2,0.2,0.2 c0.6,0.7,1.6,2.4,1.6,5.9c0,7.7-6.2,14.1-13.8,14.1l0,0c-7.6,0-13.8-6.2-13.8-14.1C132.3,485.7,133.3,483.9,133.9,483.2z M128.8,529.2l1.2-1.2c-4.4-3.8-6.1-8.7-5.1-14.3c0.5-2.7,1.3-4.8,2.1-6.1c0.1-0.1,0.1-0.2,0.2-0.5c1.2-2.4,3.2-4.5,5.5-6.2 c3.3,3.8,8.2,6.1,13.6,6.1c5.3,0,10.2-2.3,13.3-5.9c2.2,1.7,3.9,3.7,5.1,6c0.1,0.1,0.1,0.4,0.2,0.5c0.6,1.3,1.6,3.6,2.1,6.1 c1,5.6-0.9,10.5-5.1,14.3l1.2,1.2c8.4-7.3,5.9-16.6,3.9-21.3v-16.4c0-1.3-1.1-2.4-2.4-2.4h-0.5c-0.2-9.4-8.2-17-17.9-17 c-9.7,0-17.6,7.6-17.9,17h-0.5c-1.3,0-2.4,1.1-2.4,2.4v15.3C123.3,510.9,119.6,521.3,128.8,529.2z M164.5,490.7 c0.5,0,0.9,0.4,0.9,0.9V505c-1.2-2-2.8-3.7-4.8-5.1c2-2.6,3.2-5.8,3.4-9.1L164.5,490.7L164.5,490.7z M146.2,473.8 c8.9,0,16.2,7.1,16.2,15.8c0,8.7-7.2,15.8-16.2,15.8s-16.2-7.1-16.2-15.8C130,480.9,137.2,473.8,146.2,473.8z M126.9,491.5 c0-0.5,0.4-0.9,0.9-0.9h0.6c0.2,3.3,1.3,6.2,3.2,8.8c-1.8,1.3-3.3,2.9-4.7,4.7V491.5L126.9,491.5z M160.5,526.9v-19.5 c0-0.7-0.5-1.3-1.2-1.3h-26.8c-0.6,0-1.2,0.6-1.2,1.3v19.3h-3.9v1.6c0,0.7,0.5,1.3,1.2,1.3h3.9h26.9h4c0.6,0,1.2-0.6,1.2-1.3v-1.6 h-4.2v0.2H160.5z M145.9,519.8c-1.2,0-2.1-1-2.1-2.1c0-1.2,1-2.1,2.1-2.1c1.2,0,2.1,1,2.1,2.1C148,518.8,147.1,519.8,145.9,519.8z" />
<path id="space" fill="#37B34A" d="M795.2,82c-2.2-5.7-12.9-5.3-22.3-3.8c-6.1-6.9-15-11.3-24.9-11.3c-18.3,0-33.2,14.9-33.2,33.2 c0,0.1,0,0.3,0,0.4c-8,5.1-16.1,12-13.9,17.7c1.4,3.6,6.1,4.8,11.8,4.8c3.3,0,7-0.4,10.4-1c6.1,6.9,15,11.3,24.9,11.3 c18.3,0,33.2-14.9,33.2-33.2c0-0.1,0-0.2,0-0.4C789.2,94.6,797.4,87.7,795.2,82z M748,72.9c14.3,0,26.1,11.1,27.1,25.2 c-2.7,1.6-5.5,3.1-8.6,4.6c-1.9-3-5.2-5-9-5c-5.8,0-10.6,4.7-10.6,10.6c0,0.9,0.1,1.7,0.3,2.6c-7.2,2.6-14.3,4.6-20.7,5.9 c-3.6-4.6-5.7-10.4-5.7-16.6C720.9,85.1,733,72.9,748,72.9z M705.1,116.5c-0.5-1.3,2-5.3,10.2-10.9c0.8,4.4,2.4,8.6,4.7,12.2 C710.1,119.2,705.6,117.9,705.1,116.5z M748,127.2c-6.8,0-13-2.5-17.8-6.7c6-1.4,12.5-3.3,19.1-5.7c1.9,2.4,4.9,3.9,8.2,3.9 c5.8,0,10.6-4.7,10.6-10.6c0-0.4,0-0.8-0.1-1.2c2.4-1.2,4.7-2.4,6.9-3.6C773.3,116.8,761.8,127.2,748,127.2z M780.7,94.6 c-0.7-4.5-2.4-8.6-4.7-12.3c9.9-1.4,14.5,0,15,1.3C791.5,84.9,789,88.9,780.7,94.6z"/>
<path id="navicella" fill="#0071BB" d="M-0.012,18.551c0.092-0.058,0.173-0.127,0.252-0.197c23.414-0.963,38.012-15.05,39.887-16.96 c0.778-0.796,0.778-2.067,0-2.863C38.249-3.382,23.611-17.506,0.139-18.434c-0.051-0.039-0.095-0.084-0.15-0.119 c-0.591-0.373-14.666-9.103-35.092-7.315c-0.954,0.083-1.721,0.815-1.848,1.763c-0.013,0.091-0.02,0.184-0.02,0.274 c0,0.845,0.525,1.615,1.333,1.915c3.935,1.46,10.179,4.361,13.35,7.033c-1.83,0.827-3.579,1.814-5.227,2.971 c-0.402,0.286-0.69,0.707-0.808,1.187c-0.458,1.866-0.789,3.761-1,5.671c-3.812,0.632-7.466,1.642-10.333,3.228 c-0.649,0.36-1.053,1.047-1.053,1.79c0,0.745,0.402,1.43,1.053,1.789c2.87,1.589,6.531,2.598,10.349,3.229 c0.21,1.909,0.528,3.804,0.985,5.669c0.116,0.48,0.404,0.902,0.808,1.187c1.664,1.169,3.43,2.165,5.282,2.997 c-3.152,2.681-9.448,5.61-13.407,7.08c-0.808,0.303-1.333,1.072-1.333,1.918c0,0.089,0.006,0.182,0.019,0.272 c0.126,0.947,0.892,1.681,1.848,1.764C-14.677,27.656-0.601,18.924-0.012,18.551z M-25.611-21.872 c6.996,0.492,12.81,2.161,16.894,3.721c-2.141,0.22-4.333,0.542-6.587,1.006c-0.945,0.195-1.87,0.435-2.781,0.704 C-19.836-18.447-22.731-20.329-25.611-21.872z M35.693-0.035c-2.921,2.616-9.533,7.798-19.167,11.173 c-0.456-1.312-0.81-2.596-1.083-3.853c3.564-0.545,6.312-3.605,6.312-7.321c0-3.732-2.772-6.8-6.36-7.325 c0.34-1.606,0.729-2.917,1.058-3.871C26.126-7.859,32.764-2.659,35.693-0.035z M14.321,3.309c-1.843,0-3.343-1.501-3.343-3.345 s1.5-3.344,3.343-3.344c1.844,0,3.346,1.5,3.346,3.344S16.163,3.309,14.321,3.309z M-33.182-0.037 c8.523-2.446,20.499-1.906,24.242-1.659c0.183,0.495,0.344,1.099,0.344,1.659c0,0.527-0.171,1.147-0.359,1.659 C-12.716,1.87-24.669,2.405-33.182-0.037z M-14.485,13.07c-3.652-0.751-7.029-2.145-10.044-4.144 c-0.253-1.12-0.433-2.256-0.585-3.393c8.762,0.865,17.154,0.125,17.708,0.072c0.669-0.061,1.269-0.447,1.597-1.038 c0.131-0.238,1.302-2.389,1.302-4.604c0-2.33-1.191-4.414-1.327-4.644c-0.333-0.566-0.917-0.938-1.573-0.997 c-0.555-0.052-8.953-0.793-17.721,0.075c0.152-1.14,0.346-2.273,0.598-3.395c3.013-2,6.389-3.392,10.045-4.141 c11.895-2.443,22.086-1.053,30.213,1.66c-0.346,0.997-0.749,2.365-1.101,4.041c-0.104-0.004-0.201-0.031-0.305-0.031 c-4.1,0-7.433,3.334-7.433,7.433c0,4.1,3.333,7.435,7.433,7.435c0.119,0,0.229-0.03,0.348-0.035 c0.285,1.311,0.655,2.653,1.132,4.021C7.663,14.114-2.555,15.52-14.485,13.07z M-18.034,16.383c0.895,0.263,1.802,0.499,2.729,0.689 c2.31,0.474,4.552,0.799,6.743,1.017c-4.091,1.578-9.963,3.285-17.049,3.785C-22.701,20.315-19.778,18.41-18.034,16.383z"> <animateMotion dur="20s" restart="whenNotActive" rotate="auto" repeatCount="indefinite" keyTimes="0; 1" calcMode="spline" keySplines=".1 0 .9 1"> <mpath xlink:href="#percorso-l" /> </animateMotion> <animate attributeType="CSS" attributeName="opacity" from="0" to="1" begin="0s" dur="1s" /> <animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="19s" dur="1s" />
</path>
<g> <defs> <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="851" y="-11.8" width="291" height="291"> <feFlood style="flood-color:white;flood-opacity:1" result="back"/> <feBlend in="SourceGraphic" in2="back" mode="normal"/> </filter> </defs> <mask maskUnits="userSpaceOnUse" x="851" y="-11.8" width="291" height="291" id="SVGID_1_"> <g filter="url(#Adobe_OpacityMaskFilter)"> <image overflow="visible" width="296" height="296" xlink:href="data:image/jpeg;base64,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" transform="matrix(1 0 0 1 848.5002 -14)"> </image> </g> </mask> <g mask="url(#SVGID_1_)"> <g> <g> <g> <g> <circle fill="#353535" cx="996.5" cy="133.7" r="145.5"/> </g> </g> </g> </g> </g>
</g>
<g> <defs> <filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="479" y="330.2" width="315" height="315"> <feFlood style="flood-color:white;flood-opacity:1" result="back"/> <feBlend in="SourceGraphic" in2="back" mode="normal"/> </filter> </defs> <mask maskUnits="userSpaceOnUse" x="479" y="330.2" width="315" height="315" id="SVGID_2_"> <g filter="url(#Adobe_OpacityMaskFilter_1_)"> <image overflow="visible" width="320" height="320" xlink:href="data:image/jpeg;base64,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
6D//2Q==" transform="matrix(1 0 0 1 476.5002 328)"> </image> </g> </mask> <g mask="url(#SVGID_2_)"> <g> <g> <g> <g> <circle fill="#353535" cx="636.5" cy="487.7" r="157.5"/> </g> </g> </g> </g> </g>
</g>
<g> <defs> <filter id="Adobe_OpacityMaskFilter_2_" filterUnits="userSpaceOnUse" x="-38" y="100.2" width="291" height="291"> <feFlood style="flood-color:white;flood-opacity:1" result="back"/> <feBlend in="SourceGraphic" in2="back" mode="normal"/> </filter> </defs> <mask maskUnits="userSpaceOnUse" x="-38" y="100.2" width="291" height="291" id="SVGID_3_"> <g filter="url(#Adobe_OpacityMaskFilter_2_)"> <image overflow="visible" width="296" height="296" xlink:href="data:image/jpeg;base64,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" transform="matrix(1 0 0 1 -40.4998 98)"> </image> </g> </mask> <g mask="url(#SVGID_3_)"> <g> <g> <g> <g> <circle fill="#353535" cx="107.5" cy="245.7" r="145.5"/> </g> </g> </g> </g> </g>
</g>
</svg> <article class="first"> <h2>Title of the article</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at pellentesque sapien. Proin iaculis nisi risus, nec gravida magna tristique nec. Phasellus ac egestas elit, nec interdum nisl. Aenean ipsum est, interdum a ex ut, ornare tristique felis. Duis non odio eget magna luctus dictum in ac sapien. </p>
</article>
<article class="second"> <h2>Title of the article</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at pellentesque sapien. Proin iaculis nisi risus, nec gravida magna tristique nec. Phasellus ac egestas elit, nec interdum nisl. Aenean ipsum est, interdum a ex ut, ornare tristique felis.</p>
</article>
<article class="third"> <h2>Title of the article</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at pellentesque sapien. Proin iaculis nisi risus, nec gravida magna tristique nec.</p>
</article>
</div>
</div>
</body>
</html>
Animation SVG with SMIL - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
body{ background-color:#353535;
}
#container{ position:absolute; width:1000px; background-color:#353535; margin:auto; margin-left: 50%; transform: translate(-50%,0%);
}
article{ max-width: 300px;
}
.first{ position:absolute; top:100px; left:-70px; color:#da3d3e;
}
.second{ position:absolute; left:400px; top:300px; color:#0071bb;
}
.third{ position:absolute; left:730px; top:40px; color:#37b34a;
}
article{ font-family:'Lato', sans-serif;
}
article h2{ font-size:30px; font-weight:900; margin:0; padding:0;
}
| Developer | Tommaso Poletti |
| Username | tomma5o |
| Uploaded | October 14, 2022 |
| Rating | 4.5 |
| Size | 11,419 Kb |
| Views | 22,264 |
Do you need developer help for Animation SVG with SMIL?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Tommaso Poletti (tomma5o) Script Codes
| Name | Size |
| Site Under Construction SVG animation | 3,647 Kb |
| Mappa-interattiva | 3,758 Kb |
| Menu Material Fixed | 3,362 Kb |
| Washing Machine UI | 3,267 Kb |
| Button Ripple Effect - VanillaJS | 3,095 Kb |
| Search with Right Click | 2,781 Kb |
| Css Codepen Profile | 2,791 Kb |
| Jelly Radio Button | 2,779 Kb |
| Simple Mobile Search input | 3,400 Kb |
| A Pen by Tommaso Poletti | 2,738 Kb |
Create amazing Facebook ads with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Sass Get Function | Lukewatts | 2,155 Kb |
| Twitch Live Channels | Inkblotty | 4,956 Kb |
| Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
| Portfolio Page | KaylaMT | 1,983 Kb |
| APortfolio | Skybutterfly | 5,174 Kb |
| Css3 loader | Clknap | 2,391 Kb |
| A vuejs widget | Chrgl86 | 2,869 Kb |
| Minimelephant | Smashlee | 2,507 Kb |
| Css3 only dropdown menu | Riogrande | 2,519 Kb |
| Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!