JSFiddle - React, Tailwind, and code Playground

by Ben Clayton

HTML

<div class="pretty">
<img src="https://www.thisiscolossal.com/wp-content/uploads/2018/12/agifcolossal3opt1.gif" />
</div>

CSS

div {
  background-color:red;
  width: clamp(500px, 100%, 750px);
}

img {
  mix-blend-mode: darken;
  width:100%;
}

JavaScript

$(document).ready(function() {
  var colors = [254, 0, 0];
  var i = 0;
  var j = 2;

  setInterval(function() {
    $(".pretty").css("background-color", "rgb(" + colors[0] + "," + colors[1] + "," + colors[2] + ")");
    colors[i]++;
    colors[j]--;
    if (colors[i] > 254) {
      i = (i + 1) % colors.length;
      j = (j + 1) % colors.length;
    }

  }, 100);
});