Hex Bokeh


In this example below you will see how to do a Hex Bokeh with some HTML / CSS and Javascript

Scroll the page. Physics-based hex bokeh background scroll effect.Read more: Physics-Based Background Scroll Effects

This awesome code was written by Will Boyd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Will Boyd ©
  • HTML
  • CSS
  • JavaScript
    <div class="wrapper">
  <h1>Hex Bokeh</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>
<canvas id="bg1"></canvas>
<canvas id="bg2"></canvas>

/*Downloaded from https://www.codeseek.co/lonekorean/hex-bokeh-LrWKvL */
    *, *::before, *::after {
	box-sizing: border-box;

body {
	margin: 0 10%;
	color: #fff;
	background-color: #000;
	background: linear-gradient(to bottom right, #142621, #262133, #1c2933);
	font: 1.25rem/1.5 'Roboto', sans-serif;

.wrapper {
	max-width: 800px;
	margin: 40px auto;
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.75);
	overflow: hidden;

h1, h2 {
	margin: 0;
	color: #bea6ff;
	background: linear-gradient(to right, #7ef2cf, #bea6ff, #8ccdff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.25;

h1 {
	font-size: 3rem;
	text-transform: uppercase;

h1::after {
	content: '';
	display: block;
	height: 2px;
	margin-top: 20px;
	background: linear-gradient(to right, #7ef2cf, #bea6ff, #8ccdff);

h2 {
	margin-top: 40px;
	font-size: 1.5rem;

canvas {
	position: fixed;
	top: 0;
	left: 0;

#bg1 {
	z-index: -1;
	filter: blur(1px);

#bg2 {
	z-index: -2;
	filter: blur(10px);

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

/*Downloaded from https://www.codeseek.co/lonekorean/hex-bokeh-LrWKvL */
    // plugin

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

		// colors to cycle through to fill bodies
		colors: ['#7ef2cf', '#bea6ff', '#8ccdff']

	// 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'
		// 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);
		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() {

		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.polygon(x, y, 6, 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() {

// wait for DOM to load
window.addEventListener('DOMContentLoaded', () => {
	// start first hex bokeh background
		canvasSelector: '#bg1'

	// start second hex bokeh background
		canvasSelector: '#bg2',
		radiusRange: [100, 200],
		pixelsPerBody: 70000