🎞 Animation added

This commit is contained in:
ful1e5 2020-09-03 12:56:21 +05:30
parent 105596f0e5
commit 17583e0696

View file

@ -1,51 +1,52 @@
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path
d="M35.0009 121.929L35 121.866V35.0656C35 30.5634 35.4941 26.2374 36.9588 22.5856C38.4976 18.7491 41.482 14.9001 46.5424 13.5038C51.1615 12.2293 55.5209 13.5892 58.7164 15.1797C62.0231 16.8254 65.3089 19.3182 68.4883 22.2243L133.059 79.4939L133.089 79.5205C137.869 83.7999 139.834 90.4283 139.991 95.7184C140.133 100.54 138.713 109.139 130.632 112.523C127.449 113.855 123.562 114.01 120.953 114.074C119.434 114.112 117.794 114.113 116.183 114.114L116.143 114.114C114.484 114.116 112.808 114.117 111.076 114.15C103.993 114.283 97.0871 114.955 91.4127 117.517C85.7762 120.061 80.8047 124.776 76.0424 130.035C75.1857 130.981 74.2053 132.095 73.2184 133.216C71.8633 134.756 70.4942 136.311 69.4098 137.472C67.5723 139.44 64.7955 142.29 61.4966 143.779C57.2016 145.718 52.9555 145.076 49.774 143.731C46.6878 142.426 44.1291 140.304 42.1807 138.186C38.5166 134.202 35.0901 128.058 35.0009 121.929Z"
fill="#0000FF" />
</g>
<path
d="M43 34.3679C43 18.3085 50.4808 17.3995 62.2068 28.0048L127.935 85.5762C132.894 89.9603 133.798 101.636 127.935 104.06C122.071 106.484 102.841 102.476 87.8191 109.173C72.7973 115.869 63.4668 132.844 57.3905 135.553C51.3142 138.262 43.0966 128.045 43 121.493L43 34.3679Z"
fill="#00FF00" />
<g filter="url(#filter1_d)">
<path
d="M150 130C150 158.719 126.719 182 98 182C69.2812 182 46 158.719 46 130C46 101.281 69.2812 78 98 78C126.719 78 150 101.281 150 130Z"
fill="#0000FF" />
<path
d="M142 130C142 154.301 122.301 174 98 174C73.6995 174 54 154.301 54 130C54 105.699 73.6995 86 98 86C122.301 86 142 105.699 142 130Z"
fill="#FF0000" />
<g transform="translate(98 130)">
<g transform="scale(0.74)">
<g transform="translate(-50 -50)">
<g transform="rotate(246.039 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
values="0 50 50;360 50 50" keyTimes="0;1" dur="0.7575757575757576s"></animateTransform>
<path fill-opacity="0.8" fill="#f05125" d="M50 50L50 0A50 50 0 0 1 100 50Z"></path>
</g>
<g transform="rotate(274.52 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
values="0 50 50;360 50 50" keyTimes="0;1" dur="1.0101010101010102s"></animateTransform>
<path fill-opacity="0.8" fill="#fdb813" d="M50 50L50 0A50 50 0 0 1 100 50Z"
transform="rotate(90 50 50)"></path>
</g>
<g transform="rotate(303.015 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
values="0 50 50;360 50 50" keyTimes="0;1" dur="1.5151515151515151s"></animateTransform>
<path fill-opacity="0.8" fill="#7fbb42" d="M50 50L50 0A50 50 0 0 1 100 50Z"
transform="rotate(180 50 50)"></path>
</g>
<g transform="rotate(331.507 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
values="0 50 50;360 50 50" keyTimes="0;1" dur="3.0303030303030303s"></animateTransform>
<path fill-opacity="0.8" fill="#32a0da" d="M50 50L50 0A50 50 0 0 1 100 50Z"
transform="rotate(270 50 50)"></path>
<g clip-path="url(#clip0)">
<g filter="url(#filter0_d)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M43 0C43 0 96.5 47.5 127 83.5C134.249 92.0558 142.076 102.226 143.5 107C149.268 126.332 106.307 90.1269 84.3664 98.1216C63.929 105.569 56.2002 157.078 46 138.5C43.2878 133.56 43 123 43 123V0Z"
fill="#0000FF" />
</g>
<path d="M51 19V119L85 103L122 89.0961L51 19Z" fill="#00FF00" />
<g filter="url(#filter1_d)">
<path
d="M150 130C150 158.719 126.719 182 98 182C69.2812 182 46 158.719 46 130C46 101.281 69.2812 78 98 78C126.719 78 150 101.281 150 130Z"
fill="#0000FF" />
<path
d="M142 130C142 154.301 122.301 174 98 174C73.6995 174 54 154.301 54 130C54 105.699 73.6995 86 98 86C122.301 86 142 105.699 142 130Z"
fill="#B91E31" />
<g transform="translate(98 130)">
<g transform="scale(0.74)">
<g transform="translate(-50 -50)">
<g transform="rotate(246.039 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
values="0 50 50;360 50 50" keyTimes="0;1" dur="0.7575757575757576s"></animateTransform>
<path fill-opacity="0.8" fill="#f05125" d="M50 50L50 0A50 50 0 0 1 100 50Z"></path>
</g>
<g transform="rotate(274.52 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
values="0 50 50;360 50 50" keyTimes="0;1" dur="1.0101010101010102s"></animateTransform>
<path fill-opacity="0.8" fill="#fdb813" d="M50 50L50 0A50 50 0 0 1 100 50Z"
transform="rotate(90 50 50)"></path>
</g>
<g transform="rotate(303.015 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
values="0 50 50;360 50 50" keyTimes="0;1" dur="1.5151515151515151s"></animateTransform>
<path fill-opacity="0.8" fill="#7fbb42" d="M50 50L50 0A50 50 0 0 1 100 50Z"
transform="rotate(180 50 50)"></path>
</g>
<g transform="rotate(331.507 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
values="0 50 50;360 50 50" keyTimes="0;1" dur="3.0303030303030303s"></animateTransform>
<path fill-opacity="0.8" fill="#32a0da" d="M50 50L50 0A50 50 0 0 1 100 50Z"
transform="rotate(270 50 50)"></path>
</g>
</g>
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_d" x="30" y="12" width="115" height="142" filterUnits="userSpaceOnUse"
<filter id="filter0_d" x="38" y="-1" width="111.027" height="152.515" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
@ -65,5 +66,8 @@
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<clipPath id="clip0">
<rect width="200" height="200" fill="white" />
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB