Skip to content

Instantly share code, notes, and snippets.

@adamdavislee
Created December 31, 2017 16:06
Show Gist options
  • Save adamdavislee/631f9dcd37a3d43e61643526540be2c0 to your computer and use it in GitHub Desktop.
Save adamdavislee/631f9dcd37a3d43e61643526540be2c0 to your computer and use it in GitHub Desktop.
yin yang canvas
<canvas></canvas>
const canvas=document.querySelector('canvas')
const context=canvas.getContext('2d');
let radius;
const tau=2*Math.PI;
const frames=120
function size(){
canvas.width=canvas.height=Math.round(canvas.getBoundingClientRect().width);
radius=canvas.width/2;
context.translate(radius,radius);};
size();
const minRadius=1/2*1/2*radius;
const maxRadius=radius-minRadius;
addEventListener('resize',size,false);
(function animate(frame=0){
let time=(Math.cos(frame/frames*tau)+1)/2
 let radius1=minRadius*time+(1-time)*maxRadius;
 let radius2=radius-radius1;
context.clearRect(-radius,-radius,canvas.width,canvas.width);
context.fillStyle='black';
context.beginPath();
context.arc(0,0,radius,tau/2,0);
 context.arc(radius2,0,radius1,0,tau/2);
 context.arc(-radius1,0,radius2,0,tau/2,true);
 context.arc(-radius1,0,radius/8,0,tau);
context.closePath();
context.fill();
context.fillStyle='white'
context.beginPath();
 context.arc(radius2,0,radius/8,0,tau);
context.closePath();
context.fill();
context.rotate(tau/frames);
requestAnimationFrame(function(){animate(frame+1);});
})();
body
{display: flex;
justify-content: center;
align-items: center;
background: gray;
height: 100vh;}
canvas
{width: 75vmin;
height: 75vmin;
border-radius: 50%;
background: white;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment