Containers

Description

More playing around with SVGs. Not really using bitty for much other than prepping everything before making things visible. Here' the code:

The HTML

<bitty-1-3 data-connect="PageContent">
  <div class="container">
    [! include "svgs/box-0.svg" !]
    [! include "svgs/box-1.svg" !]
    [! include "svgs/box-2.svg" !]
    [! include "svgs/box-3.svg" !]
    [! include "svgs/box-4.svg" !]
    [! include "svgs/box-5.svg" !]
    [! include "svgs/box-6.svg" !]
  </div>
</bitty-1-3>

The CSS

.container {
  overflow: clip;
  position: relative;
  height: 26rem;
}

svg {
  position: absolute;
  width: 26rem;
  height: 26rem;
}

.inactive {
  bottom: 50rem;
  left: 2rem;
}

.speed {
  background-color: var(--background);
  transition: 
    width 1900ms linear,
    left 1900ms linear,
    bottom 1200ms ease-in;
  z-index: 1000;
}

.active {
  bottom: 0rem;
}

.smaller {
  width: 18rem;
  left: 5rem;
}

The JavaScript

function randMinusItem(array, item) {
  const index = array.indexOf(item);
  const items = index > -1 ? array.toSpliced(index, 1) : array;
  return items[
    Math.floor(Math.random() * items.length)
  ];
}

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

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

window.PageContent = class {
  async bittyInit() {
    this.boxes = [...document.querySelectorAll(`svg`)];
    this.boxes.forEach((box) => {
      box.classList.add(`inactive`);
    });
    this.moving = [this.boxes[0]];
    document.documentElement.style.setProperty("--load-hider", "visible");
    await sleep(100);
    this.tickUpdate();
  }

  async tickUpdate() {
    const l = randInt(60, 90);
    const c = randInt(0, 120);
    const h = randInt(0, 360);
    this.moving[1] = this.moving[0];
    this.moving[0] = randMinusItem(this.boxes, this.moving[0]);
    this.moving[1].classList.remove("speed");
    this.moving[0].classList.add("speed");
    this.moving[0].style.stroke = `lch(${l}% ${c} ${h})`;
    await sleep(100);
    this.moving[0].classList.add("active");
    await sleep(1500);
    this.moving[1].classList.remove("active");
    this.moving[0].classList.add("smaller");
    await sleep(100);
    this.moving[1].classList.remove("smaller");
    await sleep(1600);
    this.tickUpdate();
  }
};