Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>GSAP Morph SVG</h1>
<a href="https://greensock.com/morphsvg" target="_blank" rel="nofollow noopener">Read docs here</a>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

	<path id="circle" d="M256 0C115.39 0 0 115.39 0 256s115.39 256 256 256 256-115.39 256-256S396.61 0 256 0z" />

	<path id="star" d="M509.759 194.639c-6.152-18.858-22.945-31.043-42.781-31.043H339.06l-40.282-122.33c-6.192-18.805-22.95-30.926-42.729-30.926l-.191.001c-19.86.078-36.611 12.349-42.674 31.262l-39.108 121.993H45.093c-19.886 0-36.692 12.226-42.814 31.146-6.123 18.92.335 38.674 16.453 50.324L123.093 320.5l-40.17 121.991c-6.217 18.88.133 38.662 16.177 50.396 8.058 5.894 17.307 8.842 26.562 8.842 9.171-.001 18.347-2.897 26.365-8.693l104.542-75.563 103.3 75.436c16.026 11.704 36.781 11.76 52.873.147s22.575-31.328 16.518-50.227L390.042 320.5l103.474-75.563c16.02-11.698 22.396-31.441 16.243-50.298z" />

	<path id="heart" d="M471.383 44.578C444.879 15.832 408.512 0 368.973 0c-29.555 0-56.621 9.344-80.45 27.77C276.5 37.07 265.605 48.45 256 61.73c-9.602-13.277-20.5-24.66-32.527-33.96C199.648 9.344 172.582 0 143.027 0c-39.539 0-75.91 15.832-102.414 44.578C14.426 72.988 0 111.801 0 153.871c0 43.3 16.137 82.938 50.781 124.742 30.992 37.395 75.535 75.356 127.117 119.313 17.614 15.012 37.579 32.027 58.309 50.152A30.023 30.023 0 00256 455.516c7.285 0 14.316-2.641 19.785-7.43 20.73-18.129 40.707-35.152 58.328-50.172 51.575-43.95 96.117-81.906 127.11-119.305C495.867 236.81 512 197.172 512 153.867c0-42.066-14.426-80.879-40.617-109.289zm0 0" />

	<path id="triangle" d="M507.521 427.394L282.655 52.617c-12.074-20.122-41.237-20.122-53.311 0L4.479 427.394c-12.433 20.72 2.493 47.08 26.655 47.08h449.732c24.163 0 39.089-26.36 26.655-47.08z" />

	<path id="square" d="M489.609 0H16.491C7.383 0 0 7.383 0 16.491v473.118c0 9.107 7.383 16.491 16.491 16.491H489.61c9.107 0 16.49-7.383 16.49-16.491V16.491C506.1 7.383 498.717 0 489.609 0z" />

	<path id="pentagon" d="M507.804 200.28L262.471 12.866a10.657 10.657 0 00-12.949 0L4.188 200.28C.583 203.053-.889 207.811.54 212.12l93.717 281.92a10.647 10.647 0 0010.133 7.296h303.253c4.587 0 8.683-2.944 10.133-7.296l93.717-281.92a10.779 10.779 0 00-3.689-11.84z" />

	<path id="tick" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />

</svg>
              
            
!

CSS

              
                body {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: linear-gradient(70deg, #eee 0%, #ccc 100%);
	font-family: "Signika Negative", sans-serif;
}

h1 {
	margin: 0;
}

a {
	color: dodgerblue;
	transition: all 160ms ease;

	&:hover,
	&:focus {
		color: darkorange;
	}
}

svg {
	height: 60vmin;
	fill: #444;
}

path:not(#circle) {
	visibility: hidden;
}

              
            
!

JS

              
                const tl = gsap.timeline({ repeat: -1 }),
	circle = document.getElementById("circle"),
	star = document.getElementById("star"),
	heart = document.getElementById("heart"),
	triangle = document.getElementById("triangle");
square = document.getElementById("square");
pentagon = document.getElementById("pentagon");
tick = document.getElementById("tick");

tl
	.to(circle, { morphSVG: heart }, "+=1")
	.to(circle, { morphSVG: triangle }, "+=1")
	.to(circle, { morphSVG: square }, "+=1")
	.to(circle, { morphSVG: pentagon }, "+=1")
	.to(circle, { morphSVG: star }, "+=1")
	.to(circle, { morphSVG: tick }, "+=1")
	.to(circle, { morphSVG: circle }, "+=1");

              
            
!
999px

Console