JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<div id="container">
  <canvas id="myCanvas"></canvas>
</div>

CSS

#container {
  
  border: 1px solid grey;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 150px;
}
#myCanvas {
  width: 300px;
  height: 150px;
  z-index: 0;
  position: absolute;
  
}
#container::after {
  position: absolute;
  transform-origin: center right;
  content: "";
  background-color: red;
  width: 100%;
  height: 100%;
  z-index: 1;
  animation: 2s linear 0s infinite alternate move_eye;
}

@keyframes move_eye {
  from {
    margin-left: 100%;
  }
  to {
   margin-left: 0;
  }
}

JavaScript

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 20, 200, 100);
ctx.stroke();