How to Use Draw Transition in Svelte for SVG Animations

In Svelte, use the draw transition to animate SVG strokes by importing it from 'svelte/transition' and applying it with transition:draw on SVG elements. This smoothly animates the stroke drawing effect when the element enters or leaves the DOM.

Syntax

The draw transition is imported from 'svelte/transition' and applied to SVG elements using the transition:draw directive. You can customize it with optional parameters like duration (animation time in milliseconds) and delay (wait time before animation starts).

Example usage:

• import { draw } from 'svelte/transition';
• <svg><circle transition:draw={{ duration: 1000 }} /></svg>

svelte

import { draw } from 'svelte/transition';

<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="2"
    fill="none"
    transition:draw={{ duration: 1000 }}
  />
</svg>

Output

A circle SVG element is drawn smoothly over 1 second when it appears.

Example

This example shows a circle that animates its stroke drawing when toggled on and off with a button. It demonstrates how the draw transition works on SVG elements in Svelte.

svelte

<script>
  import { draw } from 'svelte/transition';
  let visible = true;
</script>

<button on:click={() => visible = !visible} aria-pressed={visible} aria-label="Toggle circle drawing">
  Toggle Circle
</button>

{#if visible}
  <svg width="120" height="120" aria-label="Animated circle">
    <circle
      cx="60"
      cy="60"
      r="50"
      stroke="blue"
      stroke-width="4"
      fill="none"
      transition:draw={{ duration: 1500 }}
    />
  </svg>
{/if}

Output

A blue circle stroke is drawn smoothly over 1.5 seconds each time it appears or disappears when toggled.

Common Pitfalls

Common mistakes when using the draw transition include:

• Applying draw to non-SVG elements, which won't animate.
• Forgetting to set stroke and fill="none" on SVG shapes, so the stroke animation is not visible.
• Not toggling the element's presence in the DOM, since draw animates on enter and leave only.

Always ensure the SVG element is conditionally rendered and has visible stroke styles.

svelte

/* Wrong: draw transition on a div (no effect) */
<div transition:draw>Not an SVG</div>

/* Right: draw transition on SVG circle with stroke */
<svg>
  <circle stroke="red" fill="none" transition:draw />
</svg>

Output

Only the SVG circle stroke animates; the div does not animate with draw transition.

Quick Reference

Key points for using draw transition:

• Import from 'svelte/transition'.
• Apply with transition:draw on SVG elements.
• Customize with duration and delay.
• Works only on SVG stroke animations.
• Element must enter or leave DOM to animate.

Key Takeaways

Use the draw transition only on SVG elements with visible strokes for smooth stroke animations.

Import draw from 'svelte/transition' and apply it with transition:draw directive.

Customize animation timing with duration and delay parameters.

Ensure the SVG element is conditionally rendered to trigger the transition on enter and leave.

Avoid applying draw transition to non-SVG elements as it will have no effect.