195 lines
6.4 KiB
Vue
195 lines
6.4 KiB
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>
|