<!-- drag the flower petals to spin! -->

<div id="container">
	<p>hold and drag the petals to spin </p>
	<svg viewBox="-20 -20 750 900">
		<defs>
			<radialGradient id="myGradient">
				<stop offset="0%" stop-color="rgba(252,59,143,1)" />
				<stop offset="10%" stop-color="rgb(255, 182, 0)" />
				<stop offset="100%" stop-color="white" />
			</radialGradient>
			<radialGradient id="myGradient2">
				<stop offset="80%" stop-color="#f4de7f" />
				<stop offset="100%" stop-color="rgb(255, 182, 0)" />
			</radialGradient>
		</defs>
		<rect class="cls-1" x="348.59" y="500" width="30" height="700" fill="#5fd399" />
		<path id="spinner" class="cls-1" d="M831.85,385.62c-25.93-3-49.79-1.61-67.05,3.11a135,135,0,0,0-2-17c18,5,45.16,5,74.56-1.12,49.21-10.21,156.46-48.28,152.57-67s-117.41-11-166.62-.75C791,309.63,764,322.07,750.41,335.13a135.14,135.14,0,0,0-10.85-17.69c18.7-1.76,46.48-16.14,72.79-39.23,37.77-33.15,112.3-119.15,99.7-133.51S804.5,193.07,766.72,226.22c-26.76,23.48-44.78,49.64-48.55,68a135.17,135.17,0,0,0-15.94-11.74c15.55-10.62,33.14-35.32,45.87-66.65,18.91-46.57,47-156.85,29.27-164s-74.46,91.45-93.37,138c-12.32,30.35-17,59.43-13.91,78A134.06,134.06,0,0,0,650,263.34c8.78-16.48,14.6-43.31,14.8-73.64.33-50.26-14.42-163.1-33.52-163.23S595.91,139,595.58,189.24c-.2,30.72,5.41,57.91,14.16,74.45a132.12,132.12,0,0,0-19.15,4.52c6-17.83,5.5-47.9-2.78-80.39C575.4,139.11,532.56,33.69,514.05,38.4s-5.68,117.79,6.73,166.5c9.34,36.66,25.85,65.92,41.34,76.14a135,135,0,0,0-19.79,14.5c5.89-16.92-9.38-52-38.18-84.84C471,172.94,385,98.43,370.62,111S419,218.58,452.16,256.34c29.65,33.77,63.56,53.63,80.68,48.46a134.28,134.28,0,0,0-19.56,27.14c-5.32-17.54-31.59-40.89-67.46-58.09-45.31-21.73-153.67-56.52-161.93-39.29s86.7,79.93,132,101.67A218.89,218.89,0,0,0,456,351c-6.9-.66-14.11-1-21.52-1-50.26-.13-163,15.07-163.09,34.17s112.65,34.88,162.91,35c24.62.07,47-3.6,63.36-9.59q.6,5.91,1.7,11.66c-18.4-4-47.67-.61-78.57,10.32-47.38,16.76-148.51,68.95-142.14,87s117.83-5,165.21-21.74c30.57-10.81,55.25-26.38,67.21-40.9a134.93,134.93,0,0,0,7,12.35c-16.17,6.33-35.16,18.16-53.45,34.2-37.77,33.15-112.3,119.15-99.7,133.51s107.55-48.36,145.33-81.51c18.93-16.61,33.5-34.57,41.74-50.16,2.24,1.64,4.53,3.22,6.88,4.72-14.52,11.91-29.43,39.63-38.12,73.76-12.41,48.7-25.24,161.78-6.73,166.49s61.35-100.71,73.76-149.41c7.58-29.73,8.67-57.43,4.18-75.59a132.49,132.49,0,0,0,19.09,4.3c-9.51,16.23-15.71,44.6-15.5,76.86.33,50.26,16.55,162.9,35.66,162.77s33.85-113,33.52-163.22c-.21-31.88-6.63-59.89-16.17-76.08a132.94,132.94,0,0,0,26.85-6.41c-.55,16,1.61,35.2,6.75,55.37,12.41,48.7,55.25,154.13,73.76,149.41s5.68-117.79-6.73-166.49c-6.92-27.16-17.77-50.25-29.23-64.56A134,134,0,0,0,733.5,482.3c8.14,15.81,22.9,34.16,42.22,51.11,37.78,33.15,132.73,95.87,145.33,81.51s-61.93-100.36-99.7-133.51c-22.87-20.07-46.86-33.56-65-37.9,1-2.57,1.88-5.17,2.7-7.82,15.71,8.65,38.72,15.59,64.8,18.64,49.92,5.84,163.7,3.54,165.91-15.43S881.77,391.46,831.85,385.62ZM504.38,352.06q-1.59,4.57-2.85,9.3a127.51,127.51,0,0,0-19.7-6.22C491,355.58,498.76,354.57,504.38,352.06Z" transform="translate(-271.41 -26.47)" fill="url('#myGradient')" />
		<circle cx="359.59" cy="370.53" r="134" fill="url('#myGradient2')" />
		<g id="eyes">
			<circle cx="309.09" cy="349.03" r="28.5" fill="#2d2d2d" />
			<circle cx="412.09" cy="349.03" r="28.5" fill="#2d2d2d" />
			<circle id="inner-eye" class="cls-3" cx="419.09" cy="343.03" r="10.5" />
			<circle id="inner-eye" class="cls-3" cx="316.09" cy="343.03" r="10.5" />
		</g>
		<path id="mouth" d="M604,428h57S636,471,604,428Z" transform="translate(-271.41 -26.47)" fill="#2d2d2d" />
		<circle id="ooh" cx="360" cy="410" r="10" fill="#2d2d2d" />
		<g id="eyelid-bottom">
			<rect class="cls-2" x="274.59" y="377.53" width="67" height="13" />
			<rect class="cls-2" x="378.59" y="377.53" width="67" height="13" />
		</g>
		<g id="eyelid-top">
			<rect class="cls-2" x="274.59" y="307.53" width="67" height="13" />
			<rect class="cls-2" x="378.59" y="307.53" width="67" height="13" />
		</g>
	</svg>
