JSFiddle - React, Tailwind, and code Playground

by blackpolygon

HTML

<html>

  <head>
    <title>Altered circles</title>
  </head>

  <body>
    <canvas id="canvas"></canvas>
  </body>

</html>

CSS

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
  background: #212122;
}

JavaScript

var canvas, ctx

function init() {
  canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  ctx = canvas.getContext('2d');
  ctx.lineWidth = 2;
  ctx.strokeStyle = "#F0f0f0";
}

function draw(radius, amplitude) {
console.log(radius, amplitude);

  var sides = 2000;
  ctx.beginPath();
  for (var i = 0; i <sides; i++) {
    var angle = i * ((Math.PI * 2) / sides);

    var newRadius = radius + Math.cos(i/10) * amplitude;
    var x = (canvas.width / 2) + Math.cos(angle) * newRadius;
    var y = (canvas.height / 2) + Math.sin(angle) * newRadius;
    ctx.lineTo(x, y);
  }

  ctx.stroke();
  ctx.closePath();
}

init();

for (var i = 1; i < 300; i++) {
  var radius = 50 + i * 15;
  var amplitude = 5 + i*Math.sin(i/2);

  draw(radius, amplitude);
}