🛠️ Svg animation circles position set to 0

This commit is contained in:
ful1e5 2021-02-22 17:45:01 +05:30
parent d7169a34b8
commit e86dec5163
4 changed files with 26 additions and 26 deletions

View file

@ -17,24 +17,24 @@
<g transform="translate(98 130)">
<g transform="scale(0.74)">
<g transform="translate(-50 -50)">
<g transform="rotate(246.039 50 50)">
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="4"
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)">
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="3"
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)">
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="2"
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)">
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="1"
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"

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Before After
Before After

View file

@ -10,24 +10,24 @@
<g transform="translate(100 100)">
<g transform="scale(1.3)">
<g transform="translate(-50 -50)">
<g transform="rotate(246.039 50 50)">
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="4"
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)">
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="3"
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)">
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="2"
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)">
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="1"
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"

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3 KiB

Before After
Before After

View file

@ -17,25 +17,25 @@
<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"
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="4"
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"
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="3"
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"
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="2"
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"
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="1"
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>
@ -70,4 +70,4 @@
<rect width="200" height="200" fill="white" />
</clipPath>
</defs>
</svg>
</svg>

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Before After
Before After

View file

@ -10,25 +10,25 @@
<g transform="translate(100 100)">
<g transform="scale(1.3)">
<g transform="translate(-50 -50)">
<g transform="rotate(246.039 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="4"
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"
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="3"
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"
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="2"
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"
<g transform="rotate(0 50 50)">
<animateTransform attributeName="transform" type="rotate" repeatCount="1"
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>
@ -48,4 +48,4 @@
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
</defs>
</svg>
</svg>

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3 KiB

Before After
Before After