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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <section id="wrapper">
	<canvas></canvas>
	
	<section id="controls">
		
		<button data-playing="null" class="controls__button">
			<span>Play/Pause</span>
		</button>
		
		<section class="controls__credit">
			
				<p>Music by</p>

				<p class="credit--artist">
					<a href="https://soundcloud.com/halfbyte" aria-labelledby="artist">
						<span id="artist">halfbyte</span>
						<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="2 -2.472 174.964 103.127"><path d="M2,0.528h8.688v18.336c1.184-1.44,2.384-2.408,3.6-2.904s2.64-0.744,4.272-0.744c3.104,0,5.448,0.856,7.032,2.568 s2.376,4.024,2.376,6.936v15.648H19.28V27.936c0-1.248-0.096-2.256-0.288-3.024c-0.192-0.768-0.512-1.36-0.96-1.776 c-0.768-0.672-1.696-1.008-2.784-1.008c-1.472,0-2.6,0.44-3.384,1.32c-0.784,0.88-1.176,2.136-1.176,3.768v13.152H2V0.528z"/><path d="M39.936,27.984c0,0.8,0.144,1.544,0.432,2.232c0.288,0.688,0.68,1.288,1.176,1.8c0.496,0.512,1.088,0.912,1.776,1.2 c0.688,0.288,1.432,0.432,2.232,0.432c0.768,0,1.496-0.144,2.184-0.432c0.688-0.288,1.28-0.688,1.776-1.2 c0.496-0.512,0.896-1.104,1.2-1.776c0.304-0.672,0.456-1.392,0.456-2.16s-0.152-1.496-0.456-2.184c-0.304-0.688-0.704-1.288-1.2-1.8 c-0.496-0.512-1.088-0.912-1.776-1.2s-1.416-0.432-2.184-0.432c-0.8,0-1.544,0.144-2.232,0.432s-1.28,0.688-1.776,1.2 c-0.496,0.512-0.888,1.096-1.176,1.752C40.08,26.504,39.936,27.216,39.936,27.984z M50.88,15.744h8.736v24.624H50.88v-2.736 c-1.856,2.336-4.368,3.504-7.536,3.504c-1.792,0-3.44-0.328-4.944-0.984c-1.504-0.656-2.816-1.576-3.936-2.76 s-1.992-2.576-2.616-4.176c-0.624-1.6-0.936-3.344-0.936-5.232c0-1.76,0.304-3.432,0.912-5.016c0.608-1.584,1.456-2.968,2.544-4.152 c1.088-1.184,2.384-2.12,3.888-2.808c1.504-0.688,3.168-1.032,4.992-1.032c3.072,0,5.616,1.072,7.632,3.216V15.744z"/><path d="M73.208,0.528v39.84H64.52V0.528H73.208z"/><path d="M90.567,22.992v17.376H81.88V22.992h-3.12v-7.248h3.12v-3.696c0-2.048,0.192-3.68,0.576-4.896 c0.32-1.024,0.832-1.976,1.536-2.856s1.528-1.64,2.472-2.28c0.944-0.64,1.96-1.136,3.049-1.488C90.601,0.176,91.672,0,92.728,0 c0.736,0,1.416,0.08,2.041,0.24c0.623,0.16,1.256,0.384,1.896,0.672v7.584c-0.576-0.288-1.112-0.504-1.608-0.648 s-1.016-0.216-1.56-0.216c-0.353,0-0.712,0.056-1.08,0.168c-0.368,0.112-0.712,0.344-1.032,0.696s-0.535,0.856-0.648,1.512 c-0.111,0.656-0.168,1.544-0.168,2.664v3.072h6.097v7.248H90.567z"/><path d="M115.632-2.472h6.864L102.72,45.672h-6.816L115.632-2.472z"/><path d="M74.504,76.128c0-0.769-0.144-1.496-0.432-2.185c-0.288-0.688-0.688-1.287-1.2-1.799c-0.512-0.513-1.104-0.92-1.776-1.225 c-0.672-0.304-1.408-0.456-2.208-0.456c-0.768,0-1.488,0.144-2.16,0.433c-0.672,0.287-1.256,0.688-1.752,1.199 s-0.896,1.112-1.2,1.801c-0.304,0.688-0.456,1.416-0.456,2.184s0.144,1.488,0.432,2.16s0.688,1.256,1.2,1.752 c0.512,0.496,1.112,0.896,1.8,1.199c0.688,0.305,1.416,0.457,2.184,0.457s1.488-0.145,2.16-0.433c0.672-0.288,1.256-0.688,1.752-1.2 c0.496-0.512,0.896-1.104,1.2-1.775C74.352,77.568,74.504,76.864,74.504,76.128z M63.56,48.527v17.664 c2.048-2.144,4.608-3.215,7.68-3.215c1.824,0,3.496,0.344,5.016,1.031c1.52,0.688,2.816,1.616,3.888,2.784s1.912,2.544,2.52,4.128 c0.608,1.584,0.912,3.271,0.912,5.064c0,1.824-0.312,3.535-0.936,5.136c-0.624,1.601-1.496,2.992-2.616,4.176c-1.12,1.185-2.44,2.12-3.96,2.808c-1.52,0.688-3.16,1.033-4.92,1.033c-3.2,0-5.728-1.168-7.584-3.505v2.736h-8.688V48.527H63.56z"/><path d="M95.151,85.008L83.248,63.744h10.08l6.575,12.624l6.385-12.624h9.984l-19.776,36.912h-9.744L95.151,85.008z"/><path d="M129.944,70.992v17.376h-8.688V70.992h-2.88v-7.248h2.88v-7.393h8.688v7.393h4.943v7.248H129.944z"/><path d="M156.632,71.48c-0.288-1.217-0.88-2.192-1.775-2.928c-0.896-0.736-1.984-1.104-3.265-1.104c-1.344,0-2.44,0.352-3.288,1.056 s-1.384,1.696-1.607,2.977H156.632z M146.456,76.52c0,3.744,1.76,5.617,5.279,5.617c1.889,0,3.312-0.769,4.272-2.305h8.4 c-1.696,5.632-5.937,8.448-12.72,8.448c-2.08,0-3.984-0.312-5.713-0.937c-1.728-0.623-3.207-1.512-4.439-2.664 s-2.184-2.527-2.855-4.127c-0.673-1.601-1.009-3.393-1.009-5.377c0-2.048,0.32-3.896,0.96-5.544c0.641-1.647,1.553-3.048,2.736-4.2 c1.184-1.151,2.615-2.039,4.296-2.664c1.68-0.623,3.576-0.936,5.688-0.936c2.08,0,3.951,0.312,5.615,0.936 c1.664,0.625,3.072,1.528,4.225,2.713c1.151,1.184,2.031,2.631,2.64,4.344c0.608,1.712,0.912,3.64,0.912,5.783v0.912H146.456z"/><path d="M168.269,67.675c0-2.161,1.504-3.713,3.572-3.713c2.115,0,3.524,1.552,3.571,3.713c0,2.115-1.409,3.666-3.571,3.666 C169.726,71.341,168.269,69.79,168.269,67.675z M168.269,83.514c0-2.162,1.504-3.713,3.572-3.713c2.115,0,3.524,1.504,3.571,3.713 c0,2.067-1.409,3.665-3.571,3.665C169.726,87.179,168.269,85.581,168.269,83.514z"/>
						</svg>
					</a>
				</p>
			</section>
			
			<section class="controls__credit">
			
				<p>on</p>

				<p class="credit--platform">
					<a href="https://soundcloud.com/2xaa" labelledby="platform">
						<span id="platform">Soundcloud</span>
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M111.4 256.3l5.8 65-5.8 68.3c-.3 2.5-2.2 4.4-4.4 4.4s-4.2-1.9-4.2-4.4l-5.6-68.3 5.6-65c0-2.2 1.9-4.2 4.2-4.2 2.2 0 4.1 2 4.4 4.2zm21.4-45.6c-2.8 0-4.7 2.2-5 5l-5 105.6 5 68.3c.3 2.8 2.2 5 5 5 2.5 0 4.7-2.2 4.7-5l5.8-68.3-5.8-105.6c0-2.8-2.2-5-4.7-5zm25.5-24.1c-3.1 0-5.3 2.2-5.6 5.3l-4.4 130 4.4 67.8c.3 3.1 2.5 5.3 5.6 5.3 2.8 0 5.3-2.2 5.3-5.3l5.3-67.8-5.3-130c0-3.1-2.5-5.3-5.3-5.3zM7.2 283.2c-1.4 0-2.2 1.1-2.5 2.5L0 321.3l4.7 35c.3 1.4 1.1 2.5 2.5 2.5s2.2-1.1 2.5-2.5l5.6-35-5.6-35.6c-.3-1.4-1.1-2.5-2.5-2.5zm23.6-21.9c-1.4 0-2.5 1.1-2.5 2.5l-6.4 57.5 6.4 56.1c0 1.7 1.1 2.8 2.5 2.8s2.5-1.1 2.8-2.5l7.2-56.4-7.2-57.5c-.3-1.4-1.4-2.5-2.8-2.5zm25.3-11.4c-1.7 0-3.1 1.4-3.3 3.3L47 321.3l5.8 65.8c.3 1.7 1.7 3.1 3.3 3.1 1.7 0 3.1-1.4 3.1-3.1l6.9-65.8-6.9-68.1c0-1.9-1.4-3.3-3.1-3.3zm25.3-2.2c-1.9 0-3.6 1.4-3.6 3.6l-5.8 70 5.8 67.8c0 2.2 1.7 3.6 3.6 3.6s3.6-1.4 3.9-3.6l6.4-67.8-6.4-70c-.3-2.2-2-3.6-3.9-3.6zm241.4-110.9c-1.1-.8-2.8-1.4-4.2-1.4-2.2 0-4.2.8-5.6 1.9-1.9 1.7-3.1 4.2-3.3 6.7v.8l-3.3 176.7 1.7 32.5 1.7 31.7c.3 4.7 4.2 8.6 8.9 8.6s8.6-3.9 8.6-8.6l3.9-64.2-3.9-177.5c-.4-3-2-5.8-4.5-7.2zm-26.7 15.3c-1.4-.8-2.8-1.4-4.4-1.4s-3.1.6-4.4 1.4c-2.2 1.4-3.6 3.9-3.6 6.7l-.3 1.7-2.8 160.8s0 .3 3.1 65.6v.3c0 1.7.6 3.3 1.7 4.7 1.7 1.9 3.9 3.1 6.4 3.1 2.2 0 4.2-1.1 5.6-2.5 1.7-1.4 2.5-3.3 2.5-5.6l.3-6.7 3.1-58.6-3.3-162.8c-.3-2.8-1.7-5.3-3.9-6.7zm-111.4 22.5c-3.1 0-5.8 2.8-5.8 6.1l-4.4 140.6 4.4 67.2c.3 3.3 2.8 5.8 5.8 5.8 3.3 0 5.8-2.5 6.1-5.8l5-67.2-5-140.6c-.2-3.3-2.7-6.1-6.1-6.1zm376.7 62.8c-10.8 0-21.1 2.2-30.6 6.1-6.4-70.8-65.8-126.4-138.3-126.4-17.8 0-35 3.3-50.3 9.4-6.1 2.2-7.8 4.4-7.8 9.2v249.7c0 5 3.9 8.6 8.6 9.2h218.3c43.3 0 78.6-35 78.6-78.3.1-43.6-35.2-78.9-78.5-78.9zm-296.7-60.3c-4.2 0-7.5 3.3-7.8 7.8l-3.3 136.7 3.3 65.6c.3 4.2 3.6 7.5 7.8 7.5 4.2 0 7.5-3.3 7.5-7.5l3.9-65.6-3.9-136.7c-.3-4.5-3.3-7.8-7.5-7.8zm-53.6-7.8c-3.3 0-6.4 3.1-6.4 6.7l-3.9 145.3 3.9 66.9c.3 3.6 3.1 6.4 6.4 6.4 3.6 0 6.4-2.8 6.7-6.4l4.4-66.9-4.4-145.3c-.3-3.6-3.1-6.7-6.7-6.7zm26.7 3.4c-3.9 0-6.9 3.1-6.9 6.9L227 321.3l3.9 66.4c.3 3.9 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9l4.2-66.4-4.2-141.7c0-3.9-3-6.9-6.9-6.9z"/></svg>
					</a>
				</p>
			</section>
	</section>
		
		
