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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                .container
	.bubble-box
		.bubbles
		.bubbles
		.bubbles
		.bubbles
		.bubbles
		.bubbles
		- for (var i=0; i<20; i++)
			.bubbleFloat
	.eyelid
	.eyelid
	svg(viewBox="0 0 806 653", fill="none", xmlns="http://www.w3.org/2000/svg")
		circle#eye(cx="502.377", cy="155.203", r="25.0801", fill="black")
		circle#eye(cx="611.549", cy="155.203", r="25.0801", fill="black")
		path(
			fill-rule="evenodd",
			clip-rule="evenodd",
			d="M441.889 15.0499V70.8143H441.876V221.295L440.4 221.295H438.925V221.306C386.644 222.094 344.506 264.721 344.506 317.189C344.506 317.682 344.51 318.174 344.517 318.664H344.506L344.506 432.262C290.996 416.323 279.86 285.614 279.581 232.691C279.589 232.336 279.593 231.979 279.593 231.622C279.593 231.19 279.587 230.759 279.576 230.33C279.577 229.247 279.583 228.202 279.593 227.196L279.393 227.176C277.147 202.372 256.297 182.937 230.908 182.937C205.652 182.937 184.888 202.168 182.46 226.785C182.379 226.92 182.3 227.057 182.223 227.196C176.322 379.447 288.937 458.326 344.506 469.145L579.078 469.145L580.554 469.145V469.134C632.834 468.345 674.973 425.719 674.973 373.25C674.973 372.983 674.972 372.716 674.969 372.449C674.969 372.36 674.968 372.272 674.967 372.183C674.965 372.047 674.964 371.911 674.962 371.775H674.973V221.295V71.4081H674.986V15.3468C675.478 7.47851 662.594 -5.89754 648.431 3.54437C634.416 12.8874 603.837 51.8923 589.857 70.8143H527.238C513.36 52.0065 482.533 12.6397 468.445 3.24749C454.282 -6.19442 441.397 7.18163 441.889 15.0499ZM542.21 152.253C542.21 174.252 524.376 192.086 502.377 192.086C480.377 192.086 462.543 174.252 462.543 152.253C462.543 130.253 480.377 112.42 502.377 112.42C524.376 112.42 542.21 130.253 542.21 152.253ZM611.549 192.086C633.548 192.086 651.382 174.252 651.382 152.253C651.382 130.253 633.548 112.42 611.549 112.42C589.549 112.42 571.716 130.253 571.716 152.253C571.716 174.252 589.549 192.086 611.549 192.086Z",
			fill="#ed7921"
		)
		path(
			,
			fill-rule="evenodd",
			clip-rule="evenodd",
			d="M559.899 191.671C566.633 191.124 571.702 188.743 571.702 185.888C571.702 182.628 565.097 179.986 556.949 179.986C548.801 179.986 542.196 182.628 542.196 185.888C542.196 188.743 547.264 191.124 553.998 191.671V206.542H548.097C546.468 206.542 545.146 207.863 545.146 209.492C545.146 211.122 546.468 212.443 548.097 212.443H548.1H565.797H565.801C567.43 212.443 568.751 211.122 568.751 209.492C568.751 207.863 567.43 206.542 565.801 206.542H559.899V191.671Z",
			fill="#FACCFB"
		)
		rect#water(x="113", y="188", width="25", height="88", fill="#00DFFD")
		path(
			d="M48 141H74V164L169 164V190L74 190V284H48V190H26V164H48V141Z",
			fill="#FFA800"
		)
		path(
			d="M614 546H648V606H669.5C682.479 606 693 616.521 693 629.5C693 642.479 682.479 653 669.5 653H637.5C624.521 653 614 642.479 614 629.5C614 627.961 614.148 626.456 614.43 625H614V546Z",
			fill="#FFA800"
		)
		path(
			d="M160 551H194V630H193.995C193.729 642.748 183.312 653 170.5 653H138.5C125.521 653 115 642.479 115 629.5C115 616.521 125.521 606 138.5 606H160V551Z",
			fill="#FFA800"
		)
		path(
			d="M29 275C12.9837 275 0 287.984 0 304V321C0 336.041 11.4511 348.408 26.111 349.858C26.0373 351.229 26 352.61 26 354V385C26 485.516 107.484 567 208 567H603C703.516 567 785 485.516 785 385V354C785 352.296 784.944 350.605 784.834 348.93C797.044 345.512 806 334.302 806 321V304C806 287.984 793.016 275 777 275H29Z",
			fill="white"
		)
		path.bubbles(
			d="M221 274.5C221 295.075 203.008 312 180.5 312C157.992 312 140 295.075 140 274.5C140 253.925 157.992 237 180.5 237C203.008 237 221 253.925 221 274.5Z"
		)
		path.bubbles(
			d="M290 247.5C290 268.075 272.008 285 249.5 285C226.992 285 209 268.075 209 247.5C209 226.925 226.992 210 249.5 210C272.008 210 290 226.925 290 247.5Z",
			stroke="white",
			stroke-width="4"
		)
		path.bubbles(
			d="M777 287.5C777 308.075 759.008 325 736.5 325C713.992 325 696 308.075 696 287.5C696 266.925 713.992 250 736.5 250C759.008 250 777 266.925 777 287.5Z"
		)
		path.bubbles(
			d="M560 67C560 74.6195 553.4 81 545 81C536.6 81 530 74.6195 530 67C530 59.3805 536.6 53 545 53C553.4 53 560 59.3805 560 67Z"
		)
		path.bubbles(
			d="M540 83C540 90.6195 533.4 97 525 97C516.6 97 510 90.6195 510 83C510 75.3805 516.6 69 525 69C533.4 69 540 75.3805 540 83Z"
		)
		path.bubbles(
			d="M540 60C540 67.6195 533.4 74 525 74C516.6 74 510 67.6195 510 60C510 52.3805 516.6 46 525 46C533.4 46 540 52.3805 540 60Z"
		)
		path.bubbles(
			d="M351 281.5C351 302.075 333.008 319 310.5 319C287.992 319 270 302.075 270 281.5C270 260.925 287.992 244 310.5 244C333.008 244 351 260.925 351 281.5Z"
		)

              
            
