Another animated SVG sequence

Developer

Size

6,864 Kb

Views

14,168

Another animated SVG sequence Previews
Another animated SVG sequence HTML Codes
Another animated SVG sequence CSS Codes
Another animated SVG sequence JS Codes

How do I make an another animated svg sequence?

What is a another animated svg sequence? How do you make a another animated svg sequence? This script and codes were developed by Corinne Winthrop on 08 October 2022, Saturday.

Another animated SVG sequence Previews

Another animated SVG sequence - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Another animated SVG sequence</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article class="product-animation animation-flow"> <div class="product-animation__wrap"> <div class="product-animation__single product-animation__single--1" style="background-image:url('http://lorempixel.com/640/400/cats');"> <div class="product-animation__inside"> <div class="product-animation--create"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M182.3 146.6c71.9 0 130.3 58.3 130.3 130.3s-58.3 130.3-130.3 130.3S52.1 348.8 52.1 276.8s58.3-130.2 130.2-130.2zm301.8 575.6c11.7 0 23.5-4.4 32.4-13.4l167.8-167.7c17.8-17.8 17.9-46.7.1-64.5-17.8-17.8-46.7-17.8-64.5 0L484.4 610S339.6 445.2 302.5 445.2H87.9c-43 0-87.9 39.4-87.9 82.3v325.8h336.7V605.1l109.6 103.7c8.9 9 26.1 13.4 37.8 13.4zm-45.3-572.8v339l40.6 42.9 30.8-30.7V231h418.4v551H438.8v71.4H1000v-704H438.8z"></path></svg> </div> <h3>Create, Publish <br>&amp; Collaborate</h3> <div class="product-animation__dots product-animation__dots--1"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-957 452.1 1000 94" style="enable-background:new -957 452.1 1000 94;" xml:space="preserve">
<path class="dot--1" d="M-873.4,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-892.1,457.4-873.4,476.1-873.4,499.1z"/>
<path class="dot--3" d="M-644.3,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-663,457.4-644.3,476.1-644.3,499.1z"/>
<path class="dot--2" d="M-758.9,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-777.6,457.4-758.9,476.1-758.9,499.1z"/>
<path class="dot--6" d="M-300.7,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-319.4,457.4-300.7,476.1-300.7,499.1z"/>
<path class="dot--5" d="M-415.2,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-433.9,457.4-415.2,476.1-415.2,499.1z"/>
<path class="dot--4" d="M-529.8,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-548.5,457.4-529.8,476.1-529.8,499.1z"/>
<path class="dot--7" d="M-186.1,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-204.8,457.4-186.1,476.1-186.1,499.1z"/>
<path class="dot--8" d="M-71.6,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-90.3,457.4-71.6,476.1-71.6,499.1z"/>
<path class="dot--9" d="M43,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C24.3,457.4,43,476.1,43,499.1z"/>
</svg> </div> </div> </div> <div class="product-animation__single product-animation__single--2" style="background-image:url('http://lorempixel.com/640/400/cats');"> <div class="product-animation__inside"> <div class="product-animation--teach"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M338.9 684.8h40.7v-2.5c0-98.9-75.8-180.3-172.5-189.1 43.2-8.2 75-46.1 75-90.8 0-50.6-41.9-92.5-92.5-92.5s-92.5 41.9-92.5 92.5c0 44.7 31.8 82.7 75 90.8C75.5 502.1-.3 583.4-.3 682.4h40.7c0-82.6 66.6-149.2 149.2-149.2 82.7-.1 149.3 67.7 149.3 151.6zM137.8 401.1c0-28.4 23.4-51.8 51.8-51.8 29.6 0 53 23.4 51.8 51.8 0 28.4-23.4 51.8-51.8 51.8-28.3 0-51.8-23.4-51.8-51.8zM827.5 493.2c43.2-8.2 75-46.1 75-90.8 0-50.6-40.7-92.5-92.5-92.5-50.6 0-92.5 41.9-92.5 92.5 0 44.7 31.8 82.7 75 90.8C695.8 502 620 583.4 620 682.3h40.7c0-82.6 66.6-149.2 149.2-149.2s149.2 67.8 149.2 151.7h40.7v-2.5c.2-98.9-75.6-180.2-172.3-189.1zm-69.2-92.1c0-28.4 23.4-51.8 51.8-51.8 29.6 0 53 23.4 51.8 51.8 0 28.4-23.4 51.8-51.8 51.8s-51.8-23.4-51.8-51.8zM489.4 166.8c74.2 0 144.7 24.6 203 69.1l-64.8-2.5 40.7 43.2 97.4 3.7 2.5-98.7-39.5-41.9-2.7 70.4c-66.8-54.2-149.2-84-236.6-84-111 0-215.8 49.3-287.4 135.7l30.8 25.9c64.2-76.5 157.9-120.9 256.6-120.9zM494.3 834.1c-74.1 0-144.6-24.6-202.9-69l63.5 2.4-39.5-43.2-97.4-2.5-3.7 97.4 40.7 41.9 1.8-71.1c66.9 54.6 149.7 84.7 237.5 84.7 111 0 215.8-49.3 286.2-134.4l-30.8-25.9c-63 76.5-156.7 119.7-255.4 119.7z"></path></svg> </div> <h3>Teach &amp; Train</h3> <div class="product-animation__dots product-animation__dots--2"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-957 452.1 1000 94" style="enable-background:new -957 452.1 1000 94;" xml:space="preserve">
<path class="dot--10" d="M-873.4,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-892.1,457.4-873.4,476.1-873.4,499.1z"/>
<path class="dot--12" d="M-644.3,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-663,457.4-644.3,476.1-644.3,499.1z"/>
<path class="dot--11" d="M-758.9,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-777.6,457.4-758.9,476.1-758.9,499.1z"/>
<path class="dot--15" d="M-300.7,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-319.4,457.4-300.7,476.1-300.7,499.1z"/>
<path class="dot--14" d="M-415.2,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-433.9,457.4-415.2,476.1-415.2,499.1z"/>
<path class="dot--13" d="M-529.8,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-548.5,457.4-529.8,476.1-529.8,499.1z"/>
<path class="dot--16" d="M-186.1,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-204.8,457.4-186.1,476.1-186.1,499.1z"/>
<path class="dot--17" d="M-71.6,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-90.3,457.4-71.6,476.1-71.6,499.1z"/>
<path class="dot--18" d="M43,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C24.3,457.4,43,476.1,43,499.1z"/>
</svg> </div> </div> </div> <div class="product-animation__single product-animation__single--3" style="background-image:url('http://lorempixel.com/640/400/cats');"> <div class="product-animation__inside"> <div class="product-animation--operate"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M568.6 605.6c11.6 11.6 30.5 11.6 42.1 0 11.6-11.6 11.6-30.5 0-42.1l-68.4-68.3V378.9c0-16.4-13.3-29.7-29.7-29.7s-29.7 13.3-29.7 29.7v128.7c0 8.2 3.3 15.7 8.7 21l77 77z"></path><path d="M512.6 755C648.9 755 760 643.9 760 507.6S648.9 260.2 512.6 260.2 265.2 371.3 265.2 507.5c0 136.3 111.1 247.5 247.4 247.5zm0-435.5c104.2 0 188 83.8 188 188s-83.8 188-188 188-188-83.8-188-188 83.8-188 188-188zM766.3 237.9c4.9 4.9 11.5 6.6 16.4 6.6 6.6 0 13.1-3.3 18.1-8.2 9.9-9.9 8.2-26.3-1.6-34.5-6.6-6.6-14.8-14.8-24.7-21.4-9.9-8.2-26.3-6.6-34.5 3.3-8.2 9.9-6.6 26.3 3.3 34.5 8.2 6.5 16.4 13.1 23 19.7z"></path><path d="M126.9 433.4c34.5-144.6 149.6-259.7 297.5-290.9 80.5-16.4 164.4-6.6 240 27.9 13.1 4.9 26.3 0 32.9-11.5 6.6-13.1 1.6-27.9-11.5-34.5C628.2 98.1 567.4 85 504.9 85c-29.6 0-59.2 3.3-88.8 9.9-170.9 36.1-304 170.9-338.5 340.2H2l98.6 169.3 97-170.9h-70.7zM843.5 336.5c4.9 8.2 13.1 13.1 21.4 13.1 3.3 0 8.2-1.6 11.5-3.3 11.5-6.6 16.4-23 9.9-34.5-4.9-9.9-11.5-19.7-18.1-29.6-6.6-11.5-23-14.8-34.5-6.6-11.5 8.2-14.8 23-6.6 34.5 4.9 8.3 11.5 18.1 16.4 26.4zM156.5 665.2c-6.6-11.5-21.4-16.4-32.9-9.9-11.5 6.6-16.4 21.4-9.9 32.9 4.9 9.9 11.5 19.7 18.1 29.6 4.9 6.6 13.1 11.5 21.4 11.5 4.9 0 9.9-1.6 13.1-3.3 11.5-8.2 14.8-23 6.6-34.5-6.5-8.2-11.5-16.5-16.4-26.3zM255.1 783.5c-8.2-6.6-16.4-13.1-23-19.7-9.9-9.9-26.3-8.2-34.5 1.6-9.9 9.9-8.2 26.3 1.6 34.5 8.2 8.2 18.1 14.8 26.3 23 4.9 3.3 9.9 4.9 14.8 4.9 6.6 0 14.8-3.3 19.7-9.9 8.3-11.4 6.6-26.2-4.9-34.4zM899.4 397.3l-97 170.9h70.7c-34.5 144.6-149.6 259.7-297.5 290.9-82.2 16.4-164.4 6.6-240-27.9-13.1-4.9-26.3 0-32.9 11.5-4.9 13.1 0 26.3 11.5 32.9C371.7 901.9 432.5 915 495 915c29.6 0 59.2-3.3 88.8-9.9 171-36.1 304.1-170.9 338.6-340.2l75.6 1.6-98.6-169.2z"></path></svg> </div> <h3>Operate <br> Effectively</h3> <div class="product-animation__dots product-animation__dots--3"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-957 452.1 1000 94" style="enable-background:new -957 452.1 1000 94;" xml:space="preserve">
<path class="dot--19" d="M-873.4,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-892.1,457.4-873.4,476.1-873.4,499.1z"/>
<path class="dot--21" d="M-644.3,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-663,457.4-644.3,476.1-644.3,499.1z"/>
<path class="dot--20" d="M-758.9,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-777.6,457.4-758.9,476.1-758.9,499.1z"/>
<path class="dot--24" d="M-300.7,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-319.4,457.4-300.7,476.1-300.7,499.1z"/>
<path class="dot--23" d="M-415.2,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-433.9,457.4-415.2,476.1-415.2,499.1z"/>
<path class="dot--22" d="M-529.8,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-548.5,457.4-529.8,476.1-529.8,499.1z"/>
<path class="dot--25" d="M-186.1,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-204.8,457.4-186.1,476.1-186.1,499.1z"/>
<path class="dot--26" d="M-71.6,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-90.3,457.4-71.6,476.1-71.6,499.1z"/>
<path class="dot--27" d="M43,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C24.3,457.4,43,476.1,43,499.1z"/>
</svg> </div> </div> </div> <div class="product-animation__single product-animation__single--4" style="background-image:url('http://lorempixel.com/640/400/cats');"> <div class="product-animation__inside"> <div class="product-animation--analyze"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<path d="M959.3,717.9L799.5,558.1c39.5-49.1,63.2-111.5,63.2-179.4c0-158.3-128.3-286.6-286.6-286.6S289.5,220.4,289.5,378.7 c0,88,39.7,166.7,102.1,219.3L360,643.1l-69.7-59.8c-4.3-3.7-10.2-5.2-15.8-4c-5.6,1.2-10.3,5-12.7,10.2L200,723.7l-54.4-54.4 c-4.4-4.4-10.8-6.3-16.9-4.9c-6.1,1.4-11.1,5.8-13.1,11.7L71.8,799.9V99.2c0-10.1-8.2-18.2-18.2-18.2s-18.2,8.2-18.2,18.2v801.6 c0,4.8,1.9,9.5,5.3,12.9c3.4,3.4,8.1,5.3,12.9,5.3h801.6c10.1,0,18.2-8.2,18.2-18.2s-8.2-18.2-18.2-18.2H727.8v-42.5 c0-10.1-8.2-18.2-18.2-18.2s-18.2,8.2-18.2,18.2v42.5H509.2v-42.5c0-10.1-8.2-18.2-18.2-18.2c-10.1,0-18.2,8.2-18.2,18.2v42.5H290.6 v-42.5c0-10.1-8.2-18.2-18.2-18.2c-10.1,0-18.2,8.2-18.2,18.2v42.5H81.3l59-167.1l52.4,52.4c4.2,4.2,10.2,6.1,16.1,5.1 c5.9-1,10.8-4.9,13.3-10.3l62.8-136l66.7,57.2c3.9,3.3,9,4.9,14.1,4.3c5.1-0.6,9.7-3.4,12.6-7.6l42.6-60.9 c44.7,28.9,97.9,45.7,155.1,45.7c77.2,0,147.2-30.6,198.8-80.2l158.6,158.6c7.1,7.1,18.6,7.1,25.8,0 C966.4,736.5,966.4,725,959.3,717.9z M412.9,567.7c-53.1-45.9-86.8-113.5-86.8-189c0-137.9,112.2-250.1,250.1-250.1 s250.1,112.2,250.1,250.1c0,137.9-112.2,250.1-250.1,250.1c-49.3,0-95.3-14.6-134.1-39.3"></path>
<path id="graph-arrow-up" d="M440.1,597.5l193.3-276l17.2,124.7c1.4,10,10.6,16.9,20.5,15.6c10-1.4,16.9-10.6,15.6-20.5L665,283.8l0,0 c-0.9-7-4.4-13.5-9.6-18c-5.2-4.6-12-7.1-19-7.1c-2.5,0-5,0.3-7.4,0.9l-154,39.3c-9.8,2.5-15.6,12.4-13.1,22.2 c2.5,9.7,12.4,15.6,22.2,13.1l0,0l116.8-29.9l-190,271.4"></path>
</svg> </div> <h3>Analyze &amp; Assess <br>Performance</h3> <div class="product-animation__dots product-animation__dots--4"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-957 452.1 1000 94" style="enable-background:new -957 452.1 1000 94;" xml:space="preserve">
<path class="dot--28" d="M-873.4,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-892.1,457.4-873.4,476.1-873.4,499.1z"/>
<path class="dot--30" d="M-644.3,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-663,457.4-644.3,476.1-644.3,499.1z"/>
<path class="dot--29" d="M-758.9,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-777.6,457.4-758.9,476.1-758.9,499.1z"/>
<path class="dot--33" d="M-300.7,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-319.4,457.4-300.7,476.1-300.7,499.1z"/>
<path class="dot--32" d="M-415.2,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-433.9,457.4-415.2,476.1-415.2,499.1z"/>
<path class="dot--31" d="M-529.8,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-548.5,457.4-529.8,476.1-529.8,499.1z"/>
<path class="dot--34" d="M-186.1,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-204.8,457.4-186.1,476.1-186.1,499.1z"/>
<path class="dot--35" d="M-71.6,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C-90.3,457.4-71.6,476.1-71.6,499.1z"/>
<path class="dot--36" d="M43,499.1c0,25.9-23.7,46.2-50.6,40.8c-15.8-3.2-28.6-15.9-32-31.6c-5.8-27,14.7-50.8,40.8-50.8	C24.3,457.4,43,476.1,43,499.1z"/>
</svg> </div> </div> </div> </div>
</article> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Another animated SVG sequence - Script Codes CSS Codes

