<div role="image" aria-label="Animated explanation of how a for loop works"></div>

@property --stage0 {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

@property --stage1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

@property --stage2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

@property --stage3 {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

@property --stage4 {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

@property --stage5 {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

@keyframes animateGraph {
  0%, 3%, 100% {
    --stage0: #fff;
    --stage1: #fff;
    --stage2: #fff;
    --stage3: #fff;
    --stage4: #fff;
    --stage5: #fff;
  }
   5% { --stage0: #e4b7e4; }
   8% { --stage0: #fff; --stage1: #fff; }
  10% { --stage1: #3db7e4; }
  13% { --stage1: #fff; --stage2: #fff; }
  15% { --stage2: #8de4b7; }
  18% { --stage2: #fff; --stage3: #fff; }
  20% { --stage3: #3db7e4; }
  23% { --stage3: #fff; --stage4: #fff; }
  25% { --stage4: #3db7e4; }
  28% { --stage4: #fff; --stage2: #fff; }
  30% { --stage2: #8de4b7; }
  33% { --stage2: #fff; --stage3: #fff; }
  35% { --stage3: #3db7e4; }
  38% { --stage3: #fff; --stage4: #fff; }
  40% { --stage4: #3db7e4; }
  43% { --stage4: #fff; --stage2: #fff; }
  45% { --stage2: #8de4b7; }
  48% { --stage2: #fff; --stage3: #fff; }
  50% { --stage3: #3db7e4; }
  53% { --stage3: #fff; --stage4: #fff; }
  55% { --stage4: #3db7e4; }
  58% { --stage4: #fff; --stage2: #fff; }
  60% { --stage2: #ff9a8c; }
  63% { --stage2: #fff; --stage5: #fff; }
  65% { --stage5: #e4b7e4; }
  68% { --stage5: #fff; }
}

div {
  --stage0: #fff;
  --stage1: #fff;
  --stage2: #fff;
  --stage3: #fff;
  --stage4: #fff;
  --stage5: #fff;
  white-space: pre;
  font-family: monospace, monospace;
  font-size: 2vmin;
  line-height: 3vmin;
  height: 63vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

div::before {
  content: " x=0 \0A  x<3? \0A  doSomething() \0A x++";
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  padding-top: 5.5vmin;
  line-height: 10vmin;
  width: 50vmin;
  height: 50vmin;
  animation: animateGraph 15s 1;
  background-image:
    /* all transition lines */
    linear-gradient(to right, transparent calc(50% - 0.5px), black 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(to right, transparent calc(50% - 0.5px), black 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(to right, transparent calc(50% - 0.5px), black 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(to right, transparent calc(50% - 0.5px), black 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(to right, transparent calc(50% - 0.5px), black 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(to right, transparent calc(10% - 0.5px), black 0 calc(10% + 0.5px), transparent 0),
    linear-gradient(black 1px, transparent 0 calc(100% - 1px), black 0),
    linear-gradient(black, black),
    /* arrows */
    linear-gradient(to right top, black 50%, transparent 0),
    linear-gradient(to right bottom, black 50%, transparent 0),
    linear-gradient(to right top, black 50%, transparent 0),
    linear-gradient(to right bottom, black 50%, transparent 0),
    linear-gradient(to left bottom, black 50%, transparent 0),
    linear-gradient(to right bottom, black 50%, transparent 0),
    linear-gradient(to left bottom, black 50%, transparent 0),
    linear-gradient(to right bottom, black 50%, transparent 0),
    linear-gradient(to left bottom, black 50%, transparent 0),
    linear-gradient(to right bottom, black 50%, transparent 0),
    linear-gradient(to left bottom, black 50%, transparent 0),
    linear-gradient(to right bottom, black 50%, transparent 0),
    /* x = 0 */
    linear-gradient(black 1px, transparent 0 calc(100% - 1px), black 0),
    linear-gradient(to right, black 1px, var(--stage1) 0 calc(100% - 1px), black 0),
    /* x < 3 */
    linear-gradient(to left bottom, var(--stage2) calc(50% - 1px), black 0 50%, transparent 0),
    linear-gradient(to right bottom, var(--stage2) calc(50% - 1px), black 0 50%, transparent 0),
    linear-gradient(to left top, var(--stage2) calc(50% - 1px), black 0 50%, transparent 0),
    linear-gradient(to right top, var(--stage2) calc(50% - 1px), black 0 50%, transparent 0),
    /* doSomething */
    linear-gradient(black 1px, transparent 0 calc(100% - 1px), black 0),
    linear-gradient(to right, black 1px, var(--stage3) 0 calc(100% - 1px), black 0),
    /* x++ */
    linear-gradient(black 1px, transparent 0 calc(100% - 1px), black 0),
    linear-gradient(to right, black 1px, var(--stage4) 0 calc(100% - 1px), black 0),
    /* start */
    radial-gradient(circle closest-side, var(--stage0) 85%, black 0 calc(85% + 1px), transparent 0),
    radial-gradient(circle closest-side, var(--stage5) 85%, black 0 calc(85% + 1px), transparent 0)
    ;
  background-size:
    /* all transition lines */
    100% 5vmin,
    100% 5vmin,
    100% 5vmin,
    100% 5vmin,
    100% 5vmin,
    100% 33vmin,
    20vmin 33vmin,
    11vmin 1px,
    /* arrows */
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    0.5vmin 0.5vmin,
    /* x = 0 */
    10vmin 5vmin,
    10vmin 5vmin,
    /* x < 3 */
    7vmin 2.5vmin,
    7vmin 2.5vmin,
    7vmin 2.5vmin,
    7vmin 2.5vmin,
    /* doSomething */
    25vmin 5vmin,
    25vmin 5vmin,
    /* x++ */
    10vmin 5vmin,
    10vmin 5vmin,
     /* start */
     2vmin 2vmin,
     2vmin 2vmin
    ;
  background-position:
    /* all transition lines */
    0 3vmin,
    0 13vmin,
    0 23vmin,
    0 33vmin,
    0 43vmin,
    0 15vmin,
    5vmin 15vmin,
    32vmin calc(20.5vmin - 0.5px),
    /* arrows */
    calc(50% - 0.25vmin) 14.5vmin,
    calc(50% - 0.25vmin) 15vmin,
    calc(90% - 1.75vmin) 20vmin,
    calc(90% - 1.75vmin) 20.5vmin,
    calc(50% - 0.25vmin) 7.5vmin,
    calc(50% + 0.125vmin) 7.5vmin,
    calc(50% - 0.25vmin) 17.5vmin,
    calc(50% + 0.125vmin) 17.5vmin,
    calc(50% - 0.25vmin) 27.5vmin,
    calc(50% + 0.125vmin) 27.5vmin,
    calc(50% - 0.25vmin) 37.5vmin,
    calc(50% + 0.125vmin) 37.5vmin,
    /* x = 0 */
    50% 8vmin,
    50% 8vmin,
    /* x < 3 */
    18vmin 20.5vmin,
    25vmin 20.5vmin,
    18vmin 18vmin,
    25vmin 18vmin,
    /* doSomething */
    50% 28vmin,
    50% 28vmin,
    /* x++ */
    50% 38vmin,
    50% 38vmin,
    /* start/end */
    50% 1vmin,
    90% 19.5vmin
    ;
  background-repeat: no-repeat;
}

div::after {
  animation: animateGraph 15s 1;
  content: "for (let x = 0; x < 3; x++) { \0A   doSomething(); \0A }";
  display: inline-block;
  background-image:
    linear-gradient(var(--stage1), var(--stage1)),
    linear-gradient(var(--stage2), var(--stage2)),
    linear-gradient(var(--stage3), var(--stage3)),
    linear-gradient(var(--stage4), var(--stage4));
  background-size:
    5ch 3vmin,
    5ch 3vmin,
    13ch 3vmin,
    3ch 3vmin;
  background-position:
    9ch 0,
    16ch 0,
    2ch 3vmin,
    23ch 0;
  background-repeat: no-repeat;
}