yin yang canvas

index.html

                                <canvas></canvas>

script.babel

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);});
})();

style.css

body
{display: flex;
 justify-content: center;
 align-items: center;
 background: gray;
 height: 100vh;}
canvas
{width: 75vmin;
 height: 75vmin;
 border-radius: 50%;
 background: white;}

yin-yang-canvas.markdown

yin yang canvas

A Pen by Adam Lee on CodePen.

License.