JSFiddle - React, Tailwind, and code Playground

by sosegon

HTML

<canvas id="canvas" width="800" height="600"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  let t = 0;

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the helix
    for (let i = 0; i < 100; i++) {
      const x = 400 + 100 * Math.cos(i / 5 + t);
      const y = 300 + i * 2; // Control the 'height' of the helix
      const size = 2; // Size of the point

      ctx.beginPath();
      ctx.arc(x, y, size, 0, Math.PI * 2);
      ctx.fillStyle = "red";
      ctx.fill();
    }

    t += 0.05; // Adjust speed
    requestAnimationFrame(draw);
  }

  draw();