107 lines
10 KiB
XML
107 lines
10 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
|
||
|
|
<style>
|
||
|
|
@keyframes scale_1 {
|
||
|
|
0%, 100% {transform: scale(1);}
|
||
|
|
50% {transform: scale(.3);}
|
||
|
|
}
|
||
|
|
@keyframes scale_2 {
|
||
|
|
0%, 100% {transform: scale(.3);}
|
||
|
|
50% {transform: scale(1.5);}
|
||
|
|
}
|
||
|
|
.circle_scale {
|
||
|
|
transform-box: fill-box;
|
||
|
|
transform-origin: center;
|
||
|
|
}
|
||
|
|
#element_1_2 {animation: scale_1 5s linear infinite;}
|
||
|
|
#element_1_3 {animation: scale_2 5s linear infinite;}
|
||
|
|
#element_1_4 {animation: scale_2 5s linear infinite;}
|
||
|
|
#element_1_6 {animation: scale_2 5s linear infinite;}
|
||
|
|
#element_1_7 {animation: scale_1 5s linear infinite;}
|
||
|
|
#element_1_8 {animation: scale_1 5s linear infinite;}
|
||
|
|
#element_1_9 {animation: scale_2 5s linear infinite;}
|
||
|
|
</style>
|
||
|
|
<defs>
|
||
|
|
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
|
||
|
|
<use xlink:href="#filterPath" fill="none"/>
|
||
|
|
</clipPath>
|
||
|
|
<path id="filterPath" d="M.8777.3843c.0549.1858.0061.4094-.1174.507c-.1242.0977-.323.0679-.4655-.0477c-.1417-.1152-.2278-.3163-.1829-.4867C.1568.1864.3322.0469.499.0501C.6651.0537.8235.1994.8777.3843z">
|
||
|
|
<animate dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
|
||
|
|
values="
|
||
|
|
M.8777.3843c.0549.1858.0061.4094-.1174.507c-.1242.0977-.323.0679-.4655-.0477c-.1417-.1152-.2278-.3163-.1829-.4867C.1568.1864.3322.0469.499.0501C.6651.0537.8235.1994.8777.3843z;
|
||
|
|
M.878.2951c.0628.1874-.0152.4925-.1548.6035c-.1396.111-.3412.0279-.4684-.11C.1276.6507.0735.4592.1123.3121c.0384-.1455.1692-.2452.336-.2602C.6151.0369.8164.1067.878.2951z;
|
||
|
|
M.8841.4163c.0439.1606-.001.2795-.1563.3829c-.1553.1034-.4207.1921-.5427.1305c-.122-.0617-.1006-.275-.0118-.4796C.2621.2449.4184.0469.5629.05C.7074.0532.8402.2556.8841.4163z;
|
||
|
|
M.8767.3493c.0618.1835-.0037.4234-.1495.5308c-.1458.1085-.3738.0842-.5012-.027C.0996.7428.0729.5454.1254.3753c.0526-.1709.1846-.3163.3442-.3248C.6294.0411.8158.1666.8767.3493z;
|
||
|
|
M.8777.3843c.0549.1858.0061.4094-.1174.507c-.1242.0977-.323.0679-.4655-.0477c-.1417-.1152-.2278-.3163-.1829-.4867C.1568.1864.3322.0469.499.0501C.6651.0537.8235.1994.8777.3843z"
|
||
|
|
calcMode="spline"
|
||
|
|
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
|
||
|
|
</path>
|
||
|
|
<g id="animation">
|
||
|
|
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
|
||
|
|
<animateTransform xlink:href="#group_1_1" attributeName="transform" attributeType="XML" type="translate" dur="10s" values="0 0;20 -20;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
|
||
|
|
<animateTransform xlink:href="#group_1_2" attributeName="transform" attributeType="XML" type="translate" dur="10s" values="0 0;0 20;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
|
||
|
|
<animateTransform xlink:href="#group_2_1" attributeName="transform" attributeType="XML" type="translate" dur="5s" values="0 0;-10 10;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
|
||
|
|
<animateTransform xlink:href="#group_2_1" attributeName="transform" attributeType="XML" type="rotate" dur="5s" values="0;-10;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
|
||
|
|
<animateTransform xlink:href="#group_2_2" attributeName="transform" attributeType="XML" type="translate" dur="10s" values="5 -5;15 -15;5 -5" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
|
||
|
|
<animateTransform xlink:href="#element_1_1" attributeName="transform" attributeType="XML" type="translate" dur="5s" values="0 0;-10 -10;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
|
||
|
|
<animateMotion xlink:href="#element_1_5" dur="10s" repeatCount="indefinite" path="M0-0.5l26.6,24z" calcMode="spline" keyTimes="0;1" keySplines=".56 .37 .43 .58"/>
|
||
|
|
<animateTransform xlink:href="#element_2_1" attributeName="transform" attributeType="XML" type="scale" dur="5s" values=".75;1;.75" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
|
||
|
|
<animateTransform xlink:href="#element_2_1" attributeName="transform" attributeType="XML" type="rotate" dur="5s" values="0;15;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
|
||
|
|
<animateTransform xlink:href="#element_2_2" attributeName="transform" attributeType="XML" type="scale" dur="5s" values="1;1.25;1" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
|
||
|
|
<animateTransform xlink:href="#element_2_2" attributeName="transform" attributeType="XML" type="rotate" dur="5s" values="0;-15;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
|
||
|
|
<animateMotion xlink:href="#element_2_3" dur="6s" repeatCount="indefinite" path="M0,23.31,31.76,0z" calcMode="spline" keyTimes="0;1" keySplines=".56 .37 .43 .58"/>
|
||
|
|
<animateMotion xlink:href="#element_2_4" dur="10s" repeatCount="indefinite" path="M41.36,0,0,30.35z" calcMode="spline" keyTimes="0;1" keySplines=".56 .37 .43 .58"/>
|
||
|
|
</g>
|
||
|
|
</defs>
|
||
|
|
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
|
||
|
|
<use xlink:href="#filterPath" fill="darkgrey"/>
|
||
|
|
</svg>
|
||
|
|
<image xlink:href="" clip-path="url(#clip-path)"/>
|
||
|
|
<svg viewBox="0 0 429.59 217.18" width="50%" preserveAspectRatio="xMidYMin meet">
|
||
|
|
<path id="element_1_1" d="M384.7,31.56c-2.91,2.77-2.63,6.93-.13,10,3.62,4.49,9.74,3.69,14.76,5,3.45,1,4.9,3.08,6.53,5.9.85,1.45.08,1.56,1.35,2.84A4.79,4.79,0,0,0,411,56.65c4.11.07,6.62-.62,9.83,2.69,2.84,3,4.46,7,5.85,10.68.66,1.8,3.51.88,2.86-.93-1.56-4.24-3.42-8.75-6.7-12s-5.82-3.24-10-3.74a2.33,2.33,0,0,1-2.45-.87,2.13,2.13,0,0,1-2-2.21s0-.11,0-.17c-.53-.75-.72-1.59-1.32-2.41a11.62,11.62,0,0,0-5.21-3.63,27.18,27.18,0,0,0-6.73-1.36,18.26,18.26,0,0,1-5.87-1.4c-2.69-1.35-5.42-4.9-2.31-7.89C388.35,32.3,386.12,30.29,384.7,31.56Z" fill="#3AADAA"/>
|
||
|
|
<g id="group_1_1">
|
||
|
|
<circle id="element_1_2" cx="114.58" cy="209.58" r="7.6" fill="#3AADAA" class="circle_scale"/>
|
||
|
|
<path d="M.49,113.59l29.75,26.89a1.5,1.5,0,1,0,2-2.22L2.51,111.37a1.5,1.5,0,1,0-2,2.22Z" fill="#383E45"/>
|
||
|
|
<circle id="element_1_3" cx="44.74" cy="147.12" r="7" fill="#3AADAA" class="circle_scale"/>
|
||
|
|
<path d="M59.25,165.36l27,24.41a1.5,1.5,0,1,0,2-2.23l-27-24.41a1.5,1.5,0,0,0-2,2.23Z" fill="#383E45"/>
|
||
|
|
<circle id="element_1_4" cx="93.49" cy="195.63" r="3.8" fill="#7C6576" class="circle_scale"/>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path d="M212,64.2l24.34,22a1.5,1.5,0,0,0,2-2.22L214.05,62a1.5,1.5,0,0,0-2,2.23Z" fill="#383E45"/>
|
||
|
|
<circle id="element_1_5" cx="211.93" cy="61.55" r="15.9" fill="#7C6576"/>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path d="M147.8,4.92,194.39,47a1.5,1.5,0,1,0,2-2.22L149.81,2.69a1.5,1.5,0,0,0-2,2.23Z" fill="#383E45"/>
|
||
|
|
<circle id="element_1_6" cx="162.83" cy="16.48" r="7" fill="#7C6576" class="circle_scale"/>
|
||
|
|
<circle id="element_1_7" cx="185.37" cy="36.73" r="5.4" fill="#3AADAA" class="circle_scale"/>
|
||
|
|
</g>
|
||
|
|
<g id="group_1_2">
|
||
|
|
<path d="M294.67,2.61,321,26.42a1.5,1.5,0,0,0,2-2.23L296.68.39a1.5,1.5,0,1,0-2,2.22Z" fill="#383E45"/>
|
||
|
|
<circle id="element_1_8" cx="329.88" cy="31.21" r="5.4" fill="#3AADAA" class="circle_scale"/>
|
||
|
|
<path d="M339.85,42.25l20.92,18.91a1.5,1.5,0,0,0,2-2.23h0L341.87,40a1.5,1.5,0,0,0-2,2.23Z" fill="#383E45"/>
|
||
|
|
<circle id="element_1_9" cx="380.2" cy="74.41" r="7.6" fill="#7C6576" class="circle_scale"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<svg viewBox="0 0 327.27 193.34" width="40%" height="100%" x="60%" preserveAspectRatio="xMidYMax meet">
|
||
|
|
<path id="element_2_1" d="M199,104.05c-6.79-2.33-13.27,1.19-15.44,7.86-1.84,5.94-7.07,2.71-10.2,6.38-1.14,1.33-1.12,3-1.85,4.58-1.8,3.8-6.31,4.25-10.09,4.68a1.5,1.5,0,1,0,.33,3h0c3.56-.38,7.65-.9,10.45-3.33a10.94,10.94,0,0,0,2.58-3.76,13.39,13.39,0,0,1,1-2.57c1.24-1.52,2-1.2,4-1.54,2.78-.43,4.77-1.27,6-3.93,1.16-2.47,1.05-5,3.35-6.93a9.19,9.19,0,0,1,8.84-1.65C199.6,107.44,200.81,104.69,199,104.05Z" fill="#3AADAA" style="transform-box: fill-box" transform-origin="center"/>
|
||
|
|
<path id="element_2_2" d="M53.84,33.07a11.7,11.7,0,0,0-7.75,1.6c-2.7,1.73-3.82,5.78-7,6.37-2.29.43-3.58,0-5.56,1.72s-5.36,9.76-9.08,7.41c-1.63-1-3.49,1.32-1.86,2.36,4.49,2.9,8.17-1,10.65-4.59,1.93-2.78,3.75-3,7-3.65a7.19,7.19,0,0,0,2.14-.46c1.41-.78,1.6-2,2.29-3.3a8.33,8.33,0,0,1,8.65-4.61C55.29,36.22,55.76,33.15,53.84,33.07Z" fill="#3AADAA" style="transform-box: fill-box" transform-origin="center"/>
|
||
|
|
<g id="group_2_1" style="transform-box: fill-box" transform-origin="center">
|
||
|
|
<path d="M170.32.29,140.25,22.36A1.5,1.5,0,1,0,142,24.78L172.1,2.71A1.5,1.5,0,0,0,170.32.29Z" fill="#383E45"/>
|
||
|
|
<path d="M121,37.64,85.73,63.5a1.5,1.5,0,0,0,1.77,2.42l35.23-25.86A1.5,1.5,0,0,0,121,37.64Z" fill="#383E45"/>
|
||
|
|
<circle cx="130.49" cy="32.38" r="16.6" fill="#3AADAA"/>
|
||
|
|
</g>
|
||
|
|
<g id="group_2_2" style="transform-box: fill-box" transform-origin="center">
|
||
|
|
<path d="M118.08,103l-44,32.3a1.5,1.5,0,1,0,1.77,2.42l44-32.3a1.5,1.5,0,1,0-1.78-2.42Z" fill="#383E45"/>
|
||
|
|
<path d="M37.77,159.73,16.49,175.35a1.5,1.5,0,0,0,1.77,2.42l21.29-15.62a1.5,1.5,0,0,0-1.78-2.42Z" fill="#383E45"/>
|
||
|
|
<circle cx="11.4" cy="181.94" r="11.4" fill="#3AADAA"/>
|
||
|
|
<circle cx="50.87" cy="151.73" r="7.8" fill="#7C6576"/>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<circle cx="222.42" cy="156.44" r="5.4" fill="#3AADAA"/>
|
||
|
|
<path d="M262.92,123.23l-29.34,21.54a1.5,1.5,0,1,0,1.77,2.42l29.35-21.54a1.5,1.5,0,1,0-1.78-2.42Z" fill="#383E45"/>
|
||
|
|
<circle id="element_2_3" cx="232.96" cy="146.87" r="7.7" fill="#7C6576" transform="translate(0 -22)"/>
|
||
|
|
<path d="M315.72,84.48l-38.93,28.58a1.5,1.5,0,1,0,1.77,2.41L317.5,86.89a1.5,1.5,0,1,0-1.78-2.41Z" fill="#383E45"/>
|
||
|
|
<circle id="element_2_4" cx="276.17" cy="115.24" r="7.7" fill="#7C6576" transform="translate(0 -29)"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</svg>
|