Audio visualizer concepts

audio-visualizer-concepts.markdown

Audio visualizer concepts

A Pen by Robin Delaporte on CodePen.

License.

index.html

<div class="one">
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300">
  	<defs>
	    <filter id="goo">
		    <feGaussianBlur in="SourceGraphic" stdDeviation="10" 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 19 -9" result="goo" />
		    <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
	    </filter>
  	</defs>
</svg>

	<div class="visualizer-shell gooify">
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
	</div>
</div>
<div class="two">
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300">
  	<defs>
	    <filter id="goo2">
		    <feGaussianBlur in="SourceGraphic" stdDeviation="2" 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 19 -9" result="goo" />
		    <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
	    </filter>
  	</defs>
</svg>

	<div class="visualizer-shell gooify">
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
		<div class="bar"></div>
	</div>
</div>

script.js

function moveBar() {
	TweenMax.staggerTo(".one .bar", 0.75, {
		scaleY: 1.8 * Math.random() + 0.5,
		onComplete: function() {
			moveBar();
		},
		ease: Back.easeOut.config(1.7)
	}, 0.1);
}
moveBar();


function moveBar2() {
	TweenMax.staggerTo(".two .bar", 0.75, {
		scaleY: 1.8 * Math.random() + 0.5,
		onComplete: function() {
			moveBar2();
		},
		ease: Power3.easeOut
	}, 0.1);
}
moveBar2();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

style.scss

.one, .two {
	// position: absolute;
	position: relative;
	height: 300px;
	width: 300px;
	float: left;

	.gooify {
		filter: url("#goo");
	}

	.visualizer-shell {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 250px;
	}

	.bar {
		display: -webkit-inline-box;
		mix-blend-mode: color;
		background: linear-gradient(0deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
		width: 20px;
		height: 60px;
		transform-origin: 50% 100%;
	}
}


.two {
	.gooify {
		filter: url("#goo2");
	}
	.bar {
		display: table-cell;
		mix-blend-mode: color;
		background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 50%, rgba(34,193,195,1) 100%);
		width: 20px;
		height: 60px;
		transform-origin: 50% 50%;
	}
}