Slides of SVG

Experiment #12 ● 2nd March, 2021 ● by Joshua Nussbaum

Continuing on with the SVG slide thing. I added the ability for each slide to be it’s own SVG. That means each slide can have it’s own unique viewport dimensions and styling. Which results in better organized code.

The top level SVG is like the “Storyboard”, and the individual SVGs are “Scenes”.

<!-- top level is storyboard -->
<svg viewBox="...">
  <!-- each scene/slide is a group <g>, translated to a start position with CSS -->
  <g style="transform: translate(...)">
    <!-- this is a specific scene/slide -->
    <!-- it doesn't have to be inline, it can come from a component -->
    <!-- the viewBox here is the scene's dimensions -->
    <svg viewBox="...">
      <!-- interesting stuff here -->
    </svg>
  </g>

  <!-- more scenes here -->
</svg>

When a scene comes into view, it’s active prop is set to true which works as the trigger for the animation in the scene.

Here’s the code:

https://svelte.dev/repl/aadfa324402b46478771e5e421aa6248?version=3.35.0

Here’s what it looks like:

view all experiments

Slides of SVG

Here’s the code:

Here’s what it looks like:

Stay tuned in