svelte-zdog

svelte components for zdog 3D renders

🧰 install

copied to clipboard !

📐 create

<script>
  import { Illustration, Group, Ellipse } from 'svelte-zdog'
</script>

<Illustration element="svg" width={240} height={240} dragRotate>
  <Group translate={{ z: 20 }}>
    <Ellipse width={180} height={100} color="#f5f5f4" stroke={10} fill />
    <Ellipse diameter={80} color="#fbbf24" stroke={10} fill />
    <Ellipse diameter={40} color="#1c1917" stroke={10} fill />
    <Ellipse
      translate={{ x: 20, y: -20 }}
      diameter={30}
      color="#f5f5f4"
      stroke={10}
      fill
    />
  </Group>
</Illustration>

build using declarative tree-like structs,
components expose all primitive options as props

🎬 animate

<script>
  import { Illustration, Ellipse, TAU } from 'svelte-zdog'
  let rotate = true
</script>

<Illustration
  element="svg"
  width={240}
  height={240}
  dragRotate
  onDragStart={() => (rotate = false)}
  onDragEnd={() => (rotate = true)}
  update={node => (delta, ms) => {
    if (rotate) {
      node.rotate.x += delta / 800
      node.rotate.y += delta / 1600
      node.rotate.z += delta / 2400
    }
  }}
>
  <Ellipse diameter={128} stroke={4} color="#ef4444" />
  <Ellipse diameter={128} stroke={4} color="#84cc16" rotate={{ x: TAU / 4 }} />
  <Ellipse diameter={128} stroke={4} color="#0ea5e9" rotate={{ y: TAU / 4 }} />
</Illustration>

props are not reactive,
components accept an update function

node → primitive reference
delta → ms since last frame
ms → total ms elapsed

📦 pkg exports