</div>

            
          
!

CSS

            
              $padding: 8px;
body {
	font-family: system-ui;
	font-size: 70%;
	
}
#wrapper {
	width: 100vw; height: 100vh;
	position: relative;
}
canvas {
	width: 100vw; height: 100vh;
	background: black;
}

#controls {
	box-sizing: border-box;
	width: 10vw; min-width: 200px;
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	
	.controls__button {
		grid-area: 1 / 1 / 2 / 2;
		justify-self: stretch; align-self: stretch;
		padding: $padding; 
		background: black url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="white" /></svg>') no-repeat center center;
		background-size: 40% 40%;
		border: 2px solid white; border-right-width: 0px;
		cursor: pointer;
		&:hover {
			background: white url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="black" /></svg>') no-repeat center center;
			background-size: 40% 40%;
			border-color: black;
		}
		&.button--on {
			background: black url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="white" /></svg>') no-repeat center center;
			background-size: 40% 40%;
			&:hover {
				background: white url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="black" /></svg>') no-repeat center center;
			background-size: 40% 40%;
			}
		}
		span {visibility: hidden;}
	}
	
	.controls__credit {
		box-sixing: border-box;
		padding: $padding $padding 0px;
		background-color: white; border: 2px solid black;
		color: black;
		&:nth-of-type(1) {
			grid-area: 1 / 2 / 2 / 3;
			border-width: 2px 0px;
			p {padding-bottom: $padding;}
			svg {width: 80px;}
		}
		&:nth-of-type(2) {
			grid-area: 1 / 3 / 2 / 4;
			border-left-width:0px;
		}
	}
	
	p {
		text-align: center;
		span {display: none;}
	}
	.credit--artist {}
	.credit--platform {}
	svg {width: 60px;}
}

            
          
