<!-- This is an example how to use animejs with your generated component -->
<script lang="ts">
    import { onMount } from "svelte";
    import anime from "animejs";

    let link12: any,
        link12arrow: any,
        link23: any,
        link23arrow: any,
        link34: any,
        link34arrow: any;
    $$restProps; // this allows for us to use class="" inside of our component and to style it's size using TailwindCSS

    onMount(setup);

    const draw = (targets: any, opts: any) => ({
        targets,
        opacity: [0, 1],
        easing: "easeInOutExpo",
        strokeDashOffset: [anime.setDashoffset, 0],
        ...opts,
    });

    const fadeIn = (targets: any) => ({
        targets,
        opacity: [0, 1],
        duration: 100,
    });

    function setup() {
        anime
            .timeline({
                easing: "easeInSine",
                autoplay: true,
                duration: 500,
            })
            .add(draw(link12, { duration: 700 }))
            .add(fadeIn(link12arrow))
            .add(draw(link23, { duration: 700 }))
            .add(fadeIn(link23arrow))
            .add(draw(link34, { duration: 700 }))
            .add(fadeIn(link34arrow));
    }
</script>

<svg
    width="210mm"
    height="297mm"
    viewBox="0 0 210 297"
    xml:space="preserve"
    xmlns="http://www.w3.org/2000/svg"
    {...$$restProps}
