JSFiddle - React, Tailwind, and code Playground

by Ercan Cicek

HTML

<canvas id="morphCanvas" height="150" width="150"></canvas>

CSS

canvas {
  margin: 100px 0 0 100px
}

.rotateAnim {
  animation: rotate 2s 1;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotate {
  65% {
    transform: rotate(240deg);
  }
  80% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(225deg);
  }
}

JavaScript

drawLines();

function drawLines() {
    var canvas = document.querySelector("#morphCanvas"),
    		ctx = canvas.getContext("2d"),
				canvasWidth = canvas.width,
    		canvasHeight = canvas.height;
    
    var intvCount = 1,
    		lines = { first: [0,0], second: [canvasWidth,0] };
    
  	ctx.lineWidth = 15,
    setInterval(function() {
    	// --- first line
      ctx.beginPath();
      ctx.moveTo(lines.first[0], lines.first[1]);
    	lines.first = [canvasWidth * intvCount / 100, canvasHeight * intvCount / 100];
      ctx.lineTo(lines.first[0], lines.first[1]);
    	ctx.stroke();
      ctx.closePath();
      
      // --- second line
      ctx.beginPath();
      ctx.moveTo(lines.second[0], lines.second[1]);
    	lines.second = [canvasWidth - (canvasWidth * intvCount / 100), canvasHeight * intvCount / 100];
      ctx.lineTo(lines.second[0], lines.second[1]);
    	ctx.stroke();
      ctx.closePath();
      
      intvCount++;
      if(intvCount === 101) rotFn();
    }, 5);
}

function rotFn() {
  $("#morphCanvas").addClass("rotateAnim");
}