Rotate dashes of SVG stroke-dasharray

Rotate dashes of SVG stroke-dasharray - css

I'm looking to animate the rotation of individual dashes of an SVG stroke-dasharray, does anyone know how, given it is possible?
I realize I can rotate the entire object of SVG element with CSS' transform:rotate(), but is there any way I can rotate individual dashes? I also realize I could recreate it all using individual elements and rotate those, but that's not what I'm looking to do for performance and brevity reasons
Here's a demo if you're looking to have one. I'd like the squares to stay upright in their place, not rotating as they go around in a circular path. I'm looking to recreate this gif
P.S. I know the circles aren't perfectly aligned, I asked about that before

I made sample.
http://jsdo.it/defghi1977/sQOc
Robert Longson's "markers" approach is very nice! Thank you!
<?xml version="1.0" standalone="no"?>
<svg width="400px" height="400px" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="background-color:black;">
<defs>
<rect id="markerShape" x="-1" y="-1" width="2" height="2" fill="yellow">
<animateTransform attributeName="transform" type="rotate" to="360,0,0" begin="0s" dur="30s" repeatCount="indefinite"/>
</rect>
<marker id="marker1" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1">
<use xlink:href="#markerShape" transform="scale(0.02,0.02)"/><!--NOTE: =1/50-->
<animate attributeName="orient" from="0" to="-30" begin="0s" dur="5s" repeatCount="indefinite"/>
</marker>
<marker id="marker2" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1">
<use xlink:href="#markerShape" transform="scale(0.01428,0.01428)"/><!--NOTE: =1/70-->
<animate attributeName="orient" from="0" to="-60" begin="0s" dur="5s" repeatCount="indefinite"/>
</marker>
<marker id="marker3" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1">
<use xlink:href="#markerShape" transform="scale(0.01111,0.01111)"/><!--NOTE: =1/90-->
<animate attributeName="orient" from="0" to="-90" begin="0s" dur="5s" repeatCount="indefinite"/>
</marker>
<marker id="marker4" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1">
<use xlink:href="#markerShape" transform="scale(0.00909,0.00909)"/><!--NOTE: =1/110-->
<animate attributeName="orient" from="0" to="-120" begin="0s" dur="5s" repeatCount="indefinite"/>
</marker>
<marker id="marker5" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1">
<use xlink:href="#markerShape" transform="scale(0.007692,0.007692)"/><!--NOTE: =1/130-->
<animate attributeName="orient" from="0" to="-150" begin="0s" dur="5s" repeatCount="indefinite"/>
</marker>
<marker id="marker6" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1">
<use xlink:href="#markerShape" transform="scale(0.00666,0.00666)"/><!--NOTE: =1/150-->
<animate attributeName="orient" from="0" to="-180" begin="0s" dur="5s" repeatCount="indefinite"/>
</marker>
<marker id="marker7" markerUnits="strokeWidth" viewBox="-1 -1 2 2" overflow="visible" markerWidth="1" markerHeight="1">
<use xlink:href="#markerShape" transform="scale(0.00588,0.00588)"/><!--NOTE: =1/180-->
<animate attributeName="orient" from="0" to="-210" begin="0s" dur="5s" repeatCount="indefinite"/>
</marker>
<polygon id="basicShape" fill="none" points="
0,1
0.5,0.86603
0.86603,0.5
1,0
0.86603,-0.5
0.5,-0.86603
0,-1
-0.5,-0.86603
-0.86603,-0.5
-1,0
-0.86603,0.5
-0.5,0.86603"
/>
</defs>
<g>
<use xlink:href="#basicShape" transform="scale(50,50)" stroke-width="14" marker-mid="url(#marker1)" marker-start="url(#marker1)"/>
<animateTransform attributeName="transform" type="rotate" to="30,0,0" begin="0s" dur="5s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#basicShape" transform="scale(70,70)" stroke-width="15" marker-mid="url(#marker2)" marker-start="url(#marker2)"/>
<animateTransform attributeName="transform" type="rotate" to="60,0,0" begin="0s" dur="5s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#basicShape" transform="scale(90,90)" stroke-width="16" marker-mid="url(#marker3)" marker-start="url(#marker3)"/>
<animateTransform attributeName="transform" type="rotate" to="90,0,0" begin="0s" dur="5s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#basicShape" transform="scale(110,110)" stroke-width="17" marker-mid="url(#marker4)" marker-start="url(#marker4)"/>
<animateTransform attributeName="transform" type="rotate" to="120,0,0" begin="0s" dur="5s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#basicShape" transform="scale(130,130)" stroke-width="18" marker-mid="url(#marker5)" marker-start="url(#marker5)"/>
<animateTransform attributeName="transform" type="rotate" to="150,0,0" begin="0s" dur="5s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#basicShape" transform="scale(150,150)" stroke-width="19" marker-mid="url(#marker6)" marker-start="url(#marker6)"/>
<animateTransform attributeName="transform" type="rotate" to="180,0,0" begin="0s" dur="5s" repeatCount="indefinite"/>
</g>
<g>
<use xlink:href="#basicShape" transform="scale(170,170)" stroke-width="21" marker-mid="url(#marker7)" marker-start="url(#marker7)"/>
<animateTransform attributeName="transform" type="rotate" to="210,0,0" begin="0s" dur="5s" repeatCount="indefinite"/>
</g>
</svg>

stroke-dasharray is the wrong approach as you can't affect the dash rotation.
A better approach would be to use square markers on a path such that each path vertex has a marker with a fixed orient attribute. The path itself could be transparent so just the markers are visible.

Related

svg objects spin around the circle

