Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <div class="wrapper">
  <h1>Goo Blobs</h1>

  <h2>Some Sweet Filler Text</h2>
  <p>Danish chocolate cake sweet gummies wafer brownie cake sugar plum. Macaroon dessert tiramisu bear claw jelly toffee chocolate cake. Chocolate cake soufflé wafer sesame snaps chocolate cake. Chocolate jelly gummi bears pastry macaroon cake sweet roll. Marzipan gingerbread chocolate bar sugar plum chocolate bar marshmallow.</p>
  <p>Bonbon marzipan ice cream. Croissant tart liquorice powder macaroon toffee pastry. Cheesecake sugar plum dragée. Brownie sugar plum icing cake pudding cotton candy marshmallow cheesecake croissant. Marshmallow oat cake marshmallow oat cake caramels chupa chups cheesecake biscuit cotton candy.</p>
  <p>Ice cream liquorice donut dessert marzipan bonbon sweet roll. Fruitcake fruitcake oat cake liquorice pastry gummi bears powder. Ice cream cheesecake topping.</p>

  <h2>Keep Scrolling</h2>
  <p>Lollipop pie marzipan cupcake danish muffin sugar plum lollipop. Lemon drops gummies biscuit chupa chups cotton candy oat cake liquorice soufflé. Chocolate cake candy canes marzipan cheesecake bear claw. Oat cake toffee cotton candy tiramisu pudding gummi bears.</p>
  <p>Chupa chups chocolate cake danish jelly beans cotton candy chocolate bar caramels sesame snaps wafer. Sweet roll bonbon bonbon pudding. Tiramisu sweet icing.</p>
  <p>Pudding croissant cookie tiramisu lemon drops halvah dessert cupcake lemon drops. Muffin dragée halvah bonbon danish. Jelly-o liquorice wafer croissant. Sesame snaps chocolate cake chupa chups pie powder sweet roll ice cream jelly. Cotton candy caramels cheesecake macaroon carrot cake tiramisu sesame snaps icing macaroon. Chupa chups chupa chups jujubes powder chocolate bar chocolate bar. Brownie powder soufflé.</p>
  <p>Chocolate cake carrot cake sweet gummi bears bear claw pastry candy canes. Bear claw donut bear claw cheesecake soufflé sugar plum gummies gummi bears. Jelly-o gummies cake powder carrot cake gingerbread icing. Jujubes sugar plum jujubes cupcake chocolate cake chupa chups cotton candy toffee. Topping topping sweet roll muffin candy canes toffee. Danish cotton candy pastry dessert gummies sweet roll. Danish donut jelly. Caramels pastry halvah dragée apple pie. Chocolate toffee tart cheesecake jujubes marshmallow lemon drops. Cake fruitcake bonbon lollipop tootsie roll.</p>

  <h2>Physics-Based Visuals</h2>
  <p>Jelly beans gummies toffee chocolate cake jelly beans. Cotton candy biscuit gummies. Oat cake marzipan soufflé bonbon sugar plum cheesecake dessert. Sweet roll liquorice jujubes soufflé pudding carrot cake. Toffee powder apple pie oat cake. Pastry jelly chocolate macaroon chocolate bar tart croissant. Candy canes cookie cotton candy jelly-o wafer sweet chupa chups sweet cotton candy. Carrot cake gummi bears cake topping powder bonbon danish toffee pudding. Ice cream muffin macaroon. Bear claw brownie pudding.</p>
  <p>Tart toffee carrot cake sweet roll powder sweet roll. Sweet roll soufflé sweet roll dragée sweet roll. Wafer wafer dragée. Cake chocolate chocolate bar carrot cake pie jelly-o oat cake jujubes carrot cake. Marshmallow candy topping. Carrot cake apple pie jelly beans fruitcake halvah biscuit pie gingerbread powder. Dragée pie jelly beans jelly biscuit. Powder lollipop cheesecake icing oat cake ice cream bear claw. Dessert topping sweet oat cake pastry. Marshmallow topping lollipop sesame snaps carrot cake jujubes.</p>
  <p>Lollipop cake bonbon caramels fruitcake jujubes. Tootsie roll danish pastry sugar plum tiramisu. Pie sweet roll jujubes danish chocolate. Apple pie wafer powder topping. Fruitcake cupcake marshmallow croissant cotton candy marzipan muffin. Cookie candy canes cheesecake donut cotton candy carrot cake cake halvah dragée. Gummi bears toffee bear claw powder danish. Sesame snaps apple pie cake danish.</p>
  <p>Danish muffin lollipop gingerbread jujubes dragée. Gummi bears cupcake lemon drops chupa chups chupa chups bonbon muffin danish fruitcake. Sweet caramels jelly beans candy canes pie. Danish ice cream chocolate toffee.</p>

  <h2>Something Different</h2>
  <p>Cake gummi bears dessert chocolate bar dessert oat cake powder tootsie roll jelly beans. Cake wafer bear claw jujubes caramels sugar plum. Apple pie bonbon ice cream dragée macaroon marshmallow icing danish. Powder gummi bears tootsie roll. Lemon drops icing gummies cookie wafer bonbon cake. Sweet danish oat cake wafer muffin chocolate cake carrot cake. Macaroon ice cream dragée gingerbread pastry jujubes danish.</p>
  <p>Wafer pastry ice cream gummies gummies oat cake. Ice cream gummies liquorice cheesecake. Tiramisu cookie jelly. Tart jelly beans soufflé cheesecake dragée gummi bears apple pie.</p>
  <p>Lemon drops oat cake marshmallow apple pie apple pie tart. Dragée lollipop jelly chupa chups muffin chocolate jujubes. Caramels cookie bear claw. Caramels tootsie roll pudding apple pie chocolate muffin dessert jelly-o.</p>
  <p>Brownie sweet roll chocolate cake ice cream sweet roll topping pie marshmallow. Biscuit pastry wafer lollipop. Carrot cake bonbon bear claw croissant fruitcake toffee sugar plum jujubes brownie. Candy canes pastry halvah. Muffin brownie jelly-o cupcake ice cream muffin muffin tiramisu.</p>

  <h2>Will Boyd Says Hi</h2>
  <p>Powder sweet donut biscuit. Lemon drops chocolate gummies sweet gummi bears macaroon. Cupcake tiramisu chocolate cake chocolate. Cake pastry brownie marshmallow sweet bonbon bonbon oat cake caramels. Pastry tart gummies. Gummies danish tart gummi bears tootsie roll. Pastry candy cookie cheesecake toffee chocolate jujubes apple pie. Gingerbread marzipan icing gummi bears pastry pudding sugar plum. Dessert biscuit carrot cake sweet roll sweet.</p>
  <p>Macaroon wafer liquorice. Candy canes sweet tootsie roll. Caramels liquorice jelly chocolate cake chocolate biscuit jelly-o. Apple pie marshmallow wafer tootsie roll cake toffee soufflé ice cream. Chocolate cake danish jujubes tart muffin tootsie roll jelly-o. Croissant pastry tootsie roll. Cookie biscuit donut fruitcake tootsie roll apple pie candy sweet roll.</p>
  <p>Sugar plum gingerbread bonbon danish croissant candy canes. Macaroon pie caramels sugar plum muffin marshmallow lollipop dessert. Soufflé tootsie roll sweet roll gummies jelly beans. Liquorice cotton candy dragée cheesecake marzipan cheesecake gummi bears muffin.</p>
