` ````
<h1>Equations for Organic Motion - Test Sheet</h1><div id="more">
<span class="arrow">↑</span>
Resize for more
</div>
```

` ````
html, body {
font-family: monospace;
background: #f2f2f2 url( https://cl.ly/image/381U2k0A3L3S/bg.png );
overflow: hidden;
height: 100%;
margin: 0;
}
h1 {
background: #111 url( https://cl.ly/image/203T1t3s1P3O/h1.png );
position: absolute;
text-transform: uppercase;
font-size: 11px;
font-weight: 300;
display: inline;
padding: 6px 15px 8px 12px;
opacity: 0.95;
margin: 0;
color: #fff;
left: 0px;
top: 0px;
}
#more {
-webkit-transition: top 300ms ease-in-out;
-moz-transition: top 300ms ease-in-out;
-ms-transition: top 300ms ease-in-out;
-o-transition: top 300ms ease-in-out;
transition: top 300ms ease-in-out;
background: rgba(0,0,0,0.8);
text-align: center;
position: absolute;
padding: 10px 0;
margin-left: -60px;
font-size: 10px;
width: 120px;
color: #fff;
left: 50%;
top: -100px;
}
#more .arrow {
font-weight: bold;
font-size: 24px;
display: block;
}
```

` ````
/**
* Equations for organic motion
* @author Justin Windle
*
* @see https://soulwire.co.uk
* @see https://github.com/soulwire/sketch.js
*/
$( function () {
var colours = [
'FE4365', 'FC9D9A', 'F9CDAD',
'C8C8A9', '83AF9B', 'FC913A',
'F9D423', '435356', '566965',
'FF7373', 'A9DA88', 'E3AAD6',
'73A8AF', 'F6BCAD', 'BE4C54',
'7CD7CF', 'FFA446', 'B5D8EB',
'E05561', 'F4CE79', '77B29C'
];
var pulses = [
'sin(t)',
'cos(t)',
'cos(t)*sin(t)',
'sin(t)*sin(t*1.5)',
'sin(tan(cos(t)*1.2))',
'sin(tan(t)*0.05)',
'cos(sin(t*3))*sin(t*0.2)',
'sin(pow(8,sin(t)))',
'sin(exp(cos(t*0.8))*2)',
'sin(t-PI*tan(t)*0.01)',
'pow(sin(t*PI),12)',
'cos(sin(t)*tan(t*PI)*PI/8)',
'sin(tan(t)*pow(sin(t),10))',
'cos(sin(t*3)+t*3)',
'pow(abs(sin(t*2))*0.6,sin(t*2))*0.6'
];
var callbacks = [];
var more = document.getElementById('more');
Sketch.create({
retina: 'auto',
setup: function () {
colours = colours.sort(function () {
return random() < 0.5 ? -1 : 1;
});
for ( var i = 0, n = pulses.length; i < n; i++ ) {
callbacks[i] = new Function( 't', 'return ' + pulses[i] );
}
},
draw: function () {
this.globalAlpha = 0.5;
var t = this.millis * 0.0015;
var rows = 3;
var cols = 5;
var minR = 10;
var maxR = 50;
var xs = max(maxR * 3, this.width / cols);
var ys = max(maxR * 3, this.height / rows);
var x, y, s, f, w, i = 0;
for (y = ys * 0.5; y < this.height; y += ys) {
for (x = xs * 0.5; x < this.width; x += xs) {
if (!(f = callbacks[i].call( this, t ))) break;
f = minR + abs(f) * (maxR - minR);
s = pulses[i];
this.beginPath();
this.arc(x, y, f, 0, TWO_PI);
this.fillStyle = this.strokeStyle = '#' + colours[i % colours.length];
this.fill();
this.font = '10px monospace';
w = this.measureText(s).width;
this.textBaseline = 'top';
this.fillStyle = '#000';
this.fillText(s, x - w * 0.5, y + maxR + 10);
i++;
}
if (!f) break;
}
},
resize: function () {
more.style.top = this.height > 450 ? '-100px' : '0px';
}
});
});
```

999px

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Loading
..................

Alt
Opt
Find & Replace

Also see: Tab Triggers