<script>
import {draw} from 'svelte/transition';
// The M command moves to a given x and y location.
// The h command draws a horizontal line with a given dx.
// The v command draws a vertical line with a given dy.
// The l command draws a line with a given dx and dy.
// By default the origin is the upper-left corner.
// This assumes we have flipped to coordinate system
// so the origin is in the lower-left.
const commands = 'M 2 5 v-4 h3 v3 h2 v-3 h3 v4 h-9 l 5 4 l 5 -4 h-1';
const max = 12;
let show = true;
</script>
<style>
svg {
outline: solid lightgray 1px;
}
</style>
<div>
<button on:click={() => show = !show}>
Toggle
</button>
</div>
{#if show}
<svg width={200} height={200} viewBox="0 0 {max} {max}">
<g transform="translate(0 {max}) scale(1 -1)">
<path transition:draw={{duration: 1500}}
d={commands}
fill="none"
stroke="red"
stroke-width="0.1px"
/>
</g>