Mert
Reputation: 554
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>Upvotes: 0
Views: 111
Answers (1)
Temani Afif
Reputation: 272937
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>Upvotes: 2
Related Questions
- SVG circle animation
- SVG - circle rotating around circle
- svg dashed line circle animate so it rotates
- How do I rotate an SVG path element without it moving in circles?
- Circular animation not working on SVG
- SVG element rotate on circle
- SVG circle animation issue
- Radial circle animation
- SVG circle wobbles in rotation animation
- How do I animate a svg circle with css