!

JS

            
              console.clear();

// some utility functions
const arrAvg = arr => arr.reduce((a,b) => a + b, 0) / arr.length;

// at some point refactor this to use viz colours
// const colourPalette = 

//~~~~~~~~~~~~~~~~~~~~~~~~~SOUNDCLOUD STUFF
// Massive thanks to @jake_albaugh for letting me use his key. Also a lot of the soundcloud stuff is influenced by https://codepen.io/jakealbaugh/pen/MyJXoK?editors=0010 which you should check out!
const track_id = "484807812";
const client_id = "787c22af89922d1be9202d2f0cc90586";
const src_url = "https://api.soundcloud.com/tracks/" + track_id + "/stream?client_id=" + client_id;
const controls = document.querySelector('button');
let track = new Audio();
track.crossOrigin = "anonymous";
// const src_url = "https://cf-media.sndcdn.com/34P94ygdrRMW.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vMzRQOTR5Z2RyUk1XLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE1NDI5MTc4MjB9fX1dfQ__&Signature=sojWxbt9b1Fr4c2Ry6bU8PYpngG5T41sEnMkKo2034kMoC9lraGAAnE4p8fF-WYjaEpm1kf~nQ77KfyOc62YVRxXS3FpIDQb-CqGTmyirhO4tXA6QeSZqC-j5II0lI9V9jwzQevo~5BkokhZvd4Zt8SOqJTQr4rFTjy8UojJflbCt~LzHOQ5pBskeTLLsQ07rx314ID1Igeq-PCHTeB5RPQHThLPKVnmANYSDCeK8QKOExvnr7G9h8GwnA-hGlZ26GnGrKhNWYd3LOpprOBNcYJUw9umMv6ISlefdhQk6yF0pfUXkEkXr55EPu5WS-0dqXTDNYUteS3pVMhVX7xmKQ__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ";

