astro-homepage/src/components/Graph/Graph.svelte at 46c6d4e4d58af77d062f4a47c1c89290f58e59e1 · Trombach/astro-homepage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script lang="ts">
import { draw } from "svelte/transition";
import { onMount } from "svelte";

let show = false;
onMount(() => {
  show = true;
});
</script>

<svg
  viewBox="0 -30 312.49279 241.62859"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  {#if show}
    <path
      transition:draw={{ duration: 2500 }}
      d="m 138.20133,96.169887 36.67167,-0.0021 -18.3441,45.885573 -48.88072,-28.2213 30.55424,-17.662998 18.32544,45.882238"
    />
    <path
      transition:draw={{ delay: 150, duration: 2500 }}
      d="M 174.76114,96.115464 156.42349,64.357912 205.33361,57.301583 V 113.74417 L 174.75988,96.114924 205.33234,57.303514"
    />
    <path
      transition:draw={{ delay: 300, duration: 2500 }}
      d="m 156.30265,64.359737 -18.33402,31.759648 -30.56602,-38.829243 48.88071,-28.221292 0.0195,35.292248 -48.89789,-7.070822"
    />
    <path
      transition:draw={{ delay: 500, duration: 2500 }}
      d="M 156.57449,240.83508 0.79304268,0.79386718 107.67958,113.81476 107.16011,57.218833 0.79315868,0.79341018 156.07603,29.022022"
    />
    <path
      transition:draw={{ delay: 650, duration: 2500 }}
      d="M 0.79374999,0.79456828 H 311.69983 L 156.4551,29.05424 205.3146,57.29965 311.69673,0.79353428 205.35833,113.73817"
    />
    <path
      transition:draw={{ delay: 800, duration: 2500 }}
      d="M 311.67188,0.83369867 156.54774,240.81234 l 48.87763,-126.99173 -48.87898,28.22029 0.001,98.76524 -48.92968,-127.09951"
    />
  {/if}
</svg>

<style lang="postcss">
  svg path {
    fill: none;
    fill-opacity: 1;
    stroke-linejoin: round;
    stroke-dasharray: none;
    stroke-opacity: 1;
    width: 1;
    @apply stroke-foreground stroke-2;
  }
</style>