I want to build a little animation with SVG and CSS. I create a circle and objects. These objects are should have spinning around circle without spin with eachother.
Here my gif about issue. As you can see it revolves around the circle, but it rotates also it selves. I don't need to spin it selves. How can solve the problem with css ? also I am going to share my css below.
#techs {
animation: rotate 10s infinite linear;
transform-origin: center;
transform-box: fill-box;
}
#moving-objects {
animation: scale 15s infinite;
transform-origin: center;
}
#certel {
animation: action 1s infinite alternate;
}
#keyframes rotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(-360deg);
}
}
#keyframes scale {
0% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
#keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-30px);
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g id="group-objects">
<circle id="circle" fill="#FFF5EC" cx="252.469" cy="247.273" r="181.496"/>
<g id="moving-objects">
<g>
<path fill="#EDDCCE" d="M441.256,211.514c-3.053,0-5.537-2.484-5.537-5.538c0-3.054,2.484-5.539,5.537-5.539
c3.055,0,5.539,2.484,5.539,5.539C446.795,209.029,444.311,211.514,441.256,211.514z M441.256,203.097
c-1.586,0-2.877,1.291-2.877,2.878c0,1.587,1.291,2.878,2.877,2.878c1.588,0,2.879-1.291,2.879-2.878
C444.135,204.388,442.844,203.097,441.256,203.097z"/>
</g>
<g>
<path fill="#EDDCCE" d="M317.575,78.994c-3.053,0-5.537-2.484-5.537-5.539c0-3.054,2.484-5.538,5.537-5.538
c3.055,0,5.539,2.484,5.539,5.538C323.114,76.51,320.63,78.994,317.575,78.994z M317.575,70.578
c-1.586,0-2.877,1.291-2.877,2.878c0,1.587,1.291,2.878,2.877,2.878c1.587,0,2.879-1.291,2.879-2.878
C320.454,71.869,319.162,70.578,317.575,70.578z"/>
</g>
<g>
<path fill="#EDDCCE" d="M239.864,96.977c-3.054,0-5.539-2.484-5.539-5.538s2.484-5.538,5.539-5.538
c3.053,0,5.538,2.484,5.538,5.538S242.917,96.977,239.864,96.977z M239.864,88.561c-1.587,0-2.878,1.291-2.878,2.878
s1.291,2.878,2.878,2.878c1.586,0,2.877-1.291,2.877-2.878S241.451,88.561,239.864,88.561z"/>
</g>
<g>
<path fill="#EDDCCE" d="M126.698,113.881c-3.053,0-5.538-2.484-5.538-5.538s2.484-5.538,5.538-5.538
c3.054,0,5.539,2.484,5.539,5.538S129.752,113.881,126.698,113.881z M126.698,105.465c-1.586,0-2.878,1.291-2.878,2.878
s1.292,2.878,2.878,2.878c1.587,0,2.878-1.292,2.878-2.878S128.286,105.465,126.698,105.465z"/>
</g>
<g>
<path fill="#EDDCCE" d="M68.601,313.334c-3.054,0-5.539-2.484-5.539-5.537c0-3.054,2.484-5.538,5.539-5.538
c3.054,0,5.538,2.484,5.538,5.538C74.139,310.85,71.655,313.334,68.601,313.334z M68.601,304.919
c-1.587,0-2.878,1.291-2.878,2.878c0,1.586,1.291,2.877,2.878,2.877c1.586,0,2.878-1.291,2.878-2.877
C71.479,306.21,70.188,304.919,68.601,304.919z"/>
</g>
<g>
<path fill="#EDDCCE" d="M142.453,371.532c-3.054,0-5.538-2.484-5.538-5.538s2.484-5.538,5.538-5.538
c3.054,0,5.539,2.484,5.539,5.538S145.507,371.532,142.453,371.532z M142.453,363.116c-1.587,0-2.878,1.291-2.878,2.878
s1.291,2.878,2.878,2.878c1.587,0,2.878-1.291,2.878-2.878S144.04,363.116,142.453,363.116z"/>
</g>
<g>
<path fill="#EDDCCE" d="M428.216,293.577c-3.054,0-5.538-2.484-5.538-5.538s2.484-5.538,5.538-5.538s5.537,2.484,5.537,5.538
S431.27,293.577,428.216,293.577z M428.216,285.161c-1.587,0-2.878,1.291-2.878,2.878s1.291,2.879,2.878,2.879
c1.586,0,2.878-1.292,2.878-2.879S429.802,285.161,428.216,285.161z"/>
</g>
<g>
<path fill="#EDDCCE" d="M188.008,247.444c-3.054,0-5.538-2.484-5.538-5.539c0-3.053,2.484-5.538,5.538-5.538
s5.538,2.484,5.538,5.538C193.546,244.96,191.062,247.444,188.008,247.444z M188.008,239.028c-1.587,0-2.878,1.291-2.878,2.877
c0,1.587,1.291,2.878,2.878,2.878s2.878-1.291,2.878-2.878C190.886,240.319,189.595,239.028,188.008,239.028z"/>
</g>
<g>
<path fill="#EDDCCE" d="M118.279,205.126c-3.054,0-5.538-2.484-5.538-5.539s2.484-5.538,5.538-5.538s5.538,2.484,5.538,5.538
S121.333,205.126,118.279,205.126z M118.279,196.709c-1.587,0-2.878,1.292-2.878,2.878c0,1.587,1.291,2.878,2.878,2.878
s2.878-1.291,2.878-2.878C121.157,198,119.866,196.709,118.279,196.709z"/>
</g>
<path fill="#EDDCCE" d="M184.725,82.636h-2.011v-2.01c0-0.735-0.595-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.01h-2.011
c-0.735,0-1.33,0.596-1.33,1.33c0,0.735,0.595,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33s1.33-0.595,1.33-1.33
v-2.011h2.011c0.735,0,1.33-0.595,1.33-1.33C186.055,83.232,185.46,82.636,184.725,82.636z"/>
<path fill="#EDDCCE" d="M61.217,239.854h-2.011v-2.011c0-0.735-0.595-1.33-1.33-1.33c-0.734,0-1.33,0.595-1.33,1.33v2.011h-2.011
c-0.734,0-1.33,0.595-1.33,1.33c0,0.735,0.595,1.33,1.33,1.33h2.011v2.011c0,0.735,0.596,1.33,1.33,1.33
c0.735,0,1.33-0.595,1.33-1.33v-2.011h2.011c0.734,0,1.33-0.595,1.33-1.33C62.547,240.45,61.952,239.854,61.217,239.854z"/>
<path fill="#EDDCCE" d="M378.659,364.938h-2.012v-2.011c0-0.734-0.595-1.33-1.33-1.33c-0.734,0-1.33,0.596-1.33,1.33v2.011h-2.01
c-0.735,0-1.33,0.596-1.33,1.33c0,0.735,0.595,1.33,1.33,1.33h2.01v2.012c0,0.734,0.596,1.329,1.33,1.329
c0.735,0,1.33-0.595,1.33-1.329v-2.012h2.012c0.734,0,1.33-0.595,1.33-1.33C379.989,365.534,379.394,364.938,378.659,364.938z"/>
<path fill="#EDDCCE" d="M324.2,249.286h-2.011v-2.011c0-0.734-0.596-1.33-1.33-1.33c-0.735,0-1.33,0.596-1.33,1.33v2.011h-2.011
c-0.734,0-1.33,0.595-1.33,1.33c0,0.734,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33
c0.734,0,1.33-0.595,1.33-1.33v-2.011h2.011c0.735,0,1.33-0.596,1.33-1.33C325.53,249.881,324.936,249.286,324.2,249.286z"/>
<path fill="#EDDCCE" d="M123.656,255.197h-2.011v-2.011c0-0.734-0.595-1.33-1.33-1.33c-0.734,0-1.33,0.596-1.33,1.33v2.011h-2.01
c-0.735,0-1.33,0.596-1.33,1.33s0.595,1.33,1.33,1.33h2.01v2.011c0,0.735,0.596,1.33,1.33,1.33c0.735,0,1.33-0.595,1.33-1.33
v-2.011h2.011c0.735,0,1.33-0.596,1.33-1.33S124.391,255.197,123.656,255.197z"/>
<path fill="#EDDCCE" d="M73.908,143.06h-2.011v-2.011c0-0.735-0.595-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.011h-2.011
c-0.734,0-1.33,0.595-1.33,1.33c0,0.735,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33s1.33-0.595,1.33-1.33
v-2.011h2.011c0.734,0,1.33-0.595,1.33-1.33C75.238,143.655,74.643,143.06,73.908,143.06z"/>
<path fill="#EDDCCE" d="M287.073,106.852h-2.011v-2.01c0-0.735-0.596-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.01h-2.011
c-0.734,0-1.33,0.596-1.33,1.331c0,0.734,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.596,1.33,1.33,1.33s1.33-0.595,1.33-1.33
v-2.011h2.011c0.735,0,1.33-0.595,1.33-1.33C288.403,107.447,287.809,106.852,287.073,106.852z"/>
<path fill="#EDDCCE" d="M349.033,156.251h-2.011v-2.01c0-0.735-0.596-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.01h-2.011
c-0.734,0-1.33,0.596-1.33,1.33c0,0.735,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.596,1.33,1.33,1.33s1.33-0.595,1.33-1.33
v-2.011h2.011c0.735,0,1.33-0.595,1.33-1.33C350.363,156.847,349.769,156.251,349.033,156.251z"/>
<path fill="#EDDCCE" d="M432.86,109.626h-2.011v-2.011c0-0.734-0.596-1.33-1.33-1.33c-0.735,0-1.33,0.596-1.33,1.33v2.011h-2.011
c-0.735,0-1.33,0.595-1.33,1.33s0.595,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33c0.734,0,1.33-0.595,1.33-1.33
v-2.011h2.011c0.734,0,1.33-0.595,1.33-1.33S433.595,109.626,432.86,109.626z"/>
</g>
<g id="lines">
<g>
<path fill="#FFFFFF" d="M366.524,98.556h-47.592c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.592
c1.801,0,3.261,1.46,3.261,3.261v0.65C369.785,97.096,368.325,98.556,366.524,98.556z"/>
<path fill="#FFFFFF" d="M366.524,112.953h-47.592c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.592
c1.801,0,3.261,1.46,3.261,3.261v0.65C369.785,111.493,368.325,112.953,366.524,112.953z"/>
<path fill="#FFFFFF" d="M400.321,126.441h-47.593c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.593
c1.801,0,3.261,1.46,3.261,3.261v0.65C403.582,124.981,402.122,126.441,400.321,126.441z"/>
<path fill="#FFFFFF" d="M400.321,140.839h-47.593c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.593
c1.801,0,3.261,1.46,3.261,3.261v0.65C403.582,139.379,402.122,140.839,400.321,140.839z"/>
</g>
<g>
<path fill="#FFFFFF" d="M119.749,136.784H79.833c-1.51,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735h39.916
c1.51,0,2.735,1.224,2.735,2.735v0.545C122.483,135.559,121.259,136.784,119.749,136.784z"/>
<path fill="#FFFFFF" d="M119.749,148.859H79.833c-1.51,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735h39.916
c1.51,0,2.735,1.224,2.735,2.735v0.545C122.483,147.634,121.259,148.859,119.749,148.859z"/>
<path fill="#FFFFFF" d="M148.093,160.171h-39.915c-1.511,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735
h39.915c1.51,0,2.735,1.224,2.735,2.735v0.545C150.828,158.947,149.604,160.171,148.093,160.171z"/>
<path fill="#FFFFFF" d="M148.093,172.247h-39.915c-1.511,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735
h39.915c1.51,0,2.735,1.224,2.735,2.735v0.545C150.828,171.022,149.604,172.247,148.093,172.247z"/>
</g>
<g>
<path fill="#FFFFFF" d="M391.822,305.407h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734
h39.915c1.51,0,2.734,1.225,2.734,2.734v0.546C394.557,304.183,393.332,305.407,391.822,305.407z"/>
<path fill="#FFFFFF" d="M391.822,317.482h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734
h39.915c1.51,0,2.734,1.225,2.734,2.734v0.546C394.557,316.258,393.332,317.482,391.822,317.482z"/>
<path fill="#FFFFFF" d="M420.167,328.795h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734
h39.915c1.51,0,2.734,1.225,2.734,2.734v0.546C422.901,327.57,421.677,328.795,420.167,328.795z"/>
<path fill="#FFFFFF" d="M420.167,340.87h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734h39.915
c1.51,0,2.734,1.225,2.734,2.734v0.546C422.901,339.646,421.677,340.87,420.167,340.87z"/>
</g>
</g>
<g id="dots">
<g>
<g>
<path fill="#D2D2D2" d="M93.147,347.851c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
S94.528,347.851,93.147,347.851z"/>
</g>
<g>
</g>
<g>
<path fill="#D2D2D2" d="M161.913,347.851c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
S163.293,347.851,161.913,347.851z"/>
</g>
</g>
<g>
<g>
<path fill="#D2D2D2" d="M381.658,179.545c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.051c1.381,0,2.5,1.119,2.5,2.5
S383.039,179.545,381.658,179.545z"/>
</g>
<g>
</g>
<g>
<path fill="#D2D2D2" d="M450.424,179.545c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.051c1.381,0,2.5,1.119,2.5,2.5
S451.805,179.545,450.424,179.545z"/>
</g>
</g>
<g>
<g>
<path fill="#D2D2D2" d="M52.214,196.552c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
S53.595,196.552,52.214,196.552z"/>
</g>
<g>
</g>
<g>
<path fill="#D2D2D2" d="M120.979,196.552c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
S122.36,196.552,120.979,196.552z"/>
</g>
</g>
</g>
</g>
<g id="relative-circle">
<g id="techs">
<g id="vue_1_" transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)">
<g transform="translate(178.06 235.01)">
<path fill="#41B883" d="M177.17-88.916l-3.713-6.429l-3.712,6.429h-12.361l16.073-27.84l16.074,27.84H177.17z"/>
</g>
<g transform="translate(178.06 235.01)">
<path fill="#34495E" d="M177.17-88.916l-3.713-6.429l-3.712,6.429h-5.931l9.643-16.703l9.645,16.703H177.17z"/>
</g>
</g>
<g id="javascript_1_">
<rect x="228.879" y="45.192" fill="#F7DF1E" width="43.18" height="43.18"/>
</g>
<g id="node_1_">
<g>
</g>
<g>
<g>
<defs>
<path id="SVGID_1_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-47.3394" y1="553.3223" x2="-47.1552" y2="553.3223" gradientTransform="matrix(-38.0649 77.6524 77.6524 38.0649 -44441.9375 -16973.125)">
<stop offset="0" style="stop-color:#41873F"/>
<stop offset="0.3288" style="stop-color:#418B3D"/>
<stop offset="0.6352" style="stop-color:#419637"/>
<stop offset="0.9319" style="stop-color:#3FA92D"/>
<stop offset="1" style="stop-color:#3FAE2A"/>
</linearGradient>
<polygon clip-path="url(#SVGID_2_)" fill="url(#SVGID_3_)" points="340.113,413.35 328.896,436.233 307.019,425.51
318.237,402.625 "/>
</g>
<g>
<defs>
<path id="SVGID_4_" d="M315.058,424.461c0.074,0.097,0.167,0.18,0.276,0.242l6.66,3.847l1.109,0.638
c0.165,0.096,0.355,0.137,0.541,0.123c0.062-0.006,0.123-0.017,0.185-0.035l8.187-14.992
c-0.063-0.067-0.135-0.125-0.218-0.174l-5.084-2.934l-2.687-1.546c-0.076-0.045-0.157-0.077-0.243-0.098L315.058,424.461z"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_4_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-48.9995" y1="549.2754" x2="-48.8151" y2="549.2754" gradientTransform="matrix(106.8073 -78.9149 -78.9149 -106.8073 48901.8438 55220.25)">
<stop offset="0" style="stop-color:#41873F"/>
<stop offset="0.1376" style="stop-color:#41873F"/>
<stop offset="0.4032" style="stop-color:#54A044"/>
<stop offset="0.7136" style="stop-color:#66B848"/>
<stop offset="0.9081" style="stop-color:#6CC04A"/>
<stop offset="1" style="stop-color:#6CC04A"/>
</linearGradient>
<polygon clip-path="url(#SVGID_5_)" fill="url(#SVGID_6_)" points="305.6,416.521 326.028,401.428 341.476,422.335
321.046,437.43 "/>
</g>
<g>
<defs>
<path id="SVGID_7_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_8_)">
<defs>
<polygon id="SVGID_9_" points="322.84,407.982 322.733,408.043 322.876,408.043 "/>
</defs>
<clipPath id="SVGID_10_">
<use xlink:href="#SVGID_9_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-47.2485" y1="548.5449" x2="-47.061" y2="548.5449" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53845.625)">
<stop offset="0" style="stop-color:#6CC04A"/>
<stop offset="0.0919" style="stop-color:#6CC04A"/>
<stop offset="0.2864" style="stop-color:#66B848"/>
<stop offset="0.5968" style="stop-color:#54A044"/>
<stop offset="0.8624" style="stop-color:#41873F"/>
<stop offset="1" style="stop-color:#41873F"/>
</linearGradient>
<rect x="322.733" y="407.982" clip-path="url(#SVGID_10_)" fill="url(#SVGID_11_)" width="0.143" height="0.061"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_12_" d="M323.473,409.509c-0.13,0.013-0.257,0.054-0.374,0.121l-7.743,4.468l8.348,15.205
c0.116-0.016,0.228-0.055,0.334-0.115l7.763-4.484c0.239-0.139,0.403-0.374,0.453-0.641l-8.511-14.539
c-0.062-0.012-0.127-0.018-0.19-0.018C323.524,409.506,323.499,409.507,323.473,409.509"/>
</defs>
<clipPath id="SVGID_13_">
<use xlink:href="#SVGID_12_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="-47.2471" y1="549.0625" x2="-47.0628" y2="549.0625" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53907.4375)">
<stop offset="0" style="stop-color:#6CC04A"/>
<stop offset="0.0919" style="stop-color:#6CC04A"/>
<stop offset="0.2864" style="stop-color:#66B848"/>
<stop offset="0.5968" style="stop-color:#54A044"/>
<stop offset="0.8624" style="stop-color:#41873F"/>
<stop offset="1" style="stop-color:#41873F"/>
</linearGradient>
<rect x="315.355" y="409.506" clip-path="url(#SVGID_13_)" fill="url(#SVGID_14_)" width="16.897" height="19.797"/>
</g>
<g>
<defs>
<path id="SVGID_15_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
</defs>
<clipPath id="SVGID_16_">
<use xlink:href="#SVGID_15_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_16_)">
<defs>
<polygon id="SVGID_17_" points="332.543,424.559 332.492,424.471 332.492,424.589 "/>
</defs>
<clipPath id="SVGID_18_">
<use xlink:href="#SVGID_17_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-47.2295" y1="549.2949" x2="-47.0628" y2="549.2949" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53935.25)">
<stop offset="0" style="stop-color:#6CC04A"/>
<stop offset="0.0919" style="stop-color:#6CC04A"/>
<stop offset="0.2864" style="stop-color:#66B848"/>
<stop offset="0.5968" style="stop-color:#54A044"/>
<stop offset="0.8624" style="stop-color:#41873F"/>
<stop offset="1" style="stop-color:#41873F"/>
</linearGradient>
<rect x="332.492" y="424.471" clip-path="url(#SVGID_18_)" fill="url(#SVGID_19_)" width="0.051" height="0.118"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_20_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
</defs>
<clipPath id="SVGID_21_">
<use xlink:href="#SVGID_20_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_21_)">
<defs>
<path id="SVGID_22_" d="M331.818,424.703l-7.772,4.484c-0.106,0.063-0.223,0.101-0.343,0.117l0.155,0.281l8.634-4.997v-0.118
l-0.214-0.365C332.215,424.355,332.045,424.572,331.818,424.703"/>
</defs>
<clipPath id="SVGID_23_">
<use xlink:href="#SVGID_22_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="-47.2476" y1="549.4014" x2="-47.0629" y2="549.4014" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53947.875)">
<stop offset="0" style="stop-color:#6CC04A"/>
<stop offset="0.0919" style="stop-color:#6CC04A"/>
<stop offset="0.2864" style="stop-color:#66B848"/>
<stop offset="0.5968" style="stop-color:#54A044"/>
<stop offset="0.8624" style="stop-color:#41873F"/>
<stop offset="1" style="stop-color:#41873F"/>
</linearGradient>
<rect x="323.703" y="424.105" clip-path="url(#SVGID_23_)" fill="url(#SVGID_24_)" width="8.789" height="5.48"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_25_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
</defs>
<clipPath id="SVGID_26_">
<use xlink:href="#SVGID_25_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_26_)">
<defs>
<path id="SVGID_27_" d="M331.818,424.703l-7.772,4.484c-0.106,0.063-0.223,0.101-0.343,0.117l0.155,0.281l8.634-4.997v-0.118
l-0.214-0.365C332.215,424.355,332.045,424.572,331.818,424.703"/>
</defs>
<clipPath id="SVGID_28_">
<use xlink:href="#SVGID_27_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="-47.8159" y1="552.2285" x2="-47.6316" y2="552.2285" gradientTransform="matrix(-60.0806 122.5644 122.5644 60.0806 -70221.4688 -26905.375)">
<stop offset="0" style="stop-color:#41873F"/>
<stop offset="0.3288" style="stop-color:#418B3D"/>
<stop offset="0.6352" style="stop-color:#419637"/>
<stop offset="0.9319" style="stop-color:#3FA92D"/>
<stop offset="1" style="stop-color:#3FAE2A"/>
</linearGradient>
<polygon clip-path="url(#SVGID_28_)" fill="url(#SVGID_29_)" points="334.656,425.168 330.788,433.06 321.537,428.524
325.405,420.633 "/>
</g>
</g>
</g>
</g>
<g id="gridsome_1_">
<linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="417.623" y1="189.8169" x2="417.623" y2="167.5225" gradientTransform="matrix(1 0 0 -1 8.3999 477.04)">
<stop offset="0" style="stop-color:#00583E"/>
<stop offset="1" style="stop-color:#00835C"/>
</linearGradient>
<path fill="url(#SVGID_30_)" d="M441.284,287.41c1.816-0.088,3.425,1.321,3.581,3.139c0.68,8.795-7.369,18.647-18.712,18.963
c-9.559,0.236-19.012-7.416-19.012-18.987c0-1.823,1.507-3.302,3.325-3.302s3.292,1.479,3.292,3.302
c0,7.61,6.12,12.536,12.232,12.386c7.524-0.209,12.417-6.725,12.162-12.045C438.066,289.045,439.469,287.497,441.284,287.41z"/>
<path fill="#00A672" d="M433.059,290.78c0-1.867,1.523-3.38,3.401-3.38h4.957c1.879,0,3.448,1.513,3.448,3.38
s-1.569,3.38-3.448,3.38h-4.957C434.582,294.16,433.059,292.647,433.059,290.78z"/>
<path fill="#00A672" d="M422.658,290.785c0-1.869,1.514-3.385,3.378-3.385s3.378,1.516,3.378,3.385s-1.514,3.385-3.378,3.385
S422.658,292.654,422.658,290.785z"/>
<path fill="#00A672" d="M429.32,274.969c0.075,1.821-1.336,3.359-3.153,3.436c-7.844,0.326-12.632,6.491-12.398,12.345
c0.072,1.821-1.313,3.358-3.13,3.431c-1.816,0.072-3.414-1.398-3.487-3.22c-0.379-9.538,7.563-18.968,18.742-19.153
C427.711,271.73,429.245,273.146,429.32,274.969z"/>
</g>
<g id="gatsby_1_">
<path fill="#744C9E" d="M73.522,272.766c-9.883,0-17.895,8.012-17.895,17.895s8.012,17.895,17.895,17.895
s17.895-8.012,17.895-17.895S83.405,272.766,73.522,272.766z M59.473,290.846l13.864,13.863
C65.724,304.609,59.572,298.459,59.473,290.846z M76.667,304.357l-16.843-16.844c1.429-6.246,7.019-10.906,13.698-10.906
c4.669,0,8.806,2.277,11.36,5.781l-1.945,1.717c-2.073-2.971-5.517-4.918-9.415-4.918c-4.964,0-9.191,3.154-10.788,7.566
l14.694,14.693c3.568-1.291,6.313-4.305,7.232-8.035H78.57v-2.752h6.423l0,0h2.581l0,0
C87.574,297.338,82.914,302.93,76.667,304.357z"/>
</g>
</g>
</g>
</svg>

