css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              <div>
  <svg version="1.1" x="0px" y="0px" viewBox="0 0 903 508" enable-background="new 0 0 10 10"><polygon fill="#FFFFFF" points="296.73,473.799 374.996,390.798 353.317,367.525 "></polygon><polygon fill="#FFFFFF" points="575.574,431.907 512.821,365.379 530.21,346.71"></polygon><polygon class="right" points="536.667,214 451.5,197.089 451.5,105.768 494.083,146 "></polygon><polygon class="right" points="507,229.333 451.5,339.333 451.5,197.089 536.667,214 "></polygon><polygon class="right" points="533.667,343 528,309.333 511.333,285 543.667,284.667 "></polygon><polygon class="right" points="543.667,284.667 536.667,214 517.169,182.864 550.333,141.667 575,122.333 554,152.333 552.333,173.667 "></polygon><polygon class="right" points="517.169,182.864 494.083,146 451.5,105.768 495.25,108.25 550.333,141.667 "></polygon><polygon class="right" points="511,367.333 460.854,330.839 511.333,285 528,309.333 533.667,343 "></polygon><polygon class="right" points="522,260.333 507,229.333 451.5,339.333 511.333,285 543.667,284.667 536.667,214 "></polygon><polygon class="right" points="575,122.333 615.25,104 552.25,93.25 521.55,100.117 451.5,105.768 495.25,108.25 550.333,141.667"></polygon><polygon class="right" points="640.375,272.667 588.667,243.667 577.667,200.667 554,152.333 543.667,284.667 533.667,343 546.084,354 581,343 "></polygon><polygon class="right" points="645.993,210.284 672.75,206.5 654,197.089 611,187.667 608,212 621.35,201.914 "></polygon><polygon class="right" points="654,197.089 672.75,206.5 692,227 675.25,165.5 649,129 615.25,104 575,122.333 554,152.333 577.667,200.667 611,187.667 "></polygon><polygon class="right" points="640.375,272.667 670.667,250 692,227 671.011,206.746 645.993,210.284 621.35,201.914 608,212 611,187.667 577.667,200.667 588.667,243.667 "></polygon><polygon class="left" points="345.263,201.982 451.5,180.887 451.5,66.973 398.382,117.158 "></polygon><polygon class="left" points="382.269,221.108 451.5,358.323 451.5,180.887 345.263,201.982 "></polygon><polygon class="left" points="349.005,362.896 356.074,320.9 376.864,290.547 336.531,290.131 "></polygon><polygon class="left" points="336.531,290.131 345.263,201.982 369.585,163.143 328.215,111.753 297.446,87.636 323.641,125.059 325.72,151.67 "></polygon><polygon class="left" points="369.585,163.143 398.382,117.158 451.5,66.973 396.926,70.069 328.215,111.753 "></polygon><polygon class="left" points="377.28,393.25 439.832,347.727 376.864,290.547 356.074,320.9 349.005,362.896 "></polygon><polygon class="left" points="363.558,259.778 382.269,221.108 451.5,358.323 376.864,290.547 336.531,290.131 345.263,201.982"></polygon><polygon class="left" points="297.446,87.636 247.238,64.767 325.824,51.358 364.12,59.924 451.5,66.973 396.926,70.069 328.215,111.753"></polygon><polygon class="left" points="215.897,275.162 280.398,238.988 294.12,185.35 323.641,125.059 336.531,290.131 349.005,362.896 333.515,376.618 289.962,362.896 "></polygon><polygon class="left" points="208.889,197.346 175.512,192.626 198.901,180.887 252.54,169.133 256.282,199.487 239.629,186.905"></polygon><polygon class="left" points="198.901,180.887 175.512,192.626 151.5,218.198 172.394,141.483 205.138,95.952 247.238,64.767 297.446,87.636 323.641,125.059 294.12,185.35 252.54,169.133 "></polygon><polygon class="left" points="215.897,275.162 178.111,246.888 151.5,218.198 177.681,192.933 208.889,197.346 239.629,186.905 256.282,199.487 252.54,169.133 294.12,185.35 280.398,238.988"></polygon><polygon fill="#FFFFFF" points="363.558,259.778 382.269,221.108 345.263,201.982 "></polygon><polygon fill="#FFFFFF" points="522,260.333 507,229.333 536.667,214 "></polygon></svg>
  <span>click anywhere to play/pause</span>