function initTrack(url, trackInstance) {
	let trackInst = trackInstance;
	trackInst.src = url;
	trackInst.crossOrigin = "anonymous";
	trackInst.play();
}

function playPause(playing, trackInstance) {
	let trackInst = trackInstance;
	if (playing) {
		trackInst.pause();
	} else {
		trackInst.play();
	}
}

controls.addEventListener("click", function() {
	
	// check if context is in suspended state (autoplay policy)
	if (audCtx.state === 'suspended') {
		audCtx.resume();
	}
	
	this.classList.toggle('button--on');

	// first click - initiate soundcloud call
	if (this.dataset.playing === 'null') {
		initTrack(src_url, track);
		this.dataset.playing = "true";
		// and set up audio graph
		connectGraph(audCtx, track, analyserNode);
	} else { // toggle play
		let play = this.dataset.playing === "true" ? true : false;
		this.dataset.playing = this.dataset.playing === "true" ? "false" : "true";
		playPause(play, track);
	}
	
}, false);

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ AUDIO STUFF
// set up audio canCtx & analyser
const binSize = 1024;
let bin = new Uint8Array(binSize);
const audCtx = new (window.AudioContext || window.webkitAudioContext);
const analyserNode = new AnalyserNode(audCtx, {
  fftSize: binSize*2,
  maxDecibels: -25,
  minDecibels: -60,
  smoothingTimeConstant: 0.5,
});

