221 lines
12 KiB
Vue
221 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<svg class="svg" viewBox="0 0 256 256">
|
|
<defs>
|
|
<filter id="goo">
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="color-matrix-blur"></feGaussianBlur>
|
|
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -12"
|
|
result="color-matrix-filter"></feColorMatrix>
|
|
<feComposite in="SourceGraphic" in2="filter" operator="atop"></feComposite>
|
|
</filter>
|
|
</defs>
|
|
<g class="circles" filter="url(#goo)">
|
|
<circle r="15.9" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="37.28s" begin="-27.40s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.91s" begin="-19.95s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="15.9" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="37.28s" begin="-27.40s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.91s" begin="-19.95s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="13.7" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="35.05s" begin="-19.99s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.28s" begin="-11.95s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="13.7" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="35.05s" begin="-19.99s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.28s" begin="-11.95s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="17.4" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="38.39s" begin="-16.00s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.62s" begin="-2.31s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="17.4" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="38.39s" begin="-16.00s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.62s" begin="-2.31s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="24.6" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="39.18s" begin="-21.97s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="33.08s" begin="-24.79s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="24.6" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="39.18s" begin="-21.97s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="33.08s" begin="-24.79s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="15.0" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="31.12s" begin="-23.90s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.65s" begin="-0.13s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="15.0" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="31.12s" begin="-23.90s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.65s" begin="-0.13s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="27.4" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="36.82s" begin="-8.29s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="36.85s" begin="-31.42s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="27.4" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="36.82s" begin="-8.29s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="36.85s" begin="-31.42s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="28.0" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="30.67s" begin="-27.92s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.89s" begin="-28.43s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="28.0" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="30.67s" begin="-27.92s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.89s" begin="-28.43s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="14.1" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="32.35s" begin="-39.58s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="31.30s" begin="-23.02s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="14.1" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="32.35s" begin="-39.58s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="31.30s" begin="-23.02s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="20.6" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="33.72s" begin="-37.19s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.97s" begin="-10.86s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="20.6" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="33.72s" begin="-37.19s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.97s" begin="-10.86s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="27.0" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="38.13s" begin="-39.04s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-0.29s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="27.0" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="38.13s" begin="-39.04s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-0.29s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="23.9" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="31.01s" begin="-12.49s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.39s" begin="-3.84s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="23.9" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="31.01s" begin="-12.49s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.39s" begin="-3.84s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="28.5" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="39.58s" begin="-13.72s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.43s" begin="-8.86s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="28.5" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="39.58s" begin="-13.72s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.43s" begin="-8.86s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="17.3" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="36.54s" begin="-33.78s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.92s" begin="-23.75s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="17.3" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="36.54s" begin="-33.78s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.92s" begin="-23.75s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="18.5" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="37.45s" begin="-2.97s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.93s" begin="-32.91s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="18.5" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="37.45s" begin="-2.97s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.93s" begin="-32.91s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="13.2" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="31.81s" begin="-0.53s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.34s" begin="-7.25s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="13.2" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="31.81s" begin="-0.53s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.34s" begin="-7.25s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="24.2" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="38.03s" begin="-3.89s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-17.16s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="24.2" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="38.03s" begin="-3.89s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-17.16s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="16.5" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="10%; 90%; 10%" dur="35.96s" begin="-38.86s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.79s" begin="-34.64s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
<circle r="16.5" class="circle" fill="rgba(0,0,0,0.7)">
|
|
<animate attributeName="cx" values="90%; 10%; 90%" dur="35.96s" begin="-38.86s" repeatCount="indefinite">
|
|
</animate>
|
|
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.79s" begin="-34.64s" repeatCount="indefinite">
|
|
</animate>
|
|
</circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</template>
|