JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400px" height="200px"></canvas>

CSS

body {
  background: linear-gradient(270deg, #000, #fff);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 5s ease infinite;
  -moz-animation: AnimationName 5s ease infinite;
  animation: AnimationName 5s ease infinite;
}
@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes AnimationName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.save();
ctx.beginPath();
ctx.fillStyle = "darkred";
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
ctx.font = "70pt Arial";
ctx.globalCompositeOperation = "xor";
ctx.beginPath();
ctx.fillText("To Be", 60, 80);
ctx.fillText("Cut Out", 35, 180);
ctx.fill();
ctx.restore();