profectus-docs/docs/.vitepress/theme/Profectus.vue

<template>
    <transition appear>
        <svg
            id="eaRe02fYmMp1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 228 521"
            shape-rendering="geometricPrecision"
            text-rendering="geometricPrecision"
        >
            <g id="P">
                <path
                    d="m 101,512.877 c -17.547386,-5.3519 -50.794681,-10.26296 -80,0 10.737201,-217.43031 5.7244,-300.999 0,-464.9995 0,0 46.6144,-37.1164 80,-42.00002 33.386,-4.883633 86.025,10.45942 120,50.00002 5,30 -4.353,106.6565 -44,156.0005 -34.149,42.5 -130,38.48 -130,92.999 0,102 54,208 54,208 z"
                    style="
                        display: inline;
                        fill: none;
                        stroke: rgb(163, 190, 140);
                        stroke-width: 10;
                        stroke-linecap: round;
                        stroke-miterlimit: 16;
                    "
                    id="trunk"
                    class="svg-elem-1"
                ></path>
                <path
                    d="M 221,55.8775 C 209.023,126.453 185.39,166.835 158.997,191.5 93.783098,252.444 11.718998,217.436 46.999998,304.877"
                    style="
                        display: inline;
                        fill: none;
                        stroke: rgb(163, 190, 140);
                        stroke-width: 5;
                        stroke-linecap: round;
                        stroke-miterlimit: 16;
                    "
                    id="vine2"
                    class="svg-elem-2"
                ></path>
                <path
                    d="m 194.5,188 c -11.225,4.447 -19.066,5.134 -35.503,3.5"
                    style="
                        display: inline;
                        fill: none;
                        stroke: rgb(163, 190, 140);
                        stroke-width: 5;
                        stroke-linecap: round;
                        stroke-miterlimit: 16;
                    "
                    id="short_vine4"
                    class="svg-elem-3"
                ></path>
                <path
                    d="M 73.499996,246.5 C 111.145,245.626 127.011,238.775 156.5,228"
                    style="
                        display: inline;
                        fill: none;
                        stroke: rgb(163, 190, 140);
                        stroke-width: 5;
                        stroke-linecap: round;
                        stroke-miterlimit: 16;
                    "
                    id="short_vine3"
                    class="svg-elem-4"
                ></path>
                <path
                    d="M 221,55.8775 C 169.5,17.8262 86.0943,44.9468 47,107 c -4.743,7.528 -7.1041,15.373 -8.326,24 -3.5282,24.91 2.4426,56.34 -12.0011,105.5"
                    style="
                        display: inline;
                        fill: none;
                        stroke: rgb(163, 190, 140);
                        stroke-width: 5;
                        stroke-linecap: round;
                        stroke-miterlimit: 16;
                    "
                    id="vine1"
                    class="svg-elem-5"
                ></path>
                <path
                    d="M 21,47.8775 38.674,131"
                    style="
                        display: inline;
                        fill: none;
                        stroke: rgb(163, 190, 140);
                        stroke-width: 5;
                        stroke-linecap: round;
                        stroke-miterlimit: 16;
                    "
                    id="short_vine2"
                    class="svg-elem-6"
                ></path>
                <path
                    d="m 3,326.5 c 13.1783,22.208 16.4863,42.834 21.6997,81"
                    style="
                        display: inline;
                        fill: none;
                        stroke: rgb(163, 190, 140);
                        stroke-width: 5;
                        stroke-linecap: round;
                        stroke-miterlimit: 16;
                    "
                    id="short_vine1"
                    class="svg-elem-7"
                ></path>
            </g>
        </svg>
    </transition>
</template>

<style scoped>
svg {
    background: #2e3440;
}

/***************************************************
 * Generated by SVG Artista on 1/7/2022, 4:39:47 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
    stroke-dashoffset: 2648.758056640625px;
    stroke-dasharray: 1324.3790283203125px;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

svg.v-enter-from .svg-elem-1,
svg.v-leave-to .svg-elem-1 {
    stroke-dashoffset: 1324.3790283203125px;
}

svg .svg-elem-2 {
    stroke-dashoffset: 680.4000854492188px;
    stroke-dasharray: 340.2000427246094px;
    transition: stroke-dashoffset 1s ease-out 0.4s;
}

svg.v-enter-from .svg-elem-2,
svg.v-leave-to .svg-elem-2 {
    stroke-dashoffset: 340.2000427246094px;
}

svg .svg-elem-3 {
    stroke-dashoffset: 76.21031951904297px;
    stroke-dasharray: 38.105159759521484px;
    transition: stroke-dashoffset 1s ease-out 0.8s;
}

svg.v-enter-from .svg-elem-3,
svg.v-leave-to .svg-elem-3 {
    stroke-dashoffset: 38.105159759521484px;
}

svg .svg-elem-4 {
    stroke-dashoffset: 175.18072509765625px;
    stroke-dasharray: 87.59036254882812px;
    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
}

svg.v-enter-from .svg-elem-4,
svg.v-leave-to .svg-elem-4 {
    stroke-dashoffset: 87.59036254882812px;
}

svg .svg-elem-5 {
    stroke-dashoffset: 671.9447021484375px;
    stroke-dasharray: 335.97235107421875px;
    transition: stroke-dashoffset 1s ease-out 0.8s;
}

svg.v-enter-from .svg-elem-5,
svg.v-leave-to .svg-elem-5 {
    stroke-dashoffset: 335.97235107421875px;
}

svg .svg-elem-6 {
    stroke-dashoffset: 173.96141052246094px;
    stroke-dasharray: 86.98070526123047px;
    transition: stroke-dashoffset 1s ease-out 1s;
}

svg.v-enter-from .svg-elem-6,
svg.v-leave-to .svg-elem-6 {
    stroke-dashoffset: 86.98070526123047px;
}

svg .svg-elem-7 {
    stroke-dashoffset: 172.99151611328125px;
    stroke-dasharray: 86.49575805664062px;
    transition: stroke-dashoffset 1s ease-out 0.85s;
}

svg.v-enter-from .svg-elem-7,
svg.v-leave-to .svg-elem-7 {
    stroke-dashoffset: 86.49575805664062px;
}
</style>