<div id="app">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 695.3 452.7" aria-labelledby="title" class="notifier-svg">
<app-defs></app-defs>
<title id="title">
Phone Notifications
</title>
<g style="isolation:isolate">
<g id="Layer_1" data-name="Layer 1">
<path fill="#92278f" d="M0 54H695.3V452.67H0z"/>
<path id="phoneshadow" fill="url(#linear-gradient)" d="M389.2 381.2L559.3 404.3 562.7 220.3 203.5 237.7 389.2 381.2z"/>
<path id="phonebase" d="M454.5,248.4l-.5,8.9-52,60c-5.3,8.7-28.7,4.7-28.7,4.7L141.4,261.4h0l-.7-.2h-.1a4.5,4.5,0,0,1-3.2-3.4h0v-.5a0,0,0,0,1,0,0l-.6-11.3Z" transform="translate(0 58)" fill="url(#linear-gradient-2)"/>
<path d="M445.1,240c8.5,2.3,12,7.8,7.8,12.3L398.2,311c-4.2,4.5-14.5,6.4-23,4.1l-229-60.6c-8.5-2.3-12-7.8-7.8-12.3L193,183.5c4.2-4.5,14.5-6.4,23-4.1Z" transform="translate(0 58)" fill="url(#linear-gradient-3)"/>
<path d="M418.1,240.2c2.3.6,3.1,2.2,1.9,3.6l-54.5,58.5c-1.3,1.4-4.2,2-6.5,1.4L167,252.7c-2.3-.6-3.1-2.2-1.9-3.6l54.5-58.5c1.3-1.4,4.2-2,6.5-1.4Z" transform="translate(0 58)" fill="url(#linear-gradient-4)"/>
<path d="M189.1,207.6c.8.2,1.1.7.7,1.1l-15.8,17a2.3,2.3,0,0,1-2,.4h0c-.8-.2-1.1-.7-.7-1.1l15.8-17a2.3,2.3,0,0,1,2-.4Z" transform="translate(0 58)" fill="#313131"/>
<g id="phonebutton" @click="updateTemplate" v-if="!showWeather">
<transition
@before-enter="beforeEnterStroke"
@enter="enterStroke"
:css="false"
appear>
<path class="main-button" d="M413,272.2c5.1,1.4,7.2,4.7,4.7,7.4s-8.7,3.8-13.8,2.5-7.2-4.7-4.7-7.4S407.9,270.9,413,272.2Z" transform="translate(0 58)" fill="none"/>
</transition>
<path d="M413,272.2c5.1,1.4,7.2,4.7,4.7,7.4s-8.7,3.8-13.8,2.5-7.2-4.7-4.7-7.4S407.9,270.9,413,272.2Z" transform="translate(0 58)" fill="#272829"/>
<path d="M401.4,273.5l1-.9a8.5,8.5,0,0,0-3.2,2c-2.5,2.7-.5,6,4.7,7.4a17.5,17.5,0,0,0,3.1.5C400.8,280.9,398.3,276.9,401.4,273.5Z" transform="translate(1 58)" fill="#414141" style="opacity:0.8"/>
</g>
</transition>
<transition
@leave="leaveDialog"
:css="false">
<app-dialog v-if="showWeather"></app-dialog>
</transition>
<transition
@leave="leaveDroparea"
:css="false">
<g v-if="showWeather">
<app-droparea v-if="template == 1"></app-droparea>
<app-windarea v-else-if="template == 2"></app-windarea>
<app-rainbowarea v-else-if="template == 3"></app-rainbowarea>
<app-tornadoarea v-else></app-tornadoarea>
</g>
</transition>
<g v-if="!showWeather">
<transition
@before-enter="beforeEnter"
@enter="enter"
:css="false"
appear>
<text class="press" font-size="18" fill="#f7941d" font-family="TitilliumWeb-Regular, Titillium Web">
<tspan x="375" y="310" letter-spacing="-0.01em">Press me!</tspan>
</text>
</transition>
</g>
</g>
</g>
</svg>
</div>
<!--defs.vue-->
<script type="text/x-template" id="defs">
<defs>
<linearGradient id="linear-gradient" x1="562.67" y1="312.33" x2="203.5" y2="312.33" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#4f1645" stop-opacity="0" />
<stop offset="0.41" stop-color="#4f1645" stop-opacity="0.49" />
<stop offset="0.79" stop-color="#4f1645" stop-opacity="0.86" />
<stop offset="1" stop-color="#4f1645" />
</linearGradient>
<linearGradient id="linear-gradient-2" x1="136.75" y1="284.42" x2="454.5" y2="284.42" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#414042" />
<stop offset="0.47" stop-color="#414042" />
<stop offset="0.55" stop-color="#393739" />
<stop offset="0.69" stop-color="#231f20" />
<stop offset="0.7" stop-color="#282526" />
<stop offset="0.72" stop-color="#363436" />
<stop offset="0.75" stop-color="#3e3d3f" />
<stop offset="0.79" stop-color="#414042" />
<stop offset="0.79" stop-color="#403f41" />
<stop offset="0.8" stop-color="#323032" />
<stop offset="0.81" stop-color="#2a2829" />
<stop offset="0.82" stop-color="#282526" />
<stop offset="0.83" stop-color="#2f2c2e" />
<stop offset="0.84" stop-color="#393839" />
<stop offset="0.86" stop-color="#3f3e40" />
<stop offset="0.92" stop-color="#414042" />
<stop offset="0.94" stop-color="#3d3c3e" />
<stop offset="0.96" stop-color="#313031" />
<stop offset="0.98" stop-color="#1c1c1d" />
<stop offset="1" />
</linearGradient>
<linearGradient id="linear-gradient-3" x1="284.14" y1="268.89" x2="284.14" y2="-17.96" gradientTransform="rotate(-63.6 387.21 177.67)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1a1a1a" />
<stop offset="0.38" stop-color="#0f0f0f" />
<stop offset="1" stop-color="#010101" />
</linearGradient>
<linearGradient id="linear-gradient-4" x1="283.51" y1="241.53" x2="283.51" y2="9.32" gradientTransform="rotate(-63.6 387.21 177.67)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#484848" />
<stop offset="0.64" stop-color="#262626" />
<stop offset="1" stop-color="#181818" />
</linearGradient>
<linearGradient id="linear-gradient-5" x1="292.84" y1="156.67" x2="292.84" y2="23.33" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f1f2f2" />
<stop offset="0.8" stop-color="#bcbec0" />
<stop offset="1" stop-color="#ececed" />
</linearGradient>
<linearGradient id="linear-gradient-6" x1="223.04" y1="253.82" x2="352.59" y2="253.82" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#565871" />
<stop offset="0.1" stop-color="#52546b" />
<stop offset="0.3" stop-color="#505268" />
<stop offset="0.38" stop-color="#47495f" />
<stop offset="0.59" stop-color="#363850" />
<stop offset="0.74" stop-color="#30324a" />
<stop offset="1" stop-color="#20233d" />
</linearGradient>
<radialGradient id="radial-gradient" cx="317.14" cy="245" r="66.63" gradientTransform="rotate(90 317.2 249.2)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#130c0e" stop-opacity="0.6"></stop>
<stop offset="0.3" stop-color="#130c0e" stop-opacity="0.4"></stop>
<stop offset="0.4" stop-color="#130c0e" stop-opacity="0.3"></stop>
<stop offset="1" stop-color="#130c0e" stop-opacity="0"></stop>
</radialGradient>
<clipPath id="clip-path" transform="translate(0 58)">
<path d="M331.1,203.9c-28.6-16.5-58.1-16.5-86.7,0h0c-14.3,8.3-21.4,16.6-21.4,25s7.1,16.8,21.4,25c28.6,16.5,58.1,16.5,86.7,0,14.3-8.3,21.4-16.6,21.4-25S345.4,212.1,331.1,203.9Z" fill="none" />
</clipPath>
<clipPath id="clip-path2" transform="translate(0 58)">
<path d="M352.6,228.9v12.5c0,8.4-7.2,16.8-21.4,25-28.6,16.5-58.1,16.5-86.7,0-14.3-8.2-21.4-16.6-21.4-25V228.9a15.2,15.2,0,0,1,.5-3.9l.5-1.6a18.8,18.8,0,0,1,1.1-2.4l.9-1.6.5-.8,1.2-1.6.7-.8q5.4-6.3,16.1-12.5c28.6-16.5,58.1-16.5,86.7,0C345.4,212.1,352.6,220.5,352.6,228.9Z"
fill="none" />
</clipPath>
<linearGradient id="linear-gradient-15" x1="223.08" y1="250.99" x2="342.52" y2="250.99" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#c1d82f" />
<stop offset="0.1" stop-color="#c6d92c" />
<stop offset="0.3" stop-color="#c9da2b" />
<stop offset="0.55" stop-color="#b9cf32" />
<stop offset="0.74" stop-color="#b3cb35" />
<stop offset="1" stop-color="#89a63d" />
</linearGradient>
<linearGradient id="linear-gradient-7" x1="265.5" y1="220.46" x2="341.25" y2="220.46" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#009444" />
<stop offset="0.04" stop-color="#009444" stop-opacity="0.83" />
<stop offset="0.11" stop-color="#009444" stop-opacity="0.61" />
<stop offset="0.18" stop-color="#009444" stop-opacity="0.42" />
<stop offset="0.27" stop-color="#009444" stop-opacity="0.27" />
<stop offset="0.36" stop-color="#009444" stop-opacity="0.15" />
<stop offset="0.48" stop-color="#009444" stop-opacity="0.06" />
<stop offset="0.63" stop-color="#009444" stop-opacity="0.01" />
<stop offset="1" stop-color="#009444" stop-opacity="0" />
</linearGradient>
<linearGradient id="linear-gradient-8" x1="298.72" y1="174.63" x2="312.38" y2="198.29" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f0f7f7" />
<stop offset="0.26" stop-color="#ecf4f6" />
<stop offset="0.54" stop-color="#dfedf3" />
<stop offset="0.82" stop-color="#c9e0ee" />
<stop offset="1" stop-color="#b8d6ea" />
</linearGradient>
<linearGradient id="linear-gradient-9" x1="283.45" y1="179.9" x2="300.2" y2="208.92" xlink:href="#linear-gradient-8" />
<linearGradient id="linear-gradient-10" x1="269.1" y1="190.05" x2="284.22" y2="216.25" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b8d6ea" />
<stop offset="0.18" stop-color="#c9e0ee" />
<stop offset="0.46" stop-color="#dfedf3" />
<stop offset="0.74" stop-color="#ecf4f6" />
<stop offset="1" stop-color="#f0f7f7" />
</linearGradient>
<radialGradient id="radial-gradient-2" cx="307.16" cy="4167.95" r="1.19" gradientTransform="translate(-3191.2 2545.3) rotate(-120)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fdc110" />
<stop offset="0.17" stop-color="#fcba11" />
<stop offset="0.41" stop-color="#f8a615" />
<stop offset="0.71" stop-color="#f1851c" />
<stop offset="1" stop-color="#e95d24" />
</radialGradient>
<radialGradient id="radial-gradient-3" cx="281.6" cy="4180.5" r="1.19" xlink:href="#radial-gradient-2" />
<linearGradient id="linear-gradient-11" x1="259.53" y1="239.53" x2="277.64" y2="239.53" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#383938" />
<stop offset="0.4" stop-color="#363736" />
<stop offset="0.61" stop-color="#2e2f2e" />
<stop offset="0.78" stop-color="#212121" />
<stop offset="0.93" stop-color="#0e0e0e" />
<stop offset="1" stop-color="#010101" />
</linearGradient>
<linearGradient id="linear-gradient-12" x1="265.65" y1="224.71" x2="271.52" y2="224.71" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#feec45" />
<stop offset="0.01" stop-color="#feec46" />
<stop offset="0.13" stop-color="#fdef4f" />
<stop offset="0.3" stop-color="#fdf052" />
<stop offset="0.35" stop-color="#fdec4d" />
<stop offset="0.58" stop-color="#fee03c" />
<stop offset="0.74" stop-color="#fedc36" />
<stop offset="1" stop-color="#f8b518" />
</linearGradient>
<radialGradient id="radial-gradient-4" cx="294.39" cy="210.6" r="11.32" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f26932" />
<stop offset="0.06" stop-color="#f26b34" />
<stop offset="0.3" stop-color="#f36e36" />
<stop offset="0.54" stop-color="#f26028" />
<stop offset="0.74" stop-color="#f15a22" />
<stop offset="1" stop-color="#c83527" />
</radialGradient>
<radialGradient id="radial-gradient-5" cx="1477.17" cy="2109.99" r="1.19" gradientTransform="matrix(0.5, -0.87, -0.87, -0.5, 1361.25, 2545.34)" xlink:href="#radial-gradient-2" />
<linearGradient id="linear-gradient-13" x1="237.48" y1="230.72" x2="260.79" y2="230.72" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#009444" />
<stop offset="1" stop-color="#009444" stop-opacity="0" />
</linearGradient>
<linearGradient id="linear-gradient-14" x1="293.6" y1="254.42" x2="315.63" y2="254.42" xlink:href="#linear-gradient-13" />
<linearGradient id="linear-gradient-17" x1="265.5" y1="220.46" x2="341.25" y2="220.46" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#009444" />
<stop offset="0.04" stop-color="#009444" stop-opacity="0.83" />
<stop offset="0.11" stop-color="#009444" stop-opacity="0.61" />
<stop offset="0.18" stop-color="#009444" stop-opacity="0.42" />
<stop offset="0.27" stop-color="#009444" stop-opacity="0.27" />
<stop offset="0.36" stop-color="#009444" stop-opacity="0.15" />
<stop offset="0.48" stop-color="#009444" stop-opacity="0.06" />
<stop offset="0.63" stop-color="#009444" stop-opacity="0.01" />
<stop offset="1" stop-color="#009444" stop-opacity="0" />
</linearGradient>
<radialGradient id="radial-gradient-20" cx="290.09" cy="206.75" r="72.73" gradientTransform="translate(8.8 4) scale(0.96 1)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" />
<stop offset="1" stop-color="#231f20" stop-opacity="0" />
</radialGradient>
<linearGradient id="linear-gradient-20" x1="233.59" y1="258.05" x2="339.92" y2="258.05" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ea6924" />
<stop offset="0.1" stop-color="#f06c27" />
<stop offset="0.3" stop-color="#f36e28" />
<stop offset="0.31" stop-color="#f26d28" />
<stop offset="0.56" stop-color="#e15e26" />
<stop offset="0.74" stop-color="#db5926" />
<stop offset="1" stop-color="#b13424" />
</linearGradient>
<linearGradient id="linear-gradient-21" x1="233.59" y1="258.05" x2="339.92" y2="258.05" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f8fcff" />
<stop offset="0.24" stop-color="#f4f9fe" />
<stop offset="0.5" stop-color="#e7f2f9" />
<stop offset="0.77" stop-color="#d1e5f2" />
<stop offset="1" stop-color="#b8d6ea" />
</linearGradient>
<clipPath id="clip-path-20" transform="translate(0 4)">
<path d="M322.3,217c-23.5-13.5-47.7-13.5-71.1,0h0c-11.7,6.8-17.6,13.7-17.6,20.5s5.9,13.8,17.6,20.5c23.5,13.5,47.7,13.5,71.1,0,11.7-6.8,17.6-13.7,17.6-20.5S334.1,223.8,322.3,217Z" fill="none" />
</clipPath>
<radialGradient id="radial-gradient-21" cx="327.24" cy="187.43" r="71.25" gradientTransform="translate(-1.3 64.3) scale(1 0.76)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff33b" />
<stop offset="0.31" stop-color="#fee62d" stop-opacity="0.71" />
<stop offset="1" stop-color="#fdc70c" stop-opacity="0" />
</radialGradient>
<linearGradient id="linear-gradient-25" x1="229.18" y1="256.79" x2="346.98" y2="256.79" xlink:href="#linear-gradient-20" />
<linearGradient id="linear-gradient-22" x1="229.18" y1="256.79" x2="346.98" y2="256.79" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#565871" />
<stop offset="0.1" stop-color="#52546b" />
<stop offset="0.3" stop-color="#505268" />
<stop offset="0.38" stop-color="#47495f" />
<stop offset="0.59" stop-color="#363850" />
<stop offset="0.74" stop-color="#30324a" />
<stop offset="1" stop-color="#20233d" />
</linearGradient>
<clipPath id="clip-path-21" transform="translate(0 4)">
<path d="M327.5,211.4c-26-15-52.8-15-78.8,0h0c-13,7.5-19.5,15.1-19.5,22.8s6.5,15.2,19.5,22.8c26,15,52.8,15,78.8,0,13-7.5,19.5-15.1,19.5-22.8S340.5,218.9,327.5,211.4Z" fill="none" />
</clipPath>
<clipPath id="clip-path-22">
<path d="M327.5,222.7c-26-15-52.8-15-78.8,0h0c-13,7.5-19.5,15.1-19.5,22.8s6.5,15.2,19.5,22.8c26,15,52.8,15,78.8,0,13-7.5,19.5-15.1,19.5-22.8S340.5,230.2,327.5,222.7Z" fill="none" />
</clipPath>
<linearGradient id="linear-gradient-23" x1="293.54" y1="172.77" x2="306.64" y2="195.45" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f68a32" />
<stop offset="0.18" stop-color="#f4762b" />
<stop offset="0.41" stop-color="#f26626" />
<stop offset="0.66" stop-color="#f15d23" />
<stop offset="1" stop-color="#f15a22" />
</linearGradient>
<linearGradient id="linear-gradient-24" x1="349.41" y1="167.91" x2="366.44" y2="197.41" gradientTransform="translate(27.6 -45.9) rotate(7.6)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fed900" />
<stop offset="0.4" stop-color="#fcc30b" />
<stop offset="1" stop-color="#faa51a" />
</linearGradient>
<radialGradient id="radial-gradient-22" cx="338.27" cy="169.03" r="44.52" gradientTransform="translate(27.6 -45.9) rotate(7.6)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fedf00" />
<stop offset="0.03" stop-color="#fee000" />
<stop offset="0.3" stop-color="#ffe300" />
<stop offset="0.52" stop-color="#ffd707" />
<stop offset="0.74" stop-color="#ffd10a" />
<stop offset="1" stop-color="#fcaf17" />
</radialGradient>
<radialGradient id="radial-gradient-23" cx="338.97" cy="179.5" r="41.33" gradientTransform="translate(27.6 -45.9) rotate(7.6)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fed604" />
<stop offset="0.03" stop-color="#fed705" />
<stop offset="0.3" stop-color="#feda06" />
<stop offset="0.54" stop-color="#ffcc09" />
<stop offset="0.74" stop-color="#ffc60a" />
<stop offset="1" stop-color="#f99e1c" />
</radialGradient>
<linearGradient id="linear-gradient-25" x1="293.33" y1="229.06" x2="346.83" y2="229.06" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#00001d" />
<stop offset="0.36" stop-color="#06051e" stop-opacity="0.83" />
<stop offset="0.79" stop-color="#17151f" stop-opacity="0.33" />
<stop offset="1" stop-color="#231f20" stop-opacity="0" />
</linearGradient>
<linearGradient id="linear-gradient-26" x1="303.48" y1="233.02" x2="344.08" y2="233.02" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff200" />
<stop offset="1" stop-color="#231f20" stop-opacity="0" />
</linearGradient>
<linearGradient id="linear-gradient-27" x1="326.48" y1="222.75" x2="346.98" y2="222.75" xlink:href="#linear-gradient-11" />
</defs>
</script>
<!--dialog.vue-->
<script type="text/x-template" id="dialog">
<g id="dialog">
<path d="M414.3,39.8v77.7c0,9.1-6.5,16.5-14.5,16.5h-178l-1,.7c-12.9,7.3,2.6,22,2.6,22-15.4-2.2-21.2-22-21.2-22l-1-.7H185.8c-8,0-14.5-7.4-14.5-16.5V39.8c0-9.1,6.5-16.5,14.5-16.5H399.9C407.8,23.3,414.3,30.7,414.3,39.8Z" transform="translate(0 58)" stroke="#231f20"
stroke-miterlimit="10" fill="url(#linear-gradient-5)" />
<text transform="translate(223.2 109.7)" font-size="16" fill="#414042" font-family="TitilliumWeb-Regular, Titillium Web">
<tspan letter-spacing="-0.02em">W</tspan><tspan x="13.9" y="0" letter-spacing="0em">eather </tspan><tspan x="61.3" y="0" letter-spacing="0em">N</tspan><tspan x="72" y="0" letter-spacing="0em">o</tspan><tspan x="80.4" y="0">tification:</tspan>
<tspan v-if="template == 1" x="11" y="24">Drizzleapocalypse</tspan>
<tspan v-else-if="template == 2" x="7" y="24">What a windy day!</tspan>
<tspan v-else-if="template == 3" x="4" y="24">Here comes the sun</tspan>
<tspan v-else x="69" y="24" text-anchor="middle">Tornado warning!</tspan>
</text>
<g id="thx-button" @click="toggle">
<rect x="235" y="150" width="105" height="28" rx="4" ry="4" fill="#662d91" opacity="0.68" />
<text transform="translate(252.1 168.7)" font-size="16" fill="#f1f2f2" font-family="TitilliumWeb-Regular, Titillium Web">
OK thanks!
</text>
</g>
</g>
</script>
<!--droparea.vue-->
<script type="text/x-template" id="droparea">
<g>
<g id="ripple" fill="none" stroke="#41bbec" stroke-miterlimit="10">
<ellipse cx="287.6" cy="300.5" rx="84.8" ry="49.3" />
<ellipse cx="287.6" cy="302.9" rx="93" ry="55.5" />
<ellipse cx="287.6" cy="306.1" rx="103.1" ry="61.6" />
</g>
<g id="drop-area">
<g id="platform">
<g style="mix-blend-mode:multiply" id="lt-shadow">
<ellipse id="newgrad" cx="319" cy="248.2" rx="38.5" ry="86" transform="translate(32.9 591.7) rotate(-82.8)" fill="url(#radial-gradient)" />
</g>
<g class="plat" clip-path="url(#clip-path2)">
<path class="plat-piece" d="M331.1,253.9c-28.6,16.5-58.1,16.5-86.7,0-14.3-8.3-21.4-16.6-21.4-25v12.5c0,8.4,7.1,16.8,21.4,25,28.6,16.5,58.1,16.5,86.7,0,14.3-8.3,21.4-16.6,21.4-25V228.9C352.6,237.3,345.4,245.6,331.1,253.9Z" transform="translate(0 58)" fill="url(#linear-gradient-6)"
/>
<path class="plat-piece" d="M331.1,203.9c-28.6-16.5-58.1-16.5-86.7,0h0c-14.3,8.3-21.4,16.6-21.4,25s7.1,16.8,21.4,25c28.6,16.5,58.1,16.5,86.7,0,14.3-8.3,21.4-16.6,21.4-25S345.4,212.1,331.1,203.9Z" transform="translate(0 58)" fill="#38394f" />
</g>
</g>
<g style="mix-blend-mode:multiply" clip-path="url(#clip-path)" id="drop-shadow">
<path d="M387.4,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,340.3,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#dbd9db" opacity="0.09" />
<path d="M385.7,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,338.6,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#d1cfd3" opacity="0.12" />
<path d="M384.1,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3ZM337,234.7a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,337,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7H297c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#c8c6ca" opacity="0.15" />
<path d="M382.5,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,335.4,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#c0bdc2" opacity="0.18" />
<path d="M380.8,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,333.7,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6H284c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#b8b4ba" opacity="0.21" />
<path d="M379.2,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,332.1,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,1,0,16.8,0Z"
transform="translate(0 58)" fill="#b0acb3" opacity="0.24" />
<path d="M377.6,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2H359c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0ZM351,241.8c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,330.5,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,1,0,16.8,0Z"
transform="translate(0 58)" fill="#a8a4ab" opacity="0.27" />
<path d="M375.9,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1A25.3,25.3,0,0,1,300,209.7c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,328.8,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,1,0,16.8,0Z"
transform="translate(0 58)" fill="#a09ca4" opacity="0.3" />
<path d="M374.3,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,327.2,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#99959d" opacity="0.33" />
<path d="M372.7,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,325.6,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#928e96" opacity="0.36" />
<path d="M371,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,323.9,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7H284c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5ZM288,221.5a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#8b8790" opacity="0.39" />
<path d="M369.4,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,322.3,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#848089" opacity="0.42" />
<path d="M367.8,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,320.7,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#7d7983" opacity="0.45" />
<path d="M366.1,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3ZM319,234.7a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,319,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#77727d" opacity="0.48" />
<path d="M364.5,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,317.4,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#716c77" opacity="0.52" />
<path d="M362.9,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,315.8,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6H266c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#6b6671" opacity="0.55" />
<path d="M361.2,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,314.1,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#65616c" opacity="0.58" />
<path d="M359.6,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2H341c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0ZM333,241.8c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,312.5,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#5f5b66" opacity="0.61" />
<path d="M358,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1A25.3,25.3,0,0,1,282,209.7c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,310.9,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5ZM275,221.5a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#5a5661" opacity="0.64" />
<path d="M356.3,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,309.2,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,1,0,16.8,0Z"
transform="translate(0 58)" fill="#55515c" opacity="0.67" />
<path d="M354.7,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,307.6,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,1,0,16.8,0Z"
transform="translate(0 58)" fill="#4f4c57" opacity="0.7" />
<path d="M353.1,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3ZM306,234.7a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,306,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7H266c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,1,0,16.8,0Z"
transform="translate(0 58)" fill="#4a4753" opacity="0.73" />
<path d="M351.4,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,304.3,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#45424e" opacity="0.76" />
<path d="M349.8,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,302.7,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#403e4a" opacity="0.79" />
<path d="M348.2,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,301.1,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#3c3946" opacity="0.82" />
<path d="M346.5,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2H328c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0ZM320,241.8c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,299.4,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#373542" opacity="0.85" />
<path d="M344.9,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,297.8,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6H248c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#32313e" opacity="0.88" />
<path d="M343.3,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,296.2,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,1,0,16.8,0Z"
transform="translate(0 58)" fill="#2d2c3a" opacity="0.91" />
<path d="M341.6,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,294.5,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#292836" opacity="0.94" />
<path d="M340,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1A25.3,25.3,0,0,1,264,209.7c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,292.9,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7H253c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5ZM257,221.5a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#242432" opacity="0.97" />
<path d="M338.4,226.4a14.1,14.1,0,0,0-3.8-9l-.9-1c-4.3-4.3.9-9.2-3.3-9.2-1.6,0-6.7,5-10.4,10.2h-.1c-2.2,3.2-3.9,6.5-3.9,8.9a11.3,11.3,0,0,0,22.5,0Zm-26.6,15.5c-1.4-1.4.3-3.1-1.1-3.1s-2.2,1.7-3.5,3.4h0a6.2,6.2,0,0,0-1.3,3,3.8,3.8,0,1,0,7.5,0,4.7,4.7,0,0,0-1.3-3Zm-20.5-7.1a13.7,13.7,0,0,1,2.6,7.6,11.7,11.7,0,0,1-23.4,0c0-2.4,1.8-5.9,4.1-9.2v-.2h.1l.8-1.1a25.3,25.3,0,0,1-13.1-22.1c0-5.3,3.8-12.7,8.9-20,0-.1,0-.2,0-.3h.3c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2c5.8,6.7,8.6,13.9,8.6,20.3A25.3,25.3,0,0,1,291.3,234.7Zm-32.3-.1c-2.4-2.4.5-5.1-1.9-5.1s-3.7,2.8-5.8,5.7h-.1c-1.2,1.8-2.2,3.6-2.2,4.9a6.3,6.3,0,1,0,12.5,0,7.8,7.8,0,0,0-2.1-5Zm-3.6-13.1a10.5,10.5,0,0,0-2.9-6.8l-.7-.7c-3.2-3.2.7-6.9-2.5-6.9-1.2,0-5,3.7-7.8,7.6h-.1c-1.7,2.4-3,4.9-3,6.6a8.4,8.4,0,0,0,16.8,0Z"
transform="translate(0 58)" fill="#1f1f2f" />
</g>
<g id="drop-a-6" data-name="drop-a">
<g id="big-drop-6" data-name="big-drop">
<path d="M315.9,226.4c0,3.6,5,6.5,11.3,6.5s11.3-2.9,11.3-6.5h0a11.3,11.3,0,0,1-22.5,0Z" transform="translate(0 58)" fill="#4380c2" />
<path d="M319.8,217.3h0Z" transform="translate(0 58)" fill="#abc738" />
<path d="M319.8,217.5c.1,2.3,3.4,4.1,7.3,4.1s7.3-1.9,7.3-4.2h.1a14.1,14.1,0,0,1,3.8,9h0c0,3.6-5,6.5-11.3,6.5s-11.3-2.9-11.3-6.5h0C315.9,224,317.6,220.7,319.8,217.5Z" transform="translate(0 58)" fill="#499ed7" />
<path fill="#aecc36" d="M319.9 275.3L334.4 275.3 319.9 275.3 319.9 275.3z" />
<path d="M319.9,217.3h0c3.7-5.3,8.8-10.2,10.4-10.2,4.2,0-1,4.9,3.3,9.2l.9,1h-.1c0,2.3-3.3,4.2-7.3,4.2s-7.2-1.8-7.3-4.1Z" transform="translate(0 58)" fill="#41bbec" />
</g>
<g id="drop-in-6" data-name="drop-in" fill="none" stroke="#41bbec" stroke-miterlimit="10">
<path d="M328.1 274.3L328.1 20.7" />
<ellipse cx="327.3" cy="295.8" rx="1.4" ry="0.9" />
</g>
</g>
<g id="drop-a-5" data-name="drop-a">
<g id="big-drop-5" data-name="big-drop">
<path d="M305.9,245.2c0,1.2,1.7,2.2,3.8,2.2s3.8-1,3.8-2.2h0a3.8,3.8,0,1,1-7.5,0Z" transform="translate(0 58)" fill="#4380c2" />
<path d="M307.2,242.2h0Z" transform="translate(0 58)" fill="#abc738" />
<path d="M307.2,242.2c0,.8,1.1,1.4,2.4,1.4s2.4-.6,2.4-1.4h0a4.7,4.7,0,0,1,1.3,3h0c0,1.2-1.7,2.2-3.8,2.2s-3.8-1-3.8-2.2h0A6.2,6.2,0,0,1,307.2,242.2Z" transform="translate(0 58)" fill="#499ed7" />
<path fill="#aecc36" d="M307.2 300.2L312.1 300.2 307.2 300.2 307.2 300.2z" />
<path d="M307.2,242.2h0c1.2-1.8,2.9-3.4,3.5-3.4s-.3,1.6,1.1,3.1l.3.3h0c0,.8-1.1,1.4-2.4,1.4s-2.4-.6-2.4-1.4Z" transform="translate(0 58)" fill="#41bbec" />
</g>
<g id="drop-in-5" data-name="drop-in" fill="none" stroke="#41bbec" stroke-miterlimit="10">
<path d="M309.7 299.9L309.6 22.7" />
<ellipse cx="309.6" cy="307.2" rx="0.9" ry="0.6" />
</g>
</g>
<g id="drop-a">
<g id="big-drop">
<path d="M262.4,209.7c0,8.1,11.3,14.6,25.3,14.6s25.3-6.5,25.3-14.6h0a25.3,25.3,0,1,1-50.6,0Z" transform="translate(0 58)" fill="#4380c2" />
<path d="M271.3,189.4h.3l-.2.3C271.3,189.6,271.3,189.5,271.3,189.4Z" transform="translate(0 58)" fill="#abc738" />
<path d="M271.3,189.7c.3,5.1,7.5,9.2,16.4,9.2s16.5-4.3,16.5-9.5h.3c5.8,6.7,8.6,13.9,8.6,20.3h0c0,8.1-11.3,14.6-25.3,14.6s-25.3-6.5-25.3-14.6h0C262.4,204.4,266.2,197,271.3,189.7Z" transform="translate(0 58)" fill="#499ed7" />
<path fill="#aecc36" d="M271.5 247.4L304.2 247.4 271.5 247.4 271.5 247.4z" />
<path d="M271.5,189.4h0c8.3-11.8,19.8-23,23.3-23,9.5,0-2.2,11,7.5,20.7l2.1,2.2h-.3c0,5.2-7.4,9.5-16.5,9.5s-16.1-4.1-16.4-9.2Z" transform="translate(0 58)" fill="#41bbec" />
</g>
<g id="drop-in" fill="none" stroke="#41bbec" stroke-miterlimit="10">
<path d="M288 237.3L288 24.7" />
<ellipse cx="287.6" cy="293.3" rx="1.8" ry="0.8" />
</g>
</g>
<g id="drop-a-4" data-name="drop-a">
<g id="big-drop-4" data-name="big-drop">
<path d="M270.5,242.3c0,3.7,5.2,6.7,11.7,6.7s11.7-3,11.7-6.7h0a11.7,11.7,0,0,1-23.4,0Z" transform="translate(0 58)" fill="#4380c2" />
<path d="M274.6,232.9h.1v0Z" transform="translate(0 58)" fill="#abc738" />
<path d="M274.6,233.1c.1,2.3,3.5,4.2,7.6,4.2s7.6-2,7.6-4.4h.1a14.6,14.6,0,0,1,4,9.4h0c0,3.7-5.2,6.7-11.7,6.7s-11.7-3-11.7-6.7h0C270.5,239.9,272.3,236.4,274.6,233.1Z" transform="translate(0 58)" fill="#499ed7" />
<path fill="#aecc36" d="M274.7 290.9L289.8 290.9 274.7 290.9 274.7 290.9z" />
<path d="M274.7,232.9h0c3.8-5.5,9.1-10.6,10.8-10.6,4.4,0-1,5.1,3.5,9.6l1,1h-.1c0,2.4-3.4,4.4-7.6,4.4s-7.4-1.9-7.6-4.2Z" transform="translate(0 58)" fill="#41bbec" />
</g>
<g id="drop-in-4" data-name="drop-in" fill="none" stroke="#41bbec" stroke-miterlimit="10">
<path d="M282.2 295.3L282.2 38.7" />
<ellipse cx="282" cy="311.8" rx="2.6" ry="0.9" />
</g>
</g>
<g id="drop-a-3" data-name="drop-a">
<g id="big-drop-3" data-name="big-drop">
<path d="M249.1,240.2c0,2,2.8,3.6,6.3,3.6s6.3-1.6,6.3-3.6h0a6.3,6.3,0,1,1-12.5,0Z" transform="translate(0 58)" fill="#4380c2" />
<path d="M251.3,235.2h0Z" transform="translate(0 58)" fill="#abc738" />
<path d="M251.3,235.3c.1,1.3,1.9,2.3,4.1,2.3s4.1-1.1,4.1-2.3h.1a7.8,7.8,0,0,1,2.1,5h0c0,2-2.8,3.6-6.3,3.6s-6.3-1.6-6.3-3.6h0C249.1,238.9,250.1,237.1,251.3,235.3Z" transform="translate(0 58)" fill="#499ed7" />
<path fill="#aecc36" d="M251.4 293.2L259.5 293.2 251.4 293.2 251.4 293.2z" />
<path d="M251.4,235.2h0c2.1-2.9,4.9-5.7,5.8-5.7s-.6,2.7,1.9,5.1l.5.6h-.1c0,1.3-1.8,2.3-4.1,2.3s-4-1-4.1-2.3Z" transform="translate(0 58)" fill="#41bbec" />
</g>
<g id="drop-in-3" data-name="drop-in" fill="none" stroke="#41bbec" stroke-miterlimit="10">
<path d="M255.8 295.6L255.8 43.3" />
<ellipse cx="255.8" cy="304.4" rx="1.3" ry="0.8" />
</g>
</g>
<g id="drop-a-2" data-name="drop-a">
<g id="big-drop-2" data-name="big-drop">
<path d="M238.6,221.5c0,2.7,3.8,4.9,8.4,4.9s8.4-2.2,8.4-4.9h0a8.4,8.4,0,0,1-16.8,0Z" transform="translate(0 58)" fill="#4380c2" />
<path d="M241.5,214.8h0Z" transform="translate(0 58)" fill="#abc738" />
<path d="M241.5,214.9c.1,1.7,2.5,3,5.5,3s5.5-1.4,5.5-3.2h.1a10.5,10.5,0,0,1,2.9,6.8h0c0,2.7-3.8,4.9-8.4,4.9s-8.4-2.2-8.4-4.9h0C238.6,219.8,239.8,217.3,241.5,214.9Z" transform="translate(0 58)" fill="#499ed7" />
<path fill="#aecc36" d="M241.6 272.8L252.4 272.8 241.6 272.8 241.6 272.8z" />
<path d="M241.6,214.8h0c2.8-3.9,6.6-7.6,7.8-7.6,3.2,0-.7,3.7,2.5,6.9l.7.7h-.1c0,1.7-2.5,3.2-5.5,3.2s-5.4-1.4-5.5-3Z" transform="translate(0 58)" fill="#41bbec" />
</g>
<g id="drop-in-2" data-name="drop-in" fill="none" stroke="#41bbec" stroke-miterlimit="10">
<path d="M247 275.9L247 44.7" />
<ellipse cx="246.4" cy="287.9" rx="1.1" ry="0.6" />
</g>
</g>
</g>
<g id="droplet-groups" fill="none" stroke="#41bbec" stroke-miterlimit="10">
<g id="drop">
<path d="M90.7 22.7L90.7 334" />
<ellipse cx="90.7" cy="334.3" rx="2.1" ry="1" />
</g>
<g id="drop-2" data-name="drop">
<path d="M160.7 32.7L160.7 296" />
<ellipse cx="160.1" cy="295.9" rx="2.4" ry="1.2" />
</g>
<g id="drop-3" data-name="drop">
<path d="M197.3 0L197.3 398.7" />
<ellipse cx="197.1" cy="398.9" rx="2.4" ry="1.2" />
</g>
<g id="drop-4" data-name="drop">
<path d="M372.7 23.3L372.7 356.7" />
<ellipse cx="372.1" cy="356.9" rx="2.4" ry="1.2" />
</g>
<g id="drop-5" data-name="drop">
<path d="M423.3 24L423.3 314.7" />
<ellipse cx="423.9" cy="314.7" rx="2.7" ry="1" />
</g>
<g id="drop-6" data-name="drop">
<path d="M494 20L494 359.3" />
<ellipse cx="493.3" cy="358.8" rx="3.3" ry="1.8" />
</g>
</g>
</g>
</script>
<!--windarea.vue-->
<script type="text/x-template" id="windarea">
<g id="wind">
<g>
<ellipse id="newgrad" cx="317" cy="249.2" rx="38.5" ry="86" transform="rotate(-82.8 333.58 235.12)" fill="url(#radial-gradient)" />
<g>
<path d="M322.8,216.4c-26.4-15.2-53.6-15.2-79.9,0h0c-13.2,7.6-19.8,15.3-19.8,23.1s6.6,15.5,19.8,23.1c26.4,15.2,53.6,15.2,79.9,0,13.2-7.6,19.8-15.3,19.8-23.1S335.9,224,322.8,216.4Z" transform="translate(28.3 4)" fill="#f99b1c" />
<path d="M322.8,251.1c-26.4,15.2-53.6,15.2-79.9,0-13.2-7.6-19.8-15.3-19.8-23.1v11.5c0,7.7,6.6,15.5,19.8,23.1,26.4,15.2,53.6,15.2,79.9,0,13.2-7.6,19.8-15.3,19.8-23.1V228C342.5,235.7,335.9,243.4,322.8,251.1Z" transform="translate(28.3 4)" fill="url(#linear-gradient-15)"
/>
<path d="M322.8,204.9c-26.4-15.2-53.6-15.2-79.9,0h0c-13.2,7.6-19.8,15.3-19.8,23.1s6.6,15.5,19.8,23.1c26.4,15.2,53.6,15.2,79.9,0,13.2-7.6,19.8-15.3,19.8-23.1S335.9,212.5,322.8,204.9Z" transform="translate(28.3 4)" fill="#abc738" />
</g>
<g clip-path="url(#clip-path)">
<g style="mix-blend-mode:multiply">
<path d="M362.1,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C362.4,194.8,363,191.8,362.1,188.1Z"
transform="translate(28.3 4)" fill="#f9faf5" opacity="0.03" />
<path d="M360.6,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2H339l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C360.9,194.9,361.5,191.8,360.6,188.1Z"
transform="translate(28.3 4)" fill="#f4f6ed" opacity="0.06" />
<path d="M359.1,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C359.4,194.9,360,191.8,359.1,188.1Z"
transform="translate(28.3 4)" fill="#f0f2e6" opacity="0.09" />
<path d="M357.6,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2H336l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C357.9,194.9,358.5,191.8,357.6,188.1Z"
transform="translate(28.3 4)" fill="#ecefe0" opacity="0.12" />
<path d="M356.1,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C356.4,194.9,357,191.8,356.1,188.1Z"
transform="translate(28.3 4)" fill="#e8ebd9" opacity="0.15" />
<path d="M354.6,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2H333l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C354.9,194.9,355.5,191.8,354.6,188.1Z"
transform="translate(28.3 4)" fill="#e4e8d3" opacity="0.18" />
<path d="M353.1,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C353.4,194.9,354,191.8,353.1,188.1Z"
transform="translate(28.3 4)" fill="#e0e5cd" opacity="0.21" />
<path d="M351.6,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2H330l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C351.9,194.9,352.5,191.8,351.6,188.1Z"
transform="translate(28.3 4)" fill="#dce3c7" opacity="0.24" />
<path d="M350.1,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C350.4,194.9,351,191.8,350.1,188.1Z"
transform="translate(28.3 4)" fill="#d8e0c0" opacity="0.27" />
<path d="M348.6,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2H327l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C348.9,194.9,349.4,191.8,348.6,188.1Z"
transform="translate(28.3 4)" fill="#d5ddba" opacity="0.3" />
<path d="M347.1,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C347.4,194.9,347.9,191.8,347.1,188.1Z"
transform="translate(28.3 4)" fill="#d1dab4" opacity="0.33" />
<path d="M345.5,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2H324l-7.8,2.8H316l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2H300l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C345.9,194.9,346.4,191.8,345.5,188.1Z"
transform="translate(28.3 4)" fill="#cdd7ae" opacity="0.36" />
<path d="M344,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C344.4,194.9,344.9,191.8,344,188.1Z"
transform="translate(28.3 4)" fill="#cad5a8" opacity="0.39" />
<path d="M342.5,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8H313l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2H297l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C342.9,194.9,343.4,191.8,342.5,188.1Z"
transform="translate(28.3 4)" fill="#c6d2a2" opacity="0.42" />
<path d="M341,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C341.4,194.9,341.9,191.8,341,188.1Z"
transform="translate(28.3 4)" fill="#c2d09d" opacity="0.45" />
<path d="M339.5,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8H310l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2H294l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C339.9,194.9,340.4,191.8,339.5,188.1Z"
transform="translate(28.3 4)" fill="#becd97" opacity="0.48" />
<path d="M338,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C338.4,194.9,338.9,191.8,338,188.1Z"
transform="translate(28.3 4)" fill="#bbcb92" opacity="0.52" />
<path d="M336.5,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8H307l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2H291l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C336.9,194.9,337.4,191.8,336.5,188.1Z"
transform="translate(28.3 4)" fill="#b7c88c" opacity="0.55" />
<path d="M335,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C335.4,194.9,335.9,191.8,335,188.1Z"
transform="translate(28.3 4)" fill="#b4c687" opacity="0.58" />
<path d="M333.5,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8H304l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2H288l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C333.8,194.9,334.4,191.8,333.5,188.1Z"
transform="translate(28.3 4)" fill="#b0c382" opacity="0.61" />
<path d="M332,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C332.3,194.9,332.9,191.8,332,188.1Z"
transform="translate(28.3 4)" fill="#acc17c" opacity="0.64" />
<path d="M330.5,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8H301l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2H285l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C330.8,194.9,331.4,191.8,330.5,188.1Z"
transform="translate(28.3 4)" fill="#a9be77" opacity="0.67" />
<path d="M329,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C329.3,194.9,329.9,191.8,329,188.1Z"
transform="translate(28.3 4)" fill="#a5bc71" opacity="0.7" />
<path d="M327.5,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8H298l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2H282l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C327.8,194.9,328.4,191.8,327.5,188.1Z"
transform="translate(28.3 4)" fill="#a2ba6c" opacity="0.73" />
<path d="M326,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C326.3,194.9,326.9,191.8,326,188.1Z"
transform="translate(28.3 4)" fill="#9eb866" opacity="0.76" />
<path d="M324.5,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8H295l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2H279l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C324.8,194.9,325.4,191.8,324.5,188.1Z"
transform="translate(28.3 4)" fill="#9bb660" opacity="0.79" />
<path d="M323,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C323.3,194.9,323.9,191.8,323,188.1Z"
transform="translate(28.3 4)" fill="#98b45a" opacity="0.82" />
<path d="M321.5,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8H292l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2H276l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C321.8,194.9,322.4,191.8,321.5,188.1Z"
transform="translate(28.3 4)" fill="#94b255" opacity="0.85" />
<path d="M320,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C320.3,194.9,320.8,191.8,320,188.1Z"
transform="translate(28.3 4)" fill="#91b050" opacity="0.88" />
<path d="M318.5,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8H289l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2H273l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C318.8,194.9,319.3,191.8,318.5,188.1Z"
transform="translate(28.3 4)" fill="#8dae4b" opacity="0.91" />
<path d="M316.9,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C317.3,194.9,317.8,191.8,316.9,188.1Z"
transform="translate(28.3 4)" fill="#8aac46" opacity="0.94" />
<path d="M315.4,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C315.8,194.9,316.3,191.8,315.4,188.1Z"
transform="translate(28.3 4)" fill="#87aa42" opacity="0.97" />
<path d="M313.9,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.3,5.3,0,0,0-2.6.1h-.2l-7.8,2.8a5.7,5.7,0,0,1,2.5-.2,5.7,5.7,0,0,0-2.5.2h-.1l-7.8,2.8h-.1l-7.9,2.8h0l-7.9,2.8.7-.2-.7.2h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.3v2.6a6.7,6.7,0,0,0,1.4,11.2V230c-3.6.7-6.1,2.6-6.1,4.9v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4h0c0-2.3-2.6-4.2-6.1-4.9V214.3h.2c2.7,2.9,5.9,4.9,8.9,5.5a7.3,7.3,0,0,0,5.2-.7h0l.9-.6h0l6.4-5.5,6.4-5.5,6.6-5.6h0l6.3-5.4h.1C314.2,194.8,314.8,191.8,313.9,188.1Z"
transform="translate(28.3 4)" fill="#83a83f" />
</g>
</g>
<path d="M331.3,243l-65.7,1,3.1-14.3V208.3l32.9-11.3s19.3,2.6,37.8,21.3l-53.7,2-9,10.3,64.8,2.5Z" transform="translate(28.3 4)" fill="url(#linear-gradient-17)" />
<g class="wind-stand">
<path d="M268.6,240.2c-5,0-9.1-2.3-9.1-5.2h0c0-2.9,4.1-5.2,9.1-5.2s9.1,2.3,9.1,5.2h0C277.6,237.8,273.6,240.2,268.6,240.2Z" transform="translate(28.3 4)" fill="#272626" />
<g>
<path d="M268.6,240.2c-5,0-9.1-2.3-9.1-5.2v4c0,2.9,4.1,5.2,9.1,5.2s9.1-2.3,9.1-5.2v-4C277.6,237.8,273.6,240.2,268.6,240.2Z" transform="translate(28.3 4)" fill="url(#linear-gradient-10)" />
<path d="M268.6,214.5c-1.6,0-2.9-.8-2.9-1.7v22.1c0,.9,1.3,1.7,2.9,1.7s2.9-.8,2.9-1.7V212.8C271.5,213.7,270.2,214.5,268.6,214.5Z" transform="translate(28.3 4)" fill="url(#linear-gradient-11)" />
</g>
</g>
<g class="windbox">
<g>
<path d="M268.4,186.8h0Z" transform="translate(28.3 4)" fill="#b4892d" />
<path d="M300.5,175.4h0Z" transform="translate(28.3 4)" fill="#b4892d" />
<path d="M312.6,196.4h0Z" transform="translate(28.3 4)" fill="#b4892d" />
<path d="M268.6,186.7h0Z" transform="translate(28.3 4)" fill="#19b0bf" />
<path d="M276.5,183.9h0Z" transform="translate(28.3 4)" fill="#19b0bf" />
<path d="M284.4,181.1h0Z" transform="translate(28.3 4)" fill="#19b0bf" />
<path d="M289.1,205.8h0a30.6,30.6,0,0,0-8.5-14.6,17.6,17.6,0,0,0-7.3-4.4l-.6-.2a7.8,7.8,0,0,0-4.1.1h-.2l-1,.4h0c-3.3,1.9-4.7,6.9-3.2,13.4,2.2,9.2,9.5,17.8,16.4,19.2a7.3,7.3,0,0,0,5.2-.6h0l.9-.6a8,8,0,0,0,2.5-4.1A17.5,17.5,0,0,0,289.1,205.8Z" transform="translate(28.3 4)"
fill="#f0f7f7" />
<path d="M292.3,178.3h0Z" transform="translate(28.3 4)" fill="#19b0bf" />
<path d="M306.2,201.9h0Z" transform="translate(28.3 4)" fill="#19b0bf" />
<path d="M300.3,175.5h0Z" transform="translate(28.3 4)" fill="#19b0bf" />
<path d="M312.6,196.4h0Z" transform="translate(28.3 4)" fill="#19b0bf" />
<path d="M313.9,188.1c-1.5-6.1-6.3-11.8-10.9-12.7a5.2,5.2,0,0,0-2.6.1h-.2l-7.8,2.8a5.9,5.9,0,0,1,3-.1l1.9.6c4.5,2,8.9,7.7,10.3,13.7a14.8,14.8,0,0,1,.4,4.9,7,7,0,0,1-1.9,4.5l6.3-5.4h.1C314.2,194.8,314.8,191.8,313.9,188.1Z" transform="translate(28.3 4)"
fill="url(#linear-gradient-7)" />
</g>
<g>
<path d="M307.7,192.5c-1.4-6-5.8-11.7-10.3-13.7l-1.9-.6a5.9,5.9,0,0,0-3,.1h-.1l-7.8,2.8a6.5,6.5,0,0,1,3.4-.1l1.4.4c5.2,2,10.5,8.5,12.2,15.5a15.6,15.6,0,0,1,.3,6.1,7.2,7.2,0,0,1-2.2,4.4h0l6.6-5.6h0a7,7,0,0,0,1.9-4.5A14.8,14.8,0,0,0,307.7,192.5Z" transform="translate(28.3 4)"
fill="#f15927" />
<path d="M295.3,201.3a25.6,25.6,0,0,0-.9-2.9,28.7,28.7,0,0,0-4.8-8.3,18.8,18.8,0,0,0-8.3-6.1l-1-.3a7.2,7.2,0,0,0-3.7.1h0l-7.9,2.8a7.8,7.8,0,0,1,4.1-.1l.6.2a17.6,17.6,0,0,1,7.3,4.4,30.6,30.6,0,0,1,8.5,14.6h0a17.5,17.5,0,0,1,.1,8.5,8,8,0,0,1-2.5,4.1h0l6.4-5.5h0a7.6,7.6,0,0,0,2.4-4.2A16.6,16.6,0,0,0,295.3,201.3Z"
transform="translate(28.3 4)" fill="#f15927" />
<path d="M301.5,196.9c-1.7-7-6.9-13.6-12.2-15.5l-1.4-.4a6.5,6.5,0,0,0-3.4.1h-.1l-7.9,2.8a7.2,7.2,0,0,1,3.7-.1l1,.3a18.8,18.8,0,0,1,8.3,6.1,28.7,28.7,0,0,1,4.8,8.3,25.6,25.6,0,0,1,.9,2.9,16.6,16.6,0,0,1,.3,7.4,7.6,7.6,0,0,1-2.4,4.2h0l6.4-5.5h0l-.8.6a6.8,6.8,0,0,0,3-5A15.6,15.6,0,0,0,301.5,196.9Z"
transform="translate(28.3 4)" fill="url(#linear-gradient-8)" />
</g>
<path d="M266.5,201c1.8,7.5,7.8,14.6,13.4,15.8a6,6,0,0,0,4.3-.5h0c2.7-1.6,3.9-5.7,2.6-11-1.8-7.5-7.8-14.6-13.4-15.8a6,6,0,0,0-4.3.5h0C266.4,191.6,265.2,195.7,266.5,201Z" transform="translate(28.3 4)" fill="url(#linear-gradient-9)" />
<path d="M264.5,194.7a.9.9,0,1,0,.9,1.6h0c.3-.1.3-.6,0-1.1s-.7-.7-.9-.5Z" transform="translate(28.3 4)" fill="url(#radial-gradient-2)" />
<path d="M288.1,210.6a.9.9,0,1,0,.9,1.6h0c.3-.1.3-.6,0-1.1s-.7-.7-.9-.5Z" transform="translate(28.3 4)" fill="url(#radial-gradient-3)" />
<path d="M264.6,207.1a.3.3,0,0,1-.3-.3V195.9a.3.3,0,1,1,.7,0v10.9A.3.3,0,0,1,264.6,207.1Z" transform="translate(28.3 4)" fill="#010101" />
<circle id="ball" cx="296.9" cy="212.3" r="6.8" fill="url(#radial-gradient-4)" />
<path d="M272.8,210.5a.9.9,0,1,1-.9,1.6h0c-.3-.1-.3-.6,0-1.1s.7-.7.9-.5Z" transform="translate(28.3 4)" fill="url(#radial-gradient-5)" />
<path d="M272.8,211.7a.3.3,0,1,1,0-.7h15.3a.3.3,0,1,1,0,.7Z" transform="translate(28.3 4)" fill="#010101" />
</g>
</g>
<path d="M237.5,230.8s18.1-5.7,21.9-3.7-1.1,7.6-1.1,7.6Z" transform="translate(28.3 4)" opacity="0.35" fill="url(#linear-gradient-13)" />
<g id="flower1" fill-rule="evenodd">
<path class="leaf1" d="M293.6,219.8c-2.9,14.9-.7,20.2.4,32.6.1.9.3,2.6-.4,3.2v-.8C292,240.6,287.6,236.4,293.6,219.8Z" transform="translate(28.3 4)" fill="#688338" />
<path class="leaf2" d="M315.7,236.8c-9.8-.1-20.8,5.4-21.7,15.5-.1.9,0,2.6-.1,2.9s1.6-9.3,6.5-13S310.7,239.9,315.7,236.8Z" transform="translate(28.3 4)" fill="#50672e" />
<path class="leaf3" d="M300.9,224.3c-3.5,3.2-4.3,8.7-4.2,13s.2,5.8-.7,8.4a61.7,61.7,0,0,0-1.4,6.1,8.2,8.2,0,0,0-.2,2.9l-.4.3a7.5,7.5,0,0,1,.2-3.3,62.3,62.3,0,0,1,1.4-6.2c.9-2.5.8-5.3.8-8.2-.1-4.4.7-9.6,4.3-13.3Z" transform="translate(28.3 4)" fill="#9f5f30"
/>
<g id="petals-2" data-name="petals">
<path class="petal1" d="M301.1,223.9a2.8,2.8,0,0,0-.1,2.1,4.4,4.4,0,0,1-4.2,0c-.5-.3-.5-.2,0-.6S299.2,223.4,301.1,223.9Z" transform="translate(28.3 4)" fill="#ffcc04" />
<path class="petal2" d="M300.5,225.2a3.7,3.7,0,0,0,2.4.8,3.6,3.6,0,0,1-1.5,3.7c-.8.6-1,.8-1.3,0S299.3,227,300.5,225.2Z" transform="translate(28.3 4)" fill="#ffcc04" />
<path d="M302,225.8a2.4,2.4,0,0,0,1.8-.6c1.1.9,1.4,1.7,1.3,3.4s0,.5-.6.2C302.3,227.5,302.3,227.8,302,225.8Z" transform="translate(28.3 4)" fill="#fcdb54" />
<path d="M301.3,224.7c.2-.7.4-.9,1-1.3s-1.7-1.3-3.6-1.6-.6-.1-.3.4S299.1,224.1,301.3,224.7Z" transform="translate(28.3 4)" fill="#fcdb54" />
<path d="M301.5,223.9a1.2,1.2,0,0,1,1.2,0,3.7,3.7,0,0,0-.3-3c-.2-.5-.2-.4-.4,0S301,222.3,301.5,223.9Z" transform="translate(28.3 4)" fill="#ffcc04" />
<path d="M303.8,221.7c.1.1.2-.2.3-.1s.5.1.5.3,0,.1.2.2a.4.4,0,0,1,.2.4c0,.1,0,.1.1.2s.4.2.3.5-.1.2,0,.4a.6.6,0,0,1,.1.7c-.1.5.7.6.1,1.2s0,.4-.3.5l-.7-.2a4.3,4.3,0,0,0-1.7-.2,1,1,0,0,1-1.4-1.3c.1-.5.9-.8,1.5-2a2.5,2.5,0,0,0,.1-.4A.4.4,0,0,1,303.8,221.7Z"
transform="translate(28.3 4)" fill="#f7c514" />
<path d="M303.4,221.7a1.1,1.1,0,0,1,.3,1c0,.2,0,.1.2.2a.4.4,0,0,1,.2.5c0,.2,0,.1.1.3s-.1.3-.2.4-.2.1,0,.3a.7.7,0,0,1,.1.7c-.1.3,0,.3.3.4s.6.5-.2.3-1.1.3-1.7.5a1.3,1.3,0,0,1-1.5-1.6c.1-.6,1.6-1,2.2-2.3v-.4C303.2,221.4,303.2,221.4,303.4,221.7Z" transform="translate(28.3 4)"
fill="#ffea8d" />
</g>
<path class="leaf3" d="M296.4,220a329.2,329.2,0,0,1-2,34.6l-.4.6C293,250.5,293.8,240.2,296.4,220Z" transform="translate(28.3 4)" fill="#699c41" />
</g>
<path d="M293.6,255.2s17.3-5.7,20.8-3.6-5.6,6.1-5.6,6.1Z" transform="translate(28.3 4)" opacity="0.35" fill="url(#linear-gradient-14)" />
<g id="flower2" fill-rule="evenodd">
<path class="leaf4" d="M250.1,198.3c-10.9-.8-11.7,8.6-12.7,18.2-.4,3.5.3,10.9.5,14.4C241.5,214.4,238.7,205.8,250.1,198.3Z" transform="translate(28.3 4)" fill="#89bb40" />
<path class="leaf5" d="M249.9,203.1c-5.7,9-8.6,9.8-10.5,19.6-.7,3.6-1.5,4.6-1.6,8.2C243.3,214.3,248.6,217.8,249.9,203.1Z" transform="translate(28.3 4)" fill="#659a41" />
<path class="petal3" d="M249.3,207.2c2.4.5.6,4.5-1,6.4s-3.9,3.6-5.7,3.2-.6-2.3-.6-3.7.9-2.4,1.7-3.5.9-.8,1.8-1.4A5.7,5.7,0,0,1,249.3,207.2Z" transform="translate(28.3 4)" fill="#edc21c" />
<path d="M246.6,205.7c-1.3-2-4.1,1.2-5.3,3.4s-1.8,5-.8,6.6,2.2-.3,3.5-.8,1.8-1.8,2.5-3a5.1,5.1,0,0,0,.6-2.2A6.1,6.1,0,0,0,246.6,205.7Z" transform="translate(28.3 4)" fill="#edc21c" />
<path d="M248.4,207c2.2,1.3.5,4.7-1.2,6.8s-3.1,3-4.7,3-2.2-1.9-2.2-3.3,1.1-2.4,2.1-3.6S246.5,205.8,248.4,207Z" transform="translate(28.3 4)" fill="#f8d335" />
<path d="M241.6,216.8a14.9,14.9,0,0,0-1.3,3.1,42.7,42.7,0,0,0-1.3,4.7c-.1.5-.4,2.6-.5,4.2s-.3,1.7-.3,1.8l-.3.2a5.6,5.6,0,0,1,0-2c.1-1.6.5-3.7.5-4.2a43.2,43.2,0,0,1,1.3-4.8,15.1,15.1,0,0,1,1.3-3.2Z" transform="translate(28.3 4)" fill="#a46127" />
</g>
<g id="hat">
<ellipse cx="-14.3" cy="215.8" rx="8.4" ry="14" transform="rotate(-85.1 1.96 202.33)" fill="#f4d27a" />
<path d="M-15.2,210.8h.7l2-.8,3-1,1.3-.5a22.2,22.2,0,0,0-5.4-1.1c-7.7-.7-14.3,2.6-14.7,7.2a6.6,6.6,0,0,0,2.4,5.3,9.4,9.4,0,0,1,2.3-6.7,8.4,8.4,0,0,1,6-3.1A3.7,3.7,0,0,1-15.2,210.8Z" transform="translate(28.3 4)" fill="#fee9ab" />
<path d="M-20,215.3a12.2,12.2,0,0,0,6.5,1.4,10,10,0,0,0,2.9-.7,17.7,17.7,0,0,1,3.4-1.4h.1a11.7,11.7,0,0,0,.4-3.1c0-5.2-3.4-7.5-7.4-7.5s-7.2,2.3-7.2,7.5a11.6,11.6,0,0,0,.5,3.5Z" transform="translate(28.3 4)" fill="#f4d27a" />
<path d="M-18.9,209.4l3-2.7a11.8,11.8,0,0,1,2.6-2h-.9c-3.6,0-6.5,2.1-6.5,6.7,0,.2,0,.3,0,.5A7.6,7.6,0,0,1-18.9,209.4Z" transform="translate(28.3 4)" fill="#fee9ab" />
<path d="M-7.8,211.3h-.9l-1.5.3h-.7l-.6.3-.4.3-.4.3a13.5,13.5,0,0,0-1.9,2.6,4.1,4.1,0,0,1-1,1.1,13.1,13.1,0,0,0,3,.2l2.2-.4a17.8,17.8,0,0,1,2.7-.8H-7a4.6,4.6,0,0,0,.3-1.7,3.5,3.5,0,0,0-.8-2.4Z" transform="translate(28.3 4)" fill="#d4b163" opacity="0.32"
/>
<path d="M-14,216c-3.3,0-6.2-1-7.2-2.3v.2c0,1.9,3.2,3.5,7.2,3.5s7.2-1.6,7.2-3.5v-.2C-7.9,215.1-10.7,216-14,216Z" transform="translate(28.3 4)" fill="#ee302d" />
</g>
</g>
</script>
<!--rainbowarea.vue-->
<script type="text/x-template" id="rainbowarea">
<g id="rainbow">
<g id="rainbowpaths">
<ellipse cx="287" cy="250.5" rx="83.3" ry="49.1" fill="none" stroke="#d33227" stroke-miterlimit="10"/>
<ellipse cx="287" cy="251.5" rx="95.3" ry="56.2" fill="none" stroke="#f5841f" stroke-miterlimit="10"/>
<ellipse cx="286" cy="252.5" rx="106.3" ry="62.7" fill="none" stroke="#fcc62b" stroke-miterlimit="10"/>
<ellipse cx="287.4" cy="253.6" rx="119.4" ry="70.4" fill="none" stroke="#a1b53a" stroke-miterlimit="10"/>
<ellipse cx="288.7" cy="256.3" rx="135.4" ry="79.9" fill="none" stroke="#4478bc" stroke-miterlimit="10"/>
</g>
<ellipse id="blue" cx="288.2" cy="249.2" rx="73.9" ry="43.6" fill="#27aae1"/>
<ellipse id="light" cx="325.9" cy="207" rx="71.3" ry="54.2" transform="matrix(0.91, -0.41, 0.41, 0.91, -56.02, 154.57)" opacity="0.76" fill="url(#radial-gradient-21)"/>
<polygon id="beams" points="353.6 170.9 364.5 154.9 364 174.3 382.3 167.8 370.5 183.2 389.1 188.7 370.5 194.1 382.3 209.5 364 203 364.5 222.5 353.6 206.4 342.6 222.5 343.1 203 324.8 209.5 336.7 194.1 318 188.7 336.7 183.2 324.8 167.8 343.1 174.3 342.6 154.9 353.6 170.9" fill="#fcc62b" opacity="0.13"/>
<g id="rainbowplat">
<ellipse id="newgrad" cx="310" cy="233.2" rx="38.5" ry="86" transform="rotate(-82.8 333.58 235.12)" fill="url(#radial-gradient)"/>
<g>
<g>
<path d="M327.5,222.7c-26-15-52.8-15-78.8,0h0c-13,7.5-19.5,15.1-19.5,22.8s6.5,15.2,19.5,22.8c26,15,52.8,15,78.8,0,13-7.5,19.5-15.1,19.5-22.8S340.5,230.2,327.5,222.7Z" transform="translate(0 4)" fill="#fee23b"/>
<path d="M327.5,256.9c-26,15-52.8,15-78.8,0-13-7.5-19.5-15.1-19.5-22.8v11.4c0,7.6,6.5,15.2,19.5,22.8,26,15,52.8,15,78.8,0,13-7.5,19.5-15.1,19.5-22.8V234.1C347,241.7,340.5,249.4,327.5,256.9Z" transform="translate(0 4)" fill="url(#linear-gradient-22)"/>
<path d="M327.5,211.4c-26-15-52.8-15-78.8,0h0c-13,7.5-19.5,15.1-19.5,22.8s6.5,15.2,19.5,22.8c26,15,52.8,15,78.8,0,13-7.5,19.5-15.1,19.5-22.8S340.5,218.9,327.5,211.4Z" transform="translate(0 4)" fill="#38394f"/>
</g>
</g>
<g class="bow">
<path id="newrshadow" d="M293.3,229.7l5.6,19.7,38.8.6s15.3-10.3,6.3-24.3A64.3,64.3,0,0,0,322.7,209C309.7,203,293.3,229.7,293.3,229.7Z" transform="translate(0 4)" fill="url(#linear-gradient-22)"/>
<path id="ambient1" d="M303.5,221.7v22.7l40.4-4C344.7,231.8,341.1,231.1,303.5,221.7Z" transform="translate(0 4)" opacity="0.21" fill="url(#linear-gradient-26)"/>
<path id="ambient2" d="M326.5,211.4v22.8H347S347.7,220.3,326.5,211.4Z" transform="translate(0 4)" opacity="0.45" fill="url(#linear-gradient-27)"/>
<!--end shadow-->
<path d="M307.5,244.4l-8.6,4.9c0-5.7,2-9.9,5.5-11.9l8.6-4.9C309.4,234.6,307.5,238.8,307.5,244.4Z" transform="translate(0 4)" fill="#4478bc"/>
<polygon points="326.6 238.1 318 243.1 318 233 326.6 228.1 326.6 238.1" fill="#4478bc"/>
<polygon points="326.6 228.1 318 233 318 223 326.6 218.1 326.6 228.1" fill="#89a13c"/>
<polygon points="326.6 218.1 318 223 318 213 326.6 208 326.6 218.1" fill="#fcc62b"/>
<polygon points="326.6 208 318 213 318 202.9 326.6 198 326.6 208" fill="#f5841f"/>
<polygon points="326.6 198 318 202.9 318 192.9 326.6 187.9 326.6 198" fill="#d33227"/>
<path d="M326.1,183.7c-17.2-9.9-32.7-10.8-43.9-4.3l-8.6,4.9c11.2-6.5,26.8-5.6,43.9,4.3l.5.3,8.6-4.9Z" transform="translate(0 4)" fill="url(#linear-gradient-23)"/>
<g>
<path d="M280.2,194.7c10.2-5.6,23.6-4.1,37.8,4.2v-10l-.5-.3c-17.2-9.9-32.7-10.8-43.9-4.3s-18.2,20.4-18.2,40.2l8.7,5c0-.2,0-.4,0-.6.1-16.2,5.7-28.2,15.6-34Z" transform="translate(0 4)" fill="#ee5823"/>
<path d="M286.2,205.4c8.4-4.7,19.5-3.5,31.3,3.3l.5.3v-10c-14.2-8.4-27.7-9.9-37.8-4.2l-.4.2c-9.9,5.7-15.5,17.8-15.6,34,0,.2,0,.4,0,.6l8.7,5c0-.2,0-.4,0-.5.1-13.5,4.8-23.6,13.1-28.4Z" transform="translate(0 4)" fill="#f99c20"/>
<path d="M292.3,216.1c6.8-3.8,15.7-2.8,25.2,2.7l.4.2h.1V209l-.5-.3c-11.8-6.8-22.9-8-31.3-3.3l-.3.2c-8.3,4.8-13,14.9-13.1,28.4,0,.2,0,.4,0,.5l8.7,5c0-.1,0-.3,0-.4.1-10.9,3.8-19,10.5-22.9Z" transform="translate(0 4)" fill="#fdd23c"/>
<path d="M298.4,226.7c5.1-2.9,11.9-2.1,19.1,2l.3.2h.2V219h-.1l-.4-.2c-9.5-5.5-18.4-6.4-25.2-2.7l-.3.2c-6.7,3.9-10.4,12-10.5,22.9,0,.1,0,.3,0,.4l8.7,5c0-.1,0-.2,0-.3.1-8.3,2.9-14.4,8-17.4Z" transform="translate(0 4)" fill="#a1b53a"/>
<path d="M317.8,228.9l-.3-.2c-7.2-4.2-14-4.9-19.1-2h-.2c-5.1,2.9-7.9,9.1-8,17.4,0,.1,0,.2,0,.3l8.7,5c0-.1,0-.1,0-.2,0-5.7,2-9.9,5.5-11.9h.1c3.5-1.9,8.1-1.5,13,1.4h.2l.3.2V229Z" transform="translate(0 4)" fill="#4b9ad4"/>
</g>
</g>
</g>
<g id="sun">
<path d="M358.1,169.6c-3-2.3-6-2.9-8.3-2l-5.5,2.2c2.3-1,5.3-.4,8.3,2,6.1,4.7,10.2,14.7,9.2,22.3-.5,3.8-2.2,6.3-4.5,7.3l5.5-2.2c2.3-1,4-3.5,4.5-7.3C368.3,184.3,364.2,174.3,358.1,169.6Z" transform="translate(0 4)" fill="url(#linear-gradient-24)"/>
<path d="M350.4,198.8a13,13,0,0,0,2.9,1.7l-2.8.5-2.2-4.1A18.5,18.5,0,0,0,350.4,198.8Zm4.7,2.3,3.1,2.3,1.4-3-.9.4A6.4,6.4,0,0,1,355.1,201.1Zm-14.3-29.8.6,4.5a9.9,9.9,0,0,1,2.2-5ZM361.6,182l-.6-4.5-3.1-2.3A28.3,28.3,0,0,1,361.6,182Zm-5.4-8.8-2.2-4.1-2.8.5a13,13,0,0,1,2.9,1.7A18.6,18.6,0,0,1,356.3,173.2Zm-6.9-4.2-3.1-2.3-1.4,3,.9-.4A6.3,6.3,0,0,1,349.4,169Zm14.3,29.8-.6-4.5a9.9,9.9,0,0,1-2.2,4.9Zm1.1-9.9-2.3-4.2a23.9,23.9,0,0,1,.9,7.2Z" transform="translate(0 4)" fill="url(#radial-gradient-22)"/>
<g>
<polygon points="361.2 206.2 358.2 207.4 359.6 204.3 362.6 203.1 361.2 206.2" fill="#faa51a"/>
<polygon points="346.6 173.6 343.6 174.9 340.8 175.3 343.8 174.1 346.6 173.6" fill="#fdd800"/>
<polygon points="366.6 201.5 363.7 202.8 363.1 198.3 366.1 197.1 366.6 201.5" fill="#fcb415"/>
<polygon points="366.4 194.7 363.4 195.9 364.8 192.9 367.7 191.7 366.4 194.7" fill="#faa51a"/>
<polygon points="367.7 191.7 364.8 192.9 362.5 188.7 365.5 187.5 367.7 191.7" fill="#fec40d"/>
<polygon points="364.6 184.8 361.6 186 361.1 181.6 364 180.4 364.6 184.8" fill="#fcaf17"/>
<polygon points="364 180.4 361.1 181.6 358 179.3 360.9 178.1 364 180.4" fill="#ffd10a"/>
<polygon points="359.2 176 356.3 177.2 354 173.1 357 171.9 359.2 176" fill="#fdc010"/>
<polygon points="357 171.9 354 173.1 351.2 173.6 354.2 172.3 357 171.9" fill="#fdd800"/>
<polygon points="352.3 171.8 349.4 173 346.3 170.7 349.2 169.5 352.3 171.8" fill="#ffcc04"/>
</g>
<path d="M361.8,194.1c-.5,3.8-2.2,6.3-4.5,7.3s-5.3.4-8.3-2c-6.1-4.7-10.2-14.7-9.2-22.3.5-3.8,2.2-6.3,4.5-7.3s5.3-.4,8.3,2C358.8,176.5,362.9,186.5,361.8,194.1Z" transform="translate(0 4)" fill="url(#radial-gradient-23)"/>
<path d="M353,184.7a3,3,0,0,1-5.3,2.2,10.9,10.9,0,0,1-3.8-9.1,3,3,0,0,1,5.3-2.2A10.9,10.9,0,0,1,353,184.7Z" transform="translate(0 4)" fill="#575858" style="mix-blend-mode: screen"/>
</g>
</g>
</script>
<!--tornadoarea.vue-->
<script type="text/x-template" id="tornadoarea">
<g id="tornado">
<ellipse id="fog" cx="286.8" cy="210.7" rx="73.5" ry="68.6" fill="url(#radial-gradient-20)"/>
<g id="tornado-plat">
<ellipse id="newgrad" cx="317" cy="249.2" rx="38.5" ry="86" transform="rotate(-82.8 333.58 235.12)" fill="url(#radial-gradient)"/>
<g>
<g>
<path d="M322.3,227.3c-23.5-13.5-47.7-13.5-71.1,0h0c-11.7,6.8-17.6,13.7-17.6,20.5s5.9,13.8,17.6,20.5c23.5,13.5,47.7,13.5,71.1,0,11.7-6.8,17.6-13.7,17.6-20.5S334.1,234.1,322.3,227.3Z" transform="translate(0 4)" fill="#df5f26"/>
<path d="M322.3,258.1c-23.5,13.5-47.7,13.5-71.1,0-11.7-6.8-17.6-13.7-17.6-20.5v10.2c0,6.9,5.9,13.8,17.6,20.5,23.5,13.5,47.7,13.5,71.1,0,11.7-6.8,17.6-13.7,17.6-20.5V237.6C339.9,244.5,334.1,251.3,322.3,258.1Z" transform="translate(0 4)" fill="url(#linear-gradient-20)"/>
<path d="M322.3,217c-23.5-13.5-47.7-13.5-71.1,0h0c-11.7,6.8-17.6,13.7-17.6,20.5s5.9,13.8,17.6,20.5c23.5,13.5,47.7,13.5,71.1,0,11.7-6.8,17.6-13.7,17.6-20.5S334.1,223.8,322.3,217Z" transform="translate(0 4)" fill="#d75827"/>
</g>
<g>
<path d="M322.3,227.3c-23.5-13.5-47.7-13.5-71.1,0h0c-11.7,6.8-17.6,13.7-17.6,20.5s5.9,13.8,17.6,20.5c23.5,13.5,47.7,13.5,71.1,0,11.7-6.8,17.6-13.7,17.6-20.5S334.1,234.1,322.3,227.3Z" transform="translate(0 4)" fill="#fee23b"/>
<path d="M322.3,258.1c-23.5,13.5-47.7,13.5-71.1,0-11.7-6.8-17.6-13.7-17.6-20.5v10.2c0,6.9,5.9,13.8,17.6,20.5,23.5,13.5,47.7,13.5,71.1,0,11.7-6.8,17.6-13.7,17.6-20.5V237.6C339.9,244.5,334.1,251.3,322.3,258.1Z" transform="translate(0 4)" fill="url(#linear-gradient-21)"/>
<path d="M322.3,217c-23.5-13.5-47.7-13.5-71.1,0h0c-11.7,6.8-17.6,13.7-17.6,20.5s5.9,13.8,17.6,20.5c23.5,13.5,47.7,13.5,71.1,0,11.7-6.8,17.6-13.7,17.6-20.5S334.1,223.8,322.3,217Z" transform="translate(0 4)" fill="#eaf3f6"/>
</g>
</g>
<g class="tornado-group">
<ellipse cx="289.5" cy="245.2" rx="9.3" ry="5.4" fill="#4783c4"/>
<ellipse cx="292" cy="240.1" rx="11.1" ry="6.4" fill="#578bc9"/>
<ellipse cx="291.9" cy="235.9" rx="12.8" ry="7.4" fill="#6695ce"/>
<ellipse cx="290.1" cy="232.4" rx="14.5" ry="8.4" fill="#749fd4"/>
<ellipse cx="287.4" cy="229.1" rx="16.2" ry="9.4" fill="#82a9d9"/>
<ellipse cx="284.6" cy="225.6" rx="17.9" ry="10.4" fill="#91b4df"/>
<ellipse cx="282.5" cy="221.7" rx="19.7" ry="11.4" fill="#a0c0e5"/>
<ellipse cx="282.1" cy="216.8" rx="21.4" ry="12.3" fill="#b0cdeb"/>
<ellipse cx="284.2" cy="210.8" rx="23.1" ry="13.3" fill="#c0daf2"/>
<ellipse cx="289.5" cy="203" rx="24.8" ry="14.3" fill="#d0e8f8"/>
</g>
</g>
<path id="lightning" d="M267.5,237s51.4,18.8,50-7.3S230.8,192,241,204.5s80,36.5,82,7-56-57-63.5-46.5,64,52.5,69.5,40.5-27-60.5-27-42,34,39,32.5,30-10.5-43-8-28l6.5,19s-.5-14.5-2-18.5" transform="translate(0 4)" fill="none" stroke="#eec919" stroke-miterlimit="10"/>
</g>
</script>//* ---------------------------------
// Best viewed full screen:
// https://codepen.io/sdras/full/YNpaoJ/
//* ---------------------------------
// also better with the sound on :)
// app css
body {
background: #92278f;
}
.notifier-svg {
max-width: 1300px;
margin: 0 auto;
display: table;
}
#app {
font-family: 'Titillium Web', sans-serif;
}
.press {
visibility: hidden;
}
.fadeout-enter-active,
.fadeout-leave-active {
transition: opacity .25s
}
.fadeout-enter,
.fadeout-leave-to {
opacity: 0
}
#thx-button,
#phonebutton {
cursor: pointer;
}
//individual templates
#wind {
-webkit-transform: translate(-20px, 59px);
transform: translate(-20px, 59px);
opacity: 0.9;
}
#tornado {
-webkit-transform: translate(5px, 54px);
transform: translate(5px, 54px);
}
#rainbow {
-webkit-transform: translate(0px, 50px);;
transform: translate(0px, 50px);;
}
@media screen and (max-width: 700px) {
.notifier-svg {
width: 120vw;
height: 120vh;
margin-top: -120px;
margin-left: -50px;
}
}// The code is a little different in codepen, if you'd like to see the setup that's more true to real-life, it's in this repo: https://github.com/sdras/vue-weather-notifier
//I had to change a bunch of things around to use vuex in one script tag, most notably that this.$store became just store
const store = new Vuex.Store({
state: {
showWeather: false,
template: 0
},
mutations: {
toggle: state => state.showWeather = !state.showWeather,
updateTemplate: (state) => {
state.template = (state.template + 1) % 4;
state.showWeather = !state.showWeather;
}
}
});
const Defs = {
template: '#defs'
};
const Dialog = {
template: '#dialog',
computed: {
template() {
return store.state.template;
}
},
methods: {
toggle() {
store.commit('toggle');
}
},
mounted() {
//enter weather
const tl = new TimelineMax();
tl.add("enter");
tl.fromTo("#dialog", 2, {
opacity: 0
}, {
opacity: 1
}, "enter");
tl.fromTo("#dialog", 2, {
rotation: -4
}, {
rotation: 0,
transformOrigin: "50% 100%",
ease: Elastic.easeOut
}, "enter");
}
};
const Droparea = {
template: '#droparea',
mounted() {
let audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/rain.mp3'),
tl = new TimelineMax();
audio.play();
tl.add("drops");
//drops in
tl.staggerFromTo("#droplet-groups g path", 0.3, {
drawSVG: "0% -10%"
}, {
drawSVG: "100% 110%",
repeat: 3,
repeatDelay: 1,
ease: Sine.easeIn
}, 0.5, "drops");
tl.fromTo(".plat-piece", 0.5, {
y: 88
}, {
y: 58,
ease: Sine.easeOut
}, "drops");
tl.fromTo("#lt-shadow", 0.5, {
scale: 0,
opacity: 0
}, {
opacity: 1,
scale: 1,
ease: Sine.easeOut
}, "drops");
tl.staggerFromTo("#drop-area [id^='drop-a'] [id^='drop-in'] path", 0.3, {
drawSVG: "100% 110%"
}, {
drawSVG: "0% -10%",
repeat: 2,
repeatDelay: 1,
ease: Sine.easeIn
}, 0.5, "drops+=1");
tl.staggerFromTo("#drop-area [id^='drop-a'] [id^='big-drop'] path", 0.5, {
opacity: 0
}, {
opacity: 1,
ease: Sine.easeOut
}, -0.04, "drops+=1");
tl.fromTo("#drop-shadow", 3, {
opacity: 0
}, {
opacity: 1,
ease: Sine.easeOut
}, "drops+=1.5");
tl.staggerFromTo("#droplet-groups g ellipse", 0.3, {
scaleX: 0,
scaleY: 1,
opacity: 1
}, {
transformOrigin: "20% 50%",
scaleX: 4,
scaleY: 2,
opacity: 0,
repeat: 3,
repeatDelay: 1,
ease: Sine.easeIn
}, 0.5, "drops+=0.3");
tl.staggerFromTo("#drop-area [id^='drop-a'] [id^='drop-in'] ellipse", 0.3, {
scaleX: 0,
scaleY: 1,
opacity: 1
}, {
transformOrigin: "20% 50%",
scaleX: 4,
scaleY: 2,
repeat: 2,
repeatDelay: 1,
opacity: 0,
ease: Sine.easeIn
}, 0.5, "drops+=0.3");
tl.staggerFromTo("#ripple ellipse", 2, {
scale: 0,
opacity: 1,
transformOrigin: "50% 50%",
}, {
transformOrigin: "50% 50%",
scale: 1,
opacity: 0,
ease: Sine.easeOut
}, "-0.2", "drops+=0.3");
}
};
const Windarea = {
template: '#windarea',
mounted() {
let audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/wind.mp3'),
tl = new TimelineMax(),
easeConfig = CustomEase.create("custom", "M0,0 C0,0 0.012,-0.064 0.015,-0.076 0.03,0.05 0.057,-0.052 0.075,-0.042 0.06,0.344 0.123,0.258 0.125,0.266 0.125,0.258 0.114,-0.039 0.14,-0.039 0.184,-0.039 0.165,0.205 0.175,0.29 0.211,0.303 0.26,0.108 0.315,0.341 0.316,0.329 0.324,0.275 0.325,0.272 0.325,0.277 0.338,0.385 0.34,0.395 0.354,0.512 0.413,0.263 0.42,0.251 0.478,0.108 0.445,0.432 0.46,0.532 0.474,0.559 0.516,0.392 0.5,0.608 0.472,0.802 0.633,0.486 0.65,0.471 0.651,0.491 0.657,0.602 0.66,0.65 0.678,0.659 0.67,0.8 0.73,0.685 0.764,0.789 0.778,1.144 0.845,1.029 0.846,1.026 0.858,0.989 0.86,0.984 0.87,1.002 0.926,0.822 0.96,1.151 0.964,1.136 1,1 1,1");
audio.play();
audio.volume = 0.2;
TweenMax.set("#hat", {
x: -120
});
tl.add("wind");
//wind timeline
tl.fromTo(".windbox", 1.5, {
rotation: -10,
x: -6,
y: 3
}, {
x: -6,
y: 3,
rotation: 10,
repeat: 2,
yoyo: true,
transformOrigin: "0% 80%",
ease: easeConfig
}, "wind");
tl.to(".leaf1", 1.5, {
attr: {
d: "M321.6,240.6c-18.9-5.4-28.7-.7-27.6,11.7.1.9.3,2.6-.4,3.2v-.8C292,240.6,299.9,239.1,321.6,240.6Z"
},
repeat: 2,
yoyo: true,
ease: easeConfig
}, "wind");
tl.to(".leaf2", 1.5, {
rotation: 8,
transformOrigin: "0 100%",
repeat: 2,
yoyo: true,
ease: easeConfig
}, "wind");
tl.to(".leaf3", 1.5, {
rotation: 4,
transformOrigin: "0 100%",
repeat: 2,
yoyo: true,
ease: easeConfig
}, "wind");
tl.to(".leaf4", 1.5, {
attr: {
d: "M259.8,205.8c-10.9-.8-15.1,2.6-20.4,10.7-1.9,2.9-1.7,10.9-1.5,14.5C241.5,214.4,248.3,213.3,259.8,205.8Z"
},
repeat: 2,
yoyo: true,
ease: easeConfig
}, "wind");
tl.to(".leaf5", 1.5, {
attr: {
d: "M257.7,211.1c-7.7,1.2-16.4,1.7-18.2,11.6-.7,3.6-1.5,4.6-1.6,8.2C243.3,214.3,249.8,218,257.7,211.1Z"
},
repeat: 2,
yoyo: true,
ease: easeConfig
}, "wind");
tl.to("#hat", 5, {
bezier: {
type: "soft",
values: [{
x: -100,
y: -50
}, {
x: 100,
y: -100
}, {
x: 200,
y: -50
}, {
x: 300,
y: -80
}, {
x: 400,
y: -200
}, {
x: 500,
y: -100
}, {
x: 600,
y: -100
}, {
x: 700,
y: -50
}, {
x: 900,
y: -130
}],
autoRotate: false
},
rotation: -1000,
ease: Circ.easeInOut
}, "wind");
tl.to(".petal1", 3, {
bezier: {
type: "soft",
values: [{
x: 20,
y: -70
}, {
x: 250,
y: 80
}, {
x: 300,
y: 80
}, {
x: 500,
y: 90
}, {
x: 600,
y: 100
}, {
x: 700,
y: 80
}, {
x: 900,
y: 130
}],
autoRotate: true
},
ease: Circ.easeInOut
}, "wind");
tl.to(".petal2", 4, {
bezier: {
type: "soft",
values: [{
x: 20,
y: -70
}, {
x: 60,
y: -100
}, {
x: 150,
y: -50
}, {
x: 250,
y: 120
}, {
x: 300,
y: 80
}, {
x: 500,
y: 90
}, {
x: 600,
y: 100
}, {
x: 700,
y: 80
}, {
x: 900,
y: 130
}],
autoRotate: true
},
ease: Circ.easeOut
}, "wind");
tl.to(".petal3", 4, {
bezier: {
type: "soft",
values: [{
x: 40,
y: -20
}, {
x: 60,
y: -40
}, {
x: 150,
y: -50
}, {
x: 250,
y: -40
}, {
x: 300,
y: -80
}, {
x: 500,
y: -90
}, {
x: 600,
y: -100
}, {
x: 700,
y: -80
}, {
x: 900,
y: 60
}],
autoRotate: false
},
rotation: 1000,
ease: Circ.easeOut
}, "wind+=3");
}
};
const Rainbowarea = {
template: '#rainbowarea',
mounted () {
let audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/rainbow.mp3'),
tl = new TimelineMax();
audio.play();
audio.volume = 0.2;
tl.add("rainbow", "+=0.5");
//rainbow
tl.fromTo("#beams", 2.5, {
scale: 0,
opacity: 0,
x: 36,
y: 34,
rotation: 0
}, {
scale: 1,
x: 36,
y: 34,
opacity: 0.2,
rotation: "-720",
transformOrigin: "50% 50%",
ease: Linear.easeNone
}, "rainbow");
tl.to("#beams", 4, {
rotation: 360,
repeat: 4,
transformOrigin: "50% 50%",
ease: Linear.easeNone
}, "rainbow+=2.5");
tl.fromTo(".bow, #sun", 1, {
opacity: 0,
}, {
opacity: 1,
ease: Sine.easeOut
}, "rainbow");
tl.fromTo("#light", 3, {
opacity: 0,
}, {
opacity: 0.8,
ease: Sine.easeOut
}, "rainbow");
tl.fromTo("#blue", 2, {
opacity: 0,
x: 36,
y: 21,
scale: 0.5
}, {
opacity: 1,
scale: 1,
x: 36,
y: 21,
transformOrigin: "50% 50%",
ease: Sine.easeOut
}, "rainbow");
tl.staggerFromTo("#rainbowpaths ellipse", 1.5, {
drawSVG: false
}, {
drawSVG: true,
ease: Sine.easeIn
}, 0.1, "rainbow");
tl.fromTo(".r-piece1", 0.5, {
y: 88
}, {
y: 58,
ease: Sine.easeOut
}, "rainbow");
}
};
const Tornadoarea = {
template: '#tornadoarea',
mounted () {
let audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/tornado.mp3'),
tl = new TimelineMax();
audio.play();
tl.add("tornado");
//drops in
tl.staggerFromTo(".tornado-group ellipse", 1, {
opacity: 0
}, {
opacity: 1,
ease: Sine.easeOut
}, 0.15, "tornado");
tl.staggerFromTo(".tornado-group ellipse", 1, {
rotation: 0
}, {
rotation: 20,
transformOrigin: "50% 50%",
repeat: 10,
yoyo: true,
ease: Sine.easeInOut
}, 0.15, "tornado-=1");
tl.fromTo("#fog", 1, {
opacity: 0,
scale: 0,
x: 75,
y: 75
}, {
opacity: 1,
scale: 1,
x: 75,
y: 75,
transformOrigin: "50% 50%",
ease: Sine.easeOut
}, "tornado");
tl.fromTo("#lightning", 1.2, {
drawSVG: "0% -10%"
}, {
drawSVG: "100% 110%",
repeat: 3,
repeatDelay: 1.5,
ease: Sine.easeInOut
}, "tornado");
}
};
//main app
const app = new Vue({
el: '#app',
computed: {
showWeather() {
return store.state.showWeather;
},
template() {
return store.state.template;
}
},
methods: {
updateTemplate() {
store.commit('updateTemplate');
},
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
const tl = new TimelineMax({
onComplete: done
});
tl.set(el, {
opacity: 0,
scale: 0.9,
visibility: 'visible',
transformOrigin: '50% 50%'
});
tl.to(el, 0.75, {
opacity: 1,
scale: 1,
ease: Circ.easeOut
}, 1);
tl.to(el, 0.75, {
opacity: 0.8,
scale: 0.97,
repeat: 5,
yoyo: true,
ease: Sine.easeOut
});
tl.to(el, 1, {
opacity: 0,
scale: 0.9,
ease: Sine.easeIn
}, "+=0.5");
},
beforeEnterStroke(el) {
el.style.strokeWidth = 0;
el.style.stroke = 'orange';
},
enterStroke(el, done) {
const tl = new TimelineMax({
onComplete: done
});
tl.to(el, 0.75, {
strokeWidth: 1,
ease: Circ.easeOut
}, 1);
tl.to(el, 4, {
strokeWidth: 0,
opacity: 0,
ease: Sine.easeOut
});
},
leaveDroparea(el, done) {
const tl = new TimelineMax({
onComplete: done
});
tl.to(el, 1, {
opacity: 0,
ease: Sine.easeIn
});
},
leaveDialog(el, done) {
const tl = new TimelineMax({
onComplete: done
});
tl.add("leave");
tl.to(el, 0.3, {
rotation: -2,
repeat: 2,
yoyo: true,
transformOrigin: "50% 100%",
ease: Sine.easeInOut
}, "leave");
tl.fromTo(el, 1, {
opacity: 1
}, {
opacity: 0,
ease: Sine.easeIn
}, "leave");
}
},
components: {
appDefs: Defs,
appDialog: Dialog,
appDroparea: Droparea,
appWindarea: Windarea,
appRainbowarea: Rainbowarea,
appTornadoarea: Tornadoarea
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
- https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js
- https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0/vuex.min.js
- https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
- https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js
- https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js