/*------------------------------------*\ ::Product Animation Module Layout
\*------------------------------------*/
.product-animation svg { width: 90px; height: 90px; fill: white;
}
.product-animation__wrap { display: flex;
}
.product-animation__single { position: relative; width: 25%; background-position: center; background-size: cover; background-repeat: no-repeat;
}
.product-animation__single:after { content: ''; position: absolute; z-index: 20; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4);
}
.product-animation__inside { position: relative; z-index: 50; padding: 60px 0.9375rem 50px; text-align: center;
}
.product-animation__inside h3 { color: white; line-height: 1.3; font-size: 22px; margin-top: 0.2em;
}
.product-animation__dots { position: absolute; right: 0; top: 60px; width: 45%; margin-right: -23%;
}
.product-animation__dots svg { width: 100%; height: 90px;
}
@media screen and (max-width: 800px) { .product-animation__wrap { flex-wrap: wrap; } .product-animation__single { width: 50%; } .product-animation__dots { width: 30%; } .product-animation__dots--1 { margin-right: -15%; } .product-animation__dots--2 { left: -30%; bottom: -113%; top: 0; transform: rotate(90deg); right: 0; margin-right: 0; } .product-animation__dots--3 { right: auto; left: -15%; transform: scaleX(-1); } .product-animation__dots--4 { left: 35%; top: -17%; transform: rotate(90deg) scaleX(-1); right: 0; margin-right: 0; }
}
@media screen and (min-width: 501px) and (max-width: 800px) { .product-animation__single--3 { order: 4; } .product-animation__single--4 { order: 3; }
}
@media screen and (max-width: 500px) { .product-animation__single { width: 100%; } .product-animation__dots { width: 15%; left: -3%; bottom: -100%; top: 0; transform: rotate(90deg); right: 0; margin-right: 0; } .product-animation__dots--2 { left: 3%; } .product-animation__dots--4 { display: none; }
}
.animation-flow .product-animation--create svg { animation: startGreen 1s 1, turnGreen 1s 9.8s 1;
}
.animation-flow .product-animation--teach svg { animation: turnGreen 2.0s ease-in-out 1.8s 1;
}
.animation-flow .product-animation--operate svg { animation: turnGreen 2.0s ease-in-out 4.4s 1;
}
.animation-flow .product-animation--analyze svg { animation: turnGreen 2.0s ease-in-out 7s 1;
}
.animation-flow .dot--1 { animation: whiteGreenFade 2.0s 0s 1;
}
.animation-flow .dot--2 { animation: whiteGreenFade 2.0s 0.2s 1;
}
.animation-flow .dot--3 { animation: whiteGreenFade 2.0s 0.4s 1;
}
.animation-flow .dot--4 { animation: whiteGreenFade 2.0s 0.6s 1;
}
.animation-flow .dot--5 { animation: whiteGreenFade 2.0s 0.8s 1;
}
.animation-flow .dot--6 { animation: whiteGreenFade 2.0s 1.0s 1;
}
.animation-flow .dot--7 { animation: whiteGreenFade 2.0s 1.2s 1;
}
.animation-flow .dot--8 { animation: whiteGreenFade 2.0s 1.4s 1;
}
.animation-flow .dot--9 { animation: whiteGreenFade 2.0s 1.6s 1;
}
.animation-flow .dot--10 { animation: whiteGreenFade 2.0s 2.6s 1;
}
.animation-flow .dot--11 { animation: whiteGreenFade 2.0s 2.8s 1;
}
.animation-flow .dot--12 { animation: whiteGreenFade 2.0s 3.0s 1;
}
.animation-flow .dot--13 { animation: whiteGreenFade 2.0s 3.2s 1;
}
.animation-flow .dot--14 { animation: whiteGreenFade 2.0s 3.4s 1;
}
.animation-flow .dot--15 { animation: whiteGreenFade 2.0s 3.6s 1;
}
.animation-flow .dot--16 { animation: whiteGreenFade 2.0s 3.8s 1;
}
.animation-flow .dot--17 { animation: whiteGreenFade 2.0s 4.0s 1;
}
.animation-flow .dot--18 { animation: whiteGreenFade 2.0s 4.2s 1;
}
.animation-flow .dot--19 { animation: whiteGreenFade 2.0s 5.2s 1;
}
.animation-flow .dot--20 { animation: whiteGreenFade 2.0s 5.4s 1;
}
.animation-flow .dot--21 { animation: whiteGreenFade 2.0s 5.6s 1;
}
.animation-flow .dot--22 { animation: whiteGreenFade 2.0s 5.8s 1;
}
.animation-flow .dot--23 { animation: whiteGreenFade 2.0s 6.0s 1;
}
.animation-flow .dot--24 { animation: whiteGreenFade 2.0s 6.2s 1;
}
.animation-flow .dot--25 { animation: whiteGreenFade 2.0s 6.4s 1;
}
.animation-flow .dot--26 { animation: whiteGreenFade 2.0s 6.6s 1;
}
.animation-flow .dot--27 { animation: whiteGreenFade 2.0s 6.8s 1;
}
.animation-flow .dot--28 { animation: whiteGreenFade 2.0s 7.8s 1;
}
.animation-flow .dot--29 { animation: whiteGreenFade 2.0s 8.0s 1;
}
.animation-flow .dot--30 { animation: whiteGreenFade 2.0s 8.2s 1;
}
.animation-flow .dot--31 { animation: whiteGreenFade 2.0s 8.4s 1;
}
.animation-flow .dot--32 { animation: whiteGreenFade 2.0s 8.6s 1;
}
.animation-flow .dot--33 { animation: whiteGreenFade 2.0s 8.8s 1;
}
.animation-flow .dot--34 { animation: whiteGreenFade 2.0s 9.0s 1;
}
.animation-flow .dot--35 { animation: whiteGreenFade 2.0s 9.2s 1;
}
.animation-flow .dot--36 { animation: whiteGreenFade 2.0s 9.4s 1;
}
@keyframes whiteGreenFade { 0%, 100% { fill: white; } 50% { fill: #7cbf47; }
}
@keyframes startGreen { 0%, 50% { fill: #7cbf47; } 100% { fill: white; }
}
@keyframes turnGreen { 0%, 100% { fill: white; } 50% { fill: #7cbf47; }
}

Another animated SVG sequence - Script Codes JS Codes

var $wrap = $(".product-animation");
setInterval(function(){ // toggle the class every 10 seconds $wrap.toggleClass('animation-flow'); setTimeout(function(){ // toggle back after 1 second $wrap.toggleClass('animation-flow'); },1000)
},12000);

Home Page	Home
Developer	Corinne Winthrop
Username	cwint
Uploaded	October 08, 2022
Rating	3
Size	6,864 Kb
Views	14,168

Do you need developer help for Another animated SVG sequence?

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!

Corinne Winthrop (cwint) Script Codes

Name	Size
Zenman Front-End Dev interview homework	3,030 Kb
Google map with toggle categories	32,056 Kb
VUE	1,578 Kb
A Pen by Corinne Winthrop	3,226 Kb
Tic Tac Code	4,142 Kb
Email obfuscation test	3,078 Kb
Animated SVG sequence	12,723 Kb
Crazy Cat Lady Application	4,404 Kb
Pinned scrolling sections	4,467 Kb
Responsive Image Tiling	2,264 Kb

Create amazing blog posts 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
Sticky Navbar	Phantomesse	5,106 Kb
Sample Profile Screen	OurDailyBread	5,375 Kb
Simple animated hover effect	Pobee-norris	3,044 Kb
JS Beispiel getElementsByClassName 3	HSZG-Frontend-Kurs	1,988 Kb
Use the Twitchtv JSON API	Roksanaop	3,561 Kb
Count up	Alanshortis	2,391 Kb
Importable Clearfix	Corysimmons	1,411 Kb
Tab panels	Accessibility	0 Kb
Tree growth tests	Orchard	3,818 Kb
Fun animations with CSS3	Minimalmonkey	2,360 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!