!

CSS

              
                * {
	box-sizing: border-box;
}

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

@mixin setBubbles($w, $h) {
	width: $w;
	height: $h;
	border-radius: 50%;
	background: white;
}

body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #c1f2ee;
}

.container {
	height: calc(250 * var(--unit));
	width: calc(250 * var(--unit));
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	svg {
		height: 100%;
	}
}

%eyelid {
	background: #ed7921;
	z-index: 0;
	width: 11%;
	height: 11%;
	position: absolute;
	top: 23%;
	border-radius: 50%;
}

.eyelid:nth-of-type(2) {
	@extend %eyelid;
	right: 32%;
}

.eyelid:nth-of-type(3) {
	@extend %eyelid;
	right: 19%;
}

.bubble-box {
	height: 10%;
	width: 80%;
	display: flex;
	flex-flow: row nowrap;
	position: absolute;

	.bubbleFloat {
		@include setBubbles(5%, 42%);
		z-index: 10;
	}
}

.bubbles {
	fill: white;
	opacity: 0.8;
	background: white;
}

.bubbles:nth-of-type(2) {
	@include setBubbles(7%, 52%);
	position: absolute;
	top: -48%;
	left: 4%;
}

.bubbles:nth-of-type(3) {
	@include setBubbles(5%, 42%);
	position: absolute;
	top: -40%;
}

.bubbles:nth-of-type(4) {
	@include setBubbles(5%, 42%);
	position: absolute;
	top: -40%;
	left: 10%;
}

              
            
!

JS

              
                let randomNumber = (min, max) => {
	return Math.random() * (max - min) + min;
};

let pathMaker = () => {
	let newPath = [
		{ x: 0, y: 0 },
		{ x: 50, y: -70 },
		{ x: -50, y: -140 },
		{ x: 0, y: -220 }
	];
	newPath.forEach((obj, i) => {
		obj.x = randomNumber(-70, 70);
		obj.y = i * randomNumber(-50, -100);
	});
	return newPath;
};

let bubbles = () => {
	gsap.utils.toArray(".bubbleFloat").forEach((bubble, i) => {
		const tl = gsap.timeline();
		tl.to(bubble, {
			duration: "random(2, 8)",
			delay: i * 0.1,
			repeat: -1,
			scale: "random(1, 2.7)",
			opacity: 0,
			motionPath: {
				path: pathMaker(),
				type: "cubic",
				curviness: 2,
				autoRotate: true
			}
		});
	});
};

let bathBubbles = () => {
	gsap.utils.toArray(".bubbles").forEach((bubble, i) => {
		const tl = gsap.timeline();
		tl.to(bubble, {
			duration: "random(1, 3)",
			repeat: -1,
			delay: i * 0.1,
			scale: 1.3,
			transformOrigin: "center",
			opacity: 0.7,
			yoyo: true
		});
	});
};

let blinking = () => {
	let tl = gsap.timeline({ repeat: -1, repeatDelay: 5 });
	tl.to(".eyelid", 0.1, { alpha: 1 }).to(".eyelid", 0.1, { alpha: 0 });
};

let eyeMove = () => {
	let tl = gsap.timeline({ repeat: -1, repeatDelay: 3 });
	tl
		.to("#eye", 1, { x: -10, y: 10 })
		.to("#eye", 3, { x: -10, y: -10 })
		.to("#eye", 1, { x: -10, y: 10 })
		.to("#eye", 3, { x: -10, y: -10 })
		.to("#eye", 1, { x: 0, y: 0 });
};

gsap.to("#water", {
	fill: "#64eafc",
	repeat: -1,
	yoyo: true
});

(() => {
	bubbles();
	bathBubbles();
	blinking();
	eyeMove();
})();

              
            
!
999px

Console