function connectGraph(ctx, trackInstance, node) {
	let trackInst = trackInstance,
			audioCtx = ctx,
			analyserNode = node;
	const source = audioCtx.createMediaElementSource(trackInst);
	source.connect(analyserNode).connect(audioCtx.destination);
}

function analyse(node) {
	let analyserNode = node;
	analyserNode.getByteFrequencyData(bin);
	// console.log(bin);
}

//~~~~~~~~~~~~~~~~~~~~CANVAS STUFF


// draw the stuff!
const canvas = document.querySelector('canvas'),
			width = window.innerWidth,
			height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const canCtx = canvas.getContext('2d');
canCtx.strokeStyle = 'white';
canCtx.lineCap = 'round';
canCtx.lineJoin = 'round';
canCtx.lineWidth = 1;

// if the bin is 1024, let's take the first quarter(ish) and set rotation on each sqaure based on that...(256)
let circles = [];
let minRadius = 8;
let maxRadius = 60;
let totalCircles = binSize/8;
let createCircleAttempts = 100;

function createAndDrawCircle() {
	
	let newCircle;
	let circleSafeToDraw = false;
	
	for(var tries = 0; tries < createCircleAttempts; tries++) {
    newCircle = {
      x: Math.floor(Math.random() * width),
      y: Math.floor(Math.random() * height),
      radius: minRadius
    }
    
    if( doesCircleHaveACollision(newCircle) ) {
      continue;
    } else {
      circleSafeToDraw = true;
      break;
    }
  }
	
	if(!circleSafeToDraw) {
    return;
  }
	
	for(var radiusSize = minRadius; radiusSize < maxRadius; radiusSize++) {
    newCircle.radius = radiusSize;
    if(doesCircleHaveACollision(newCircle)){
      newCircle.radius--;
      break;
    } 
  }
	
	circles.push(newCircle);
	
  canCtx.beginPath();
  canCtx.arc(newCircle.x, newCircle.y, newCircle.radius-3, 0, 2*Math.PI);
  canCtx.stroke();
	
}

function doesCircleHaveACollision(circle) {
  for(var i = 0; i < circles.length; i++) {
    var otherCircle = circles[i];
    var a = circle.radius + otherCircle.radius;
    var x = circle.x - otherCircle.x;
    var y = circle.y - otherCircle.y;

    if (a >= Math.sqrt((x*x) + (y*y))) {
      return true;
    }
  }
	
	if(circle.x + circle.radius >= width ||
     circle.x - circle.radius <= 0) {
    return true;
  }
    
  if(circle.y + circle.radius >= height ||
      circle.y - circle.radius <= 0) {
    return true;
  }
	
	return false;
}

function drawCircles() {
	for( var i = 0; i < totalCircles; i++ ) {  
		createAndDrawCircle();
	}
}

// visual setup
const beatThreshold = 20; // average gain for change
const debounceRate = 10; // lower = higher frame count
let debounce = 0;

function draw(ctx) {
	requestAnimationFrame(draw);
	analyse(analyserNode);
	let newBin = bin.slice(0, binSize/8);

	// if the first half of the array averages over 200, change lines
	let binAvg = arrAvg(newBin);

	// console.log(binAvg);
	if ( (binAvg > beatThreshold) && (debounce === 0) ) {
		canCtx.clearRect(0,0,width,height);
		circles = [];
		drawCircles();
		debounce = debounceRate;
	}
	debounce > 0 ? debounce-- : debounce = 0;
}

drawCircles();
draw();


            
          
!
999px

Console