Lab 02 / 04

Vector Studio

Three svg helpers — createDrawable, morphTo, createMotionPath — doing the work of an entire plotter room.

Spec 01 — Line Draw

7 strokes · delay stagger(180)

const strokes = svg.createDrawable('#linework path, #linework polyline');
animate(strokes, {
  draw: ['0 0', '0 1'],
  duration: 1600,
  delay: stagger(180),
  ease: 'inOutQuad',
});

Spec 02 — Morph

4 polygons · 12 points each

shape: square

createTimeline({ loop: true, defaults: { duration: 900, ease: 'inOutQuad' } })
  .call(() => label('star'))
  .add('#morph', { points: svg.morphTo('#shape-star') })
  .call(() => label('blob'))
  .add('#morph', { points: svg.morphTo('#shape-blob') })
  // ...arrow, then back to square

Spec 03 — Motion Path

duration 4000 · loop · inOutSine

Scrub

drag to pause + seek · resume with play state

animate('#ship', {
  ...svg.createMotionPath('#s-curve'),   // translateX / translateY / rotate
  duration: 4000,
  loop: true,
  ease: 'inOutSine',
});