Simply inherit the same animation and change the direction to reverse:
I have also updated the VueJs icon to move the matrix transform because you will override it by the rotation:
#techs {
animation: rotate 10s infinite linear;
transform-origin: center;
transform-box: fill-box;
}
#moving-objects {
animation: scale 15s infinite;
transform-origin: center;
}
/* added this */
#techs > * {
animation: inherit;
animation-direction:reverse;
transform-origin: inherit;
transform-box: inherit;
}
/**/
#keyframes rotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(-360deg);
}
}
#keyframes scale {
0% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
#keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-30px);
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g id="group-objects">
<circle id="circle" fill="#FFF5EC" cx="252.469" cy="247.273" r="181.496"/>
<g id="moving-objects">
<g>
<path fill="#EDDCCE" d="M441.256,211.514c-3.053,0-5.537-2.484-5.537-5.538c0-3.054,2.484-5.539,5.537-5.539
c3.055,0,5.539,2.484,5.539,5.539C446.795,209.029,444.311,211.514,441.256,211.514z M441.256,203.097
c-1.586,0-2.877,1.291-2.877,2.878c0,1.587,1.291,2.878,2.877,2.878c1.588,0,2.879-1.291,2.879-2.878
C444.135,204.388,442.844,203.097,441.256,203.097z"/>
</g>
<g>
<path fill="#EDDCCE" d="M317.575,78.994c-3.053,0-5.537-2.484-5.537-5.539c0-3.054,2.484-5.538,5.537-5.538
c3.055,0,5.539,2.484,5.539,5.538C323.114,76.51,320.63,78.994,317.575,78.994z M317.575,70.578
c-1.586,0-2.877,1.291-2.877,2.878c0,1.587,1.291,2.878,2.877,2.878c1.587,0,2.879-1.291,2.879-2.878
C320.454,71.869,319.162,70.578,317.575,70.578z"/>
</g>
<g>
<path fill="#EDDCCE" d="M239.864,96.977c-3.054,0-5.539-2.484-5.539-5.538s2.484-5.538,5.539-5.538
c3.053,0,5.538,2.484,5.538,5.538S242.917,96.977,239.864,96.977z M239.864,88.561c-1.587,0-2.878,1.291-2.878,2.878
s1.291,2.878,2.878,2.878c1.586,0,2.877-1.291,2.877-2.878S241.451,88.561,239.864,88.561z"/>
</g>
<g>
<path fill="#EDDCCE" d="M126.698,113.881c-3.053,0-5.538-2.484-5.538-5.538s2.484-5.538,5.538-5.538
c3.054,0,5.539,2.484,5.539,5.538S129.752,113.881,126.698,113.881z M126.698,105.465c-1.586,0-2.878,1.291-2.878,2.878
s1.292,2.878,2.878,2.878c1.587,0,2.878-1.292,2.878-2.878S128.286,105.465,126.698,105.465z"/>
</g>
<g>
<path fill="#EDDCCE" d="M68.601,313.334c-3.054,0-5.539-2.484-5.539-5.537c0-3.054,2.484-5.538,5.539-5.538
c3.054,0,5.538,2.484,5.538,5.538C74.139,310.85,71.655,313.334,68.601,313.334z M68.601,304.919
c-1.587,0-2.878,1.291-2.878,2.878c0,1.586,1.291,2.877,2.878,2.877c1.586,0,2.878-1.291,2.878-2.877
C71.479,306.21,70.188,304.919,68.601,304.919z"/>
</g>
<g>
<path fill="#EDDCCE" d="M142.453,371.532c-3.054,0-5.538-2.484-5.538-5.538s2.484-5.538,5.538-5.538
c3.054,0,5.539,2.484,5.539,5.538S145.507,371.532,142.453,371.532z M142.453,363.116c-1.587,0-2.878,1.291-2.878,2.878
s1.291,2.878,2.878,2.878c1.587,0,2.878-1.291,2.878-2.878S144.04,363.116,142.453,363.116z"/>
</g>
<g>
<path fill="#EDDCCE" d="M428.216,293.577c-3.054,0-5.538-2.484-5.538-5.538s2.484-5.538,5.538-5.538s5.537,2.484,5.537,5.538
S431.27,293.577,428.216,293.577z M428.216,285.161c-1.587,0-2.878,1.291-2.878,2.878s1.291,2.879,2.878,2.879
c1.586,0,2.878-1.292,2.878-2.879S429.802,285.161,428.216,285.161z"/>
</g>
<g>
<path fill="#EDDCCE" d="M188.008,247.444c-3.054,0-5.538-2.484-5.538-5.539c0-3.053,2.484-5.538,5.538-5.538
s5.538,2.484,5.538,5.538C193.546,244.96,191.062,247.444,188.008,247.444z M188.008,239.028c-1.587,0-2.878,1.291-2.878,2.877
c0,1.587,1.291,2.878,2.878,2.878s2.878-1.291,2.878-2.878C190.886,240.319,189.595,239.028,188.008,239.028z"/>
</g>
<g>
<path fill="#EDDCCE" d="M118.279,205.126c-3.054,0-5.538-2.484-5.538-5.539s2.484-5.538,5.538-5.538s5.538,2.484,5.538,5.538
S121.333,205.126,118.279,205.126z M118.279,196.709c-1.587,0-2.878,1.292-2.878,2.878c0,1.587,1.291,2.878,2.878,2.878
s2.878-1.291,2.878-2.878C121.157,198,119.866,196.709,118.279,196.709z"/>
</g>
<path fill="#EDDCCE" d="M184.725,82.636h-2.011v-2.01c0-0.735-0.595-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.01h-2.011
c-0.735,0-1.33,0.596-1.33,1.33c0,0.735,0.595,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33s1.33-0.595,1.33-1.33
v-2.011h2.011c0.735,0,1.33-0.595,1.33-1.33C186.055,83.232,185.46,82.636,184.725,82.636z"/>
<path fill="#EDDCCE" d="M61.217,239.854h-2.011v-2.011c0-0.735-0.595-1.33-1.33-1.33c-0.734,0-1.33,0.595-1.33,1.33v2.011h-2.011
c-0.734,0-1.33,0.595-1.33,1.33c0,0.735,0.595,1.33,1.33,1.33h2.011v2.011c0,0.735,0.596,1.33,1.33,1.33
c0.735,0,1.33-0.595,1.33-1.33v-2.011h2.011c0.734,0,1.33-0.595,1.33-1.33C62.547,240.45,61.952,239.854,61.217,239.854z"/>
<path fill="#EDDCCE" d="M378.659,364.938h-2.012v-2.011c0-0.734-0.595-1.33-1.33-1.33c-0.734,0-1.33,0.596-1.33,1.33v2.011h-2.01
c-0.735,0-1.33,0.596-1.33,1.33c0,0.735,0.595,1.33,1.33,1.33h2.01v2.012c0,0.734,0.596,1.329,1.33,1.329
c0.735,0,1.33-0.595,1.33-1.329v-2.012h2.012c0.734,0,1.33-0.595,1.33-1.33C379.989,365.534,379.394,364.938,378.659,364.938z"/>
<path fill="#EDDCCE" d="M324.2,249.286h-2.011v-2.011c0-0.734-0.596-1.33-1.33-1.33c-0.735,0-1.33,0.596-1.33,1.33v2.011h-2.011
c-0.734,0-1.33,0.595-1.33,1.33c0,0.734,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33
c0.734,0,1.33-0.595,1.33-1.33v-2.011h2.011c0.735,0,1.33-0.596,1.33-1.33C325.53,249.881,324.936,249.286,324.2,249.286z"/>
<path fill="#EDDCCE" d="M123.656,255.197h-2.011v-2.011c0-0.734-0.595-1.33-1.33-1.33c-0.734,0-1.33,0.596-1.33,1.33v2.011h-2.01
c-0.735,0-1.33,0.596-1.33,1.33s0.595,1.33,1.33,1.33h2.01v2.011c0,0.735,0.596,1.33,1.33,1.33c0.735,0,1.33-0.595,1.33-1.33
v-2.011h2.011c0.735,0,1.33-0.596,1.33-1.33S124.391,255.197,123.656,255.197z"/>
<path fill="#EDDCCE" d="M73.908,143.06h-2.011v-2.011c0-0.735-0.595-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.011h-2.011
c-0.734,0-1.33,0.595-1.33,1.33c0,0.735,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33s1.33-0.595,1.33-1.33
v-2.011h2.011c0.734,0,1.33-0.595,1.33-1.33C75.238,143.655,74.643,143.06,73.908,143.06z"/>
<path fill="#EDDCCE" d="M287.073,106.852h-2.011v-2.01c0-0.735-0.596-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.01h-2.011
c-0.734,0-1.33,0.596-1.33,1.331c0,0.734,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.596,1.33,1.33,1.33s1.33-0.595,1.33-1.33
v-2.011h2.011c0.735,0,1.33-0.595,1.33-1.33C288.403,107.447,287.809,106.852,287.073,106.852z"/>
<path fill="#EDDCCE" d="M349.033,156.251h-2.011v-2.01c0-0.735-0.596-1.33-1.33-1.33s-1.33,0.595-1.33,1.33v2.01h-2.011
c-0.734,0-1.33,0.596-1.33,1.33c0,0.735,0.596,1.33,1.33,1.33h2.011v2.011c0,0.735,0.596,1.33,1.33,1.33s1.33-0.595,1.33-1.33
v-2.011h2.011c0.735,0,1.33-0.595,1.33-1.33C350.363,156.847,349.769,156.251,349.033,156.251z"/>
<path fill="#EDDCCE" d="M432.86,109.626h-2.011v-2.011c0-0.734-0.596-1.33-1.33-1.33c-0.735,0-1.33,0.596-1.33,1.33v2.011h-2.011
c-0.735,0-1.33,0.595-1.33,1.33s0.595,1.33,1.33,1.33h2.011v2.011c0,0.735,0.595,1.33,1.33,1.33c0.734,0,1.33-0.595,1.33-1.33
v-2.011h2.011c0.734,0,1.33-0.595,1.33-1.33S433.595,109.626,432.86,109.626z"/>
</g>
<g id="lines">
<g>
<path fill="#FFFFFF" d="M366.524,98.556h-47.592c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.592
c1.801,0,3.261,1.46,3.261,3.261v0.65C369.785,97.096,368.325,98.556,366.524,98.556z"/>
<path fill="#FFFFFF" d="M366.524,112.953h-47.592c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.592
c1.801,0,3.261,1.46,3.261,3.261v0.65C369.785,111.493,368.325,112.953,366.524,112.953z"/>
<path fill="#FFFFFF" d="M400.321,126.441h-47.593c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.593
c1.801,0,3.261,1.46,3.261,3.261v0.65C403.582,124.981,402.122,126.441,400.321,126.441z"/>
<path fill="#FFFFFF" d="M400.321,140.839h-47.593c-1.801,0-3.261-1.46-3.261-3.261v-0.65c0-1.801,1.46-3.261,3.261-3.261h47.593
c1.801,0,3.261,1.46,3.261,3.261v0.65C403.582,139.379,402.122,140.839,400.321,140.839z"/>
</g>
<g>
<path fill="#FFFFFF" d="M119.749,136.784H79.833c-1.51,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735h39.916
c1.51,0,2.735,1.224,2.735,2.735v0.545C122.483,135.559,121.259,136.784,119.749,136.784z"/>
<path fill="#FFFFFF" d="M119.749,148.859H79.833c-1.51,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735h39.916
c1.51,0,2.735,1.224,2.735,2.735v0.545C122.483,147.634,121.259,148.859,119.749,148.859z"/>
<path fill="#FFFFFF" d="M148.093,160.171h-39.915c-1.511,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735
h39.915c1.51,0,2.735,1.224,2.735,2.735v0.545C150.828,158.947,149.604,160.171,148.093,160.171z"/>
<path fill="#FFFFFF" d="M148.093,172.247h-39.915c-1.511,0-2.735-1.225-2.735-2.735v-0.545c0-1.511,1.225-2.735,2.735-2.735
h39.915c1.51,0,2.735,1.224,2.735,2.735v0.545C150.828,171.022,149.604,172.247,148.093,172.247z"/>
</g>
<g>
<path fill="#FFFFFF" d="M391.822,305.407h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734
h39.915c1.51,0,2.734,1.225,2.734,2.734v0.546C394.557,304.183,393.332,305.407,391.822,305.407z"/>
<path fill="#FFFFFF" d="M391.822,317.482h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734
h39.915c1.51,0,2.734,1.225,2.734,2.734v0.546C394.557,316.258,393.332,317.482,391.822,317.482z"/>
<path fill="#FFFFFF" d="M420.167,328.795h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734
h39.915c1.51,0,2.734,1.225,2.734,2.734v0.546C422.901,327.57,421.677,328.795,420.167,328.795z"/>
<path fill="#FFFFFF" d="M420.167,340.87h-39.915c-1.511,0-2.735-1.225-2.735-2.734v-0.546c0-1.51,1.225-2.734,2.735-2.734h39.915
c1.51,0,2.734,1.225,2.734,2.734v0.546C422.901,339.646,421.677,340.87,420.167,340.87z"/>
</g>
</g>
<g id="dots">
<g>
<g>
<path fill="#D2D2D2" d="M93.147,347.851c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
S94.528,347.851,93.147,347.851z"/>
</g>
<g>
</g>
<g>
<path fill="#D2D2D2" d="M161.913,347.851c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
S163.293,347.851,161.913,347.851z"/>
</g>
</g>
<g>
<g>
<path fill="#D2D2D2" d="M381.658,179.545c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.051c1.381,0,2.5,1.119,2.5,2.5
S383.039,179.545,381.658,179.545z"/>
</g>
<g>
</g>
<g>
<path fill="#D2D2D2" d="M450.424,179.545c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.051c1.381,0,2.5,1.119,2.5,2.5
S451.805,179.545,450.424,179.545z"/>
</g>
</g>
<g>
<g>
<path fill="#D2D2D2" d="M52.214,196.552c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
S53.595,196.552,52.214,196.552z"/>
</g>
<g>
</g>
<g>
<path fill="#D2D2D2" d="M120.979,196.552c-1.381,0-2.525-1.119-2.525-2.5s1.094-2.5,2.475-2.5h0.05c1.381,0,2.5,1.119,2.5,2.5
S122.36,196.552,120.979,196.552z"/>
</g>
</g>
</g>
</g>
<g id="relative-circle">
<g id="techs">
<g id="vue_1_" >
<g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34) translate(178.06 235.01)">
<path fill="#41B883" d="M177.17-88.916l-3.713-6.429l-3.712,6.429h-12.361l16.073-27.84l16.074,27.84H177.17z"/>
</g>
<g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34) translate(178.06 235.01)">
<path fill="#34495E" d="M177.17-88.916l-3.713-6.429l-3.712,6.429h-5.931l9.643-16.703l9.645,16.703H177.17z"/>
</g>
</g>
<g id="javascript_1_">
<rect x="228.879" y="45.192" fill="#F7DF1E" width="43.18" height="43.18"/>
</g>
<g id="node_1_">
<g>
</g>
<g>
<g>
<defs>
<path id="SVGID_1_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-47.3394" y1="553.3223" x2="-47.1552" y2="553.3223" gradientTransform="matrix(-38.0649 77.6524 77.6524 38.0649 -44441.9375 -16973.125)">
<stop offset="0" style="stop-color:#41873F"/>
<stop offset="0.3288" style="stop-color:#418B3D"/>
<stop offset="0.6352" style="stop-color:#419637"/>
<stop offset="0.9319" style="stop-color:#3FA92D"/>
<stop offset="1" style="stop-color:#3FAE2A"/>
</linearGradient>
<polygon clip-path="url(#SVGID_2_)" fill="url(#SVGID_3_)" points="340.113,413.35 328.896,436.233 307.019,425.51
318.237,402.625 "/>
</g>
<g>
<defs>
<path id="SVGID_4_" d="M315.058,424.461c0.074,0.097,0.167,0.18,0.276,0.242l6.66,3.847l1.109,0.638
c0.165,0.096,0.355,0.137,0.541,0.123c0.062-0.006,0.123-0.017,0.185-0.035l8.187-14.992
c-0.063-0.067-0.135-0.125-0.218-0.174l-5.084-2.934l-2.687-1.546c-0.076-0.045-0.157-0.077-0.243-0.098L315.058,424.461z"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_4_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="-48.9995" y1="549.2754" x2="-48.8151" y2="549.2754" gradientTransform="matrix(106.8073 -78.9149 -78.9149 -106.8073 48901.8438 55220.25)">
<stop offset="0" style="stop-color:#41873F"/>
<stop offset="0.1376" style="stop-color:#41873F"/>
<stop offset="0.4032" style="stop-color:#54A044"/>
<stop offset="0.7136" style="stop-color:#66B848"/>
<stop offset="0.9081" style="stop-color:#6CC04A"/>
<stop offset="1" style="stop-color:#6CC04A"/>
</linearGradient>
<polygon clip-path="url(#SVGID_5_)" fill="url(#SVGID_6_)" points="305.6,416.521 326.028,401.428 341.476,422.335
321.046,437.43 "/>
</g>
<g>
<defs>
<path id="SVGID_7_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_8_)">
<defs>
<polygon id="SVGID_9_" points="322.84,407.982 322.733,408.043 322.876,408.043 "/>
</defs>
<clipPath id="SVGID_10_">
<use xlink:href="#SVGID_9_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-47.2485" y1="548.5449" x2="-47.061" y2="548.5449" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53845.625)">
<stop offset="0" style="stop-color:#6CC04A"/>
<stop offset="0.0919" style="stop-color:#6CC04A"/>
<stop offset="0.2864" style="stop-color:#66B848"/>
<stop offset="0.5968" style="stop-color:#54A044"/>
<stop offset="0.8624" style="stop-color:#41873F"/>
<stop offset="1" style="stop-color:#41873F"/>
</linearGradient>
<rect x="322.733" y="407.982" clip-path="url(#SVGID_10_)" fill="url(#SVGID_11_)" width="0.143" height="0.061"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_12_" d="M323.473,409.509c-0.13,0.013-0.257,0.054-0.374,0.121l-7.743,4.468l8.348,15.205
c0.116-0.016,0.228-0.055,0.334-0.115l7.763-4.484c0.239-0.139,0.403-0.374,0.453-0.641l-8.511-14.539
c-0.062-0.012-0.127-0.018-0.19-0.018C323.524,409.506,323.499,409.507,323.473,409.509"/>
</defs>
<clipPath id="SVGID_13_">
<use xlink:href="#SVGID_12_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="-47.2471" y1="549.0625" x2="-47.0628" y2="549.0625" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53907.4375)">
<stop offset="0" style="stop-color:#6CC04A"/>
<stop offset="0.0919" style="stop-color:#6CC04A"/>
<stop offset="0.2864" style="stop-color:#66B848"/>
<stop offset="0.5968" style="stop-color:#54A044"/>
<stop offset="0.8624" style="stop-color:#41873F"/>
<stop offset="1" style="stop-color:#41873F"/>
</linearGradient>
<rect x="315.355" y="409.506" clip-path="url(#SVGID_13_)" fill="url(#SVGID_14_)" width="16.897" height="19.797"/>
</g>
<g>
<defs>
<path id="SVGID_15_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
</defs>
<clipPath id="SVGID_16_">
<use xlink:href="#SVGID_15_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_16_)">
<defs>
<polygon id="SVGID_17_" points="332.543,424.559 332.492,424.471 332.492,424.589 "/>
</defs>
<clipPath id="SVGID_18_">
<use xlink:href="#SVGID_17_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-47.2295" y1="549.2949" x2="-47.0628" y2="549.2949" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53935.25)">
<stop offset="0" style="stop-color:#6CC04A"/>
<stop offset="0.0919" style="stop-color:#6CC04A"/>
<stop offset="0.2864" style="stop-color:#66B848"/>
<stop offset="0.5968" style="stop-color:#54A044"/>
<stop offset="0.8624" style="stop-color:#41873F"/>
<stop offset="1" style="stop-color:#41873F"/>
</linearGradient>
<rect x="332.492" y="424.471" clip-path="url(#SVGID_18_)" fill="url(#SVGID_19_)" width="0.051" height="0.118"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_20_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
</defs>
<clipPath id="SVGID_21_">
<use xlink:href="#SVGID_20_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_21_)">
<defs>
<path id="SVGID_22_" d="M331.818,424.703l-7.772,4.484c-0.106,0.063-0.223,0.101-0.343,0.117l0.155,0.281l8.634-4.997v-0.118
l-0.214-0.365C332.215,424.355,332.045,424.572,331.818,424.703"/>
</defs>
<clipPath id="SVGID_23_">
<use xlink:href="#SVGID_22_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="-47.2476" y1="549.4014" x2="-47.0629" y2="549.4014" gradientTransform="matrix(97.417 0 0 -97.417 4917.3125 53947.875)">
<stop offset="0" style="stop-color:#6CC04A"/>
<stop offset="0.0919" style="stop-color:#6CC04A"/>
<stop offset="0.2864" style="stop-color:#66B848"/>
<stop offset="0.5968" style="stop-color:#54A044"/>
<stop offset="0.8624" style="stop-color:#41873F"/>
<stop offset="1" style="stop-color:#41873F"/>
</linearGradient>
<rect x="323.703" y="424.105" clip-path="url(#SVGID_23_)" fill="url(#SVGID_24_)" width="8.789" height="5.48"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_25_" d="M323.099,409.63l-7.765,4.479c-0.29,0.169-0.468,0.479-0.468,0.813v8.969
c0,0.335,0.178,0.645,0.468,0.813l7.765,4.484c0.29,0.168,0.647,0.168,0.938,0l7.763-4.484
c0.29-0.168,0.468-0.478,0.468-0.813v-8.969c0-0.334-0.178-0.644-0.47-0.813l-7.761-4.479
c-0.146-0.085-0.309-0.126-0.471-0.126C323.405,409.504,323.243,409.545,323.099,409.63"/>
</defs>
<clipPath id="SVGID_26_">
<use xlink:href="#SVGID_25_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_26_)">
<defs>
<path id="SVGID_27_" d="M331.818,424.703l-7.772,4.484c-0.106,0.063-0.223,0.101-0.343,0.117l0.155,0.281l8.634-4.997v-0.118
l-0.214-0.365C332.215,424.355,332.045,424.572,331.818,424.703"/>
</defs>
<clipPath id="SVGID_28_">
<use xlink:href="#SVGID_27_" overflow="visible"/>
</clipPath>
<linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="-47.8159" y1="552.2285" x2="-47.6316" y2="552.2285" gradientTransform="matrix(-60.0806 122.5644 122.5644 60.0806 -70221.4688 -26905.375)">
<stop offset="0" style="stop-color:#41873F"/>
<stop offset="0.3288" style="stop-color:#418B3D"/>
<stop offset="0.6352" style="stop-color:#419637"/>
<stop offset="0.9319" style="stop-color:#3FA92D"/>
<stop offset="1" style="stop-color:#3FAE2A"/>
</linearGradient>
<polygon clip-path="url(#SVGID_28_)" fill="url(#SVGID_29_)" points="334.656,425.168 330.788,433.06 321.537,428.524
325.405,420.633 "/>
</g>
</g>
</g>
</g>
<g id="gridsome_1_">
<linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="417.623" y1="189.8169" x2="417.623" y2="167.5225" gradientTransform="matrix(1 0 0 -1 8.3999 477.04)">
<stop offset="0" style="stop-color:#00583E"/>
<stop offset="1" style="stop-color:#00835C"/>
</linearGradient>
<path fill="url(#SVGID_30_)" d="M441.284,287.41c1.816-0.088,3.425,1.321,3.581,3.139c0.68,8.795-7.369,18.647-18.712,18.963
c-9.559,0.236-19.012-7.416-19.012-18.987c0-1.823,1.507-3.302,3.325-3.302s3.292,1.479,3.292,3.302
c0,7.61,6.12,12.536,12.232,12.386c7.524-0.209,12.417-6.725,12.162-12.045C438.066,289.045,439.469,287.497,441.284,287.41z"/>
<path fill="#00A672" d="M433.059,290.78c0-1.867,1.523-3.38,3.401-3.38h4.957c1.879,0,3.448,1.513,3.448,3.38
s-1.569,3.38-3.448,3.38h-4.957C434.582,294.16,433.059,292.647,433.059,290.78z"/>
<path fill="#00A672" d="M422.658,290.785c0-1.869,1.514-3.385,3.378-3.385s3.378,1.516,3.378,3.385s-1.514,3.385-3.378,3.385
S422.658,292.654,422.658,290.785z"/>
<path fill="#00A672" d="M429.32,274.969c0.075,1.821-1.336,3.359-3.153,3.436c-7.844,0.326-12.632,6.491-12.398,12.345
c0.072,1.821-1.313,3.358-3.13,3.431c-1.816,0.072-3.414-1.398-3.487-3.22c-0.379-9.538,7.563-18.968,18.742-19.153
C427.711,271.73,429.245,273.146,429.32,274.969z"/>
</g>
<g id="gatsby_1_">
<path fill="#744C9E" d="M73.522,272.766c-9.883,0-17.895,8.012-17.895,17.895s8.012,17.895,17.895,17.895
s17.895-8.012,17.895-17.895S83.405,272.766,73.522,272.766z M59.473,290.846l13.864,13.863
C65.724,304.609,59.572,298.459,59.473,290.846z M76.667,304.357l-16.843-16.844c1.429-6.246,7.019-10.906,13.698-10.906
c4.669,0,8.806,2.277,11.36,5.781l-1.945,1.717c-2.073-2.971-5.517-4.918-9.415-4.918c-4.964,0-9.191,3.154-10.788,7.566
l14.694,14.693c3.568-1.291,6.313-4.305,7.232-8.035H78.57v-2.752h6.423l0,0h2.581l0,0
C87.574,297.338,82.914,302.93,76.667,304.357z"/>
</g>
</g>
</g>
</svg>