>
    <rect
        style="fill:#333;stroke-width:.264583"
        width="111.125"
        height="64.558"
        x="18.058"
        y="-104.246"
        ry="19.05"
        transform="scale(1 -1)"
    />
    <rect
        style="fill:#e6e6e6;stroke-width:.264583"
        width="111.125"
        height="64.558"
        x="15.941"
        y="-101.071"
        ry="19.05"
        transform="scale(1 -1)"
    />
    <path
        style="fill:#000;stroke-width:.264583"
        d="M49.842 82.162c-3.257-1.161-4.644-4.143-4.66-10.012-.018-7.517 2.33-10.792 7.77-10.841 3.35-.03 5.184.796 6.414 2.889.817 1.389 1.412 4.178 1.417 6.644l.005 1.918H50.469v1.68c0 3.034.937 4.67 2.673 4.67 1.194 0 1.954-.812 2.393-2.558l.289-1.146h4.758l-.174.992c-.772 4.38-2.953 6.166-7.5 6.14-1.123-.006-2.503-.176-3.066-.376zm5.917-13.436c-.002-1.266-.49-2.807-1.074-3.391-.732-.732-2.371-.688-3.094.083-.74.79-1.122 1.855-1.122 3.126v1.041h5.292l-.002-.86zm24.372 13.44c-1.483-.48-3.002-1.964-3.779-3.689-.562-1.247-.609-1.717-.612-6.113-.003-5.273.173-6.23 1.522-8.238.614-.915 1.28-1.492 2.358-2.041 1.317-.671 1.791-.767 3.837-.771 3.598-.009 5.52 1.088 6.695 3.822.534 1.24 1.057 4.508 1.061 6.632l.002.992H80.578l.19 1.919c.328 3.298 1.025 4.431 2.727 4.431 1.134 0 1.906-.763 2.286-2.26l.332-1.311 2.286-.077 2.287-.076v.903c0 2.157-1.42 4.565-3.257 5.52-1.416.737-5.51.938-7.298.358zm6.057-12.797c0-.118-.129-.922-.287-1.786-.357-1.955-1.041-2.76-2.346-2.76-1.712 0-2.364.848-2.796 3.638l-.174 1.124h2.802c1.54 0 2.801-.097 2.801-.216zm21.034 12.934c-2.705-.659-4.015-2.33-4.161-5.31l-.072-1.454 2.315-.077c2.286-.075 2.315-.068 2.315.556 0 1.053.532 2.24 1.201 2.678 1.475.967 3.869.195 4.163-1.342.33-1.732-.676-2.668-4.066-3.775-2.56-.836-4.46-2.073-5.1-3.318-.85-1.653-.888-3.78-.098-5.505 1.093-2.387 3.123-3.416 6.81-3.451 4.49-.044 6.551 1.441 7.032 5.067l.18 1.361h-2.415c-2.258 0-2.415-.035-2.415-.542 0-.75-.685-2.005-1.203-2.204-1.667-.64-3.56.384-3.56 1.926 0 1.31.926 2.026 3.97 3.068 4.765 1.631 5.84 2.782 5.851 6.267.01 3.227-1.63 5.372-4.608 6.024-1.417.31-4.918.328-6.139.03zm-82.24-.194c-.098-.097-.177-6.229-.177-13.626v-13.45h5.556v10.32h6.35v-10.32h5.556v27.271l-2.712-.075-2.712-.076-.07-6.02-.072-6.018h-6.34v12.17h-2.602c-1.43 0-2.68-.079-2.778-.176zm38.716-10.142v-10.32H68.46v1.324c0 .727.09 1.318.2 1.313.109-.006.52-.476.914-1.046.842-1.218 1.737-1.734 3.454-1.991l1.254-.188V66.07l-1.636.171c-1.796.188-2.613.602-3.321 1.682-.41.624-.477 1.55-.55 7.537l-.082 6.825h-4.995zm30.957-10.848v-6.086H99.417v12.171h-4.762z"
    />
    <path
        style="fill:none;stroke:#000;stroke-width:2;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        d="M127.108 68.89h33.254l.044 30.471"
        class="link12"
        bind:this={link12}
    />
    <path
        style="fill:#000;stroke:#000;stroke-width:2;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        class="link12arrow"
        bind:this={link12arrow}
        d="m-75.67 71.967-18.79-32.544h37.578z"
        transform="matrix(.29148 0 0 .29148 182.632 88.084)"
    />
    <rect
        style="fill:#333;stroke-width:.173496"
        width="72.869"
        height="42.333"
        x="122.293"
        y="-153.458"
        ry="12.492"
        transform="scale(1 -1)"
    />
    <rect
        style="fill:#e6e6e6;stroke-width:.173496"
        width="72.869"
        height="42.333"
        x="124.41"
        y="-151.342"
        ry="12.492"
        transform="scale(1 -1)"
    />
    <path
        style="fill:#000;stroke-width:.203451"
        d="M154.5 140.446c-.524-.162-1.237-.578-1.585-.925-1.479-1.48-1.922-3.344-1.791-7.536.133-4.29.846-5.887 3.126-7.003.972-.475 1.367-.546 3.034-.546 1.66 0 2.064.072 3.018.538 1.188.581 1.913 1.442 2.509 2.976.29.748.356 1.583.359 4.577.003 3.368-.035 3.759-.472 4.856-.626 1.568-1.73 2.66-3.1 3.068-1.313.39-3.822.387-5.098-.005zm3.76-2.735c.704-.553 1.016-2.115 1.016-5.082 0-2.967-.312-4.529-1.016-5.082-.79-.622-1.748-.539-2.374.205-.695.827-.833 1.634-.833 4.877s.138 4.05.833 4.877c.626.744 1.584.827 2.374.205zm-21.423-7.625v-10.478h4.069l.006 3.408.006 3.408.423-.567c.676-.906 1.91-1.424 3.43-1.437 1.664-.016 2.788.556 3.486 1.774.476.83.482.92.547 7.605l.065 6.765H144.788l-.06-6.083c-.055-5.694-.084-6.11-.455-6.52-.323-.356-.584-.426-1.417-.376-.905.053-1.074.139-1.486.75-.457.68-.465.79-.465 6.46v5.769h-4.069zm31.255 10.122c-.057-.196-.795-3.56-1.64-7.477-.845-3.917-1.585-7.327-1.643-7.579-.105-.451-.078-.457 1.932-.457 1.12 0 2.038.068 2.037.152-.002.348 1.66 10.35 1.767 10.63.08.21 1.983-9.544 2.094-10.738.003-.032.988-.032 2.188 0l2.182.057 1.043 5.595 1.043 5.595.23-1.119c.126-.615.555-3.08.954-5.475.398-2.396.771-4.433.83-4.527.14-.228 3.743-.22 3.743.008 0 .317-3.273 15.352-3.38 15.524-.093.15-4.555.253-4.555.104 0-.22-2.045-11.001-2.096-11.053-.036-.036-.412 1.925-.836 4.356l-.976 5.59-.204 1.17H170.5c-2.019 0-2.317-.044-2.408-.356z"
    />
    <path
        style="fill:none;stroke:#000;stroke-width:2;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        d="m124.162 130.204-69.971-.068.07 18.459"
        class="link23"
        bind:this={link23}
    />
    <path
        style="fill:#000;stroke:#000;stroke-width:2;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        class="link23arrow"
        bind:this={link23arrow}
        d="m-495.983 170.358-18.79-32.544h37.58z"
        transform="matrix(.29148 0 0 .29148 198.92 108.549)"
    />
    <rect
        style="fill:#333;stroke-width:.11554"
        width="48.527"
        height="28.192"
        x="32.671"
        y="-188.729"
        ry="8.319"
        transform="scale(1 -1)"
    />
    <rect
        style="fill:#e6e6e6;stroke-width:.11554"
        width="48.527"
        height="28.192"
        x="30.555"
        y="-186.612"
        ry="8.319"
        transform="scale(1 -1)"
    />
    <path
        style="fill:#000;stroke-width:.163075"
        d="M57.509 180.97c-.493-.048-1.057-.19-1.252-.318-.719-.466-.773-.828-.835-5.589l-.06-4.525h-1.604v-2.12H55.39v-3.588H58.651v3.588H60.444v2.12H58.651v3.8c0 4.31.014 4.366 1.108 4.409l.684.026v1.087l.001 1.087-1.019.054c-.56.03-1.423.016-1.916-.031zm-8.317-6.274v-6.278H52.454V180.975h-3.261Zm0-9.295v-1.386H52.454v2.772h-3.261Z"
    />
    <path
        style="fill:none;stroke:#000;stroke-width:2;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        d="m54.334 186.744-.132 37.013 39.067.066"
        class="link34"
        bind:this={link34}
    />
    <path
        style="fill:#000;stroke:#000;stroke-width:2;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
        class="link34arrow"
        bind:this={link34arrow}
        d="m-495.983 170.358-18.79-32.544h37.58z"
        transform="matrix(.2527 .14526 -.14526 .2527 243.638 258.385)"
    />
    <rect
        style="fill:#333;stroke-width:.190847"
        width="80.156"
        height="46.567"
        x="103.326"
        y="-247.65"
        ry="13.741"
        transform="scale(1 -1)"
    />
    <rect
        style="fill:#e6e6e6;stroke-width:.190847"
        width="80.156"
        height="46.567"
        x="105.443"
        y="-245.533"
        ry="13.741"
        transform="scale(1 -1)"
    />
    <path
        style="fill:#000;stroke-width:.112559"
        d="M136.365 232.111c-3.03-.483-4.263-2.654-4.27-7.515-.005-4.71 1.305-7.076 4.263-7.69.988-.205 3.306-.08 4.081.22 1.804.7 2.704 2.086 3.074 4.737.216 1.552.22 3.52.01 5.07-.49 3.596-2.041 5.114-5.35 5.235-.65.023-1.463-.002-1.807-.057zm2.389-2.658c.401-.205.843-1.146.996-2.122.182-1.166.153-4.782-.047-5.822-.294-1.528-.794-2.118-1.793-2.118-1.04.001-1.6.604-1.883 2.03-.168.842-.166 5.272.002 6.18.149.805.422 1.418.775 1.737.451.408 1.28.457 1.949.115zm33.19 2.643c-.95-.11-1.413-.241-2.143-.61-1.182-.596-1.8-1.873-1.8-3.715v-.726H171.376v.584c0 1.277.732 2.042 1.96 2.049 1.235.006 1.866-.58 1.866-1.736.001-1.066-.268-1.273-2.927-2.248-1.96-.719-2.87-1.246-3.438-1.987-1.14-1.49-.907-4.285.462-5.547 1.102-1.016 2.433-1.405 4.553-1.33 2.08.075 3.207.554 3.979 1.694.438.647.583 1.112.698 2.246l.077.76h-3.516v-.448c0-.646-.307-1.332-.683-1.526-.484-.25-1.52-.213-1.98.071a1.533 1.533 0 0 0-.493 2.094c.306.502.507.608 2.494 1.308 2.006.707 2.554.962 3.215 1.498 1.275 1.034 1.603 3.7.663 5.381-.704 1.26-1.735 1.896-3.495 2.16-1.118.169-1.615.173-2.869.028zm-58.131-7.443c-.862-3.978-1.589-7.295-1.616-7.373-.04-.109.38-.14 1.856-.14h1.907l.824 5.037c.453 2.77.856 5.128.896 5.24.04.112.466-2.066.949-4.84.482-2.774.901-5.133.932-5.243.05-.183.224-.197 2.1-.169l2.045.031.954 5.15c.525 2.832.98 5.15 1.014 5.15.033 0 .382-1.913.776-4.25.393-2.337.791-4.667.884-5.178l.17-.928h1.788c.984 0 1.789.02 1.789.046 0 .063-3.01 14.032-3.104 14.408l-.074.296-2.149-.03-2.15-.031-.954-5.151c-.525-2.833-.988-5.112-1.03-5.065-.04.047-.472 2.377-.958 5.179l-.884 5.093h-4.4zm31.9-.14v-7.373h3.602v.957c0 .526.04.956.088.956.05 0 .184-.16.3-.357.341-.577.964-1.21 1.503-1.526.392-.23.698-.306 1.388-.346l.886-.05v3.604l-1.101.044c-.95.038-1.173.087-1.625.351-.568.334-.881.711-1.084 1.308-.09.265-.13 1.833-.13 5.093v4.711h-3.827zm9.343-2.42V212.3h3.712l.03 5.197.029 5.197 1.913-2.774 1.914-2.774 2.067-.002 2.067-.003-.189.288c-.104.158-1.01 1.412-2.016 2.785a213.486 213.486 0 0 0-1.912 2.637c-.062.102 3.302 6.466 4.731 8.95.027.047-.887.085-2.031.085h-2.08l-1.556-2.983c-.856-1.64-1.59-2.97-1.63-2.955-.041.016-.358.397-.705.846l-.63.818v4.274h-3.714z"
    />
</svg>
