JSFiddle - React, Tailwind, and code Playground

by Buck Evan

HTML

<!DOCTYPE html>
<style>
html, body {
  margin: 0;
  font-size: 36px;
}
.svg100 {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.5;
}
.animated {
  will-change: transform;
  transition-property: transform;
  transition-timing-function: linear;
}
.target {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 20px);
  border: 2px solid black;
  text-align: center;
  background-color: green;
}
.target::after {
  content: "not occluded";
}
.target.occluded {
  background-color: red;
}
.target.occluded::after {
  content: "occluded";
}
#forcer {
  color: white;
  position: absolute;
}
</style>

<div id=forcer>o</div>

<div class='target'></div>

<svg viewBox="0 0 100 100" class="animated svg100">
  <circle cx="50" cy="50" r="49" fill="blue" />
</svg>

<script>
let SPEED = 300;
let RUNNING = false;
let FORCE_MARGIN = 0;
let FORCER = document.getElementById('forcer');

function force_frame() {
  FORCE_MARGIN = (FORCE_MARGIN + 1) % 100;
  FORCER.style.left = String(FORCE_MARGIN) + "px";
  if (RUNNING)
    requestAnimationFrame(force_frame);
}

function animate(el) {
  if (!RUNNING)
    return;
  let x = Number(el.getAttribute('x1') || 0);
  let y = Number(el.getAttribute('y1') || 0);
  let dx = el.hasAttribute('dx') ? Number(el.getAttribute('dx')) : 2;
  let dy = el.hasAttribute('dy') ? Number(el.getAttribute('dy')) : 1;
  let maxX = window.innerWidth - 100;
  let maxY = window.innerHeight - 100;
  if (x == maxX)
    dx = -Math.abs(dx);
  else if (x == 0)
    dx = Math.abs(dx);
  if (y == maxY)
    dy = -Math.abs(dy);
  else if (y == 0)
    dy = Math.abs(dy);
  let xTicks = dx < 0 ? -x / dx : (maxX - x) / dx;
  let yTicks = dy < 0 ? -y / dy : (maxY - y) / dy;
  let finalX, finalY;
  if (xTicks > yTicks) {
    finalX = Math.max(0, Math.min(maxX, x + (yTicks * dx)));
    finalY = dy > 0 ? maxY : 0;
  } else {
    finalX = dx > 0 ? maxX : 0;
    finalY = Math.max(0, Math.min(maxY, y + (xTicks * dy)));
  }
  let matrix =...