heart.html

<style>
  div:nth-child(21) > span {--y: 0;}
  div:nth-child(20) > span {--y: 0.05;}
  div:nth-child(19) > span {--y: 0.1;}
  div:nth-child(18) > span {--y: 0.15;}
  div:nth-child(17) > span {--y: 0.2;}
  div:nth-child(16) > span {--y: 0.25;}
  div:nth-child(15) > span {--y: 0.3;}
  div:nth-child(14) > span {--y: 0.35;}
  div:nth-child(13) > span {--y: 0.4;}
  div:nth-child(12) > span {--y: 0.45;}
  div:nth-child(11) > span {--y: 0.5;}
  div:nth-child(10) > span {--y: 0.55;}
  div:nth-child(9) > span {--y: 0.6;}
  div:nth-child(8) > span {--y: 0.65;}
  div:nth-child(7) > span {--y: 0.7;}
  div:nth-child(6) > span {--y: 0.75;}
  div:nth-child(5) > span {--y: 0.8;}
  div:nth-child(4) > span {--y: 0.85;}
  div:nth-child(3) > span {--y: 0.9;}
  div:nth-child(2) > span {--y: 0.95;}
  div:nth-child(1) > span {--y: 1.0;}

  div > span:nth-child(1) {--x: 0.0;}
  div > span:nth-child(2) {--x: 0.05;}
  div > span:nth-child(3) {--x: 0.1;}
  div > span:nth-child(4) {--x: 0.15;}
  div > span:nth-child(5) {--x: 0.2;}
  div > span:nth-child(6) {--x: 0.25;}
  div > span:nth-child(7) {--x: 0.3;}
  div > span:nth-child(8) {--x: 0.35;}
  div > span:nth-child(9) {--x: 0.4;}
  div > span:nth-child(10) {--x: 0.45;}
  div > span:nth-child(11) {--x: 0.5;}
  div > span:nth-child(12) {--x: 0.55;}
  div > span:nth-child(13) {--x: 0.6;}
  div > span:nth-child(14) {--x: 0.65;}
  div > span:nth-child(15) {--x: 0.7;}
  div > span:nth-child(16) {--x: 0.75;}
  div > span:nth-child(17) {--x: 0.8;}
  div > span:nth-child(18) {--x: 0.85;}
  div > span:nth-child(19) {--x: 0.9;}
  div > span:nth-child(20) {--x: 0.95;}
  div > span:nth-child(21) {--x: 1.0;}

  @keyframes timer {
    0% {--time: 0.00;} 5% {--time: 0.05;} 10% {--time: 0.10;} 15% {--time: 0.15;} 20% {--time: 0.20;}
    25% {--time: 0.25;} 30% {--time: 0.30;} 35% {--time: 0.35;} 40% {--time: 0.40;} 45% {--time: 0.45;}
    50% {--time: 0.50;} 55% {--time: 0.55;} 60% {--time: 0.60;} 65% {--time: 0.65;} 70% {--time: 0.70;}
    75% {--time: 0.75;} 80% {--time: 0.80;} 85% {--time: 0.85;} 90% {--time: 0.90;} 95% {--time: 0.95;}
    100% {--time: 1.00;}
  }
  :root {
    animation: timer 1s infinite;
  }
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
  }
  span {
    display: inline-block;
    height: 1rem;
    width: 1rem;
  }
</style>

<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>

<style
  style="display: inline-block; white-space: pre-wrap; font: 1em monospace;"
  contenteditable="true"
>
  /* Editable style!
    Provided globals: --x, --y, normalized from 0 to 1
    and --time from 0 to 1 over 1 second then loops (since CSS can't increase a counter forever)  */
  span {
    --PI: 3.14159;
    /* create new UV from -1 to 1 */
    --u: calc(2.0 * var(--x) - 1.0);
    --v: calc(2.0 * var(--y) - 1.0);

    --absU: max(var(--u), -1*var(--u)); /* abs() polyfill */
    --v2: calc(var(--v) * 1.2 - var(--absU) * (1.0 - var(--absU)));
    --t2: calc(3.14 * var(--time)); /* range:  [0, PI] */
    --dist: calc(var(--u) * var(--u) + var(--v2) * var(--v2) - sin(var(--t2)) * 0.3);

    background-color: rgb(
      calc(var(--dist) * 255),
      calc(var(--dist) * 255 * 1.5),
      calc(var(--dist) * 255 * 1.2)
    );
  }
</style>