</div>
            
          
!
            
              html{font-family: sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}

body{
	background-color: #000;
  color: #fff;
	width: 100vw;
	height: 100vh;
	margin: 0;
	overflow: hidden;
}

div{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
	height: 100vh;
}

span{
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #fff;
  color: #000;
  padding: 10px 15px;
  display: block;
  z-index: 6;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

svg{
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 1;
	display: block;
	z-index: 1;
}

polygon{
	-webkit-transition: fill .3s ease-in-out, opacity .3s ease-in-out;
	transition: fill .3s ease-in-out, opacity .3s ease-in-out;
}

.left{fill:rgba(255,255,255,.2);}
.right{fill:rgba(255,255,255,.2);}
            
          
!
            
              var w=0,
    h=0,
    left=0,
    right=0,
    x=0,
    y=0,
    regX=0,
    regY=0,
    pX=0,
    pY=0,
    context,
    fbc_array,
    timeByteData,
    body=document.querySelector('body'),
    div=document.querySelector('div'),
    left=document.querySelectorAll('.left'),
    right=document.querySelectorAll('.right'),
    playing=false;

function rand(min,max){return Math.floor(Math.random()*max)+min;}
		
div.onmousemove=function(event){
	x=event.clientX;
	y=event.clientY;
	w=window.innerWidth;
	h=window.innerHeight;

	regX=x-w/2;
	regY=y-h/2;
	pX=(regX/(h/2));
	pY=(regY/(w/2));
}

var sound=new Audio('https://locomotivebreath.newlatitudes.ro/sound/sound.mp3');
sound.crossOrigin='anonymous';
sound.addEventListener('ended',function(){
	this.currentTime=0;
	this.play();
}, false);
	
try{
	var AudioContext=(
    window.AudioContext || 
    window.webkitAudioContext || 
    window.mozAudioContext || 
    window.oAudioContext || window.msAudioContext
  );
	context=new AudioContext();
}
catch(e){
	alert('Web Audio API is not supported in this browser');
}

var analyser=context.createAnalyser(); // AnalyserNode method
analyser.smoothingTimeConstant = .2; //0<->1. 0 is no time smoothing
analyser.fftSize=32;

source=context.createMediaElementSource(sound);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();

body.onclick=function(){
	if(!playing) sound.play();
	else sound.pause();
	playing=!playing;

	var colors={
		'left':'rgb('+rand(85,170)+','+rand(170,255)+','+rand(0,85)+')',
		'right':'rgb('+rand(0,85)+','+rand(170,255)+','+rand(85,170)+')'
	}

	for(var i=0;i<left.length;i++){
		left[i].style.fill=colors.left;
		right[i].style.fill=colors.right;
		left[i].style.opacity=right[i].style.opacity=(rand(15,80)/100);
	}
  
  document.querySelector('div').removeChild(document.querySelector('span'));
}
  
function frameLooper(){
	fbc_array=new Uint8Array(analyser.frequencyBinCount);
	timeByteData=new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(fbc_array);
	analyser.getByteTimeDomainData(timeByteData);

	for(var l=0;l<left.length;l++){
		var coef=l;
		var bass=(timeByteData[left.length-l]/256)*(fbc_array[left.length-l]/256);
		var sx=(left[l]._gsTransform?left[l]._gsTransform.x:0);
		var sy=(left[l]._gsTransform?left[l]._gsTransform.y:0);
		TweenMax.set(left[l],{x:(sx+(bass*20+pX*coef)*-1)+'%', y:(sy+(pY*coef))+'%'});
	}

	for(var r=0;r<right.length;r++){
		var coef=r;
		var bass=(timeByteData[right.length-r]/256)*(fbc_array[right.length-r]/256);
		var sx=(right[r]._gsTransform?right[r]._gsTransform.x:0);
		var sy=(right[r]._gsTransform?right[r]._gsTransform.y:0);
		
		TweenMax.set(right[r],{x:(sx+(bass*20+pX*coef))+'%', y:(sy+(pY*coef))+'%'});
	}
  window.requestAnimationFrame(frameLooper);
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console