</div>
<svg>
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="30" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="
                                                     1 0 0 0 0
                                                     0 1 0 0 0
                                                     0 0 1 0 0
                                                     0 0 0 50 -16
                                                     " result="matrix" />
      <feBlend in="SourceGraphic" in2="matrix" />
    </filter>
  </defs>
</svg>
<canvas id="bg1"></canvas>
<canvas id="bg2"></canvas>
!

CSS 

              
                *, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0 10%;
	color: #915b4e;
	background-color: #edffff;
	font: 1.25rem/1.5 'Roboto', sans-serif;
}

.wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 20px;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	background-color: rgba(255, 255, 255, 0.5);
	background: repeating-linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.5),
		rgba(255, 255, 255, 0.5) 20px,
		rgba(255, 255, 255, 0.65) 20px,
		rgba(255, 255, 255, 0.65) 40px
	);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

h1, h2 {
	margin: 0;
	line-height: 1.25;
}

h1 {
	padding: 10px 0;
	border-top: 10px solid;
	font-size: 3rem;
	text-transform: uppercase;
}

h2 {
	margin-top: 40px;
	font-size: 1.5rem;
	border-left: 10px solid;
	padding-left: 15px;
}

svg {
	display: none;
}

canvas {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
}

#bg1 {
	z-index: -1;
	filter: url('#goo');
}

#bg2 {
	z-index: -2;
	filter: url('#goo') blur(4px);
}

@media screen and (min-width: 500px) {
	h1 {
		font-size: 4rem;
	}
	h2 {
		font-size: 2rem;
	}
}
!

JS 

              
                // plugin
Matter.use('matter-wrap');