</div>
* {
	box-sizing: border-box;
}

:root {
	--size: 100;
	--unit: calc(var(--size) * 1vmin);
}

body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffd3da;
	font-family: courier;
}

#container {
	height: calc(var(--unit));
	width: calc(var(--unit));
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

svg {
	height: 70%;
}

.cls-2 {
	fill: #f4de7f;
}

.cls-3 {
	fill: #fff;
}
View Compiled
gsap.registerPlugin(Draggable);
gsap.set("#spinner", { transformOrigin: "12.3% 46.4%" });
gsap.set("#inner-eye", { scale: 0.7 });

Draggable.create("#spinner", {
	type: "rotation",
	throwProps: true,
	edgeResistance: 0.8,
	onDrag: ooh,
	onDragEnd: eyeSpin
});

function blink(eyelid, origin) {
	let tl = gsap.timeline({ repeat: -1, repeatDelay: 4 });
	tl.fromTo(
		eyelid,
		0.5,
		{
			scaleY: 4,
			transformOrigin: origin
		},
		{
			scaleY: 0
		}
	);
}
blink("#eyelid-top", "center top");
blink("#eyelid-bottom", "center bottom");

function eyeMove() {
	let tl = gsap.timeline({ repeat: -1, repeatDelay: 3, yoyo: true });
	tl.to("#inner-eye", 3, {
		x: "-=10",
		y: "+=1"
	});
}

gsap.set("#mouth", { scale: 1.3, transformOrigin: "center" });
gsap.set("#inner-eye", { transformOrigin: "bottom center" });

function ooh() {
	gsap.fromTo(
		"#mouth",
		0.01,
		{ opacity: 0 },
		{
			opacity: 1
		}
	);
	gsap.fromTo(
		"#eyelid-bottom",
		0.5,
		{
			scaleY: 1.5,
			transformOrigin: "bottom center"
		},
		{
			scaleY: 0
		}
	);
	gsap.fromTo(
		"#eyelid-top",
		0.5,
		{
			scaleY: 1.5,
			transformOrigin: "center top"
		},
		{
			scaleY: 0
		}
	);
}

function eyeSpin() {
	let tl = gsap.timeline({ yoyo: true });
	tl.fromTo(
		"#inner-eye",
		2,
		{
			rotation: -360
		},
		{
			rotation: 0,
			ease: "elastic.out(1, 0.3)"
		}
	);
}

eyeMove();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/utils/Draggable.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js