Upside-down

Weird Web October 2025 | Overview
This one is mostly about testing the .fetchSVG() function for the next iteration of bitty. It loads an SVG from an external file but still provides the ability to style it with CSS.
The Code

The HTML

<bitty-2-0 
  data-connect="PageContent" 
  data-send="init">

  <div data-receive="init"></div>
</bitty-2-0>

The CSS

svg {
  stroke: var(--reverse);
  max-height: 50vh;
}

The JavaScript

window.PageContent = class {
  async init(_event, el) {
    const svg = await this.api.fetchSVG(
      "/images/this-side-up.svg",
    );
    el.appendChild(svg);
  }
};