let gooBlobs = {
	// customizable options (passed into init function)
    options: {
		canvasSelector: '',				// to find <canvas> in DOM to draw on
		radiusRange: [75, 150],			// random range of body radii
		xVarianceRange: [-1, 1],		// random range of x velocity scaling on bodies
		yVarianceRange: [0.5, 1.5],		// random range of y velocity scaling on bodies
		airFriction: 0.04,				// air friction of bodies
		opacity: 1,						// opacity of bodies
		collisions: false,				// do bodies collide or pass through
		scrollVelocity: 0.015,			// scaling of scroll delta to velocity applied to bodies
		pixelsPerBody: 50000,			// viewport pixels required for each body added

		// colors to cycle through to fill bodies
		colors: ['#bad4cf']
	},

	// throttling intervals (in ms)
	scrollDelay: 100,
	resizeDelay: 400,

	// throttling variables and timeouts
	lastOffset: undefined,
	scrollTimeout: undefined,
	resizeTimeout: undefined,

	// Matter.js objects
	engine: undefined,
	render: undefined,
	runner: undefined,
	bodies: undefined,

	// kicks things off
	init(options) {
		// override default options with incoming options
		this.options = Object.assign({}, this.options, options);

		let viewportWidth = document.documentElement.clientWidth;
		let viewportHeight = document.documentElement.clientHeight;

		this.lastOffset = window.pageYOffset;
		this.scrollTimeout = null;
		this.resizeTimeout = null;
	
		// engine
		this.engine = Matter.Engine.create();
		this.engine.world.gravity.y = 0;
	
		// render
		this.render = Matter.Render.create({
			canvas: document.querySelector(this.options.canvasSelector),
			engine: this.engine,
			options: {
				width: viewportWidth,
				height: viewportHeight,
				wireframes: false,
				background: 'transparent'
			}
		});
		Matter.Render.run(this.render);
	
		// runner
		this.runner = Matter.Runner.create();
		Matter.Runner.run(this.runner, this.engine);
	
		// bodies
		this.bodies = [];
		let totalBodies = Math.round(viewportWidth * viewportHeight / this.options.pixelsPerBody);
		for (let i = 0; i <= totalBodies; i++) {
			let body = this.createBody(viewportWidth, viewportHeight);
			this.bodies.push(body);
		}
		Matter.World.add(this.engine.world, this.bodies);

		// events
		window.addEventListener('scroll', this.onScrollThrottled.bind(this));
		window.addEventListener('resize', this.onResizeThrottled.bind(this));
	},
	
	// stop all the things
	shutdown() {
		Matter.Engine.clear(this.engine);
		Matter.Render.stop(this.render);
		Matter.Runner.stop(this.runner);

		window.removeEventListener('scroll', this.onScrollThrottled);
		window.removeEventListener('resize', this.onResizeThrottled);
	},
	
	// random number generator
	randomize(range) {
		let [min, max] = range;
		return Math.random() * (max - min) + min;
	},
	
	// create body with some random parameters
	createBody(viewportWidth, viewportHeight) {
		let x = this.randomize([0, viewportWidth]);
		let y = this.randomize([0, viewportHeight]);
		let radius = this.randomize(this.options.radiusRange);
		let color = this.options.colors[this.bodies.length % this.options.colors.length];
	
		return Matter.Bodies.circle(x, y, radius, {
			render: {
				fillStyle: color,
				opacity: this.options.opacity
			},
			frictionAir: this.options.airFriction,
			collisionFilter: {
				group: this.options.collisions ? 1 : -1
			},
			plugin: {
				wrap: {
					min: { x: 0, y: 0 },
					max: { x: viewportWidth, y: viewportHeight }
				}
			}
		});
	},
	
	// enforces throttling of scroll handler
	onScrollThrottled() {
		if (!this.scrollTimeout) {
			this.scrollTimeout = setTimeout(this.onScroll.bind(this), this.scrollDelay);
		}
	},
	
	// applies velocity to bodies based on scrolling with some randomness
	onScroll() {
		this.scrollTimeout = null;

		let delta = (this.lastOffset - window.pageYOffset) * this.options.scrollVelocity;
		this.bodies.forEach((body) => {
			Matter.Body.setVelocity(body, {
				x: body.velocity.x + delta * this.randomize(this.options.xVarianceRange),
				y: body.velocity.y + delta * this.randomize(this.options.yVarianceRange)
			});
		});
	
		this.lastOffset = window.pageYOffset;
	},
	
	// enforces throttling of resize handler
	onResizeThrottled() {
		if (!this.resizeTimeout) {
			this.resizeTimeout = setTimeout(this.onResize.bind(this), this.resizeDelay);
		}
	},
	
	// restart everything with the new viewport size
	onResize() {
		this.shutdown();
		this.init();
	}
};

// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
	// start first goo blobs background
	Object.create(gooBlobs).init({
		canvasSelector: '#bg1'
	});
	
	// start second goo blobs background
	Object.create(gooBlobs).init({
		canvasSelector: '#bg2',
		yVarianceRange: [-1.5, -0.5],
		pixelsPerBody: 30000,
		colors: ['#d3f0ea']
    });
});
!
999px

Console