A Pen By
Captain Anonymous

` ````
<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;
}
```

` ````
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 Config = {
UseAbsoluteValues: false
};
var more = document.getElementById( 'more' );
Sketch.create({
setup: function() {
colours = colours.sort( function() {
return random() < 0.5 ? -1 : 1;
});
var gui = new DAT.GUI();
gui.add( Config, 'UseAbsoluteValues' ).name( 'Use Absolute Values' );
// -----------
},
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;
if (!this.cache) {
this.cache = [];
}
var nSteps = 60;
for ( y = ys * 0.5; y < this.height; y += ys ) {
for ( x = xs * 0.5; x < this.width; x += xs ) {
if( !( f = eval( s = pulses[i] ) ) ) break;
if (Config.UseAbsoluteValues) f = Math.abs(f);
var key = ("" + y + "_" + x).replace(/\./g, "_");
var graph = this.cache[key];
if (!graph) {
graph = this.cache[key] = [];
}
if (graph.length > maxR * 2 * 4) graph.shift();
graph.push(-f);
this.beginPath();
this.strokeStyle = "#000000;"
this.moveTo(x - maxR, y + 10 * graph[0]);
for(var p=1; p<graph.length; p++) {
this.lineTo(x - maxR + p/4, y + 10 * graph[p]);
}
this.stroke();
if (Config.UseAbsoluteValues) {
f = minR + (f) * ( maxR - minR );
}
else {
f = minR + (0.5 + 0.5 * f) * ( maxR - minR );
}
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 F
Opt F
Find & Replace

Also see: Tab Triggers