<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tmrDevelops/pen/eEWYPe?depth=everything&limit=all&order=popularity&page=4&q=os&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">body {
width: 100%;
margin: 0;
overflow: hidden;
background: #BBCCB6;
}
canvas {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
background: #E9F0C9;
-webkit-filter: drop-shadow(26px 26px 20px rgba(0, 0, 0, 0.5));
filter: drop-shadow(26px 26px 20px rgba(0, 0, 0, 0.5));
border: 2px solid #333838;
}
</style></head><body>
<canvas id = 'canv'></canvas>
<!--
***Might be a little funky in OS X Firefox.
"Droste Effect" Spiral composed of contiguous Equilateral triangles.
Droste Effect is a pattern appearing recursively within itself; the smaller version contains an even smaller version of the pattern, and so on.
!-->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/doyle.js'></script>
<script >var c = document.getElementById('canv'),
$= c.getContext("2d");
c.width = window.innerWidth/1.5;
c.height = window.innerHeight/1.5;
var fst;
var p = 18, q = 24;
var root = doyle(q, p);
var rep = 800;
function cmul(w, z) {
return [
w[0]*z[0] - w[1]*z[1],
w[0]*z[1] + w[1]*z[0]
];
}
function modulus(p) {
return Math.sqrt(p[0]*p[0] + p[1]*p[1]);
}
function crecip(z) {
var d = z[0]*z[0] + z[1]*z[1];
return [z[0]/d, -z[1]/d];
}
function spiral(r, st, delta, gamma, opts) {
var rd = crecip(delta),
md = modulus(delta),
mrd = 1/md,
colidx = opts.i,
cols = opts.fill,
min_d = opts.min_d,
max_d = opts.max_d;
for (var q = st, modq = modulus(q);
modq > min_d;
q = cmul(q, rd),
modq *= mrd){
colidx=(colidx+cols.length-1)%
cols.length;
}
for (;modq < max_d; q=cmul(q, delta), modq*=md) {
$.fillStyle = cols[colidx];
$.beginPath();
$.moveTo.apply($, q);
$.lineTo.apply($, cmul(q, delta));
$.lineTo.apply($, cmul(q, gamma));
$.closePath();
$.fill();
colidx = (colidx + 1)%cols.length;
}
}
function draw(t) {
$.setTransform(1, 0, 0, 1, 0, 0);
$.clearRect(0, 0, c.width, c.height);
$.translate(Math.round(c.width/2),
Math.round(c.height/2));
var sc = Math.pow(root.mod_a, t);
$.scale(sc, sc);
$.rotate(root.arg_a * t);
var min_d = 1/sc,
max_d = c.width*2;
var beg = root.a;
for (var i=0; i<q; i++) {
spiral(root.r,beg,root.a,root.b,{
fill: ['#D43D2C',
'#333838',
'#2CC3D4'],
i: i,
min_d: min_d,
max_d: max_d
});
beg = cmul(beg, root.b);
}
}
function anim(ts) {
if (!fst) fst = ts;
draw(((ts - fst) % (rep*3)) / rep);
window.requestAnimationFrame(anim);
}
anim();
//# sourceURL=pen.js
</script>
</body></html>
