About GSAP
GSAP (GreenSock Animation Platform) is a robust
high-performance JavaScript animation library.
Read more at: https://greensock.com/docs/
The html-file
The Javascript-file
Diagram
Code from the external SVG-file
<svg xmlns="http://www.w3.org/2000/svg" id="mysvg" viewBox="0 0 1460 930">
<style type="text/css">
.st1{fill:#FFFFFF;}
.st2{fill:#FC5B6B;}
</style>
<g id="m1" class="item m1">
<path id="m1black" d="M348.7,666.5c-60.1,72.5-62.9,104-62.9,104c-2.1,15.3,8.6,20.8,8.6,20.8l2.6,0.8c1.6,0.3,1.6,1.6,1.6,1.6 c0.3,0.8-1.6,1.3-1.6,1.3c-27.3,0.5-28.6-27.3-28.6-27.3c-1-7.3,3.4-21.3,3.4-21.3c1.6-4.7,3.6-10.1,6.8-16.4 c10.4-21.3,39.8-60.6,39.8-60.6l-0.5-0.3c-54.6,62.4-71,85-71,85c-14.8,22.4-20.3,35.6-20.3,35.6c-1.6,2.6,0.3,4.9,0.3,4.9 c0.8,1,0,2.1,0,2.1c-0.5,1.3-3.4,0.3-3.4,0.3c-13.5-7.3-13.5-19.8-13.5-19.8c-1-4.7,6.8-19.8,6.8-19.8c30.4-57.2,58-95.2,58-95.2 l-0.5-0.5c-76.7,81.1-90.5,100.6-90.5,100.6c-17.4,24.4-16.6,33.3-16.6,33.3c0,1.8,1.3,4.7,1.3,4.7c0.8,1.6-1,2.9-1,2.9 c-1.6,1.3-3.9-0.8-3.9-0.8c-12.7-12.2-12.7-20.3-12.7-20.3c-3.6-5.5,13.5-30.9,13.5-30.9c49.7-69.9,54.9-78.5,54.9-78.5 c14.3-20.5,14.8-26.3,14.8-26.3c0.8-1.6-0.8-1-0.8-1c-33.3,12.5-63.7,36.9-63.7,36.9c-34.1,26.3-44.2,40-44.2,40 c-0.3,1,4.7,1.3,4.7,1.3c2.1-0.3,2.1,1.6,2.1,1.6c0.5,0.8-1.3,1.6-1.3,1.6c-10.1,4.7-16.4-1.3-16.4-1.3 c-8.8-7.5-11.7-15.6-11.7-15.6c-1.3-1.3,2.6-4.4,2.6-4.4c16.9-13.5,37.7-28.1,37.7-28.1c15.3-11.4,33.3-21.8,47.6-28.9 c23.7-11.4,34.6-13,34.6-13c7-1,12.5,3.9,12.5,3.9l4.9,4.7c5.5,5.2,3.4,14.8,3.4,14.8c-3.1,18.7-23.4,45.8-23.4,45.8 c-12.5,16.9-15.6,20-15.6,20l0.5,0.8l54.1-61.9l17.7-20.3c2.6-3.6,5.7-3.6,5.7-3.6c1.8-0.5,5.5,2.6,5.5,2.6 c8.6,7.5,11.4,10.4,11.4,10.4c3.9,3.6,0.3,9.1,0.3,9.1l-46.5,70.5l0.5,0.5c52.8-65.5,70.2-83.2,70.2-83.2c3.4-6.2,7.5-4.2,7.5-4.2 c8.3,5.2,15.3,12.5,15.3,12.5C354.1,661.1,348.7,666.5,348.7,666.5z"/>
<path id="m1white" class="st1" d="M347.7,656.5c-60.1,72.5-62.9,104-62.9,104c-2.1,15.3,8.6,20.8,8.6,20.8l2.6,0.8 c1.6,0.3,1.6,1.6,1.6,1.6c0.3,0.8-1.6,1.3-1.6,1.3c-27.3,0.5-28.6-27.3-28.6-27.3c-1-7.3,3.4-21.3,3.4-21.3 c1.6-4.7,3.6-10.1,6.8-16.4c10.4-21.3,39.8-60.6,39.8-60.6l-0.5-0.3c-54.6,62.4-71,85-71,85c-14.8,22.4-20.3,35.6-20.3,35.6 c-1.6,2.6,0.3,4.9,0.3,4.9c0.8,1,0,2.1,0,2.1c-0.5,1.3-3.4,0.3-3.4,0.3c-13.5-7.3-13.5-19.8-13.5-19.8c-1-4.7,6.8-19.8,6.8-19.8 c30.4-57.2,58-95.2,58-95.2l-0.5-0.5c-76.7,81.1-90.5,100.6-90.5,100.6c-17.4,24.4-16.6,33.3-16.6,33.3c0,1.8,1.3,4.7,1.3,4.7 c0.8,1.6-1,2.9-1,2.9c-1.6,1.3-3.9-0.8-3.9-0.8c-12.7-12.2-12.7-20.3-12.7-20.3c-3.6-5.5,13.5-30.9,13.5-30.9 c49.7-69.9,54.9-78.5,54.9-78.5c14.3-20.5,14.8-26.3,14.8-26.3c0.8-1.6-0.8-1-0.8-1c-33.3,12.5-63.7,36.9-63.7,36.9 c-34.1,26.3-44.2,40-44.2,40c-0.3,1,4.7,1.3,4.7,1.3c2.1-0.3,2.1,1.6,2.1,1.6c0.5,0.8-1.3,1.6-1.3,1.6c-10.1,4.7-16.4-1.3-16.4-1.3 c-8.8-7.5-11.7-15.6-11.7-15.6c-1.3-1.3,2.6-4.4,2.6-4.4c16.9-13.5,37.7-28.1,37.7-28.1c15.3-11.4,33.3-21.8,47.6-28.9 c23.7-11.4,34.6-13,34.6-13c7-1,12.5,3.9,12.5,3.9l4.9,4.7c5.5,5.2,3.4,14.8,3.4,14.8c-3.1,18.7-23.4,45.8-23.4,45.8 c-12.5,16.9-15.6,20-15.6,20l0.5,0.8l54.1-61.9l17.7-20.3c2.6-3.6,5.7-3.6,5.7-3.6c1.8-0.5,5.5,2.6,5.5,2.6 c8.6,7.5,11.4,10.4,11.4,10.4c3.9,3.6,0.3,9.1,0.3,9.1l-46.5,70.5l0.5,0.5c52.8-65.5,70.2-83.2,70.2-83.2c3.4-6.2,7.5-4.2,7.5-4.2 c8.3,5.2,15.3,12.5,15.3,12.5C353.1,651.1,347.7,656.5,347.7,656.5z"/>
</g>
<g id="e" class="item e">
<path id="eblack" d="M348.7,666.5c-60.1 . . . . . 6.5z"/>
<path id="ewhite" class="st1" d="M347.7,6 . . . . . 7,656.5z"/>
</g>
/* more <g> </g> elements here*/
</svg>
About Codepen
"Codepen" - https://codepen.io/ - is a social development environment - an online code editor for developers of any skill - that allows people to write code in the browser, and see the results of it as they build. Codepen is particularly useful for people learning to code.
View the full code for this pen at https://codepen.io/steinarV/pen/KKBKpPd
Here is a link to my blog: https://steinarv.design/blog
Thanks for watching !
Top comments (0)