Is it not possible to use Svelte's draw transition when the `d` attribute of an SVG path is generated by a function?

edit

It is possible to use Svelte's draw transition with a dynamically generated d attribute of an SVG path. The key is to use Svelte's $: reactive declarations to update the path's d attribute whenever the function's output changes.

For example, let's say you have a function called getPath that generates the d attribute based on some input. Here's how you can use it with Svelte's draw transition:

<script>
  import { draw } from 'svelte/transition';

  let input = '';

  $: pathD = getPath(input); // dynamically generate path's d attribute

  function getPath(input) {
    // some code to generate the path's d attribute based on input
  }
</script>

<svg width="100" height="100">
  <path d={pathD} transition:draw={{ duration: 1000 }} />
</svg>

In this example, we use a reactive declaration $: pathD = getPath(input) to update the pathD variable whenever input changes. We then pass the pathD variable as the d attribute of the path element.

Finally, we add the transition:draw directive to the path element to animate its drawing based on the changes to the d attribute. We can pass options to the draw transition to control its duration and easing.