JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<canvas width="500" height="500"></canvas>

CSS

canvas {
  border: 1px dashed gray;
  
  animation-duration: 3s;
  animation-name: bobble;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes bobble {
    0% {
      transform: rotate3d(1, -1, 1, 60deg);
      animation-timing-function: ease-in;
    }
    50% {
      transform: rotate3d(1, 1, 1, 60deg);
      animation-timing-function: ease-out;
    }
    100% {
      transform: rotate3d(-1, -1, 1, 60deg);
    }
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);

ctx.fillStyle = "cyan";
ctx.beginPath();
ctx.moveTo(225,250);
ctx.lineTo(200,275);
ctx.lineTo(200,225);
ctx.fill();