Animate SVG Circles with Transform Origin

I'm trying to animate 3x Individual Circles within one SVG. I've got them to animate, but they have moved position into the top left corner. This happened when I added the following CSS:
.payment svg * {
transform-origin: center; /* or transform-origin: 50% */
transform-box: fill-box;
}
<div class="payment">
<svg width="689px" height="370px" viewBox="0 0 689 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
<title>Circles</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" stroke="url(#linearGradient-1)">
<g id="Circles" transform="translate(1.000000, 1.000000)">
<g id="mini" transform="translate(0.000000, 60.000000)" opacity="0.50042" stroke-dasharray="3" transform="rotate(360)">
<path d="M127,254 C197.140163,254 254,197.140163 254,127 C254,56.8598368 197.140163,0 127,0 C56.8598368,0 0,56.8598368 0,127 C0,197.140163 56.8598368,254 127,254 Z" id="Oval"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="15s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
<g id="small" transform="translate(135.000000, 30.000000)" opacity="0.5" stroke-dasharray="6,10" transform="rotate(360)">
<path d="M154,308 C239.051851,308 308,239.051851 308,154 C308,68.9481485 239.051851,0 154,0 C68.9481485,0 0,68.9481485 0,154 C0,239.051851 68.9481485,308 154,308 Z" id="Oval-Copy-3"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="25s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
<g id="large" transform="translate(319.000000, 0.000000)" opacity="0.5" stroke-dasharray="16,10" transform="rotate(360)">
<path d="M184,368 C285.620394,368 368,285.620394 368,184 C368,82.379606 285.620394,0 184,0 C82.379606,0 0,82.379606 0,184 C0,285.620394 82.379606,368 184,368 Z" id="Oval-Copy-4"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="35s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
</g>
</g>
</g>
</svg>
</div>
But without the above CSS, they do not stay in the same position and rotate.
Does anyone know how to keep them in the same position and rotate 360 without moving?
<svg width="689px" height="370px" viewBox="0 0 689 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
<title>Circles</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" stroke="url(#linearGradient-1)">
<g id="Circles" transform="translate(1.000000, 1.000000)">
<g id="mini" transform="translate(0.000000, 60.000000)" opacity="0.50042" stroke-dasharray="3" transform="rotate(360)">
<path d="M127,254 C197.140163,254 254,197.140163 254,127 C254,56.8598368 197.140163,0 127,0 C56.8598368,0 0,56.8598368 0,127 C0,197.140163 56.8598368,254 127,254 Z" id="Oval"></path>
</g>
<g id="small" transform="translate(135.000000, 30.000000)" opacity="0.5" stroke-dasharray="6,10" transform="rotate(360)">
<path d="M154,308 C239.051851,308 308,239.051851 308,154 C308,68.9481485 239.051851,0 154,0 C68.9481485,0 0,68.9481485 0,154 C0,239.051851 68.9481485,308 154,308 Z" id="Oval-Copy-3"></path>
</g>
<g id="large" transform="translate(319.000000, 0.000000)" opacity="0.5" stroke-dasharray="16,10" transform="rotate(360)">
<path d="M184,368 C285.620394,368 368,285.620394 368,184 C368,82.379606 285.620394,0 184,0 C82.379606,0 0,82.379606 0,184 C0,285.620394 82.379606,368 184,368 Z" id="Oval-Copy-4"></path>
</g>
</g>
</g>
</g>
</svg>

main idea - rotation around origin(0,0) before translation:
<svg viewBox="-200 -100 400 200" width=90vw>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g stroke-width="1" fill="none">
<g stroke="url(#linearGradient-1)">
<g opacity="0.5" stroke-dasharray="3" transform="translate(-100,0)" >
<circle r="80" >
<animateTransform attributeName="transform" attributeType="XML" dur="15s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</circle>
</g>
<g stroke-dasharray="6,10">
<circle r="90">
<animateTransform attributeName="transform" attributeType="XML" dur="25s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</circle>
</g>
<g opacity="0.5" stroke-dasharray="16,10" transform="translate(100,0)">
<circle r="100">
<animateTransform attributeName="transform" attributeType="XML" dur="35s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</circle>
</g>
</g>
</g>
</svg>

How to animate pattern items sequentially?

<svg viewbox="0 0 100 100">
<defs>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12">
<animate
attributeName="opacity"
values="0; 1"
keyTimes="0; 1"
dur="1s"
begin="0s"
repeatCount="1"
fill="freeze" />
</circle>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="38.48" width="100" height="100" fill="white"></circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>
This way animation runs simultaneously for all pattern items.
How to run this sequentially? Start next item animation if the previous one completed?

Instead of animating the circles of the pattern I would animate a radial gradient from white to black, and I would use this gradient to fill the mask circle like so:
<svg viewbox="0 0 100 100">
<defs>
<radialGradient id="rg" cx=".5" cy=".5" r="0.01">
<stop offset="0%" stop-color="white"></stop>
<stop offset="100%" stop-color="black"></stop>
<animate
attributeName="r"
values="0.01; 1"
dur="3s"
begin="0s"
repeatCount="1"
fill="freeze" />
</radialGradient>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12"/>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="url(#rg)">
</circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>
SECOND Solution
You may fill the mask circle with white and animate the radius like so:
<svg viewbox="0 0 100 100">
<defs>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12"/>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="white">
<animate
attributeName="r"
values="0.01; 38.48"
dur="3s"
begin="0s"
repeatCount="1"
fill="freeze" />
</circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>

SVG Animation rotates in wrong place

I'm quite new to SVG animations and I am struggleing a bit with it.
I have written the below code to rotate an image around a center point. However, it is cutting off the top and left of the immage.
<svg width="350" height="350">
<g transform="translate(175, 175)">
<svg>
<g>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="500ms" repeatCount="1"></animateTransform>
<circle cx="0" cy="0" r="140" stroke="#70AD47" stroke-width="5" fill="#E2F0D6"></circle>
<text x="0" y="0" text-anchor="middle" dy="10" class="bubbleTitle" fill="#70AD47">Top</text>
<circle cx="0" cy="-120" r="50" stroke="#70AD47" stroke-width="3" fill="#E2F0D6"></circle>
<text x="0" y="-120" text-anchor="middle" dy="0">
<tspan font-size="14" class="bubbleText" x="0" dy="-1.5em">Sent</tspan>
<tspan font-size="40" class="bubbleText" x="0" dy="1.0em">#</tspan>
</text>
</g>
</svg>
</g>
</svg>
Any help with this would be hugely apreciated.
Thank you

The viewBox attribute is missing. If you set it properly the inner translation is no longer necessary.
Also remove the nested SVG element
<svg width="350" height="350" viewBox="-140 -175 280 350" xmlns="http://www.w3.org/2000/svg">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="500ms" repeatCount="1"></animateTransform>
<circle cx="0" cy="0" r="140" stroke="#70AD47" stroke-width="5" fill="#E2F0D6"></circle>
<text x="0" y="0" text-anchor="middle" dy="10" class="bubbleTitle" fill="#70AD47">Top</text>
<circle cx="0" cy="-120" r="50" stroke="#70AD47" stroke-width="3" fill="#E2F0D6"></circle>
<text x="0" y="-120" text-anchor="middle" dy="0">
<tspan font-size="14" class="bubbleText" x="0" dy="-1.5em">Sent</tspan>
<tspan font-size="40" class="bubbleText" x="0" dy="1.0em">#</tspan>
</text>
</svg>

SVG reversing animation

I'm still learning SMIL and one thing that bothers me is the no support for automatic reversed animations. So here's my test SVG I made quicky flor the purpose of testing SVG position animations.
In the simplest form, I want the animation to reverese back to its original starting position when reaching the end, like how the CSS animation alternate works.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 82">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 2px;
}
</style>
</defs>
<title>Untitled-5</title>
<line class="cls-1" x1="12" y1="70" x2="44" y2="12">
<animate class="anim_1" attributeName="y1" from="70" to="35" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="x2" from="44" to="59" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="y2" from="12" to="56" dur="2s" repeatCount="indefinite"/>
</line>
<line class="cls-1" x1="44" y1="12" x2="112" y2="45">
<animate class="anim_1" attributeName="x1" from="44" to="59" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="y1" from="12" to="56" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="x2" from="112" to="100" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="y2" from="45" to="12" dur="2s" repeatCount="indefinite"/>
</line>
<circle cx="12" cy="70" r="11" fill="white" stroke="black" stroke-width="2">
<animate class="anim_1" attributeName="cy" from="70" to="35" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="44" cy="12" r="11" fill="white" stroke="black" stroke-width="2">
<animate class="anim_1" attributeName="cx" from="44" to="59" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="cy" from="12" to="56" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="112" cy="45" r="11" fill="white" stroke="black" stroke-width="2">
<animate class="anim_1" attributeName="cx" from="112" to="100" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="cy" from="45" to="12" dur="2s" repeatCount="indefinite"/>
</circle>
</svg>
As you can see, the animation runs perfectly until it reaches the end, and just skips back to the start. Unfortunately, the way I'm implementing my larger SVG has no support for JS changing the <svg> element.
I know this question has been asked a few times already, Here for example. They all seem to cover only the <motionPath> element using keyPoints and keyTimes, if there's a way to accomplish this with my SVG using motion paths that'd be fine too, I'm just not sure how.
Thanks in advance for help!

Yes you are on the good path with keyTimes.
But what you need for your <animate> is the values attribute.
Basically, for each <animate>, I
added keyTimes = "0; .5; 1" so that we've got our 3 way points
converted from and to attributes to values="from;to;from"
changed the dur to make it twice longer.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 82">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 2px;
}
</style>
</defs>
<title>Untitled-5</title>
<line class="cls-1" x1="12" y1="70" x2="44" y2="12">
<animate class="anim_1" attributeName="y1" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="70;35;70"></animate>
<animate class="anim_1" attributeName="x2" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="44;59;44"></animate>
<animate class="anim_1" attributeName="y2" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="12;56;12"></animate>
</line>
<line class="cls-1" x1="44" y1="12" x2="112" y2="45">
<animate class="anim_1" attributeName="x1" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="44;59;44"></animate>
<animate class="anim_1" attributeName="y1" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="12;56;12"></animate>
<animate class="anim_1" attributeName="x2" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="112;100;112"></animate>
<animate class="anim_1" attributeName="y2" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="45;12;45"></animate>
</line>
<circle cx="12" cy="70" r="11" fill="white" stroke="black" stroke-width="2">
<animate class="anim_1" attributeName="cy" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="70;35;70"></animate>
</circle>
<circle cx="44" cy="12" r="11" fill="white" stroke="black" stroke-width="2">
<animate class="anim_1" attributeName="cx" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="44;59;44"></animate>
<animate class="anim_1" attributeName="cy" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="12;56;12"></animate>
</circle>
<circle cx="112" cy="45" r="11" fill="white" stroke="black" stroke-width="2">
<animate class="anim_1" attributeName="cx" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="112;100;112"></animate>
<animate class="anim_1" attributeName="cy" dur="4s" repeatCount="indefinite" keyTimes="0;0.5;1" values="45;12;45"></animate>
</circle>
</svg>
And if you want the js I made :
document.querySelectorAll('animate').forEach(a => {
a.setAttribute('keyTimes', '0;0.5;1');
let f = a.getAttribute('from');
let t = a.getAttribute('to');
a.setAttribute('values', f + ';' + t + ';' + f)
a.removeAttribute('from');
a.removeAttribute('to');
a.setAttribute('dur', (parseFloat(a.getAttribute('dur')) * 2) + 's');
})
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 82">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 2px;
}
</style>
</defs>
<title>Untitled-5</title>
<line class="cls-1" x1="12" y1="70" x2="44" y2="12">
<animate class="anim_1" attributeName="y1" from="70" to="35" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="x2" from="44" to="59" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="y2" from="12" to="56" dur="2s" repeatCount="indefinite"/>
</line>
<line class="cls-1" x1="44" y1="12" x2="112" y2="45">
<animate class="anim_1" attributeName="x1" from="44" to="59" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="y1" from="12" to="56" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="x2" from="112" to="100" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="y2" from="45" to="12" dur="2s" repeatCount="indefinite"/>
</line>
<circle cx="12" cy="70" r="11" fill="white" stroke="black" stroke-width="2">
<animate class="anim_1" attributeName="cy" from="70" to="35" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="44" cy="12" r="11" fill="white" stroke="black" stroke-width="2">
<animate class="anim_1" attributeName="cx" from="44" to="59" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="cy" from="12" to="56" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="112" cy="45" r="11" fill="white" stroke="black" stroke-width="2">
<animate class="anim_1" attributeName="cx" from="112" to="100" dur="2s" repeatCount="indefinite"/>
<animate class="anim_1" attributeName="cy" from="45" to="12" dur="2s" repeatCount="indefinite"/>
</circle>
</svg>

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Rotate dashes of SVG stroke-dasharray - css

stroke-dasharray is the wrong approach as you can't affect the dash rotation. A better approach would be to use square markers on a path such that each path vertex has a marker with a fixed orient attribute. The path itself could be transparent so just the markers are visible.

Related

svg objects spin around the circle

Animate SVG Circles with Transform Origin

How to animate pattern items sequentially?

SVG Animation rotates in wrong place

SVG reversing animation

Categories

Resources