Sub-optimal

Description

Yeah, yeah... it's silly.

Here's the code.

The HTML

<bitty-1-3 data-connect="PageContent">
  <div class="ocean">
    [! include "/svgs/sub.svg" !]
    [! include "/svgs/waves.svg" !]
  </div>
</bitty-1-3>

The CSS

:root {
  --sub-color-dark: lch(80% 70 120);
  --sub-color-light: lch(30% 70 120);
  --sub-left: 50vw;
  --sub-top: 0px;
  --time: 4000ms;
  --waves-color-dark: lch(80% 30 230);
  --waves-color-light: lch(30% 30 230);
}

.ocean {
  position: relative;
  height: 60vh;
  overflow: clip;
}

.sub {
  position: absolute;
  top: var(--sub-top);
  left: var(--sub-left);
  width: 30vw;
  transition: 
    left var(--time) linear,
    top var(--time) linear
    ;
}

.sub-color {
  stroke: var(--sub-color-light);
  fill: var(--sub-color-light);
}

.sub-letter {
  stroke: var(--sub-color-light);
  fill: none;
}

.waves {
  width: 100%;
}

.waves-color {
  stroke: var(--waves-color-light);
  fill: var(--waves-color-light);
}

@media (prefers-color-scheme: dark) {
  .sub-color {
    stroke: var(--sub-color-dark);
    fill: var(--sub-color-dark);
  }

  .sub-letter{
    stroke: var(--sub-color-dark);
    fill: none;
  }

  .waves-color {
    stroke: var(--waves-color-dark);
    fill: var(--waves-color-dark);
  }
}

The JavaScript

function randInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function setProp(key, value) {
  document.documentElement.style.setProperty(
    key,
    value,
  );
}

window.PageContent = class {
  bittyInit() {
    this.moveSub();
  }

  async moveSub() {
    const startTop = randInt(0, 40);
    const endTop = randInt(0, 40);
    const time = randInt(2000, 8000);
    const c = randInt(10, 120);
    const h = randInt(0, 360);
    setProp("--sub-color-light", `lch(20% ${c} ${h})`);
    setProp("--sub-color-dark", `lch(85% ${c} ${h})`);
    setProp("--time", "0ms");
    await sleep(100);
    setProp("--sub-top", `${startTop}vh`);
    setProp("--sub-left", "130vw");
    await sleep(100);
    setProp("--time", `${time}ms`);
    await sleep(100);
    setProp("--sub-top", `${endTop}vh`);
    setProp("--sub-left", "-50vw");
    await sleep(time + 200);
    this.moveSub();
  }
};