Import and animate an external SVG file with Javascript and Gsap.
Tags: javascript, gsap, external, svg
Published: 2022-12-20 01:30:49

{% codepen https://codepen.io/steinarV/pen/KKBKpPd %}

## About GSAP

GSAP (GreenSock Animation Platform) is a robust 
high-performance JavaScript animation library. 
Read more at: https://greensock.com/docs/

## The html-file

![html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fba7vt8zytgo06rpehqo.png)

## The Javascript-file

![js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jftpavkelsxongig9mn9.png)

## Diagram

![Visualisation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usxm28u4jzjc7zn2pn1i.png)

## 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 !