move

Wrap

transform: translate

css style to keep code concise. I like to use

transform

s liberally, since they are easy to animate (via CSS transitions), and one of the most performant ways to animate on the web.

move.js

export default (x, y) => `transform: translate(${x}px, ${y}px)`

Usage example:

MoveWrapper.svelte

<script>
  import { tweened } from "svelte/motion";
  import move from "./move";

  let left = tweened(0);
</script>

<svg viewBox="-1 0 12 2">
  <circle style="{move($left, 1)}" r="0.5"></circle>
</svg>

<div class="note">Click to update</div>
<svelte:window on:click="{() => left.set(Math.random() * 10)}" />

<style>
  svg {
    width: 100%;
  }
  circle {
    fill: white;
  }
  .note {
    position: absolute;
    top: 0;
    font-style: italic;
    color: var(--text-light);
  }
</style>

Click to update