<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>
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;
}
View Compiled
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");

External CSS

  1. https://fonts.googleapis.com/css2?family=Signika+Negative:wght@700&amp;display=swap

External JavaScript

  1. https://cdn.jsdelivr.net/npm/gsap@3.2.6/dist/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js