How to make circle / g / path element in SVG pulse

How to make circle / g / path element in SVG pulse - html

I have an SVG of the following map:
On the map, you will notice the orange dots. I'm looking to make these dots pulsate like this:
.pulse {
margin:100px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
#keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
<span class="pulse"></span>
Challenges:
html markup cannot be used within svg's, so using the span as the demo above is not an option.
In order to make sure the dots are still positioned correctly, I've added parent g elements and moved the child transform property onto the parent.
Here is the original (simplified) map:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.013" height="41.348" viewBox="0 0 37.013 41.348">
<defs>
<filter id="Ellipse_160" x="0.013" y="3.485" width="37" height="37" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.271"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
<g id="Group_975" data-name="Group 975">
<g transform="matrix(1, 0, 0, 1, 624.99, 1061.51)" filter="url(#Ellipse_160)">
<circle id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" transform="translate(9.01 9.49)" fill="#ff7c81"/>
</g>
<circle id="Ellipse_161" data-name="Ellipse 161" cx="5.5" cy="5.5" r="5.5" transform="translate(638 1075)" fill="#ffee7e"/>
</g>
</g>
</svg>
Here is my attempt at applying the pulse effect:
.map--pulse {
margin: 100px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
#keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
<div class="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.013" height="41.348" viewBox="0 0 37.013 41.348">
<defs>
<filter id="Ellipse_160" x="0.013" y="3.485" width="37" height="37" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha"/>
<feGaussianBlur stdDeviation="3" result="blur"/>
<feFlood flood-opacity="0.271"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
<!-- dot here -->
<g class="map__group" id="Group_975" data-name="Group 975">
<g transform="matrix(1, 0, 0, 1, 624.99, 1061.51)" filter="url(#Ellipse_160)">
<g transform="translate(9.01 9.49)">
<circle class="map--pulse" id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>
</g>
</g>
<circle id="Ellipse_161" data-name="Ellipse 161" cx="5.5" cy="5.5" r="5.5" transform="translate(638 1075)" fill="#ffee7e"/>
</g>
</g>
</svg>
</div>
As you can see, nothing happens.
I then thought maybe the effect needs to take place on a path rather than circle and tried:
<path class="map--pulse" id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>
Instead of:
<circle class="map--pulse" id="Ellipse_160-2" data-name="Ellipse 160" cx="9.5" cy="9.5" r="9.5" fill="#ff7c81"/>
But all this did was hide my orange circle.
Is a pulse effect possible here?

Maybe so? Using CSS Animation for Map Markers
circle {
fill: gold;
opacity: 0.3;
transform-box: fill-box;
transform-origin: center;
}
svg > circle:last-child {
fill: gold;
opacity: 1;
}
#rp1 {
animation: ripple1 0.7s linear infinite;
}
#keyframes ripple1 {
0% {
transform: scale(2);
opacity: 0.3;
}
100% {
transform: scale(2.5);
opacity: 0.0;
}
}
#rp2 {
animation: ripple2 0.7s linear infinite;
}
#keyframes ripple2 {
0% {
transform: scale(1.5);
}
100% {
transform: scale(2);
}
}
#rp3 {
animation: ripple3 0.7s linear infinite;
}
#keyframes ripple3 {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
#rp4 {
animation: ripple4 0.7s linear infinite;
}
#keyframes ripple4 {
0% {
transform: scale(1);
}
100% {
transform: scale(0.5);
}
}
<div class="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="370" height="410" viewBox="0 0 37.013 41.348">
<defs>
<g id="Group_975" >
<circle id="rp1" cx="20" cy="20" r="1" />
<circle id="rp2" cx="20" cy="20" r="1" />
<circle id="rp3" cx="20" cy="20" r="1" />
<circle id="rp4" cx="20" cy="20" r="1" />
</g>
</defs>
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
</g>
<!-- dot here -->
<use xlink:href="#Group_975" x="1" y="3"/>
<circle r="1" cx="21" cy="23" />
</svg>
</div>
Option using a map in *.png format
The map image is added using the <image> tag
This will allow you to place markers on top of the map and link them to certain places on the map. The relative position of markers and places on the map will remain the same regardless of zooming and using any gadget.
.container {
width:100vw;
height:100vh;
}
circle {
fill: gold;
opacity: 1;
transform-box: fill-box;
transform-origin: center;
}
#anim-circle {
fill: crimson;
opacity: 0.3;
animation: ripple1 2s linear infinite;
}
#keyframes ripple1 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0.0;
}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 2200 1200" >
<image xlink:href="https://i.stack.imgur.com/cosLH.png" width="100%" height="100%" />
<!-- dot here -->
<defs>
<g id="Group_975">
<circle id="anim-circle" cx="250" cy="250" r="15"></circle>
<circle cx="250" cy="250" r="15"></circle>
</g>
</defs>
<use xlink:href="#Group_975" />
<use xlink:href="#Group_975" x="160" y="300" />
<use xlink:href="#Group_975" x="750" y="200" />
<use xlink:href="#Group_975" x="1435" y="650" />
</svg>
</div>

In this example I have two separate SVG element (but it could be just one). In the first I define a <symbol> with a shadow and a circle that is animated. The first SVG takes up no space (width and height are 0).
In the second SVG you find the map. I didn't change anything here except the width. By using <use> I can now place the pulsating circle on the map. The nice thing about <use> is that it has it's own viewBox. So, the sizes defined in the symbol will scale according to the size used by the <use> element. Like this:
<use href="#pulse" width="4" height="4" x="21" y="27"/>
This will place the dot (21,27 from the upper left corner) according to the viewBox viewBox="0 0 37.013 41.348".
The two dots I already made are two different sizes -- the size can be adjusted according to the viewBox. The tricky part here is using transform/translate for placing the dot in the right spot. I'm not able to see what all you transform/translate one the <g>'s does. So, here a matter of experimenting.
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="shadow" filterUnits="userSpaceOnUse">
<feDropShadow dx="0" dy="0" stdDeviation="0" flood-color="orange">
<animate attributeName="stdDeviation" values="0;2" dur="2s" repeatCount="indefinite" />
</feDropShadow>
</filter>
</defs>
<symbol id="pulse" viewBox="0 0 4 4">
<circle filter="url(#shadow)" cx="2" cy="2" r="1" fill="orange"/>
<circle cx="2" cy="2" r="1" fill="orange">
<animate attributeName="r" values="1;2" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="2s" repeatCount="indefinite" />
</circle>
</symbol>
</svg>
<div class="map">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" viewBox="0 0 37.013 41.348">
<g id="Group_1132" data-name="Group 1132" transform="translate(-624.987 -1061.515)">
<g id="Group_973" data-name="Group 973" transform="translate(121.865 791.121)">
<g id="Group_966" data-name="Group 966" transform="translate(503.497 270.783)">
<g id="Group_964" data-name="Group 964">
<path id="Path_110983" data-name="Path 110983" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110984" data-name="Path 110984" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110985" data-name="Path 110985" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
<g id="Group_965" data-name="Group 965">
<path id="Path_110986" data-name="Path 110986" d="M770.107,357.625c-.789.869-1.608,2.413-1.014,2.391.735-.029,1.535-.866,1.917-1.656A2.834,2.834,0,0,1,770.107,357.625Z" transform="translate(-765.982 -354.8)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110987" data-name="Path 110987" d="M795.956,382.39c-.124-.042-.247-.088-.375-.121a3.4,3.4,0,0,1-1.965-1.451.371.371,0,0,0-.2.191c-.312.771-.982.676-1.474-.189s.448-1.69-.043-1.785a2.02,2.02,0,0,1-.983-1.783.721.721,0,0,0,.008-.208,8.945,8.945,0,0,1-1.51-1.692,2.344,2.344,0,0,1-.376-.879l-.254-.122a3.174,3.174,0,0,1-1.514-1.893,2.492,2.492,0,0,1-.122-.866c-.083-.241-.153-.49-.213-.739a3.278,3.278,0,0,1-1.659-2.59,1.641,1.641,0,0,1-.657-.555c-.759-1.061-2.054-.53-2.725-.482-.583.042-.15-1.013.679-1.794a3.815,3.815,0,0,1-.2-1.022,3.208,3.208,0,0,1,1.979-2.909,4.018,4.018,0,0,1,.633-.756c.013-.012.029-.02.042-.032a6.426,6.426,0,0,0,.259-1.3c0-.821-4.688-.773-5.582-.29s-1.786-.722-1.028-1.061,2.368-2.023,2.277-2.7,1.117-1.3.448-1.928-.76.82-1.34,1.3-1.876.339-3.261.049a1.147,1.147,0,0,0-.471,0A3.019,3.019,0,0,1,775,356.733a3.6,3.6,0,0,0-.07.8c.046.916-1.608,1.446-1.34,2.217s-.312,1.349-.758.914-.938-1.494-1.831-.722,1.027,1.785,2.186,1.93-.891,1.06-1.115,2.407,1.517.774,1.608,1.735-2.5,1.11-2.5,2.024,1.474-.432,2.144-.817-.356,2.263,1.252,1.975,1.159-2.649,1.741-2.554-.268,1.253.225,2.264-1.162,2.556-1.073,3.28,3.3.722,4.331-.434,1.518.1.8.965a1.174,1.174,0,0,0,.493,2.025c.891.336,1.2.432.8,1.2s-.046,2.217-.269,2.94-2.992.627-3.08.146-1.252-.146-.938.529-.983,1.4-.893,2.025,1.74.481,1.785,1.254-1.206,1.685-2.9,2.217.356,1.976,1.16,1.348.625.433,1.787.433,1.876,1.012,3.169.483,1.251,0,.268.819-2.455-.048-3.349.483-4.526,4.206-3.839,5.11c.4.529.935-.771,2.231-1.35a1.3,1.3,0,0,1,1.393.025,3.663,3.663,0,0,1,1.222-1.2,3.486,3.486,0,0,1,2.538-.319,3.192,3.192,0,0,1,.51.188c.033,0,.062,0,.1.009a2.682,2.682,0,0,0,2.368-.724c.536-.482,1.963.961,2.412.625a8.277,8.277,0,0,1,3.393-.676,9.067,9.067,0,0,0,4.2-1.88c.67-.673-.4-.817-1.293-.673s-.716-.965.221-1.928,2.412-1.686,2.5-3.132v-.005C796.375,382.59,796.166,382.488,795.956,382.39Z" transform="translate(-766.638 -353.284)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
<path id="Path_110988" data-name="Path 110988" d="M766.166,380.548a3.416,3.416,0,0,1-.822,1.858c-.473.366-1.35,1.748-.676,1.9s1.753,1.31,1.89.435.607-2.039,1.754-.583a6.255,6.255,0,0,0,1,.979c.186-.661,1.6-.775,2.329-1.57.894-.965-.445-2.363-1.694-3.662C768.816,378.724,767.359,380.568,766.166,380.548Z" transform="translate(-764.422 -362.441)" fill="#5f249f" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75"/>
</g>
</g>
</g>
</g>
<!-- dot here -->
<use href="#pulse" width="4" height="4" x="21" y="27"/>
<use href="#pulse" width="2" height="2" x="12" y="15"/>
</svg>
</div>
Update
To adjust the the "pulsation" you can play around with the attributes value, keyTimes and dur on the animation element. The value is a list of values that the attribute will have over the span of the duration (dur). It will have two or more values. If there are more than two values (like the animation of r in the below example), the keyTimes attribute can be used for setting the the intermediate pace. So here the value will be 0 at 0 seconds, 1 after 1.5 seconds (0.75), and 0 after 2 seconds (1).
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="300">
<symbol id="pulse" viewBox="0 0 4 4">
<circle cx="2" cy="2" r="1" fill="orange"/>
<circle cx="2" cy="2" r="1" fill="orange">
<animate attributeName="r" values="1;2;1" keyTimes="0; 0.75; 1" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="2s" repeatCount="indefinite" />
</circle>
</symbol>
<use href="#pulse" x="0" y="0" width="10" height="10" />
<use href="#pulse" x="0" y="0" width="1.5" height="1.5" />
</svg>

Related

SVG element disappears after apply rotate animation

When I am adding
<animateTransform attributeType="xml" attributeName="transform"
type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s"
additive="sum" repeatCount="indefinite" />
to <g id="icon-border"> element disappears.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65" height="65" viewBox="0 0 65 65">
<defs>
<filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse">
<feOffset input="SourceAlpha"/>
<feGaussianBlur stdDeviation="7.5" result="blur"/>
<feFlood flood-color="#dec652" flood-opacity="0.478"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<style>
</style>
</defs>
<g id="Group_470" data-name="Group 470" transform="translate(-1646.5 -154.5)">
<g transform="matrix(1, 0, 0, 1, 1646.5, 154.5)" filter="url(#Ellipse_320)">
<circle id="Ellipse_320-2" data-name="Ellipse 320" cx="10" cy="10" r="10" transform="translate(22.5 22.5)" fill="#dec652"/>
</g>
<g id="icon-border" transform="translate(1666 174)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10">
<circle cx="13" cy="13" r="13" stroke="none"/>
<circle cx="13" cy="13" r="12.5" fill="none"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" />
</g>
<g id="text-change-accept-svgrepo-com" transform="translate(1673.811 182.551)">
<path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/>
<path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/>
<path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/>
<path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/>
</g>
</g>
</svg>

It this more like it? I removed many of the transform/translate.
The animation on <g id="icon-border"> was fine. You just need to place the child circles in 0,0 and then transform/translate the <g> to the center.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 65 65">
<defs>
<filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse">
<feOffset input="SourceAlpha"/>
<feGaussianBlur stdDeviation="7.5" result="blur"/>
<feFlood flood-color="#dec652" flood-opacity="0.478"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_470" data-name="Group 470">
<circle id="Ellipse_320-2" data-name="Ellipse 320" filter="url(#Ellipse_320)" cx="32.5" cy="32.5" r="10" fill="#dec652"/>
<g id="icon-border" transform="translate(32.5 32.5)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10">
<circle cx="0" cy="0" r="13" stroke="none"/>
<circle cx="0" cy="0" r="12.5"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" dur="0.5s" additive="sum" repeatCount="indefinite" />
</g>
<g id="text-change-accept-svgrepo-com" transform="translate(27.5 28.5)">
<path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/>
<path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/>
<path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/>
<path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/>
</g>
</g>
</svg>

Flip SVG but not text inside

Is it possible to flip the SVGs in the DIV "Analytics" but not the text? Ive managed to flip the DIV by just using -webkit-transform: scaleX(-1); and
transform: scaleX(-1);but obviously now the text is unreadable. Is it possible to keep the text unflipped or no?
<style>
#analytics-dashboard{
display: block;
margin: auto;
}
.analytics{
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.small-piece{
transform: translate(-95px);
opacity: 0;
animation: intoplace2 1s ease forwards;
}
#keyframes intoplace2{
0%{
transform: translate(-95px);
opacity: 0;
}
50%{
opacity: 0;
}
100%{
transform: translate(0px);
opacity: 1;
}
}
.large-piece{
transform: translate(-40px);
opacity: 0;
animation: intoplace1 1s ease forwards;
}
#keyframes intoplace1{
0%{
transform: translate(-60px);
opacity: 0;
}
35%{
opacity: 0;
}
100%{
transform: translate(0px);
opacity: 1;
}
}
.restart{
display: block;
margin: auto;
}
.analytics0{fill:#D3D3D3;}
.analytics1{fill:#828282;}
.analytics2{fill:#B0B0B0;}
.analytics3{fill:#EAEAEB;}
.analytics4{fill:#F6F6F7;}
.analytics5{opacity:0.7;fill:url(#SVGID_1_);enable-background:new ;}
.analytics6{fill:#373737;}
.analytics7{opacity:0.6;fill:url(#SVGID_2_);enable-background:new ;}
.analytics8{opacity:0.5;fill:url(#SVGID_3_);enable-background:new ;}
.analytics9{opacity:0.3;fill:#F1CF32;enable-background:new ;}
.analytics10{fill:#F1CF32;}
.analytics11{opacity:0.3;fill:#E9B231;enable-background:new ;}
.analytics12{fill:#E9B231;}
.analytics13{opacity:0.3;fill:#DB822E;enable-background:new ;}
.analytics14{fill:#DB822E;}
.analytics15{fill:#FFFFFF;}
.analytics16{fill:#D1D1D1;}
.analytics17{fill:#959595;}
.analytics18{fill:#AEAEAE;}
.analytics19{fill:#E9E9E9;}
.analytics20{fill:#D9812D;}
.analytics21{opacity:0.5;fill:#D8802E;enable-background:new ;}
.analytics22{fill:#D8802E;}
.analytics23{fill:none;stroke:#FFB502;stroke-width:2;stroke-miterlimit:10;}
.analytics24{fill:none;stroke:#FF8403;stroke-width:4;stroke-miterlimit:10;}
.analytics25{fill:none;stroke:#FFD100;stroke-width:4;stroke-miterlimit:10;}
</style>
<div class="analytics">
<svg version="1.1" id="analytics-dashboard" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="550px" height="524px" viewBox="0 0 550 524" style="enable-background:new 0 0 550 524;"
xml:space="preserve">
<g class="large-piece">
<path class="analytics0" d="M115.2,3.5l9.7-3.1c2.2-0.7,4.5-0.4,6.5,0.7l345.3,199.4c1.5,0.9,2.7,2.1,3.5,3.5l-8.3,4.8l0,0L115.2,3.5z"/>
<path class="analytics1" d="M481.4,208.6v304.6c0,2.3-1.2,4.3-3.1,5.5l-7.9,4.7l1.5-314.7l8.3-4.8C480.9,205.3,481.4,207,481.4,208.6z"/>
<path class="analytics2" d="M476.7,200.4c1.5,0.9,2.7,2.1,3.5,3.5s1.2,3,1.2,4.7v1.7l-7.8,3.4h-11.2l4.5-10l7.6-4.5L476.7,200.4z"/>
<path class="analytics3" d="M111.9,309.8l361.7,208.8V215.4c0-4.8-2.5-9.2-6.7-11.6L120.5,3.8c-3.8-2.2-8.6,0.6-8.6,5V309.8z"/>
<polygon class="analytics4" points="111.9,82 473.6,290.8 473.6,290 111.9,81.2 "/>
<polygon class="analytics4" points="111.9,106.3 473.6,315.2 473.6,314.4 111.9,105.5 "/>
<polygon class="analytics4" points="111.9,130.7 473.6,339.5 473.6,338.7 111.9,129.9 "/>
<polygon class="analytics4" points="111.9,155 473.6,363.9 473.6,363.1 111.9,154.2 "/>
<polygon class="analytics4" points="111.9,179.4 473.6,388.2 473.6,387.4 111.9,178.6 "/>
<polygon class="analytics4" points="111.9,203.7 473.6,412.5 473.6,411.7 111.9,202.9 "/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1492.1595" y1="1252.473" x2="1428.5929" y2="1362.5734" gradientTransform="matrix(-1 0 0 -1 1765.928 1574)">
<stop offset="0" style="stop-color:#DB822E"/>
<stop offset="1" style="stop-color:#F1CF32"/>
</linearGradient>
<path class="analytics5" d="M473.6,388.2c0,0-3.1,8.3-17.8-0.2c-14.8-8.5-21.2-44.6-46-59c-24.8-14.3-20.1-1-34.3-9.6
c-14.2-8.6-20.7-73.5-36.6-82.7c-16-9.2-21.3,48.4-46.1,35c-24.8-13.4-39-108.5-60.3-120.8s-44,80.8-63.8,76.5
c-40.6-8.8-56.8-87-56.8-87v86.9l361.7,209.6L473.6,388.2L473.6,388.2z"/>
<path class="analytics6" d="M118.6,323.2l346.4,200c3.8,2.2,8.6-0.5,8.6-4.9v-83L111.9,226.5v85.1C111.9,316.4,114.4,320.8,118.6,323.2z"
/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1488.6642" y1="1252.1271" x2="1436.686" y2="1342.1558" gradientTransform="matrix(-1 0 0 -1 1765.928 1574)">
<stop offset="0" style="stop-color:#DB822E"/>
<stop offset="1" style="stop-color:#F1CF32"/>
</linearGradient>
<path class="analytics7" d="M473.6,418.7c0,0-26.9-22.8-42.5-60.7s-32.5-56.1-49.4-65.8c-22.2-12.7-36.3,6.4-58.5-5.5
s-26.6-73.7-40.8-81.9c-14.2-8.2-17.7,82.2-37.2,73s-21.3-61.1-44.3-76.5s-21.6,27.2-42.9,15.9c-21.2-11.2-46.1-62.3-46.1-62.3
v71.5l361.7,208.8L473.6,418.7L473.6,418.7z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1460.4933" y1="1235.7115" x2="1437.0006" y2="1276.4022" gradientTransform="matrix(-1 0 0 -1 1765.928 1574)">
<stop offset="0" style="stop-color:#F1CF32"/>
<stop offset="1" style="stop-color:#DB822E"/>
</linearGradient>
<path class="analytics12" d="M300.3,386.4L300.3,386.4L300.3,386.4L300.3,386.4L300.3,386.4L300.3,386.4c0.1,10.3,6.3,23,14.9,30
c4.5,3.6,9,5.2,12.8,4.8l-0.7-1.7c-4.3,0.4-9.6-2-14.4-6.8c-6.8-6.8-11.2-17.1-11.3-25.5c0.1-9.5,5.8-14.6,13.8-11.9
c0.9,0.3,1.8,0.7,2.7,1.2V375c-1.9-1-3.9-1.7-5.8-2C305.1,371.9,300.4,377.4,300.3,386.4z M301.6,387.1L301.6,387.1
c0-1-1.3-1.7-1.3-0.7l0,0C300.3,385.4,301.6,386.1,301.6,387.1z"/>
<path class="analytics13" d="M180.4,316.1c0.1,10.3,6.3,23,14.9,30c7.5,6,15.3,6.5,19.3,1.1c4-5.5,3.4-16-1.5-25.9s-13.4-17.6-20.7-18.6
C185.2,301.7,180.5,307.1,180.4,316.1z M181.7,316.9c0.1-9.5,5.8-14.6,13.8-11.9c7.1,2.4,14.4,10.5,18.1,19.9
c3.7,9.4,3.1,18.6-1.6,22.4c-4.6,3.8-12.3,1.8-19.1-5C186.2,335.6,181.7,325.3,181.7,316.9z"/>
<path class="analytics14" d="M192.5,302.7c1.9,0.3,3.8,1,5.8,2v1.5c-0.9-0.5-1.9-0.9-2.8-1.2c-8-2.7-13.7,2.4-13.8,11.9
c0.1,8.5,4.5,18.7,11.3,25.5c6.7,6.8,14.5,8.8,19.1,5c3.9-3.2,5-10.3,3-18.1l1.2,0.2c1.8,7.1,1.4,13.8-1.6,17.7
c-4,5.4-11.8,4.9-19.3-1.1c-8.6-6.9-14.9-19.7-14.9-30C180.5,307.1,185.2,301.7,192.5,302.7z"/>
<path class="analytics10" d="M436.9,466.7c-1.6-0.9-2.4-2.5-2.4-5s0.8-3.1,2.4-2.2s2.4,2.5,2.4,5C439.3,466.9,438.5,467.6,436.9,466.7z
M435.2,462.1c0,0.5,0,1,0.1,1.3c0.1,0.4,0.2,0.7,0.3,1c0.1,0.3,0.3,0.5,0.4,0.7c0.2,0.2,0.3,0.4,0.4,0.5s0.3,0.2,0.5,0.3
c0.2,0.1,0.3,0.2,0.5,0.2c0.1,0,0.3,0.1,0.4,0c0.2,0,0.3-0.1,0.4-0.3c0.1-0.1,0.2-0.4,0.3-0.7c0.1-0.3,0.1-0.7,0.1-1.2
c0-0.6-0.1-1.1-0.2-1.6s-0.2-0.9-0.4-1.1c-0.2-0.3-0.3-0.5-0.5-0.7s-0.4-0.3-0.6-0.4s-0.4-0.2-0.6-0.3c-0.2,0-0.3,0-0.5,0.1
s-0.3,0.3-0.4,0.7C435.3,461.1,435.2,461.5,435.2,462.1z"/>
<path class="analytics10" d="M440.2,463.5c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4c0.1-0.1,0.3-0.1,0.4,0c0.1,0,0.3,0.1,0.4,0.2
c0.3,0.2,0.7,0.5,0.9,1c0.3,0.4,0.4,1,0.4,1.7c0,0.4,0,0.7-0.1,0.9c-0.1,0.2-0.2,0.3-0.3,0.4c-0.1,0.1-0.3,0.1-0.4,0.1
s-0.3-0.1-0.4-0.2c-0.2-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.3-0.3-0.4-0.5s-0.3-0.5-0.3-0.8C440.2,464.2,440.2,463.9,440.2,463.5z
M440.9,462.7c-0.1,0.1-0.2,0.4-0.2,1c0,0.5,0.1,1,0.2,1.2s0.3,0.5,0.6,0.6c0.3,0.1,0.4,0.2,0.6,0.1s0.2-0.4,0.2-1s-0.1-1-0.2-1.2
c-0.2-0.3-0.3-0.5-0.6-0.6C441.3,462.7,441.1,462.6,440.9,462.7z M441.3,469.1l3.8-4.9l0.6,0.3l-3.8,4.9L441.3,469.1z M444.2,469.8
c-0.1-0.3-0.1-0.7-0.1-1c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4c0.1-0.1,0.3-0.1,0.4-0.1s0.3,0.1,0.4,0.2s0.3,0.2,0.4,0.3
c0.1,0.1,0.3,0.3,0.4,0.5s0.2,0.5,0.3,0.8c0.1,0.3,0.1,0.7,0.1,1c0,0.4,0,0.7-0.1,0.9c-0.1,0.2-0.2,0.3-0.3,0.4
c-0.1,0.1-0.3,0.1-0.4,0.1s-0.3-0.1-0.4-0.2s-0.3-0.2-0.4-0.3c-0.1-0.1-0.3-0.3-0.4-0.5C444.4,470.4,444.3,470.2,444.2,469.8z
M444.8,468.1c-0.2,0.1-0.2,0.4-0.2,1c0,0.5,0.1,1,0.2,1.2s0.3,0.5,0.6,0.6c0.3,0.1,0.4,0.2,0.6,0.1s0.2-0.4,0.2-1s-0.1-1-0.2-1.2
c-0.2-0.3-0.3-0.5-0.6-0.6C445.2,468,445,468,444.8,468.1z"/>
<path class="analytics10" d="M310.1,392.2l0.3-3.1l3.1,1.8v0.7l-2.5-1.5l-0.2,2c0.3,0.1,0.7,0.3,1.2,0.5c0.3,0.1,0.5,0.3,0.7,0.5
s0.4,0.4,0.6,0.7c0.2,0.3,0.3,0.6,0.5,1c0.1,0.4,0.2,0.8,0.2,1.2c0,0.4-0.1,0.8-0.2,1c-0.1,0.3-0.3,0.4-0.5,0.4s-0.4,0-0.6,0
c-0.2-0.1-0.4-0.2-0.7-0.3c-0.7-0.4-1.3-0.9-1.7-1.4v-0.8c0.4,0.6,1,1,1.7,1.4c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0,0.3,0,0.4,0
s0.2-0.1,0.2-0.2c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.3,0-0.4c0-0.3,0-0.6-0.1-0.9s-0.2-0.4-0.3-0.6c-0.1-0.2-0.3-0.3-0.4-0.4
s-0.3-0.2-0.5-0.3c-0.3-0.2-0.5-0.3-0.8-0.3c-0.2-0.1-0.4-0.1-0.5-0.1h-0.2L310.1,392.2z"/>
<path class="analytics10" d="M315.1,395.1l0.3-3.1l3.1,1.8v0.7L316,393l-0.2,2c0.3,0.1,0.7,0.3,1.2,0.5c0.3,0.1,0.5,0.3,0.7,0.5
s0.4,0.4,0.6,0.7c0.2,0.3,0.3,0.6,0.5,1c0.1,0.4,0.2,0.8,0.2,1.2s-0.1,0.8-0.2,1c-0.1,0.3-0.3,0.4-0.5,0.4s-0.4,0-0.6,0
c-0.2-0.1-0.4-0.2-0.7-0.3c-0.7-0.4-1.3-0.9-1.7-1.4v-0.8c0.4,0.6,1,1,1.7,1.4c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0,0.3,0,0.4,0
s0.2-0.1,0.2-0.2c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.3,0-0.4c0-0.3,0-0.6-0.1-0.9s-0.2-0.4-0.3-0.6c-0.1-0.2-0.3-0.3-0.4-0.4
s-0.3-0.2-0.5-0.3c-0.3-0.2-0.5-0.3-0.8-0.3c-0.2-0.1-0.4-0.1-0.5-0.1h-0.2L315.1,395.1z"/>
<path class="analytics10" d="M319.9,396.6c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4s0.3-0.1,0.4,0c0.1,0,0.3,0.1,0.4,0.2
c0.3,0.2,0.7,0.5,0.9,1c0.3,0.4,0.4,1,0.4,1.7c0,0.4,0,0.7-0.1,0.9c-0.1,0.2-0.2,0.3-0.3,0.4c-0.1,0.1-0.3,0.1-0.4,0.1
s-0.3-0.1-0.4-0.2s-0.3-0.2-0.4-0.3s-0.3-0.3-0.4-0.5s-0.3-0.5-0.3-0.8C320,397.3,319.9,397,319.9,396.6z M320.6,395.9
c-0.1,0.1-0.2,0.4-0.2,1s0.1,1,0.2,1.2s0.3,0.5,0.6,0.6c0.3,0.1,0.4,0.2,0.6,0.1s0.2-0.4,0.2-1c0-0.5-0.1-1-0.2-1.2
s-0.3-0.5-0.6-0.6C321,395.8,320.8,395.8,320.6,395.9z M321,402.3l3.8-4.9l0.6,0.3l-3.8,4.9L321,402.3z M324,403
c-0.1-0.3-0.1-0.7-0.1-1c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4c0.1-0.1,0.3-0.1,0.4-0.1s0.3,0.1,0.4,0.2
c0.2,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.3,0.3,0.4,0.5s0.2,0.5,0.3,0.8c0.1,0.3,0.1,0.7,0.1,1c0,0.4,0,0.7-0.1,0.9
c-0.1,0.2-0.2,0.3-0.3,0.4c-0.1,0.1-0.3,0.1-0.4,0.1s-0.3-0.1-0.4-0.2c-0.2-0.1-0.3-0.2-0.4-0.3s-0.3-0.3-0.4-0.5
C324.1,403.5,324,403.3,324,403z M324.6,401.2c-0.2,0.1-0.2,0.4-0.2,1s0.1,1,0.2,1.2s0.3,0.5,0.6,0.6c0.3,0.1,0.4,0.2,0.6,0.1
s0.2-0.4,0.2-1c0-0.5-0.1-1-0.2-1.2s-0.3-0.5-0.6-0.6S324.7,401.1,324.6,401.2z"/>
<path class="analytics14" d="M190.2,318.8V318l4.1,2.4v0.7l-2.6,4.8l-0.7-0.4l2.6-4.8L190.2,318.8z"/>
<path class="analytics14" d="M197.3,329.3c-1.6-0.9-2.4-2.5-2.4-5c0-2.4,0.8-3.1,2.4-2.2c1.6,0.9,2.4,2.5,2.4,5
C199.7,329.4,198.9,330.2,197.3,329.3z M195.6,324.7c0,0.5,0,1,0.1,1.3c0.1,0.4,0.2,0.7,0.3,1s0.3,0.5,0.4,0.7
c0.2,0.2,0.3,0.4,0.4,0.5c0.1,0.1,0.3,0.2,0.5,0.3c0.2,0.1,0.3,0.2,0.5,0.2c0.1,0.1,0.3,0.1,0.4,0c0.2,0,0.3-0.1,0.4-0.3
c0.1-0.1,0.2-0.4,0.3-0.7c0.1-0.3,0.1-0.7,0.1-1.2c0-0.6-0.1-1.1-0.2-1.6s-0.2-0.9-0.4-1.1c-0.2-0.3-0.3-0.5-0.5-0.7
s-0.4-0.3-0.6-0.4c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2,0-0.3,0-0.5,0.1s-0.3,0.3-0.4,0.7C195.6,323.6,195.6,324.1,195.6,324.7z"/>
<path class="analytics14" d="M200.6,326c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4s0.3-0.1,0.4,0c0.1,0,0.3,0.1,0.4,0.2
c0.3,0.2,0.7,0.5,0.9,1c0.3,0.4,0.4,1,0.4,1.7c0,0.4,0,0.7-0.1,0.9c-0.1,0.2-0.2,0.3-0.3,0.4s-0.3,0.1-0.4,0.1
c-0.1,0-0.3-0.1-0.4-0.2c-0.2-0.1-0.3-0.2-0.4-0.3s-0.3-0.3-0.4-0.5c-0.1-0.2-0.3-0.5-0.3-0.8C200.7,326.7,200.6,326.4,200.6,326z
M201.3,325.3c-0.1,0.1-0.2,0.4-0.2,1c0,0.5,0.1,1,0.2,1.2c0.2,0.3,0.3,0.5,0.6,0.6s0.4,0.2,0.6,0.1c0.2-0.1,0.2-0.4,0.2-1
s-0.1-1-0.2-1.2c-0.2-0.3-0.3-0.5-0.6-0.6C201.7,325.2,201.5,325.2,201.3,325.3z M201.7,331.7l3.8-4.9l0.6,0.3l-3.8,4.9
L201.7,331.7z M204.6,332.4c-0.1-0.3-0.1-0.7-0.1-1c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4s0.3-0.1,0.4-0.1
c0.1,0,0.3,0.1,0.4,0.2c0.2,0.1,0.3,0.2,0.4,0.3s0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.3,0.8s0.1,0.7,0.1,1c0,0.4,0,0.7-0.1,0.9
c-0.1,0.2-0.2,0.3-0.3,0.4s-0.3,0.1-0.4,0.1c-0.1,0-0.3-0.1-0.4-0.2c-0.2-0.1-0.3-0.2-0.4-0.3s-0.3-0.3-0.4-0.5
C204.8,332.9,204.7,332.7,204.6,332.4z M205.2,330.6c-0.2,0.1-0.2,0.4-0.2,1c0,0.5,0.1,1,0.2,1.2c0.2,0.3,0.3,0.5,0.6,0.6
s0.4,0.2,0.6,0.1c0.2-0.1,0.2-0.4,0.2-1c0-0.5-0.1-1-0.2-1.2c-0.2-0.3-0.3-0.5-0.6-0.6C205.6,330.6,205.4,330.5,205.2,330.6z"/>
<path class="analytics10" d="M374.2,439.5v-0.7c0.3,0.4,0.6,0.8,1,1s0.6,0.3,0.8,0.1c0.2-0.1,0.3-0.4,0.3-0.9v-4.4l0.6,0.3v4.5
c0,0.4,0,0.7-0.1,0.9c-0.1,0.2-0.2,0.3-0.4,0.4s-0.3,0-0.5,0s-0.3-0.1-0.5-0.2C374.9,440.3,374.5,439.9,374.2,439.5z"/>
<path class="analytics10" d="M377.6,440.3c0-0.2,0-0.4,0.1-0.5s0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.1s0.3,0,0.4,0.1s0.3,0.1,0.4,0.2
c0.2,0.1,0.3,0.1,0.3,0.2c0.1,0,0.2,0.1,0.3,0.1l0.6,0.4c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.6-0.9-0.8c-0.4-0.3-0.8-0.4-1.2-0.4
v-0.7c0.4,0.1,0.8,0.2,1.2,0.4c0.6,0.3,1,0.7,1.3,1.2s0.4,1.1,0.4,1.7v1.4c0,0.3-0.1,0.5-0.2,0.7s-0.3,0.2-0.5,0.2
s-0.3-0.1-0.5-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.3-0.2-0.4-0.4s-0.3-0.3-0.4-0.5s-0.2-0.4-0.3-0.6
C377.7,440.8,377.6,440.5,377.6,440.3z M378.2,440.6c0,0.6,0.4,1.1,1.1,1.5l0,0c0.7,0.4,1.1,0.3,1.1-0.3V441
c-0.2-0.1-0.4-0.3-0.7-0.5C378.7,440,378.2,440,378.2,440.6z"/>
<path class="analytics10" d="M381.9,444.2v-4.4c0.5,0,1.1,0.2,1.7,0.5c0.5,0.3,0.9,0.7,1.2,1.1c0.3,0.5,0.4,1,0.4,1.5v3.1l-0.6-0.3v-3.1
c0-0.1,0-0.3,0-0.4s-0.1-0.3-0.1-0.4c-0.1-0.2-0.2-0.3-0.3-0.5c-0.2-0.2-0.3-0.3-0.6-0.4c-0.3-0.2-0.7-0.3-1-0.4v4L381.9,444.2z"/>
<path class="analytics10" d="M386.1,444.7v-2.8l0.6,0.3v2.8c0,0.5,0.1,0.9,0.3,1.2c0.2,0.3,0.4,0.6,0.8,0.8c0.4,0.2,0.7,0.3,0.8,0.2
c0.2-0.1,0.3-0.4,0.3-0.9v-2.8l0.6,0.3v2.8c0,0.7-0.2,1.1-0.4,1.3c-0.3,0.2-0.7,0.1-1.2-0.2c-0.5-0.3-1-0.7-1.2-1.3
C386.2,445.9,386.1,445.3,386.1,444.7z"/>
<path class="analytics10" d="M390.2,447.5c0-0.2,0-0.4,0.1-0.5s0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.1s0.3,0,0.4,0.1
c0.1,0,0.3,0.1,0.4,0.2c0.2,0.1,0.3,0.1,0.3,0.2c0.1,0,0.2,0.1,0.3,0.1l0.6,0.4c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.6-0.9-0.8
c-0.4-0.3-0.8-0.4-1.2-0.4v-0.7c0.4,0.1,0.8,0.2,1.2,0.4c0.6,0.3,1,0.7,1.3,1.2s0.4,1.1,0.4,1.7v1.4c0,0.3-0.1,0.5-0.2,0.7
s-0.3,0.2-0.5,0.2s-0.3-0.1-0.5-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.3-0.2-0.4-0.4s-0.3-0.3-0.4-0.5
s-0.2-0.4-0.3-0.6C390.2,448.1,390.2,447.8,390.2,447.5z M390.8,447.9c0,0.6,0.4,1.1,1.1,1.5l0,0c0.7,0.4,1.1,0.3,1.1-0.3v-0.9
c-0.2-0.1-0.4-0.3-0.7-0.5C391.3,447.2,390.8,447.3,390.8,447.9z"/>
<path class="analytics10" d="M394.4,451.4V447c0.6,0.1,1.3,0.3,2,0.7v0.6c-0.4-0.3-0.9-0.4-1.4-0.5v3.9L394.4,451.4z"/>
<path class="analytics10" d="M396.7,448l0.6,0.3l1.1,4.4l1.2-3.1l0.6,0.3l-1.7,4.3c-0.3,0.8-0.7,1-1.3,0.6c-0.1-0.1-0.3-0.2-0.4-0.3V454
c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.2,0.1,0.3,0c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.1-0.2,0.1-0.3v-0.1
L396.7,448z"/>
<path class="analytics15" d="M250.8,345.8c0-0.6,0.2-1.1,0.5-1.4s0.9-0.2,1.7,0.1v-1.4l0.6,0.3v1.4c0.6,0.4,1.2,0.9,1.8,1.6v1
c-0.6-0.7-1.1-1.2-1.8-1.6v3.1c0.3,0.3,0.6,0.6,0.8,0.9s0.4,0.5,0.7,0.9c0.3,0.3,0.4,0.7,0.5,1.1s0.2,0.8,0.2,1.2
c0,0.7-0.2,1.1-0.6,1.3c-0.4,0.2-1,0.1-1.7-0.2v1.4l-0.6-0.3v-1.4c-0.8-0.5-1.5-1.1-2.1-1.9v-1.1c0.6,0.8,1.3,1.5,2.1,2v-3.5
c-0.3-0.3-0.5-0.5-0.7-0.6s-0.3-0.3-0.6-0.6c-0.2-0.3-0.4-0.5-0.5-0.7s-0.2-0.5-0.3-0.8C250.8,346.3,250.8,346,250.8,345.8z
M251.6,346.2c0,0.3,0.1,0.7,0.3,1s0.6,0.7,1,1.1v-2.9C252.1,345.1,251.6,345.4,251.6,346.2z M253.6,353.2c1,0.4,1.4,0.2,1.4-0.6
c0-0.5-0.1-0.9-0.4-1.3c-0.3-0.4-0.6-0.8-1.1-1.3L253.6,353.2L253.6,353.2z"/>
<path class="analytics15" d="M257.3,351.3l0.4-4l4,2.3v1l-3.3-1.9l-0.2,2.6c0.4,0.1,1,0.3,1.5,0.6c0.3,0.2,0.6,0.4,0.9,0.6
s0.5,0.5,0.8,0.9c0.3,0.3,0.4,0.8,0.6,1.2c0.2,0.5,0.2,1,0.2,1.6c0,0.5-0.1,1-0.2,1.3c-0.2,0.3-0.3,0.5-0.6,0.5
c-0.3,0.1-0.5,0.1-0.8,0s-0.5-0.2-0.9-0.4c-0.9-0.5-1.6-1.1-2.2-1.8v-1c0.6,0.7,1.3,1.4,2.2,1.9c0.3,0.2,0.6,0.3,0.8,0.3
c0.2,0,0.4,0,0.5,0c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.2,0.1-0.3,0.1-0.4s0-0.3,0-0.5c0-0.4,0-0.8-0.1-1.1c-0.1-0.3-0.2-0.6-0.4-0.8
c-0.2-0.2-0.3-0.4-0.5-0.5c-0.2-0.2-0.4-0.3-0.6-0.4c-0.3-0.2-0.7-0.4-1-0.5s-0.5-0.2-0.6-0.2H258L257.3,351.3z"/>
<path class="analytics15" d="M266.5,361.7c-2-1.2-3.1-3.3-3.1-6.4s1-4.1,3.1-2.9c2,1.2,3.1,3.3,3.1,6.4
C269.6,361.9,268.6,362.8,266.5,361.7z M264.3,355.7c0,0.6,0,1.2,0.1,1.7s0.2,1,0.3,1.3c0.1,0.3,0.3,0.7,0.5,0.9
c0.2,0.3,0.4,0.5,0.6,0.6s0.4,0.3,0.6,0.4s0.4,0.2,0.6,0.3c0.2,0.1,0.4,0.1,0.6,0s0.4-0.2,0.5-0.3c0.1-0.2,0.3-0.5,0.3-0.9
s0.1-1,0.1-1.6c0-0.8-0.1-1.5-0.2-2.1s-0.3-1.1-0.5-1.5s-0.5-0.7-0.7-0.9c-0.2-0.2-0.5-0.4-0.8-0.6s-0.6-0.3-0.8-0.3
s-0.4,0-0.7,0.1c-0.2,0.1-0.4,0.4-0.5,0.9C264.4,354.3,264.3,354.9,264.3,355.7z"/>
<path class="analytics15" d="M271,359.2l0.4-4l4,2.3v1l-3.3-1.9l-0.2,2.6c0.4,0.1,1,0.3,1.5,0.6c0.3,0.2,0.6,0.4,0.9,0.6s0.5,0.5,0.8,0.9
c0.3,0.3,0.4,0.8,0.6,1.2c0.2,0.5,0.2,1,0.2,1.6c0,0.5-0.1,1-0.2,1.3c-0.2,0.3-0.3,0.5-0.6,0.5c-0.3,0-0.5,0.1-0.8,0
s-0.5-0.2-0.9-0.4c-0.9-0.5-1.6-1.1-2.2-1.8v-1c0.6,0.7,1.3,1.4,2.2,1.9c0.3,0.2,0.6,0.3,0.8,0.3s0.4,0,0.5,0
c0.1-0.1,0.2-0.2,0.3-0.3s0.1-0.3,0.1-0.4s0-0.3,0-0.5c0-0.4,0-0.8-0.1-1.1s-0.2-0.6-0.4-0.8c-0.2-0.2-0.3-0.4-0.5-0.5
c-0.2-0.2-0.4-0.3-0.6-0.4c-0.3-0.2-0.7-0.4-1-0.5s-0.5-0.2-0.6-0.2h-0.2L271,359.2z"/>
<path class="analytics15" d="M277.5,367.9v-1.1l0.8,0.5v1.1L277.5,367.9z"/>
<path class="analytics15" d="M283,371.2c-2-1.2-3.1-3.3-3.1-6.4s1-4.1,3.1-2.9c2,1.2,3.1,3.3,3.1,6.4S285.1,372.4,283,371.2z M280.8,365.2
c0,0.6,0,1.2,0.1,1.7s0.2,1,0.3,1.3c0.1,0.3,0.3,0.7,0.5,0.9c0.2,0.3,0.4,0.5,0.6,0.6c0.2,0.2,0.4,0.3,0.6,0.4s0.4,0.2,0.6,0.3
c0.2,0.1,0.4,0.1,0.6,0c0.2,0,0.4-0.2,0.5-0.3c0.1-0.2,0.3-0.5,0.3-0.9c0.1-0.4,0.1-1,0.1-1.6c0-0.8-0.1-1.5-0.2-2.1
s-0.3-1.1-0.5-1.5s-0.5-0.7-0.7-0.9c-0.2-0.2-0.5-0.4-0.8-0.6s-0.6-0.3-0.8-0.3c-0.2,0-0.4,0-0.7,0.1c-0.2,0.1-0.4,0.4-0.5,0.9
C280.9,363.8,280.8,364.5,280.8,365.2z"/>
<path class="analytics15" d="M286.9,370.6v-1l3.7-3.2l1,0.5v5.5l1.1,0.6v0.9l-1.1-0.6v2.7l-0.8-0.5v-2.7L286.9,370.6z M287.9,370.2
l2.8,1.6v-4L287.9,370.2z"/>
<path class="analytics12" d="M252.1,368.7v-6.4l3.3,1.9v0.6l-2.7-1.6v2.2l2.4,1.4v0.7l-2.4-1.4v2.9L252.1,368.7z"/>
<path class="analytics12" d="M255.8,368.5L255.8,368.5L255.8,368.5c0-1.7,0.6-2.2,1.8-1.5c0.3,0.1,0.5,0.3,0.7,0.5s0.3,0.4,0.5,0.6
c0.1,0.2,0.2,0.4,0.3,0.7c0.1,0.3,0.2,0.4,0.2,0.6s0.1,0.3,0.1,0.6c0,0.2,0,0.3,0,0.4v0.2v0.3l-3-1.7c0,0.5,0.2,0.9,0.4,1.3
c0.2,0.3,0.5,0.6,1,0.9c0.6,0.3,1,0.5,1.4,0.4v0.7c-0.4,0-0.9-0.2-1.4-0.5l0,0c-0.2-0.1-0.4-0.3-0.6-0.5s-0.4-0.4-0.6-0.7
c-0.2-0.3-0.3-0.6-0.4-1C255.8,369.4,255.8,369,255.8,368.5z M256.3,368.6l2.4,1.4c0-0.1,0-0.2,0-0.4c0-0.2-0.1-0.3-0.1-0.6
c-0.1-0.3-0.2-0.5-0.3-0.7c-0.2-0.3-0.4-0.4-0.7-0.6c-0.4-0.2-0.7-0.3-0.9-0.1C256.5,367.7,256.4,368,256.3,368.6z"/>
<path class="analytics12" d="M260.1,371.9v-5.2l0.6,0.3v1.9c0.3,0.1,0.7,0.2,1,0.4c0.2,0.1,0.3,0.2,0.5,0.3s0.3,0.3,0.5,0.5
s0.3,0.4,0.4,0.7c0.1,0.3,0.2,0.5,0.3,0.9c0.1,0.3,0.1,0.7,0.1,1.1s0,0.8-0.1,1c-0.1,0.3-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.2-0.4,0.2
s-0.3,0-0.5-0.1s-0.3-0.1-0.4-0.2c-0.3-0.2-0.5-0.3-0.8-0.6c-0.2-0.2-0.4-0.4-0.5-0.6s-0.2-0.3-0.3-0.5c-0.1-0.2-0.1-0.3-0.1-0.4
C260.1,372.1,260.1,372,260.1,371.9z M260.7,372.2c0,0.6,0.3,1,1.1,1.5c0.2,0.1,0.3,0.2,0.4,0.2s0.3,0,0.4,0s0.2-0.2,0.3-0.4
c0.1-0.2,0.1-0.5,0.1-1c0-0.6-0.1-1.1-0.3-1.5c-0.2-0.4-0.5-0.7-1-1c-0.3-0.2-0.7-0.3-1-0.3V372.2L260.7,372.2z"/>
<path class="analytics12" d="M264.3,375.7v-4.4c0.6,0.1,1.3,0.3,2,0.7v0.6c-0.4-0.3-0.9-0.4-1.4-0.5v3.9L264.3,375.7z"/>
<path class="analytics12" d="M266.8,375.2v-2.8l0.6,0.3v2.8c0,0.5,0.1,0.9,0.3,1.2c0.2,0.3,0.4,0.6,0.8,0.8c0.4,0.2,0.7,0.3,0.8,0.2
c0.2-0.1,0.3-0.4,0.3-0.9V374l0.6,0.3v2.8c0,0.7-0.2,1.1-0.4,1.3c-0.3,0.2-0.7,0.1-1.2-0.2c-0.5-0.3-1-0.7-1.2-1.3
C267,376.4,266.8,375.8,266.8,375.2z"/>
<path class="analytics12" d="M270.9,378.1c0-0.2,0-0.4,0.1-0.5s0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.1s0.3,0,0.4,0.1s0.3,0.1,0.4,0.2
s0.3,0.1,0.3,0.2c0.1,0,0.2,0.1,0.3,0.1l0.6,0.4c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.6-0.9-0.8c-0.4-0.3-0.8-0.4-1.2-0.4v-0.7
c0.4,0.1,0.8,0.2,1.2,0.4c0.6,0.3,1,0.7,1.3,1.2s0.4,1.1,0.4,1.7v1.4c0,0.3-0.1,0.5-0.2,0.7s-0.3,0.2-0.5,0.2s-0.3-0.1-0.5-0.1
c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.3-0.2-0.4-0.4s-0.3-0.3-0.4-0.5s-0.2-0.4-0.3-0.6
C270.9,378.6,270.9,378.4,270.9,378.1z M271.5,378.4c0,0.6,0.4,1.1,1.1,1.5l0,0c0.7,0.4,1.1,0.3,1.1-0.3v-0.9
c-0.2-0.1-0.4-0.3-0.7-0.5C272,377.8,271.5,377.8,271.5,378.4z"/>
<path class="analytics12" d="M275.1,382v-4.4c0.6,0.1,1.3,0.3,2,0.7v0.6c-0.4-0.3-0.9-0.4-1.4-0.5v3.9L275.1,382z"/>
<path class="analytics12" d="M277.4,378.6l0.6,0.3l1.1,4.4l1.2-3.1l0.6,0.3l-1.7,4.3c-0.3,0.8-0.7,1-1.3,0.6c-0.1-0.1-0.3-0.2-0.4-0.3
v-0.6c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.2,0.1,0.3,0c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.1-0.2,0.1-0.3v-0.1
L277.4,378.6z"/>
<path class="analytics15" d="M131.6,277.7c0-0.6,0.2-1.1,0.5-1.4s0.9-0.2,1.7,0.1V275l0.6,0.3v1.4c0.6,0.4,1.2,0.9,1.8,1.6v1
c-0.6-0.7-1.1-1.2-1.8-1.6v3.1c0.3,0.3,0.6,0.6,0.8,0.9s0.4,0.5,0.7,0.9c0.3,0.3,0.4,0.7,0.5,1.1s0.2,0.8,0.2,1.2
c0,0.7-0.2,1.1-0.6,1.3c-0.4,0.2-1,0.1-1.7-0.2v1.4l-0.6-0.3v-1.4c-0.8-0.5-1.5-1.1-2.1-1.9v-1.1c0.6,0.8,1.3,1.5,2.1,2v-3.5
c-0.3-0.3-0.5-0.5-0.7-0.6c-0.2-0.2-0.3-0.3-0.6-0.6c-0.2-0.3-0.4-0.5-0.5-0.7s-0.2-0.5-0.3-0.8C131.6,278.3,131.6,278,131.6,277.7
z M132.4,278.2c0,0.3,0.1,0.7,0.3,1s0.6,0.7,1,1.1v-2.9C132.9,277.1,132.4,277.4,132.4,278.2z M134.4,285.1c1,0.4,1.4,0.2,1.4-0.6
c0-0.5-0.1-0.9-0.4-1.3c-0.3-0.4-0.6-0.8-1.1-1.3L134.4,285.1L134.4,285.1z"/>
<path class="analytics15" d="M137.5,279.7v-1l5.3,3.1v0.9l-3.3,6.3l-0.9-0.5l3.4-6.2L137.5,279.7z"/>
<path class="analytics15" d="M143.9,291.1v-1c0.6,0.8,1.3,1.3,2,1.7s1.2,0.5,1.6,0.4c0.3-0.1,0.5-0.4,0.5-1s-0.2-1.1-0.5-1.6
c-0.4-0.5-0.9-1-1.6-1.4l-0.9-0.5v-1l0.9,0.5c0.6,0.3,1,0.4,1.3,0.4c0.3-0.1,0.4-0.3,0.4-0.8s-0.2-0.9-0.5-1.4s-0.8-0.8-1.4-1.2
c-0.6-0.3-1.1-0.5-1.7-0.5v-1c0.5,0,1.1,0.2,1.7,0.5l0,0c0.9,0.5,1.5,1.1,1.9,1.8c0.4,0.7,0.6,1.4,0.6,2.1c0,0.8-0.3,1.2-0.8,1.2
h-0.2c0,0,0.1,0.1,0.2,0.2s0.2,0.2,0.3,0.4s0.3,0.5,0.4,0.7c0.1,0.2,0.2,0.5,0.3,0.9c0.1,0.3,0.2,0.7,0.2,1s-0.1,0.6-0.2,0.9
c-0.1,0.3-0.3,0.4-0.5,0.6c-0.2,0.1-0.5,0.2-0.9,0.1s-0.8-0.3-1.3-0.5C145.3,292.4,144.6,291.8,143.9,291.1z"/>
<path class="analytics15" d="M150.4,294.8v-1c0.6,0.8,1.3,1.3,2,1.7c0.7,0.4,1.2,0.5,1.6,0.4c0.3-0.1,0.5-0.4,0.5-1s-0.2-1.1-0.5-1.6
c-0.4-0.5-0.9-1-1.6-1.4l-0.9-0.5v-1l0.9,0.5c0.6,0.3,1,0.4,1.3,0.4c0.3-0.1,0.4-0.3,0.4-0.8s-0.2-0.9-0.5-1.4
c-0.3-0.4-0.8-0.8-1.4-1.2c-0.6-0.3-1.1-0.5-1.7-0.5v-1c0.5,0,1.1,0.2,1.7,0.5l0,0c0.9,0.5,1.5,1.1,1.9,1.8
c0.4,0.7,0.6,1.4,0.6,2.1c0,0.8-0.3,1.2-0.8,1.2h-0.2c0,0,0.1,0.1,0.2,0.2c0.1,0.1,0.2,0.2,0.3,0.4c0.2,0.2,0.3,0.5,0.4,0.7
c0.1,0.2,0.2,0.5,0.3,0.9c0.1,0.3,0.2,0.7,0.2,1s-0.1,0.6-0.2,0.9c-0.1,0.3-0.3,0.4-0.5,0.6c-0.2,0.1-0.5,0.2-0.9,0.1
s-0.8-0.3-1.3-0.5S151,295.5,150.4,294.8z"/>
<path class="analytics15" d="M156.7,298.9v-1.1l0.8,0.5v1.1L156.7,298.9z"/>
<path class="analytics15" d="M159.3,300.4v-0.9c0.4-0.1,0.8-0.3,1.2-0.4c0.4-0.2,0.8-0.4,1.3-0.7c0.4-0.3,0.8-0.6,1.1-1s0.4-0.9,0.4-1.3
c0-1-0.6-1.9-1.8-2.6c-0.7-0.4-1.4-0.5-2-0.4V292c0.6-0.1,1.3,0.1,2.1,0.5c0.9,0.5,1.5,1.1,1.9,1.9c0.4,0.7,0.6,1.5,0.6,2.2
c0,0.5-0.1,1-0.3,1.4s-0.5,0.8-0.9,1.1c-0.3,0.3-0.7,0.5-1.1,0.8c-0.3,0.2-0.7,0.4-1.1,0.5l3.5,2v1L159.3,300.4z"/>
<path class="analytics15" d="M165,301v-1l3.7-3.2l1,0.5v5.4l1.1,0.6v0.9l-1.1-0.6v2.7l-0.8-0.5v-2.7L165,301z M165.9,300.6l2.8,1.6v-4
L165.9,300.6z"/>
<path class="analytics14" d="M132.9,300.7v-6.4l0.6,0.4l1.8,4.3l1.9-2.2l0.6,0.4v6.4l-0.6-0.3V298l-1.9,2.1l-1.9-4.4v5.2L132.9,300.7z"/>
<path class="analytics14" d="M138.8,302.6c0-0.2,0-0.4,0.1-0.5s0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.1s0.3,0,0.4,0.1
c0.1,0,0.3,0.1,0.4,0.2c0.2,0.1,0.3,0.1,0.3,0.2c0.1,0,0.2,0.1,0.3,0.1l0.6,0.4c0-0.4-0.1-0.8-0.3-1.1s-0.5-0.6-0.9-0.8
c-0.4-0.3-0.8-0.4-1.2-0.4v-0.7c0.4,0.1,0.8,0.2,1.2,0.4c0.6,0.3,1,0.7,1.3,1.2s0.4,1.1,0.4,1.7v1.4c0,0.3-0.1,0.5-0.2,0.7
c-0.1,0.2-0.3,0.2-0.5,0.2s-0.3-0.1-0.5-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.3-0.2-0.4-0.3s-0.3-0.2-0.4-0.4
c-0.2-0.2-0.3-0.3-0.4-0.5s-0.2-0.4-0.3-0.6C138.8,303.1,138.8,302.9,138.8,302.6z M139.4,303c0,0.6,0.4,1.1,1.1,1.5l0,0
c0.7,0.4,1.1,0.3,1.1-0.3v-0.9c-0.2-0.1-0.4-0.3-0.7-0.5C139.9,302.3,139.4,302.4,139.4,303z"/>
<path class="analytics14" d="M143,306.5v-4.4c0.6,0.1,1.3,0.3,2,0.7v0.6c-0.4-0.3-0.9-0.4-1.4-0.5v3.9L143,306.5z"/>
<path class="analytics14" d="M145.3,305.5c0-0.5,0.1-0.9,0.2-1.1c0.1-0.3,0.3-0.4,0.5-0.5s0.4-0.1,0.6,0c0.2,0,0.4,0.1,0.7,0.3
c0.4,0.2,0.8,0.5,1.2,1v0.6c-0.4-0.4-0.7-0.7-1.1-0.9c-0.5-0.3-0.8-0.3-1-0.2c-0.2,0.2-0.3,0.5-0.3,1.2c0,0.6,0.1,1.2,0.3,1.6
s0.6,0.8,1,1s0.8,0.3,1.1,0.4v0.7c-0.4,0-0.8-0.2-1.2-0.4c-0.2-0.1-0.4-0.2-0.5-0.3c-0.2-0.1-0.3-0.3-0.5-0.5s-0.3-0.4-0.4-0.7
c-0.1-0.3-0.2-0.5-0.3-0.9C145.4,306.2,145.3,305.9,145.3,305.5z"/>
<path class="analytics14" d="M149.1,310.1v-6.6l0.6,0.3v2c0.4,0,0.8,0.2,1.2,0.4c0.5,0.3,0.9,0.7,1.1,1.2c0.3,0.5,0.4,1.1,0.4,1.7v2.8
l-0.6-0.3v-2.8c0-0.9-0.3-1.5-1-1.9c-0.4-0.2-0.8-0.3-1.1-0.4v3.9L149.1,310.1z"/>
</g>
<g>
<circle class="analytics23" cx="38.8" cy="76.8" r="7"/>
<circle class="analytics23" cx="511.8" cy="465.8" r="5"/>
<circle class="analytics24" cx="130.8" cy="470.8" r="10"/>
<circle class="analytics25" cx="480.8" cy="69.8" r="10"/>
</g>
</svg>
</div>

It is possible to keep the text unflipped, but you probably do not want that. Be that as it may, you can keep a part of a figure grouped and transformed independently. In the example below, I added a group (g) with id="noflip". You can then undo the transformation in that group. But in that case, it is not aligned with the rest. For the effect I believe you want, you also need to skew it:
<style>
#analytics-dashboard{
display: block;
margin: auto;
}
.analytics{
-webkit-transform: scaleX(1);
transform: scaleX(-1);
}
#noflip{
transform: scaleX(-1) skew(0, -50deg);
transform-origin: center;
}
.small-piece{
transform: translate(-95px);
opacity: 0;
animation: intoplace2 1s ease forwards;
}
#keyframes intoplace2{
0%{
transform: translate(-95px);
opacity: 0;
}
50%{
opacity: 0;
}
100%{
transform: translate(0px);
opacity: 1;
}
}
.large-piece{
transform: translate(-40px);
opacity: 0;
animation: intoplace1 1s ease forwards;
}
#keyframes intoplace1{
0%{
transform: translate(-60px);
opacity: 0;
}
35%{
opacity: 0;
}
100%{
transform: translate(0px);
opacity: 1;
}
}
.restart{
display: block;
margin: auto;
}
.analytics0{fill:#D3D3D3;}
.analytics1{fill:#828282;}
.analytics2{fill:#B0B0B0;}
.analytics3{fill:#EAEAEB;}
.analytics4{fill:#F6F6F7;}
.analytics5{opacity:0.7;fill:url(#SVGID_1_);enable-background:new ;}
.analytics6{fill:#373737;}
.analytics7{opacity:0.6;fill:url(#SVGID_2_);enable-background:new ;}
.analytics8{opacity:0.5;fill:url(#SVGID_3_);enable-background:new ;}
.analytics9{opacity:0.3;fill:#F1CF32;enable-background:new ;}
.analytics10{fill:#F1CF32;}
.analytics11{opacity:0.3;fill:#E9B231;enable-background:new ;}
.analytics12{fill:#E9B231;}
.analytics13{opacity:0.3;fill:#DB822E;enable-background:new ;}
.analytics14{fill:#DB822E;}
.analytics15{fill:#FFFFFF;}
.analytics16{fill:#D1D1D1;}
.analytics17{fill:#959595;}
.analytics18{fill:#AEAEAE;}
.analytics19{fill:#E9E9E9;}
.analytics20{fill:#D9812D;}
.analytics21{opacity:0.5;fill:#D8802E;enable-background:new ;}
.analytics22{fill:#D8802E;}
.analytics23{fill:none;stroke:#FFB502;stroke-width:2;stroke-miterlimit:10;}
.analytics24{fill:none;stroke:#FF8403;stroke-width:4;stroke-miterlimit:10;}
.analytics25{fill:none;stroke:#FFD100;stroke-width:4;stroke-miterlimit:10;}
</style>
<div class="analytics">
<svg version="1.1" id="analytics-dashboard" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="550px" height="524px" viewBox="0 0 550 524" style="enable-background:new 0 0 550 524;"
xml:space="preserve">
<g class="large-piece">
<path class="analytics0" d="M115.2,3.5l9.7-3.1c2.2-0.7,4.5-0.4,6.5,0.7l345.3,199.4c1.5,0.9,2.7,2.1,3.5,3.5l-8.3,4.8l0,0L115.2,3.5z"/>
<path class="analytics1" d="M481.4,208.6v304.6c0,2.3-1.2,4.3-3.1,5.5l-7.9,4.7l1.5-314.7l8.3-4.8C480.9,205.3,481.4,207,481.4,208.6z"/>
<path class="analytics2" d="M476.7,200.4c1.5,0.9,2.7,2.1,3.5,3.5s1.2,3,1.2,4.7v1.7l-7.8,3.4h-11.2l4.5-10l7.6-4.5L476.7,200.4z"/>
<path class="analytics3" d="M111.9,309.8l361.7,208.8V215.4c0-4.8-2.5-9.2-6.7-11.6L120.5,3.8c-3.8-2.2-8.6,0.6-8.6,5V309.8z"/>
<polygon class="analytics4" points="111.9,82 473.6,290.8 473.6,290 111.9,81.2 "/>
<polygon class="analytics4" points="111.9,106.3 473.6,315.2 473.6,314.4 111.9,105.5 "/>
<polygon class="analytics4" points="111.9,130.7 473.6,339.5 473.6,338.7 111.9,129.9 "/>
<polygon class="analytics4" points="111.9,155 473.6,363.9 473.6,363.1 111.9,154.2 "/>
<polygon class="analytics4" points="111.9,179.4 473.6,388.2 473.6,387.4 111.9,178.6 "/>
<polygon class="analytics4" points="111.9,203.7 473.6,412.5 473.6,411.7 111.9,202.9 "/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1492.1595" y1="1252.473" x2="1428.5929" y2="1362.5734" gradientTransform="matrix(-1 0 0 -1 1765.928 1574)">
<stop offset="0" style="stop-color:#DB822E"/>
<stop offset="1" style="stop-color:#F1CF32"/>
</linearGradient>
<path class="analytics5" d="M473.6,388.2c0,0-3.1,8.3-17.8-0.2c-14.8-8.5-21.2-44.6-46-59c-24.8-14.3-20.1-1-34.3-9.6
c-14.2-8.6-20.7-73.5-36.6-82.7c-16-9.2-21.3,48.4-46.1,35c-24.8-13.4-39-108.5-60.3-120.8s-44,80.8-63.8,76.5
c-40.6-8.8-56.8-87-56.8-87v86.9l361.7,209.6L473.6,388.2L473.6,388.2z"/>
<path class="analytics6" d="M118.6,323.2l346.4,200c3.8,2.2,8.6-0.5,8.6-4.9v-83L111.9,226.5v85.1C111.9,316.4,114.4,320.8,118.6,323.2z"
/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1488.6642" y1="1252.1271" x2="1436.686" y2="1342.1558" gradientTransform="matrix(-1 0 0 -1 1765.928 1574)">
<stop offset="0" style="stop-color:#DB822E"/>
<stop offset="1" style="stop-color:#F1CF32"/>
</linearGradient>
<path class="analytics7" d="M473.6,418.7c0,0-26.9-22.8-42.5-60.7s-32.5-56.1-49.4-65.8c-22.2-12.7-36.3,6.4-58.5-5.5
s-26.6-73.7-40.8-81.9c-14.2-8.2-17.7,82.2-37.2,73s-21.3-61.1-44.3-76.5s-21.6,27.2-42.9,15.9c-21.2-11.2-46.1-62.3-46.1-62.3
v71.5l361.7,208.8L473.6,418.7L473.6,418.7z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1460.4933" y1="1235.7115" x2="1437.0006" y2="1276.4022" gradientTransform="matrix(-1 0 0 -1 1765.928 1574)">
<stop offset="0" style="stop-color:#F1CF32"/>
<stop offset="1" style="stop-color:#DB822E"/>
</linearGradient>
<g id='noflip'>
<path class="analytics12" d="M300.3,386.4L300.3,386.4L300.3,386.4L300.3,386.4L300.3,386.4L300.3,386.4c0.1,10.3,6.3,23,14.9,30
c4.5,3.6,9,5.2,12.8,4.8l-0.7-1.7c-4.3,0.4-9.6-2-14.4-6.8c-6.8-6.8-11.2-17.1-11.3-25.5c0.1-9.5,5.8-14.6,13.8-11.9
c0.9,0.3,1.8,0.7,2.7,1.2V375c-1.9-1-3.9-1.7-5.8-2C305.1,371.9,300.4,377.4,300.3,386.4z M301.6,387.1L301.6,387.1
c0-1-1.3-1.7-1.3-0.7l0,0C300.3,385.4,301.6,386.1,301.6,387.1z"/>
<path class="analytics13" d="M180.4,316.1c0.1,10.3,6.3,23,14.9,30c7.5,6,15.3,6.5,19.3,1.1c4-5.5,3.4-16-1.5-25.9s-13.4-17.6-20.7-18.6
C185.2,301.7,180.5,307.1,180.4,316.1z M181.7,316.9c0.1-9.5,5.8-14.6,13.8-11.9c7.1,2.4,14.4,10.5,18.1,19.9
c3.7,9.4,3.1,18.6-1.6,22.4c-4.6,3.8-12.3,1.8-19.1-5C186.2,335.6,181.7,325.3,181.7,316.9z"/>
<path class="analytics14" d="M192.5,302.7c1.9,0.3,3.8,1,5.8,2v1.5c-0.9-0.5-1.9-0.9-2.8-1.2c-8-2.7-13.7,2.4-13.8,11.9
c0.1,8.5,4.5,18.7,11.3,25.5c6.7,6.8,14.5,8.8,19.1,5c3.9-3.2,5-10.3,3-18.1l1.2,0.2c1.8,7.1,1.4,13.8-1.6,17.7
c-4,5.4-11.8,4.9-19.3-1.1c-8.6-6.9-14.9-19.7-14.9-30C180.5,307.1,185.2,301.7,192.5,302.7z"/>
<path class="analytics10" d="M436.9,466.7c-1.6-0.9-2.4-2.5-2.4-5s0.8-3.1,2.4-2.2s2.4,2.5,2.4,5C439.3,466.9,438.5,467.6,436.9,466.7z
M435.2,462.1c0,0.5,0,1,0.1,1.3c0.1,0.4,0.2,0.7,0.3,1c0.1,0.3,0.3,0.5,0.4,0.7c0.2,0.2,0.3,0.4,0.4,0.5s0.3,0.2,0.5,0.3
c0.2,0.1,0.3,0.2,0.5,0.2c0.1,0,0.3,0.1,0.4,0c0.2,0,0.3-0.1,0.4-0.3c0.1-0.1,0.2-0.4,0.3-0.7c0.1-0.3,0.1-0.7,0.1-1.2
c0-0.6-0.1-1.1-0.2-1.6s-0.2-0.9-0.4-1.1c-0.2-0.3-0.3-0.5-0.5-0.7s-0.4-0.3-0.6-0.4s-0.4-0.2-0.6-0.3c-0.2,0-0.3,0-0.5,0.1
s-0.3,0.3-0.4,0.7C435.3,461.1,435.2,461.5,435.2,462.1z"/>
<path class="analytics10" d="M440.2,463.5c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4c0.1-0.1,0.3-0.1,0.4,0c0.1,0,0.3,0.1,0.4,0.2
c0.3,0.2,0.7,0.5,0.9,1c0.3,0.4,0.4,1,0.4,1.7c0,0.4,0,0.7-0.1,0.9c-0.1,0.2-0.2,0.3-0.3,0.4c-0.1,0.1-0.3,0.1-0.4,0.1
s-0.3-0.1-0.4-0.2c-0.2-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.3-0.3-0.4-0.5s-0.3-0.5-0.3-0.8C440.2,464.2,440.2,463.9,440.2,463.5z
M440.9,462.7c-0.1,0.1-0.2,0.4-0.2,1c0,0.5,0.1,1,0.2,1.2s0.3,0.5,0.6,0.6c0.3,0.1,0.4,0.2,0.6,0.1s0.2-0.4,0.2-1s-0.1-1-0.2-1.2
c-0.2-0.3-0.3-0.5-0.6-0.6C441.3,462.7,441.1,462.6,440.9,462.7z M441.3,469.1l3.8-4.9l0.6,0.3l-3.8,4.9L441.3,469.1z M444.2,469.8
c-0.1-0.3-0.1-0.7-0.1-1c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4c0.1-0.1,0.3-0.1,0.4-0.1s0.3,0.1,0.4,0.2s0.3,0.2,0.4,0.3
c0.1,0.1,0.3,0.3,0.4,0.5s0.2,0.5,0.3,0.8c0.1,0.3,0.1,0.7,0.1,1c0,0.4,0,0.7-0.1,0.9c-0.1,0.2-0.2,0.3-0.3,0.4
c-0.1,0.1-0.3,0.1-0.4,0.1s-0.3-0.1-0.4-0.2s-0.3-0.2-0.4-0.3c-0.1-0.1-0.3-0.3-0.4-0.5C444.4,470.4,444.3,470.2,444.2,469.8z
M444.8,468.1c-0.2,0.1-0.2,0.4-0.2,1c0,0.5,0.1,1,0.2,1.2s0.3,0.5,0.6,0.6c0.3,0.1,0.4,0.2,0.6,0.1s0.2-0.4,0.2-1s-0.1-1-0.2-1.2
c-0.2-0.3-0.3-0.5-0.6-0.6C445.2,468,445,468,444.8,468.1z"/>
<path class="analytics10" d="M310.1,392.2l0.3-3.1l3.1,1.8v0.7l-2.5-1.5l-0.2,2c0.3,0.1,0.7,0.3,1.2,0.5c0.3,0.1,0.5,0.3,0.7,0.5
s0.4,0.4,0.6,0.7c0.2,0.3,0.3,0.6,0.5,1c0.1,0.4,0.2,0.8,0.2,1.2c0,0.4-0.1,0.8-0.2,1c-0.1,0.3-0.3,0.4-0.5,0.4s-0.4,0-0.6,0
c-0.2-0.1-0.4-0.2-0.7-0.3c-0.7-0.4-1.3-0.9-1.7-1.4v-0.8c0.4,0.6,1,1,1.7,1.4c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0,0.3,0,0.4,0
s0.2-0.1,0.2-0.2c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.3,0-0.4c0-0.3,0-0.6-0.1-0.9s-0.2-0.4-0.3-0.6c-0.1-0.2-0.3-0.3-0.4-0.4
s-0.3-0.2-0.5-0.3c-0.3-0.2-0.5-0.3-0.8-0.3c-0.2-0.1-0.4-0.1-0.5-0.1h-0.2L310.1,392.2z"/>
<path class="analytics10" d="M315.1,395.1l0.3-3.1l3.1,1.8v0.7L316,393l-0.2,2c0.3,0.1,0.7,0.3,1.2,0.5c0.3,0.1,0.5,0.3,0.7,0.5
s0.4,0.4,0.6,0.7c0.2,0.3,0.3,0.6,0.5,1c0.1,0.4,0.2,0.8,0.2,1.2s-0.1,0.8-0.2,1c-0.1,0.3-0.3,0.4-0.5,0.4s-0.4,0-0.6,0
c-0.2-0.1-0.4-0.2-0.7-0.3c-0.7-0.4-1.3-0.9-1.7-1.4v-0.8c0.4,0.6,1,1,1.7,1.4c0.2,0.1,0.4,0.2,0.6,0.3c0.2,0,0.3,0,0.4,0
s0.2-0.1,0.2-0.2c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.3,0-0.4c0-0.3,0-0.6-0.1-0.9s-0.2-0.4-0.3-0.6c-0.1-0.2-0.3-0.3-0.4-0.4
s-0.3-0.2-0.5-0.3c-0.3-0.2-0.5-0.3-0.8-0.3c-0.2-0.1-0.4-0.1-0.5-0.1h-0.2L315.1,395.1z"/>
<path class="analytics10" d="M319.9,396.6c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4s0.3-0.1,0.4,0c0.1,0,0.3,0.1,0.4,0.2
c0.3,0.2,0.7,0.5,0.9,1c0.3,0.4,0.4,1,0.4,1.7c0,0.4,0,0.7-0.1,0.9c-0.1,0.2-0.2,0.3-0.3,0.4c-0.1,0.1-0.3,0.1-0.4,0.1
s-0.3-0.1-0.4-0.2s-0.3-0.2-0.4-0.3s-0.3-0.3-0.4-0.5s-0.3-0.5-0.3-0.8C320,397.3,319.9,397,319.9,396.6z M320.6,395.9
c-0.1,0.1-0.2,0.4-0.2,1s0.1,1,0.2,1.2s0.3,0.5,0.6,0.6c0.3,0.1,0.4,0.2,0.6,0.1s0.2-0.4,0.2-1c0-0.5-0.1-1-0.2-1.2
s-0.3-0.5-0.6-0.6C321,395.8,320.8,395.8,320.6,395.9z M321,402.3l3.8-4.9l0.6,0.3l-3.8,4.9L321,402.3z M324,403
c-0.1-0.3-0.1-0.7-0.1-1c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4c0.1-0.1,0.3-0.1,0.4-0.1s0.3,0.1,0.4,0.2
c0.2,0.1,0.3,0.2,0.4,0.3c0.1,0.1,0.3,0.3,0.4,0.5s0.2,0.5,0.3,0.8c0.1,0.3,0.1,0.7,0.1,1c0,0.4,0,0.7-0.1,0.9
c-0.1,0.2-0.2,0.3-0.3,0.4c-0.1,0.1-0.3,0.1-0.4,0.1s-0.3-0.1-0.4-0.2c-0.2-0.1-0.3-0.2-0.4-0.3s-0.3-0.3-0.4-0.5
C324.1,403.5,324,403.3,324,403z M324.6,401.2c-0.2,0.1-0.2,0.4-0.2,1s0.1,1,0.2,1.2s0.3,0.5,0.6,0.6c0.3,0.1,0.4,0.2,0.6,0.1
s0.2-0.4,0.2-1c0-0.5-0.1-1-0.2-1.2s-0.3-0.5-0.6-0.6S324.7,401.1,324.6,401.2z"/>
<path class="analytics14" d="M190.2,318.8V318l4.1,2.4v0.7l-2.6,4.8l-0.7-0.4l2.6-4.8L190.2,318.8z"/>
<path class="analytics14" d="M197.3,329.3c-1.6-0.9-2.4-2.5-2.4-5c0-2.4,0.8-3.1,2.4-2.2c1.6,0.9,2.4,2.5,2.4,5
C199.7,329.4,198.9,330.2,197.3,329.3z M195.6,324.7c0,0.5,0,1,0.1,1.3c0.1,0.4,0.2,0.7,0.3,1s0.3,0.5,0.4,0.7
c0.2,0.2,0.3,0.4,0.4,0.5c0.1,0.1,0.3,0.2,0.5,0.3c0.2,0.1,0.3,0.2,0.5,0.2c0.1,0.1,0.3,0.1,0.4,0c0.2,0,0.3-0.1,0.4-0.3
c0.1-0.1,0.2-0.4,0.3-0.7c0.1-0.3,0.1-0.7,0.1-1.2c0-0.6-0.1-1.1-0.2-1.6s-0.2-0.9-0.4-1.1c-0.2-0.3-0.3-0.5-0.5-0.7
s-0.4-0.3-0.6-0.4c-0.2-0.1-0.4-0.2-0.6-0.3c-0.2,0-0.3,0-0.5,0.1s-0.3,0.3-0.4,0.7C195.6,323.6,195.6,324.1,195.6,324.7z"/>
<path class="analytics14" d="M200.6,326c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4s0.3-0.1,0.4,0c0.1,0,0.3,0.1,0.4,0.2
c0.3,0.2,0.7,0.5,0.9,1c0.3,0.4,0.4,1,0.4,1.7c0,0.4,0,0.7-0.1,0.9c-0.1,0.2-0.2,0.3-0.3,0.4s-0.3,0.1-0.4,0.1
c-0.1,0-0.3-0.1-0.4-0.2c-0.2-0.1-0.3-0.2-0.4-0.3s-0.3-0.3-0.4-0.5c-0.1-0.2-0.3-0.5-0.3-0.8C200.7,326.7,200.6,326.4,200.6,326z
M201.3,325.3c-0.1,0.1-0.2,0.4-0.2,1c0,0.5,0.1,1,0.2,1.2c0.2,0.3,0.3,0.5,0.6,0.6s0.4,0.2,0.6,0.1c0.2-0.1,0.2-0.4,0.2-1
s-0.1-1-0.2-1.2c-0.2-0.3-0.3-0.5-0.6-0.6C201.7,325.2,201.5,325.2,201.3,325.3z M201.7,331.7l3.8-4.9l0.6,0.3l-3.8,4.9
L201.7,331.7z M204.6,332.4c-0.1-0.3-0.1-0.7-0.1-1c0-0.4,0-0.7,0.1-0.9c0.1-0.2,0.2-0.3,0.3-0.4s0.3-0.1,0.4-0.1
c0.1,0,0.3,0.1,0.4,0.2c0.2,0.1,0.3,0.2,0.4,0.3s0.3,0.3,0.4,0.5c0.1,0.2,0.2,0.5,0.3,0.8s0.1,0.7,0.1,1c0,0.4,0,0.7-0.1,0.9
c-0.1,0.2-0.2,0.3-0.3,0.4s-0.3,0.1-0.4,0.1c-0.1,0-0.3-0.1-0.4-0.2c-0.2-0.1-0.3-0.2-0.4-0.3s-0.3-0.3-0.4-0.5
C204.8,332.9,204.7,332.7,204.6,332.4z M205.2,330.6c-0.2,0.1-0.2,0.4-0.2,1c0,0.5,0.1,1,0.2,1.2c0.2,0.3,0.3,0.5,0.6,0.6
s0.4,0.2,0.6,0.1c0.2-0.1,0.2-0.4,0.2-1c0-0.5-0.1-1-0.2-1.2c-0.2-0.3-0.3-0.5-0.6-0.6C205.6,330.6,205.4,330.5,205.2,330.6z"/>
<path class="analytics10" d="M374.2,439.5v-0.7c0.3,0.4,0.6,0.8,1,1s0.6,0.3,0.8,0.1c0.2-0.1,0.3-0.4,0.3-0.9v-4.4l0.6,0.3v4.5
c0,0.4,0,0.7-0.1,0.9c-0.1,0.2-0.2,0.3-0.4,0.4s-0.3,0-0.5,0s-0.3-0.1-0.5-0.2C374.9,440.3,374.5,439.9,374.2,439.5z"/>
<path class="analytics10" d="M377.6,440.3c0-0.2,0-0.4,0.1-0.5s0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.1s0.3,0,0.4,0.1s0.3,0.1,0.4,0.2
c0.2,0.1,0.3,0.1,0.3,0.2c0.1,0,0.2,0.1,0.3,0.1l0.6,0.4c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.6-0.9-0.8c-0.4-0.3-0.8-0.4-1.2-0.4
v-0.7c0.4,0.1,0.8,0.2,1.2,0.4c0.6,0.3,1,0.7,1.3,1.2s0.4,1.1,0.4,1.7v1.4c0,0.3-0.1,0.5-0.2,0.7s-0.3,0.2-0.5,0.2
s-0.3-0.1-0.5-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.3-0.2-0.4-0.4s-0.3-0.3-0.4-0.5s-0.2-0.4-0.3-0.6
C377.7,440.8,377.6,440.5,377.6,440.3z M378.2,440.6c0,0.6,0.4,1.1,1.1,1.5l0,0c0.7,0.4,1.1,0.3,1.1-0.3V441
c-0.2-0.1-0.4-0.3-0.7-0.5C378.7,440,378.2,440,378.2,440.6z"/>
<path class="analytics10" d="M381.9,444.2v-4.4c0.5,0,1.1,0.2,1.7,0.5c0.5,0.3,0.9,0.7,1.2,1.1c0.3,0.5,0.4,1,0.4,1.5v3.1l-0.6-0.3v-3.1
c0-0.1,0-0.3,0-0.4s-0.1-0.3-0.1-0.4c-0.1-0.2-0.2-0.3-0.3-0.5c-0.2-0.2-0.3-0.3-0.6-0.4c-0.3-0.2-0.7-0.3-1-0.4v4L381.9,444.2z"/>
<path class="analytics10" d="M386.1,444.7v-2.8l0.6,0.3v2.8c0,0.5,0.1,0.9,0.3,1.2c0.2,0.3,0.4,0.6,0.8,0.8c0.4,0.2,0.7,0.3,0.8,0.2
c0.2-0.1,0.3-0.4,0.3-0.9v-2.8l0.6,0.3v2.8c0,0.7-0.2,1.1-0.4,1.3c-0.3,0.2-0.7,0.1-1.2-0.2c-0.5-0.3-1-0.7-1.2-1.3
C386.2,445.9,386.1,445.3,386.1,444.7z"/>
<path class="analytics10" d="M390.2,447.5c0-0.2,0-0.4,0.1-0.5s0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.1s0.3,0,0.4,0.1
c0.1,0,0.3,0.1,0.4,0.2c0.2,0.1,0.3,0.1,0.3,0.2c0.1,0,0.2,0.1,0.3,0.1l0.6,0.4c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.6-0.9-0.8
c-0.4-0.3-0.8-0.4-1.2-0.4v-0.7c0.4,0.1,0.8,0.2,1.2,0.4c0.6,0.3,1,0.7,1.3,1.2s0.4,1.1,0.4,1.7v1.4c0,0.3-0.1,0.5-0.2,0.7
s-0.3,0.2-0.5,0.2s-0.3-0.1-0.5-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.3-0.2-0.4-0.4s-0.3-0.3-0.4-0.5
s-0.2-0.4-0.3-0.6C390.2,448.1,390.2,447.8,390.2,447.5z M390.8,447.9c0,0.6,0.4,1.1,1.1,1.5l0,0c0.7,0.4,1.1,0.3,1.1-0.3v-0.9
c-0.2-0.1-0.4-0.3-0.7-0.5C391.3,447.2,390.8,447.3,390.8,447.9z"/>
<path class="analytics10" d="M394.4,451.4V447c0.6,0.1,1.3,0.3,2,0.7v0.6c-0.4-0.3-0.9-0.4-1.4-0.5v3.9L394.4,451.4z"/>
<path class="analytics10" d="M396.7,448l0.6,0.3l1.1,4.4l1.2-3.1l0.6,0.3l-1.7,4.3c-0.3,0.8-0.7,1-1.3,0.6c-0.1-0.1-0.3-0.2-0.4-0.3V454
c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.2,0.1,0.3,0c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.1-0.2,0.1-0.3v-0.1
L396.7,448z"/>
<path class="analytics15" d="M250.8,345.8c0-0.6,0.2-1.1,0.5-1.4s0.9-0.2,1.7,0.1v-1.4l0.6,0.3v1.4c0.6,0.4,1.2,0.9,1.8,1.6v1
c-0.6-0.7-1.1-1.2-1.8-1.6v3.1c0.3,0.3,0.6,0.6,0.8,0.9s0.4,0.5,0.7,0.9c0.3,0.3,0.4,0.7,0.5,1.1s0.2,0.8,0.2,1.2
c0,0.7-0.2,1.1-0.6,1.3c-0.4,0.2-1,0.1-1.7-0.2v1.4l-0.6-0.3v-1.4c-0.8-0.5-1.5-1.1-2.1-1.9v-1.1c0.6,0.8,1.3,1.5,2.1,2v-3.5
c-0.3-0.3-0.5-0.5-0.7-0.6s-0.3-0.3-0.6-0.6c-0.2-0.3-0.4-0.5-0.5-0.7s-0.2-0.5-0.3-0.8C250.8,346.3,250.8,346,250.8,345.8z
M251.6,346.2c0,0.3,0.1,0.7,0.3,1s0.6,0.7,1,1.1v-2.9C252.1,345.1,251.6,345.4,251.6,346.2z M253.6,353.2c1,0.4,1.4,0.2,1.4-0.6
c0-0.5-0.1-0.9-0.4-1.3c-0.3-0.4-0.6-0.8-1.1-1.3L253.6,353.2L253.6,353.2z"/>
<path class="analytics15" d="M257.3,351.3l0.4-4l4,2.3v1l-3.3-1.9l-0.2,2.6c0.4,0.1,1,0.3,1.5,0.6c0.3,0.2,0.6,0.4,0.9,0.6
s0.5,0.5,0.8,0.9c0.3,0.3,0.4,0.8,0.6,1.2c0.2,0.5,0.2,1,0.2,1.6c0,0.5-0.1,1-0.2,1.3c-0.2,0.3-0.3,0.5-0.6,0.5
c-0.3,0.1-0.5,0.1-0.8,0s-0.5-0.2-0.9-0.4c-0.9-0.5-1.6-1.1-2.2-1.8v-1c0.6,0.7,1.3,1.4,2.2,1.9c0.3,0.2,0.6,0.3,0.8,0.3
c0.2,0,0.4,0,0.5,0c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.2,0.1-0.3,0.1-0.4s0-0.3,0-0.5c0-0.4,0-0.8-0.1-1.1c-0.1-0.3-0.2-0.6-0.4-0.8
c-0.2-0.2-0.3-0.4-0.5-0.5c-0.2-0.2-0.4-0.3-0.6-0.4c-0.3-0.2-0.7-0.4-1-0.5s-0.5-0.2-0.6-0.2H258L257.3,351.3z"/>
<path class="analytics15" d="M266.5,361.7c-2-1.2-3.1-3.3-3.1-6.4s1-4.1,3.1-2.9c2,1.2,3.1,3.3,3.1,6.4
C269.6,361.9,268.6,362.8,266.5,361.7z M264.3,355.7c0,0.6,0,1.2,0.1,1.7s0.2,1,0.3,1.3c0.1,0.3,0.3,0.7,0.5,0.9
c0.2,0.3,0.4,0.5,0.6,0.6s0.4,0.3,0.6,0.4s0.4,0.2,0.6,0.3c0.2,0.1,0.4,0.1,0.6,0s0.4-0.2,0.5-0.3c0.1-0.2,0.3-0.5,0.3-0.9
s0.1-1,0.1-1.6c0-0.8-0.1-1.5-0.2-2.1s-0.3-1.1-0.5-1.5s-0.5-0.7-0.7-0.9c-0.2-0.2-0.5-0.4-0.8-0.6s-0.6-0.3-0.8-0.3
s-0.4,0-0.7,0.1c-0.2,0.1-0.4,0.4-0.5,0.9C264.4,354.3,264.3,354.9,264.3,355.7z"/>
<path class="analytics15" d="M271,359.2l0.4-4l4,2.3v1l-3.3-1.9l-0.2,2.6c0.4,0.1,1,0.3,1.5,0.6c0.3,0.2,0.6,0.4,0.9,0.6s0.5,0.5,0.8,0.9
c0.3,0.3,0.4,0.8,0.6,1.2c0.2,0.5,0.2,1,0.2,1.6c0,0.5-0.1,1-0.2,1.3c-0.2,0.3-0.3,0.5-0.6,0.5c-0.3,0-0.5,0.1-0.8,0
s-0.5-0.2-0.9-0.4c-0.9-0.5-1.6-1.1-2.2-1.8v-1c0.6,0.7,1.3,1.4,2.2,1.9c0.3,0.2,0.6,0.3,0.8,0.3s0.4,0,0.5,0
c0.1-0.1,0.2-0.2,0.3-0.3s0.1-0.3,0.1-0.4s0-0.3,0-0.5c0-0.4,0-0.8-0.1-1.1s-0.2-0.6-0.4-0.8c-0.2-0.2-0.3-0.4-0.5-0.5
c-0.2-0.2-0.4-0.3-0.6-0.4c-0.3-0.2-0.7-0.4-1-0.5s-0.5-0.2-0.6-0.2h-0.2L271,359.2z"/>
<path class="analytics15" d="M277.5,367.9v-1.1l0.8,0.5v1.1L277.5,367.9z"/>
<path class="analytics15" d="M283,371.2c-2-1.2-3.1-3.3-3.1-6.4s1-4.1,3.1-2.9c2,1.2,3.1,3.3,3.1,6.4S285.1,372.4,283,371.2z M280.8,365.2
c0,0.6,0,1.2,0.1,1.7s0.2,1,0.3,1.3c0.1,0.3,0.3,0.7,0.5,0.9c0.2,0.3,0.4,0.5,0.6,0.6c0.2,0.2,0.4,0.3,0.6,0.4s0.4,0.2,0.6,0.3
c0.2,0.1,0.4,0.1,0.6,0c0.2,0,0.4-0.2,0.5-0.3c0.1-0.2,0.3-0.5,0.3-0.9c0.1-0.4,0.1-1,0.1-1.6c0-0.8-0.1-1.5-0.2-2.1
s-0.3-1.1-0.5-1.5s-0.5-0.7-0.7-0.9c-0.2-0.2-0.5-0.4-0.8-0.6s-0.6-0.3-0.8-0.3c-0.2,0-0.4,0-0.7,0.1c-0.2,0.1-0.4,0.4-0.5,0.9
C280.9,363.8,280.8,364.5,280.8,365.2z"/>
<path class="analytics15" d="M286.9,370.6v-1l3.7-3.2l1,0.5v5.5l1.1,0.6v0.9l-1.1-0.6v2.7l-0.8-0.5v-2.7L286.9,370.6z M287.9,370.2
l2.8,1.6v-4L287.9,370.2z"/>
<path class="analytics12" d="M252.1,368.7v-6.4l3.3,1.9v0.6l-2.7-1.6v2.2l2.4,1.4v0.7l-2.4-1.4v2.9L252.1,368.7z"/>
<path class="analytics12" d="M255.8,368.5L255.8,368.5L255.8,368.5c0-1.7,0.6-2.2,1.8-1.5c0.3,0.1,0.5,0.3,0.7,0.5s0.3,0.4,0.5,0.6
c0.1,0.2,0.2,0.4,0.3,0.7c0.1,0.3,0.2,0.4,0.2,0.6s0.1,0.3,0.1,0.6c0,0.2,0,0.3,0,0.4v0.2v0.3l-3-1.7c0,0.5,0.2,0.9,0.4,1.3
c0.2,0.3,0.5,0.6,1,0.9c0.6,0.3,1,0.5,1.4,0.4v0.7c-0.4,0-0.9-0.2-1.4-0.5l0,0c-0.2-0.1-0.4-0.3-0.6-0.5s-0.4-0.4-0.6-0.7
c-0.2-0.3-0.3-0.6-0.4-1C255.8,369.4,255.8,369,255.8,368.5z M256.3,368.6l2.4,1.4c0-0.1,0-0.2,0-0.4c0-0.2-0.1-0.3-0.1-0.6
c-0.1-0.3-0.2-0.5-0.3-0.7c-0.2-0.3-0.4-0.4-0.7-0.6c-0.4-0.2-0.7-0.3-0.9-0.1C256.5,367.7,256.4,368,256.3,368.6z"/>
<path class="analytics12" d="M260.1,371.9v-5.2l0.6,0.3v1.9c0.3,0.1,0.7,0.2,1,0.4c0.2,0.1,0.3,0.2,0.5,0.3s0.3,0.3,0.5,0.5
s0.3,0.4,0.4,0.7c0.1,0.3,0.2,0.5,0.3,0.9c0.1,0.3,0.1,0.7,0.1,1.1s0,0.8-0.1,1c-0.1,0.3-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.2-0.4,0.2
s-0.3,0-0.5-0.1s-0.3-0.1-0.4-0.2c-0.3-0.2-0.5-0.3-0.8-0.6c-0.2-0.2-0.4-0.4-0.5-0.6s-0.2-0.3-0.3-0.5c-0.1-0.2-0.1-0.3-0.1-0.4
C260.1,372.1,260.1,372,260.1,371.9z M260.7,372.2c0,0.6,0.3,1,1.1,1.5c0.2,0.1,0.3,0.2,0.4,0.2s0.3,0,0.4,0s0.2-0.2,0.3-0.4
c0.1-0.2,0.1-0.5,0.1-1c0-0.6-0.1-1.1-0.3-1.5c-0.2-0.4-0.5-0.7-1-1c-0.3-0.2-0.7-0.3-1-0.3V372.2L260.7,372.2z"/>
<path class="analytics12" d="M264.3,375.7v-4.4c0.6,0.1,1.3,0.3,2,0.7v0.6c-0.4-0.3-0.9-0.4-1.4-0.5v3.9L264.3,375.7z"/>
<path class="analytics12" d="M266.8,375.2v-2.8l0.6,0.3v2.8c0,0.5,0.1,0.9,0.3,1.2c0.2,0.3,0.4,0.6,0.8,0.8c0.4,0.2,0.7,0.3,0.8,0.2
c0.2-0.1,0.3-0.4,0.3-0.9V374l0.6,0.3v2.8c0,0.7-0.2,1.1-0.4,1.3c-0.3,0.2-0.7,0.1-1.2-0.2c-0.5-0.3-1-0.7-1.2-1.3
C267,376.4,266.8,375.8,266.8,375.2z"/>
<path class="analytics12" d="M270.9,378.1c0-0.2,0-0.4,0.1-0.5s0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.1s0.3,0,0.4,0.1s0.3,0.1,0.4,0.2
s0.3,0.1,0.3,0.2c0.1,0,0.2,0.1,0.3,0.1l0.6,0.4c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.3-0.5-0.6-0.9-0.8c-0.4-0.3-0.8-0.4-1.2-0.4v-0.7
c0.4,0.1,0.8,0.2,1.2,0.4c0.6,0.3,1,0.7,1.3,1.2s0.4,1.1,0.4,1.7v1.4c0,0.3-0.1,0.5-0.2,0.7s-0.3,0.2-0.5,0.2s-0.3-0.1-0.5-0.1
c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.3-0.2-0.4-0.3c-0.1-0.1-0.3-0.2-0.4-0.4s-0.3-0.3-0.4-0.5s-0.2-0.4-0.3-0.6
C270.9,378.6,270.9,378.4,270.9,378.1z M271.5,378.4c0,0.6,0.4,1.1,1.1,1.5l0,0c0.7,0.4,1.1,0.3,1.1-0.3v-0.9
c-0.2-0.1-0.4-0.3-0.7-0.5C272,377.8,271.5,377.8,271.5,378.4z"/>
<path class="analytics12" d="M275.1,382v-4.4c0.6,0.1,1.3,0.3,2,0.7v0.6c-0.4-0.3-0.9-0.4-1.4-0.5v3.9L275.1,382z"/>
<path class="analytics12" d="M277.4,378.6l0.6,0.3l1.1,4.4l1.2-3.1l0.6,0.3l-1.7,4.3c-0.3,0.8-0.7,1-1.3,0.6c-0.1-0.1-0.3-0.2-0.4-0.3
v-0.6c0.1,0.1,0.2,0.2,0.3,0.3c0.1,0.1,0.2,0.1,0.3,0c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.1-0.2,0.1-0.3v-0.1
L277.4,378.6z"/>
<path class="analytics15" d="M131.6,277.7c0-0.6,0.2-1.1,0.5-1.4s0.9-0.2,1.7,0.1V275l0.6,0.3v1.4c0.6,0.4,1.2,0.9,1.8,1.6v1
c-0.6-0.7-1.1-1.2-1.8-1.6v3.1c0.3,0.3,0.6,0.6,0.8,0.9s0.4,0.5,0.7,0.9c0.3,0.3,0.4,0.7,0.5,1.1s0.2,0.8,0.2,1.2
c0,0.7-0.2,1.1-0.6,1.3c-0.4,0.2-1,0.1-1.7-0.2v1.4l-0.6-0.3v-1.4c-0.8-0.5-1.5-1.1-2.1-1.9v-1.1c0.6,0.8,1.3,1.5,2.1,2v-3.5
c-0.3-0.3-0.5-0.5-0.7-0.6c-0.2-0.2-0.3-0.3-0.6-0.6c-0.2-0.3-0.4-0.5-0.5-0.7s-0.2-0.5-0.3-0.8C131.6,278.3,131.6,278,131.6,277.7
z M132.4,278.2c0,0.3,0.1,0.7,0.3,1s0.6,0.7,1,1.1v-2.9C132.9,277.1,132.4,277.4,132.4,278.2z M134.4,285.1c1,0.4,1.4,0.2,1.4-0.6
c0-0.5-0.1-0.9-0.4-1.3c-0.3-0.4-0.6-0.8-1.1-1.3L134.4,285.1L134.4,285.1z"/>
<path class="analytics15" d="M137.5,279.7v-1l5.3,3.1v0.9l-3.3,6.3l-0.9-0.5l3.4-6.2L137.5,279.7z"/>
<path class="analytics15" d="M143.9,291.1v-1c0.6,0.8,1.3,1.3,2,1.7s1.2,0.5,1.6,0.4c0.3-0.1,0.5-0.4,0.5-1s-0.2-1.1-0.5-1.6
c-0.4-0.5-0.9-1-1.6-1.4l-0.9-0.5v-1l0.9,0.5c0.6,0.3,1,0.4,1.3,0.4c0.3-0.1,0.4-0.3,0.4-0.8s-0.2-0.9-0.5-1.4s-0.8-0.8-1.4-1.2
c-0.6-0.3-1.1-0.5-1.7-0.5v-1c0.5,0,1.1,0.2,1.7,0.5l0,0c0.9,0.5,1.5,1.1,1.9,1.8c0.4,0.7,0.6,1.4,0.6,2.1c0,0.8-0.3,1.2-0.8,1.2
h-0.2c0,0,0.1,0.1,0.2,0.2s0.2,0.2,0.3,0.4s0.3,0.5,0.4,0.7c0.1,0.2,0.2,0.5,0.3,0.9c0.1,0.3,0.2,0.7,0.2,1s-0.1,0.6-0.2,0.9
c-0.1,0.3-0.3,0.4-0.5,0.6c-0.2,0.1-0.5,0.2-0.9,0.1s-0.8-0.3-1.3-0.5C145.3,292.4,144.6,291.8,143.9,291.1z"/>
<path class="analytics15" d="M150.4,294.8v-1c0.6,0.8,1.3,1.3,2,1.7c0.7,0.4,1.2,0.5,1.6,0.4c0.3-0.1,0.5-0.4,0.5-1s-0.2-1.1-0.5-1.6
c-0.4-0.5-0.9-1-1.6-1.4l-0.9-0.5v-1l0.9,0.5c0.6,0.3,1,0.4,1.3,0.4c0.3-0.1,0.4-0.3,0.4-0.8s-0.2-0.9-0.5-1.4
c-0.3-0.4-0.8-0.8-1.4-1.2c-0.6-0.3-1.1-0.5-1.7-0.5v-1c0.5,0,1.1,0.2,1.7,0.5l0,0c0.9,0.5,1.5,1.1,1.9,1.8
c0.4,0.7,0.6,1.4,0.6,2.1c0,0.8-0.3,1.2-0.8,1.2h-0.2c0,0,0.1,0.1,0.2,0.2c0.1,0.1,0.2,0.2,0.3,0.4c0.2,0.2,0.3,0.5,0.4,0.7
c0.1,0.2,0.2,0.5,0.3,0.9c0.1,0.3,0.2,0.7,0.2,1s-0.1,0.6-0.2,0.9c-0.1,0.3-0.3,0.4-0.5,0.6c-0.2,0.1-0.5,0.2-0.9,0.1
s-0.8-0.3-1.3-0.5S151,295.5,150.4,294.8z"/>
<path class="analytics15" d="M156.7,298.9v-1.1l0.8,0.5v1.1L156.7,298.9z"/>
<path class="analytics15" d="M159.3,300.4v-0.9c0.4-0.1,0.8-0.3,1.2-0.4c0.4-0.2,0.8-0.4,1.3-0.7c0.4-0.3,0.8-0.6,1.1-1s0.4-0.9,0.4-1.3
c0-1-0.6-1.9-1.8-2.6c-0.7-0.4-1.4-0.5-2-0.4V292c0.6-0.1,1.3,0.1,2.1,0.5c0.9,0.5,1.5,1.1,1.9,1.9c0.4,0.7,0.6,1.5,0.6,2.2
c0,0.5-0.1,1-0.3,1.4s-0.5,0.8-0.9,1.1c-0.3,0.3-0.7,0.5-1.1,0.8c-0.3,0.2-0.7,0.4-1.1,0.5l3.5,2v1L159.3,300.4z"/>
<path class="analytics15" d="M165,301v-1l3.7-3.2l1,0.5v5.4l1.1,0.6v0.9l-1.1-0.6v2.7l-0.8-0.5v-2.7L165,301z M165.9,300.6l2.8,1.6v-4
L165.9,300.6z"/>
<path class="analytics14" d="M132.9,300.7v-6.4l0.6,0.4l1.8,4.3l1.9-2.2l0.6,0.4v6.4l-0.6-0.3V298l-1.9,2.1l-1.9-4.4v5.2L132.9,300.7z"/>
<path class="analytics14" d="M138.8,302.6c0-0.2,0-0.4,0.1-0.5s0.2-0.2,0.3-0.3c0.1-0.1,0.2-0.1,0.4-0.1s0.3,0,0.4,0.1
c0.1,0,0.3,0.1,0.4,0.2c0.2,0.1,0.3,0.1,0.3,0.2c0.1,0,0.2,0.1,0.3,0.1l0.6,0.4c0-0.4-0.1-0.8-0.3-1.1s-0.5-0.6-0.9-0.8
c-0.4-0.3-0.8-0.4-1.2-0.4v-0.7c0.4,0.1,0.8,0.2,1.2,0.4c0.6,0.3,1,0.7,1.3,1.2s0.4,1.1,0.4,1.7v1.4c0,0.3-0.1,0.5-0.2,0.7
c-0.1,0.2-0.3,0.2-0.5,0.2s-0.3-0.1-0.5-0.1c-0.2-0.1-0.3-0.1-0.5-0.2c-0.1-0.1-0.3-0.2-0.4-0.3s-0.3-0.2-0.4-0.4
c-0.2-0.2-0.3-0.3-0.4-0.5s-0.2-0.4-0.3-0.6C138.8,303.1,138.8,302.9,138.8,302.6z M139.4,303c0,0.6,0.4,1.1,1.1,1.5l0,0
c0.7,0.4,1.1,0.3,1.1-0.3v-0.9c-0.2-0.1-0.4-0.3-0.7-0.5C139.9,302.3,139.4,302.4,139.4,303z"/>
<path class="analytics14" d="M143,306.5v-4.4c0.6,0.1,1.3,0.3,2,0.7v0.6c-0.4-0.3-0.9-0.4-1.4-0.5v3.9L143,306.5z"/>
<path class="analytics14" d="M145.3,305.5c0-0.5,0.1-0.9,0.2-1.1c0.1-0.3,0.3-0.4,0.5-0.5s0.4-0.1,0.6,0c0.2,0,0.4,0.1,0.7,0.3
c0.4,0.2,0.8,0.5,1.2,1v0.6c-0.4-0.4-0.7-0.7-1.1-0.9c-0.5-0.3-0.8-0.3-1-0.2c-0.2,0.2-0.3,0.5-0.3,1.2c0,0.6,0.1,1.2,0.3,1.6
s0.6,0.8,1,1s0.8,0.3,1.1,0.4v0.7c-0.4,0-0.8-0.2-1.2-0.4c-0.2-0.1-0.4-0.2-0.5-0.3c-0.2-0.1-0.3-0.3-0.5-0.5s-0.3-0.4-0.4-0.7
c-0.1-0.3-0.2-0.5-0.3-0.9C145.4,306.2,145.3,305.9,145.3,305.5z"/>
<path class="analytics14" d="M149.1,310.1v-6.6l0.6,0.3v2c0.4,0,0.8,0.2,1.2,0.4c0.5,0.3,0.9,0.7,1.1,1.2c0.3,0.5,0.4,1.1,0.4,1.7v2.8
l-0.6-0.3v-2.8c0-0.9-0.3-1.5-1-1.9c-0.4-0.2-0.8-0.3-1.1-0.4v3.9L149.1,310.1z"/>
</g>
</g>
<g>
<circle class="analytics23" cx="38.8" cy="76.8" r="7"/>
<circle class="analytics23" cx="511.8" cy="465.8" r="5"/>
<circle class="analytics24" cx="130.8" cy="470.8" r="10"/>
<circle class="analytics25" cx="480.8" cy="69.8" r="10"/>
</g>
</svg>
</div>
You may also want to translate it.

Rotating the Meterhand in CSS

I have this SVG image (shown below) and I need to make an animation on the meter dashboard hand. The animation I am trying to do is of it (the meter hand) rotating 90 degrees to the left and 90 degrees to the right (the animation keeps ongoing). Ideally, the animation property to do this kind of animation is Transform: rotate()" but another property can be used instead of it. Does anyone have an idea of how this can be done? I am using CSS and HTML.
This is the SVG:
This is how it needs to be rotated: (to the left)
Rotated the right :
This is the SVG code: (The meter hand has an id called "MeterHand") and the CSS that I tried (If you run it you will see that the SVG rotates as a whole and only rotates in one direction. The idea of the animation is to be able to rotate as the images shown above)
#MeterHand {
-webkit-animation: spin 4s linear;
-moz-animation: spin 4s linear;
animation: spin 4s linear;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(90deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(90deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="488" height="486">
<path fill="none" d="M216 294H20.33"/>
<circle class="DashboardBorder" fill="#E6E7E8" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.417" cy="245" r="235.417"/>
<circle class="MiddleCircle" fill="#BCBEC0" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.333" cy="245.001" r="29.333"/>
<path fill="#A7A9AC" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M164.667 365.333h158.666l17.667 58H147.333z"/>
<path id="MeterLevel7" fill-rule="evenodd" clip-rule="evenodd" fill="#ED1C24" stroke="#ED1C24" stroke-width="3" stroke-miterlimit="10" d="M308.889 283.393c6.28-10.192 9.359-21.405 9.656-33.513.083-3.389 1.115-4.322 4.658-4.276 41.25.53 82.497.857 123.744 1.252 6.291.055 6.11.065 6.032 6.4-.287 21.744-3.985 42.853-11.11 63.239-3.06 8.73-6.865 17.247-10.971 25.547a329.33 329.33 0 01-4.646 9.066l-117.363-67.715z"/>
<path id="MeterLevel6" fill-rule="evenodd" clip-rule="evenodd" fill="#EA5862" stroke="#E95762" stroke-width="3" stroke-miterlimit="10" d="M319.232 246.941c.27-11.961-2.697-23.188-8.48-33.782-1.619-2.965-1.205-4.291 1.839-6.039 35.414-20.355 70.725-40.883 106.068-61.354 5.387-3.127 5.239-3.026 8.33 2.477 10.598 18.902 17.97 38.978 22.062 60.159 1.745 9.075 2.749 18.342 3.388 27.573.233 3.38.433 6.775.563 10.165l-133.77.801z"/>
<path id="MeterLevel5" fill-rule="evenodd" clip-rule="evenodd" fill="#F7941E" stroke="#F7941E" stroke-width="3" stroke-miterlimit="10" d="M308.366 208.24c-5.579-10.374-13.599-18.53-23.746-24.765-2.838-1.745-3.126-3.083-1.345-6.073 20.7-34.8 41.229-69.697 61.814-104.562 3.133-5.32 3.057-5.162 8.401-1.965 18.343 10.985 34.468 24.557 48.298 40.686 5.918 6.914 11.29 14.356 16.327 21.947a316.161 316.161 0 015.427 8.427L308.366 208.24z"/>
<path id="MeterLevel4" fill-rule="evenodd" clip-rule="evenodd" fill="#E9A254" stroke="#E9A255" stroke-width="3" stroke-miterlimit="10" d="M281.401 181.862c-10.78-6.625-22.52-10.083-35.097-10.791-3.518-.198-4.521-1.26-4.586-4.803-.781-41.22-1.774-82.445-2.697-123.667-.146-6.287-.129-6.108 6.45-5.813 22.578 1.022 44.605 5.437 65.994 13.25 9.16 3.356 18.123 7.449 26.87 11.836a364.784 364.784 0 019.56 4.95l-66.494 115.038z"/>
<path id="MeterLevel3" fill-rule="evenodd" clip-rule="evenodd" fill="#00AEEF" stroke="#00AEEF" stroke-width="3" stroke-miterlimit="10" d="M243.596 170.132c-11.194.202-21.565 3.643-31.219 9.898-2.701 1.75-3.959 1.386-5.726-1.616-20.588-34.909-41.334-69.707-62.027-104.54-3.162-5.309-3.062-5.166 1.952-8.503 17.211-11.441 35.661-19.675 55.287-24.646 8.411-2.121 17.033-3.503 25.638-4.514 3.147-.371 6.317-.707 9.481-.973l6.614 134.894z"/>
<path id="MeterLevel2" fill-rule="evenodd" clip-rule="evenodd" fill="#65CCED" stroke="#65CCED" stroke-width="3" stroke-miterlimit="10" d="M206.728 182.666c-10.256 5.49-18.325 13.409-24.491 23.437-1.726 2.805-3.048 3.086-6.004 1.312-34.399-20.618-68.896-41.065-103.36-61.567-5.259-3.122-5.104-3.043-1.94-8.33 10.866-18.132 24.289-34.057 40.237-47.701 6.839-5.839 14.197-11.135 21.705-16.1a316.26 316.26 0 018.333-5.348l65.52 114.297z"/>
<path id="MeterHand" fill="#36374C" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M245.86 82.888c.45 5.531.935 11.064 1.339 16.602.964 13.229 2.078 26.464 3.275 39.674 1.446 15.945 2.766 31.944 3.817 47.92.917 13.937 1.823 27.864 3.666 41.715 1.197 9 2.871 19.793-.075 28.599-4.139 12.368-20.653 12.815-25.296.628-2.727-7.159-.872-17.067-.336-24.569.39-5.453 1.511-10.767 2.365-16.154 2.056-12.965 2.151-26.227 3.488-39.28 1.462-14.285 2.496-28.572 3.61-42.885.918-11.768 2.071-23.51 2.847-35.29.36-5.469 1.128-10.968 1.293-16.444.006-.17.02-.348.007-.516z"/>
<circle class="SmallCircle" fill="#FFF" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="243.878" cy="246.142" r="6.833"/>
<path id="MeterLevel1" fill-rule="evenodd" clip-rule="evenodd" fill="#58595B" stroke="#58595B" stroke-width="3" stroke-miterlimit="10" d="M179.439 207.227c-6.423 10.313-9.725 21.616-10.313 33.779-.165 3.403-1.201 4.354-4.686 4.353-40.536-.007-81.078.191-121.616.322-6.183.026-6.007.013-5.773-6.353.812-21.842 4.964-43.087 12.466-63.65 3.224-8.808 7.171-17.41 11.413-25.797a350.157 350.157 0 014.787-9.166l113.722 66.512z"/>
</svg>

You have most of the code that you need already.
The main change that will get you most of the way there is to add transform-origin: 50%; to adjust the rotation point of the element.
You then need to add more steps to your animation to include the anti-clockwise rotation.
And also, animation-fill-mode: forwards; to stop the animation on the last frame.
#MeterHand {
transform-origin: 50%;
animation: spin 4s linear;
animation-fill-mode: forwards;
}
#keyframes spin {
50% {
transform: rotate(-90deg);
}
100% {
transform: rotate(120deg);
}
}
<!DOCTYPE hmtl>
<html>
<head>
<link rel="stylesheet" href="animation.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="488" height="486">
<path fill="none" d="M216 294H20.33"/>
<circle class="DashboardBorder" fill="#E6E7E8" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.417" cy="245" r="235.417"/>
<circle class="MiddleCircle" fill="#BCBEC0" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.333" cy="245.001" r="29.333"/>
<path fill="#A7A9AC" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M164.667 365.333h158.666l17.667 58H147.333z"/>
<path id="MeterLevel7" fill-rule="evenodd" clip-rule="evenodd" fill="#ED1C24" stroke="#ED1C24" stroke-width="3" stroke-miterlimit="10" d="M308.889 283.393c6.28-10.192 9.359-21.405 9.656-33.513.083-3.389 1.115-4.322 4.658-4.276 41.25.53 82.497.857 123.744 1.252 6.291.055 6.11.065 6.032 6.4-.287 21.744-3.985 42.853-11.11 63.239-3.06 8.73-6.865 17.247-10.971 25.547a329.33 329.33 0 01-4.646 9.066l-117.363-67.715z"/>
<path id="MeterLevel6" fill-rule="evenodd" clip-rule="evenodd" fill="#EA5862" stroke="#E95762" stroke-width="3" stroke-miterlimit="10" d="M319.232 246.941c.27-11.961-2.697-23.188-8.48-33.782-1.619-2.965-1.205-4.291 1.839-6.039 35.414-20.355 70.725-40.883 106.068-61.354 5.387-3.127 5.239-3.026 8.33 2.477 10.598 18.902 17.97 38.978 22.062 60.159 1.745 9.075 2.749 18.342 3.388 27.573.233 3.38.433 6.775.563 10.165l-133.77.801z"/>
<path id="MeterLevel5" fill-rule="evenodd" clip-rule="evenodd" fill="#F7941E" stroke="#F7941E" stroke-width="3" stroke-miterlimit="10" d="M308.366 208.24c-5.579-10.374-13.599-18.53-23.746-24.765-2.838-1.745-3.126-3.083-1.345-6.073 20.7-34.8 41.229-69.697 61.814-104.562 3.133-5.32 3.057-5.162 8.401-1.965 18.343 10.985 34.468 24.557 48.298 40.686 5.918 6.914 11.29 14.356 16.327 21.947a316.161 316.161 0 015.427 8.427L308.366 208.24z"/>
<path id="MeterLevel4" fill-rule="evenodd" clip-rule="evenodd" fill="#E9A254" stroke="#E9A255" stroke-width="3" stroke-miterlimit="10" d="M281.401 181.862c-10.78-6.625-22.52-10.083-35.097-10.791-3.518-.198-4.521-1.26-4.586-4.803-.781-41.22-1.774-82.445-2.697-123.667-.146-6.287-.129-6.108 6.45-5.813 22.578 1.022 44.605 5.437 65.994 13.25 9.16 3.356 18.123 7.449 26.87 11.836a364.784 364.784 0 019.56 4.95l-66.494 115.038z"/>
<path id="MeterLevel3" fill-rule="evenodd" clip-rule="evenodd" fill="#00AEEF" stroke="#00AEEF" stroke-width="3" stroke-miterlimit="10" d="M243.596 170.132c-11.194.202-21.565 3.643-31.219 9.898-2.701 1.75-3.959 1.386-5.726-1.616-20.588-34.909-41.334-69.707-62.027-104.54-3.162-5.309-3.062-5.166 1.952-8.503 17.211-11.441 35.661-19.675 55.287-24.646 8.411-2.121 17.033-3.503 25.638-4.514 3.147-.371 6.317-.707 9.481-.973l6.614 134.894z"/>
<path id="MeterLevel2" fill-rule="evenodd" clip-rule="evenodd" fill="#65CCED" stroke="#65CCED" stroke-width="3" stroke-miterlimit="10" d="M206.728 182.666c-10.256 5.49-18.325 13.409-24.491 23.437-1.726 2.805-3.048 3.086-6.004 1.312-34.399-20.618-68.896-41.065-103.36-61.567-5.259-3.122-5.104-3.043-1.94-8.33 10.866-18.132 24.289-34.057 40.237-47.701 6.839-5.839 14.197-11.135 21.705-16.1a316.26 316.26 0 018.333-5.348l65.52 114.297z"/>
<path id="MeterHand" fill="#36374C" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M245.86 82.888c.45 5.531.935 11.064 1.339 16.602.964 13.229 2.078 26.464 3.275 39.674 1.446 15.945 2.766 31.944 3.817 47.92.917 13.937 1.823 27.864 3.666 41.715 1.197 9 2.871 19.793-.075 28.599-4.139 12.368-20.653 12.815-25.296.628-2.727-7.159-.872-17.067-.336-24.569.39-5.453 1.511-10.767 2.365-16.154 2.056-12.965 2.151-26.227 3.488-39.28 1.462-14.285 2.496-28.572 3.61-42.885.918-11.768 2.071-23.51 2.847-35.29.36-5.469 1.128-10.968 1.293-16.444.006-.17.02-.348.007-.516z"/>
<circle class="SmallCircle" fill="#FFF" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="243.878" cy="246.142" r="6.833"/>
<path id="MeterLevel1" fill-rule="evenodd" clip-rule="evenodd" fill="#58595B" stroke="#58595B" stroke-width="3" stroke-miterlimit="10" d="M179.439 207.227c-6.423 10.313-9.725 21.616-10.313 33.779-.165 3.403-1.201 4.354-4.686 4.353-40.536-.007-81.078.191-121.616.322-6.183.026-6.007.013-5.773-6.353.812-21.842 4.964-43.087 12.466-63.65 3.224-8.808 7.171-17.41 11.413-25.797a350.157 350.157 0 014.787-9.166l113.722 66.512z"/>
</svg>
</body>
</html>

You need to add a transform-origin to define which point the image should rotate around:
#MeterHand {
-webkit-animation: spin 4s linear;
-moz-animation: spin 4s linear;
animation: spin 4s linear;
transform-origin:50% 50% 0;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(90deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(90deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
}
<!DOCTYPE hmtl>
<html>
<head>
<link rel="stylesheet" href="animation.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="488" height="486">
<path fill="none" d="M216 294H20.33"/>
<circle class="DashboardBorder" fill="#E6E7E8" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.417" cy="245" r="235.417"/>
<circle class="MiddleCircle" fill="#BCBEC0" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.333" cy="245.001" r="29.333"/>
<path fill="#A7A9AC" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M164.667 365.333h158.666l17.667 58H147.333z"/>
<path id="MeterLevel7" fill-rule="evenodd" clip-rule="evenodd" fill="#ED1C24" stroke="#ED1C24" stroke-width="3" stroke-miterlimit="10" d="M308.889 283.393c6.28-10.192 9.359-21.405 9.656-33.513.083-3.389 1.115-4.322 4.658-4.276 41.25.53 82.497.857 123.744 1.252 6.291.055 6.11.065 6.032 6.4-.287 21.744-3.985 42.853-11.11 63.239-3.06 8.73-6.865 17.247-10.971 25.547a329.33 329.33 0 01-4.646 9.066l-117.363-67.715z"/>
<path id="MeterLevel6" fill-rule="evenodd" clip-rule="evenodd" fill="#EA5862" stroke="#E95762" stroke-width="3" stroke-miterlimit="10" d="M319.232 246.941c.27-11.961-2.697-23.188-8.48-33.782-1.619-2.965-1.205-4.291 1.839-6.039 35.414-20.355 70.725-40.883 106.068-61.354 5.387-3.127 5.239-3.026 8.33 2.477 10.598 18.902 17.97 38.978 22.062 60.159 1.745 9.075 2.749 18.342 3.388 27.573.233 3.38.433 6.775.563 10.165l-133.77.801z"/>
<path id="MeterLevel5" fill-rule="evenodd" clip-rule="evenodd" fill="#F7941E" stroke="#F7941E" stroke-width="3" stroke-miterlimit="10" d="M308.366 208.24c-5.579-10.374-13.599-18.53-23.746-24.765-2.838-1.745-3.126-3.083-1.345-6.073 20.7-34.8 41.229-69.697 61.814-104.562 3.133-5.32 3.057-5.162 8.401-1.965 18.343 10.985 34.468 24.557 48.298 40.686 5.918 6.914 11.29 14.356 16.327 21.947a316.161 316.161 0 015.427 8.427L308.366 208.24z"/>
<path id="MeterLevel4" fill-rule="evenodd" clip-rule="evenodd" fill="#E9A254" stroke="#E9A255" stroke-width="3" stroke-miterlimit="10" d="M281.401 181.862c-10.78-6.625-22.52-10.083-35.097-10.791-3.518-.198-4.521-1.26-4.586-4.803-.781-41.22-1.774-82.445-2.697-123.667-.146-6.287-.129-6.108 6.45-5.813 22.578 1.022 44.605 5.437 65.994 13.25 9.16 3.356 18.123 7.449 26.87 11.836a364.784 364.784 0 019.56 4.95l-66.494 115.038z"/>
<path id="MeterLevel3" fill-rule="evenodd" clip-rule="evenodd" fill="#00AEEF" stroke="#00AEEF" stroke-width="3" stroke-miterlimit="10" d="M243.596 170.132c-11.194.202-21.565 3.643-31.219 9.898-2.701 1.75-3.959 1.386-5.726-1.616-20.588-34.909-41.334-69.707-62.027-104.54-3.162-5.309-3.062-5.166 1.952-8.503 17.211-11.441 35.661-19.675 55.287-24.646 8.411-2.121 17.033-3.503 25.638-4.514 3.147-.371 6.317-.707 9.481-.973l6.614 134.894z"/>
<path id="MeterLevel2" fill-rule="evenodd" clip-rule="evenodd" fill="#65CCED" stroke="#65CCED" stroke-width="3" stroke-miterlimit="10" d="M206.728 182.666c-10.256 5.49-18.325 13.409-24.491 23.437-1.726 2.805-3.048 3.086-6.004 1.312-34.399-20.618-68.896-41.065-103.36-61.567-5.259-3.122-5.104-3.043-1.94-8.33 10.866-18.132 24.289-34.057 40.237-47.701 6.839-5.839 14.197-11.135 21.705-16.1a316.26 316.26 0 018.333-5.348l65.52 114.297z"/>
<path id="MeterHand" fill="#36374C" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M245.86 82.888c.45 5.531.935 11.064 1.339 16.602.964 13.229 2.078 26.464 3.275 39.674 1.446 15.945 2.766 31.944 3.817 47.92.917 13.937 1.823 27.864 3.666 41.715 1.197 9 2.871 19.793-.075 28.599-4.139 12.368-20.653 12.815-25.296.628-2.727-7.159-.872-17.067-.336-24.569.39-5.453 1.511-10.767 2.365-16.154 2.056-12.965 2.151-26.227 3.488-39.28 1.462-14.285 2.496-28.572 3.61-42.885.918-11.768 2.071-23.51 2.847-35.29.36-5.469 1.128-10.968 1.293-16.444.006-.17.02-.348.007-.516z"/>
<circle class="SmallCircle" fill="#FFF" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="243.878" cy="246.142" r="6.833"/>
<path id="MeterLevel1" fill-rule="evenodd" clip-rule="evenodd" fill="#58595B" stroke="#58595B" stroke-width="3" stroke-miterlimit="10" d="M179.439 207.227c-6.423 10.313-9.725 21.616-10.313 33.779-.165 3.403-1.201 4.354-4.686 4.353-40.536-.007-81.078.191-121.616.322-6.183.026-6.007.013-5.773-6.353.812-21.842 4.964-43.087 12.466-63.65 3.224-8.808 7.171-17.41 11.413-25.797a350.157 350.157 0 014.787-9.166l113.722 66.512z"/>
</svg>
</body>
</html>

Not able to spin the cog based on the centre origin

I am trying to make a hover effect which will spin the three different cog svg icon to its respected centre origin. I tried using transform-origin as centre but no luck. Any help would be appreciated. Here is my code below.
.cog--middle {
transform: rotate(0deg);
transition: 0.3s;
transform-origin: center center;
}
svg:hover .cog--middle {
transform: rotate(360deg);
}
<svg
width="110px"
height="100px"
viewBox="0 0 110 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>ic--rollout</title>
<g class="cog--middle">
<path
d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z"
fill="#1B385C"
id="wheel"
/>
</g>
<g class="cog--left">
<path
d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z"
fill="#1B385C"
id="wheel-copy"
/>
</g>
<g class="cog--right">
<path
d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z"
fill="#1B385C"
id="wheel-copy-2"
/>
</g>
</svg>

Gears can be drawn in a vector editor. But while it is difficult to find the exact center of rotation of the gear.
In case of inaccurate indication of the center of rotation, the gear will rotate with a bean,
I decided to first select the center of rotation - 100,100px and create a gear around it.
Draw the outer contour of the gear
When the radius of the circle R = 60px the circumference will be
C=2*Pi*R≈2*3.1415927*60 = 376.98
Find out the length of the sector in the presence of 24 gear teeth 376,98 / 24 = 15,71
Formula stroke-dasharray = "7.85 7.85"
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<!-- big gear -->
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
</svg>
Create the spokes of the gear
Draw lines with markers at the ends
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
</defs
<!-- big gear -->
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
</svg>
Clone jumpers and turn to different angles
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
</defs
<!-- big gear -->
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
</svg>
Animate the rotation of the gear
<animateTransform
attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
</defs
<!-- big gear -->
<g>
<animateTransform
attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
</g>
</svg>
Similarly, we create a small gear. Add rotation control buttons
A pair of gears ready
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
<marker id="MarkerArrow2" viewBox="0 0 20 20" refX="3" refY="3.5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="7" height="7" rx="2" fill="grey"/>
</marker>
<line id="line2" x1="168.5" y1="100" x2="211.5" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow2);
marker-start: url(#MarkerArrow2);
stroke:grey; stroke-width:3.5; ">
</line>
</defs>
<!-- big gear -->
<g id="Big_Gear">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" />
</g>
</g>
<!-- small gear -->
<g id="Small_Gear" transform="rotate(20 100 100)">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 190 100" to="-360 190 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line2" transform="rotate(0 190 100)"/>
<use xlink:href="#line2" transform="rotate(120 190 100)"/>
<use xlink:href="#line2" transform="rotate(240 190 100)"/>
<circle cx="190" cy="100" r="7.5" style="stroke: grey; fill:none; stroke-width: 3px;" />
<circle cx="190" cy="100" r="25" style="stroke: grey; fill:none; stroke-width: 6px;" />
<circle cx="190" cy="100" r="30" style="stroke: grey; fill:none; stroke-dasharray: 5 5; stroke-width: 5px;" />
</g>
</g>
<g transform = "translate(-20,-160)">
<g id="gO1">
<rect x="35" y="165" height="20" width="60" rx="5" fill="green"/>
<text x="50" y="181" font-size="18" fill="white">GO</text>
</g>
<g id="stop1">
<rect x="100" y="165" height="20" width="60" rx="5" fill="red"/>
<text x="105" y="181" font-size="18" fill="white">STOP</text>
</g>
</g>
</svg>
Three gears
Gears can be cloned using the command -
<use xlink:href="#Small_Gear" />
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
<marker id="MarkerArrow2" viewBox="0 0 20 20" refX="3" refY="3.5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="7" height="7" rx="2" fill="grey"/>
</marker>
<line id="line2" x1="168.5" y1="100" x2="211.5" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow2);
marker-start: url(#MarkerArrow2);
stroke:grey; stroke-width:3.5; ">
</line>
</defs>
<g id="two gears" transform="translate(25 0)">
<!-- big gear -->
<g id="Big_Gear">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" />
</g>
</g>
<!-- small gear -->
<g id="Small_Gear" transform="rotate(20 100 100)">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 190 100" to="-360 190 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line2" transform="rotate(0 190 100)"/>
<use xlink:href="#line2" transform="rotate(120 190 100)"/>
<use xlink:href="#line2" transform="rotate(240 190 100)"/>
<circle cx="190" cy="100" r="7.5" style="stroke: grey; fill:none; stroke-width: 3px;" />
<circle cx="190" cy="100" r="25" style="stroke: grey; fill:none; stroke-width: 6px;" />
<circle cx="190" cy="100" r="30" style="stroke: grey; fill:none; stroke-dasharray: 5 5; stroke-width: 5px;" />
</g>
</g>
</g>
<use xlink:href="#Small_Gear" x="-146" />
<g transform = "translate(-30,-160)">
<g id="gO1">
<rect x="35" y="165" height="20" width="60" rx="5" fill="green"/>
<text x="50" y="181" font-size="18" fill="white">GO</text>
</g>
<g id="stop1">
<rect x="100" y="165" height="20" width="60" rx="5" fill="red"/>
<text x="105" y="181" font-size="18" fill="white">STOP</text>
</g>
</g>
</svg>
Planetary transmission example
.parent{
position: relative;
}
.container{
width: 75%;
height: 75%;
margin: auto;
position: absolute;
top: 0;
left: 0;
}
<div class="parent">
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'
viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet"> >
<title>animation planetary mechanism</title>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="#22211D"/>
</marker>
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:#22211D; stroke-width:6; ">
</line>
<marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="7" height="3.5" rx="2" fill="#22211D"/>
</marker>
<line id="line-s" x1="175" y1="100" x2="202" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow-s1);
marker-start: url(#MarkerArrow-s);
stroke:#22211D; stroke-width:2; " >
</line>
<linearGradient id="vertical"
x2="0%" y2="100%"
spreadMethod="pad" >
<stop offset="0%" stop-color="powderblue"/>
<stop offset="100%" stop-color="lightgreen"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#vertical)" />
<g transform = "translate(300,60)" >
<g id="wheel">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="gO1.click" end="stop1.click" dur="14s"
repeatCount="indefinite"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" />
<circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
</g>
</g>
<g id="col-small">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 188 100" to="-360 188 100"
begin="gO1.click" end="stop1.click" dur="3.5s"
repeatCount="indefinite"
/>
<use xlink:href="#line-s" transform="rotate(0 188 100)"/>
<use xlink:href="#line-s" transform="rotate(120 188 100)"/>
<use xlink:href="#line-s" transform="rotate(240 188 100)"/>
<circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none; stroke-width: 4px;" />
<circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none; stroke-width: 7px;" />
<circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" />
<circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
</g>
</g>
<g id="planetar" >
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="-360 100 100"
begin="gO1.click" end="stop1.click" dur="28s"
repeatCount="indefinite"
/>
<circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" />
<circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none; stroke-width: 12px;" />
<circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
</g>
</g>
<g >
<use xlink:href="#col-small" transform="rotate(240 100 100)" />
<use xlink:href="#col-small" transform="rotate(120 100 100)" />
</g>
<g transform = "translate(0,120)">
<g id="gO1">
<rect x="45" y="115" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue"/>
<text x="62" y="132" font-size="16" fill="yellow">GO</text>
</g>
<g id="stop1">
<rect x="110" y="115" height="22" width="60" rx="5" fill="crimson" stroke="red"/>
<text x="120" y="132" font-size="16" fill="yellow" >STOP</text>
</g>
</g>
</g>
</svg>
</div>
</div>

Considering that you are trying to avoid using transform-box, one way to achieve the desired result is playing around with the transform-origin property using percentage values
.cog--middle {
transform: rotate(0deg);
transition: 0.3s;
transform-origin: 47% 34%;
}
svg:hover .cog--middle {
transform: rotate(360deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg width="110px" height="100px" viewBox="0 0 110 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ic--rollout</title>
<g class="cog--middle">
<path d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z" fill="#1B385C" id="wheel"></path>
</g>
<g class="cog--left">
<path d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z" fill="#1B385C" id="wheel-copy"></path>
</g>
<g class="cog--right">
<path d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z" fill="#1B385C" id="wheel-copy-2"></path>
</g>
</svg>
</body>
</html>

Basically, there are many ways you can solve this problem. I won't cover all of them, but here are some in order of effectiveness:
1) Just use separate SVG objects
If you going to animate different parts of pure SVG (no libraries like Snap.svg) with pure CSS - don't mix everything in one single SVG object. Instead, create 3 objects, each one with separate viewBox. That way you'll have total control over it with CSS animations
svg path {
transform: rotate(0deg);
transition: 3s;
transform-origin: center center;
}
svg:hover path {
transform: rotate(360deg);
}
.cog--middle {
position: absolute;
width: 68.8px;
height: 67.71px;
left: 17px;
top: 0px;
}
.cog--left {
position: absolute;
width: 40.03px;
height: 38.8px;
left: 0px;
top: 60px;
}
.cog--right {
position: absolute;
width: 40.03px;
height: 38.8px;
left: 70px;
top: 55px;
}
<svg class="cog--middle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 68.8 67.71" style="enable-background:new 0 0 68.8 67.71;" xml:space="preserve">
<path id="wheel1" fill="#1B395D" d="M15.82,13.87c1.75-1.59,3.7-2.97,5.81-4.07l-1.67-7.05L27.69,0l3.58,6.85c1.02-0.11,2.05-0.17,3.1-0.17c1.26,0,2.51,0.09,3.73,0.25l2.55-6.78l7.95,2.04l-0.89,7.93c1.79,0.99,3.45,2.18,4.97,3.53l8-3.29l3.93,7.2l-5.68,4.22c0.05,0.09,0.09,0.18,0.14,0.28c1.03,2.09,1.8,4.33,2.27,6.68l7.48,1l-0.2,8.2l-7.12,0.82c-0.38,2.26-1.03,4.43-1.93,6.46L64.81,51l-5.43,6.15l-5.49-3.62c-0.21,0.21-0.42,0.41-0.63,0.62c-1.56,1.47-3.29,2.77-5.15,3.85l1.12,7.64l-7.94,2.07l-2.64-6.36c-0.36,0.06-0.73,0.11-1.1,0.15c-1.05,0.12-2.11,0.18-3.19,0.18c-1.09,0-2.17-0.06-3.23-0.19l-2.37,5.97l-7.91-2.18l0.87-6.67c-0.19-0.1-0.38-0.2-0.56-0.3c-2.14-1.17-4.1-2.62-5.85-4.29L8.71,57.3l-4.42-6.91l5.2-4.45c-1.05-2.22-1.82-4.61-2.24-7.11L0,37.84l0.2-8.2l7.19-0.83c0.44-2.23,1.15-4.37,2.1-6.37c0.07-0.14,0.13-0.28,0.2-0.42l-5.88-4.87l4.52-6.85L15.82,13.87z M34.36,53.83C45.21,53.83,54,45.03,54,34.18s-8.79-19.64-19.64-19.64s-19.64,8.79-19.64,19.64S23.51,53.83,34.36,53.83z"/>
</svg>
<svg class="cog--left" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40.03 38.8" style="enable-background:new 0 0 40.03 38.8;" xml:space="preserve">
<path id="wheel2" fill="#1B395D" d="M34.48,12.91c0.57,1.23,0.98,2.54,1.21,3.89l4.18,0.36l0.15,4.69l-4.41,0.71c-0.12,0.57-0.27,1.14-0.45,1.71c-0.22,0.69-0.49,1.35-0.8,1.98l3.28,2.61L35.1,32.8l-4.21-1.91c-0.87,0.79-1.82,1.48-2.83,2.06l0.4,4.94l-4.67,0.83l-1.32-3.84c-0.06,0.01-0.12,0.02-0.18,0.03c-1.33,0.18-2.71,0.19-4.08,0.03l-1.88,3.88l-4.49-1.59l0.81-4.01c-1.18-0.61-2.26-1.36-3.22-2.21L5.31,32.8l-2.43-4.05l2.97-2.32c-0.08-0.15-0.15-0.3-0.23-0.45c-0.54-1.11-0.94-2.28-1.21-3.49L0,21.7l0.27-4.68l3.98-0.29c0.03-0.21,0.07-0.41,0.11-0.62c0.12-0.59,0.27-1.18,0.47-1.76c0.19-0.59,0.42-1.16,0.68-1.72l-2.87-2.36l2.61-3.9l3.52,1.67c0.09-0.08,0.18-0.17,0.26-0.25c1.03-0.95,2.17-1.75,3.41-2.4l-0.63-4.18l4.6-1.15l1.53,3.63c1.41-0.17,2.87-0.15,4.32,0.07L24.07,0l4.49,1.59l-0.82,4.05c1.15,0.64,2.2,1.41,3.14,2.29c0.07,0.06,0.13,0.12,0.19,0.18L34.8,5.8l2.98,3.69L34.48,12.91z M9.16,15.76c-1.93,5.89,1.36,12.25,7.35,14.2c5.98,1.96,12.39-1.23,14.32-7.12c1.93-5.89-1.36-12.25-7.35-14.2C17.49,6.69,11.08,9.88,9.16,15.76z"/>
</svg>
<svg class="cog--right" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40.03 38.8" style="enable-background:new 0 0 40.03 38.8;" xml:space="preserve">
<path id="wheel2" fill="#1B395D" d="M34.48,12.91c0.57,1.23,0.98,2.54,1.21,3.89l4.18,0.36l0.15,4.69l-4.41,0.71c-0.12,0.57-0.27,1.14-0.45,1.71c-0.22,0.69-0.49,1.35-0.8,1.98l3.28,2.61L35.1,32.8l-4.21-1.91c-0.87,0.79-1.82,1.48-2.83,2.06l0.4,4.94l-4.67,0.83l-1.32-3.84c-0.06,0.01-0.12,0.02-0.18,0.03c-1.33,0.18-2.71,0.19-4.08,0.03l-1.88,3.88l-4.49-1.59l0.81-4.01c-1.18-0.61-2.26-1.36-3.22-2.21L5.31,32.8l-2.43-4.05l2.97-2.32c-0.08-0.15-0.15-0.3-0.23-0.45c-0.54-1.11-0.94-2.28-1.21-3.49L0,21.7l0.27-4.68l3.98-0.29c0.03-0.21,0.07-0.41,0.11-0.62c0.12-0.59,0.27-1.18,0.47-1.76c0.19-0.59,0.42-1.16,0.68-1.72l-2.87-2.36l2.61-3.9l3.52,1.67c0.09-0.08,0.18-0.17,0.26-0.25c1.03-0.95,2.17-1.75,3.41-2.4l-0.63-4.18l4.6-1.15l1.53,3.63c1.41-0.17,2.87-0.15,4.32,0.07L24.07,0l4.49,1.59l-0.82,4.05c1.15,0.64,2.2,1.41,3.14,2.29c0.07,0.06,0.13,0.12,0.19,0.18L34.8,5.8l2.98,3.69L34.48,12.91z M9.16,15.76c-1.93,5.89,1.36,12.25,7.35,14.2c5.98,1.96,12.39-1.23,14.32-7.12c1.93-5.89-1.36-12.25-7.35-14.2C17.49,6.69,11.08,9.88,9.16,15.76z"/>
</svg>
2) DO use transform-box
In most cases that will do the trick. If you need wider browser support - just use separate CSS class for special browsers, like Edge, with pixel-perfect transform-origin property and toggle between classes with JS.
.modern{
transform-origin: 50% 50%;
transform-box: fill-box;
}
.edge{
transform-origin: 52px 34px;
}
3) DO use Snap.svg
This library will let you animate anything with ease. You just sit back and relax.
var s = Snap("#svg"),
gear = s.select('#wheel'),
bbox = gear.getBBox();
gear.transform("rotate(0 "+bbox.cx+" "+bbox.cy+")");
gear.animate({ transform: "rotate(3600 "+bbox.cx+" "+bbox.cy+")"}, 50000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<svg id="svg"
width="110px"
height="100px"
viewBox="0 0 110 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>ic--rollout</title>
<g class="cog--middle">
<path
d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z"
fill="#1B385C"
id="wheel"
/>
</g>
<g class="cog--left">
<path
d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z"
fill="#1B385C"
id="wheel-copy"
/>
</g>
<g class="cog--right">
<path
d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z"
fill="#1B385C"
id="wheel-copy-2"
/>
</g>
</svg>
4) Make SVG animation
As #Alexandr_T suggested, use pure SVG animation without CSS. This is the same as previous solution, but instead of relaxing - you do the complicated calculations on your own.

Stroke animation, how to attach another path to the appearing stroke?

I have the following animation:
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#currency-chart-path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 30s linear forwards;
}
<svg id="city-total-v2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<g id="Chartline">
<path id="currency-chart-path" stroke="#7C0A67" stroke-width="3px" fill="none" d="M443,439 L464,435 487,421 511,416 532,424 552,408 572,414 591,413 606,419" />
<path id="chart-arrow" fill="#7C0A67" d="M604.4,423.5l6.88-2.26l-2.44-3.3c-0.1-0.22-0.25-0.41-0.43-0.58l0.01,0.02l-0.02-0.02
c0,0,0,0.01,0.01,0.01l-2.48-3.36l-0.08,0.42l-0.27,1.66l-0.03-0.01l-0.68,3.8l0.09,0.04L604.4,423.5z"/>
</g>
</svg>
Run the code snippet to see the animation.
I want to attach the arrow to the stroke so it look like following the path.
How is that possible?

Yes, it's possible, however in this case you will need JavaScript. Please reed the comments in my code.
let chart = document.querySelector("#currency_chart_path");
// the length of the chart path
let length = currency_chart_path.getTotalLength();
// the request animation id
let rid = null;
// setting the stroke-dasharray and the stroke-dashoffset for the chart
chart.style.strokeDasharray = length;
chart.style.strokeDashoffset = length;
// the animation frames
let frames = length;
// two points on the path: the actual point and an other point very near used to calculate the angle of rotation for the arrow
let point1, point2;
// the animation:
function Frame() {
rid = requestAnimationFrame(Frame);
chart.style.strokeDashoffset = frames;
//two points on the path: the actual point and an other point very near
point1 = chart.getPointAtLength(length - frames);
point2 = chart.getPointAtLength((length - frames + 2) % length);
//the angle of rotation for the arrow
angle = Math.atan2(point2.y - point1.y, point2.x - point1.x);
// set the transformation for the arrow
arrow.setAttribute(
"transform",
"translate(" +
[point1.x, point1.y] +
")" +
"rotate(" +
angle * 180 / Math.PI +
")"
);
frames--;
// stop the animation
if (frames <= 2) {
cancelAnimationFrame(rid);
rid = null;
}
}
Frame();
svg{border:1px solid}
<svg id="city-total-v2" viewBox="400 370 250 100" >
<g id="Chartline">
<path id="currency_chart_path" stroke="#7C0A67" stroke-width="3px" fill="none" d="M443,439 L464,435 487,421 511,416 532,424 552,408 572,414 591,413 606,419" />
<path id="arrow" fill="#7C0A67" d="M0,0L0,-5L7,0L0,5"/>
</g>
</svg>
This is inspired by a demo in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design

An idea is to run the animation in the opposite direction while doing a translation
#keyframes dash {
to {
stroke-dasharray: 190;
}
}
#keyframes move {
to {
transform: translateX(0);
}
}
#currency-chart-path {
stroke-dasharray: 279;
stroke-dashoffset: 381;
animation: dash 10s linear forwards;
}
#Chartline {
animation: move 10s linear forwards;
transform: translateX(-200px);
}
<svg id="city-total-v2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="300 300 400 400">
<g id="Chartline">
<path id="currency-chart-path" stroke="#7C0A67" stroke-width="3px" fill="none" d="M443,439 L464,435 487,421 511,416 532,424 552,408 572,414 591,413 606,419" />
<path id="chart-arrow" fill="#7C0A67" d="M604.4,423.5l6.88-2.26l-2.44-3.3c-0.1-0.22-0.25-0.41-0.43-0.58l0.01,0.02l-0.02-0.02
c0,0,0,0.01,0.01,0.01l-2.48-3.36l-0.08,0.42l-0.27,1.66l-0.03-0.01l-0.68,3.8l0.09,0.04L604.4,423.5z"/>
</g>
</svg>

Pure SVG Smil solution
You can use stroke-dashoffset to animate line growth.
A marker is used as an arrow at the end of the line, but it cannot be made to move with the line, since the line does not actually grow.
The line is drawn in advance and its growth is simply animated by decreasing the stroke-dashoffset from 177px to zero.
You can use another technique: add an animation of the movement of an arrow along this line to the animation of the growth of the line. It is necessary to set the same time for both animations and therefore the desired effect will be created:
<svg id="city-total-v2" viewBox="400 370 250 100" style="border:1px solid;" >
<g id="Chartline">
<path id="currency_chart_path" stroke-dasharray="177" stroke="#7C0A67" stroke-width="3px" fill="none" d="M443,439 L464,435 487,421 511,416 532,424 552,408 572,414 591,413 606,419" >
<!-- Line growth animation -->
<animate
attributeName="stroke-dashoffset"
begin="0s"
dur="4s"
values="177;0"
repeatCount="indefinite" />
</path>
<path id="arrow" transform="rotate(180)" fill="#7C0A67" d="M0,0L0,-5L7,0L0,5">
<!-- Animate an arrow along a line -->
<animateMotion
id="an"
dur="4s"
repeatCount="indefinite"
rotate="auto-reverse"
begin="0s"
restart="whenNotActive">
<mpath xlink:href="#currency_chart_path"/>
</animateMotion>
</path>
</g>
</svg>
Option with additional chart elements
The animation will start after clicking
<svg id="city_total_v2" viewBox="400 370 250 100" style="border:1px solid;" >
<defs>
<marker id="mark" markerWidth="6.5" markerHeight="8" refX="5.5" refY="1"
orient="45">
<polygon points="0,3.25 3.25,6.5 6.5,0" fill="black" stroke-width="0.25" stroke="black" />
</marker>
<marker id="mark2" markerWidth="7" markerHeight="7" refX="3.5" refY="3"
orient="-45">
<polygon points="0,3.25 3.25,6.5 6.5,0" fill="black" stroke-width="0.25" stroke="black" />
</marker>
</defs>
<g transform="translate(440 465)">
<polyline points="0,0 190,0" marker-end ="url(#mark)" fill="none" stroke="black" />
<polyline points="0,0 0,-85" marker-end ="url(#mark2)" fill="none" stroke="black" />
<rect x="3" y="-24" width="19" height="23" fill="red" />
<rect x="28" y="-30" width="19" height="29" fill="crimson" />
<rect x="53" y="-43" width="19" height="42" fill="gold" />
<rect x="78" y="-38" width="19" height="37" fill="orange" />
<rect x="103" y="-52" width="19" height="51" fill="skyblue" />
<rect x="128" y="-48" width="19" height="47" fill="yellowgreen" />
<rect x="153" y="-41" width="19" height="40" fill="orange" />
</g>
<g id="Chartline">
<path id="currency_chart_path" stroke-dasharray="177" stroke-dashoffset="177" stroke="#7C0A67" stroke-width="3px" fill="none" d="M443,439 L464,435 487,421 511,416 532,424 552,408 572,414 591,413 606,419" >
<!--Line growth animation -->
<animate
attributeName="stroke-dashoffset"
begin="city_total_v2.click"
dur="7s"
values="177;0"
fill="freeze"
restart="whenNotActive" />
</path>
<path id="arrow" transform="rotate(180)" fill="#7C0A67" d="M0,0L0,-5L7,0L0,5">
<!--Arrow movement animation -->
<animateMotion
id="an"
dur="7s"
repeatCount="1"
rotate="auto-reverse"
begin="city_total_v2.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#currency_chart_path"/>
</animateMotion>
</path>
</g>
</svg>
Added rectangle animations to arrow animation
<svg id="city_total_v2" viewBox="400 370 250 100" style="border:1px solid;" >
<defs>
<marker id="mark" markerWidth="6.5" markerHeight="8" refX="5.5" refY="1" orient="45">
<polygon points="0,3.25 3.25,6.5 6.5,0" fill="black" stroke-width="0.25" stroke="black" />
</marker>
<marker id="mark2" markerWidth="7" markerHeight="7" refX="3.5" refY="3" orient="-45">
<polygon points="0,3.25 3.25,6.5 6.5,0" fill="black" stroke-width="0.25" stroke="black" />
</marker>
</defs>
<g transform="translate(440 465)">
<rect x="3" y="0" width="19" height="23" fill="red" >
<!-- Animating the first rectangle -->
<animate id="an1" attributeName="y" begin="city_total_v2.click" dur="1s" values="-1;-24" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="28" y="0" width="19" height="29" fill="crimson" >
<!-- Animating the second rectangle -->
<animate id="an2" attributeName="y" begin="an1.end" dur="1s" values="-1;-30" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="53" y="0" width="19" height="42" fill="gold" >
<animate id="an3" attributeName="y" begin="an2.end" dur="1s" values="-1;-43" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="78" y="0" width="19" height="37" fill="orange" >
<animate id="an4" attributeName="y" begin="an3.end" dur="1s" values="-1;-37" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="103" y="0" width="19" height="51" fill="skyblue" >
<animate id="an5" attributeName="y" begin="an4.end" dur="1s" values="-1;-52" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="128" y="0" width="19" height="47" fill="yellowgreen" >
<animate id="an6" attributeName="y" begin="an5.end" dur="1s" values="-1;-48" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="153" y="0" width="19" height="40" fill="orange" >
<animate id="an7" attributeName="y" begin="an6.end" dur="1s" values="-1;-41" fill="freeze" restart="whenNotActive" />
</rect>
<!-- masking strip -->
<rect x="1" y="0" width="100%" height="100%" fill="white" />
<polyline marker-end ="url(#mark)" points="0,0 200,0" fill="none" stroke="black" />
<polyline marker-end ="url(#mark2)" points="0,0 0,-85" fill="none" stroke="black" />
</g>
<g id="Chartline">
<path id="currency_chart_path" stroke-dasharray="177" stroke-dashoffset="177" stroke="#7C0A67" stroke-width="3px" fill="none" d="M443,439 L464,435 487,421 511,416 532,424 552,408 572,414 591,413 606,419" >
<!-- Line animation -->
<animate attributeName="stroke-dashoffset" begin="city_total_v2.click" dur="7s" values="177;0" fill="freeze" restart="whenNotActive" />
</path>
<path id="arrow" transform="rotate(180)" fill="#7C0A67" d="M0,0L0,-5L7,0L0,5">
<!-- Arrow animation -->
<animateMotion
id="an"
dur="7s"
repeatCount="1"
rotate="auto-reverse"
begin="city_total_v2.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#currency_chart_path"/>
</animateMotion>
</path>
</g>
</svg>
Chart animation loop
<svg id="city_total_v2" viewBox="400 370 250 100" style="border:1px solid;" >
<defs>
<marker id="mark" markerWidth="6.5" markerHeight="8" refX="5.5" refY="1" orient="45">
<polygon points="0,3.25 3.25,6.5 6.5,0" fill="black" stroke-width="0.25" stroke="black" />
</marker>
<marker id="mark2" markerWidth="7" markerHeight="7" refX="3.5" refY="3" orient="-45">
<polygon points="0,3.25 3.25,6.5 6.5,0" fill="black" stroke-width="0.25" stroke="black" />
</marker>
</defs>
<g transform="translate(440 465)">
<rect x="3" y="0" width="19" height="23" fill="red" >
<animate id="an1" attributeName="y" begin="city_total_v2.click;an7.end" dur="1s" values="-1;-24" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="28" y="0" width="19" height="29" fill="crimson" >
<animate id="an2" attributeName="y" begin="an1.end" dur="1s" values="-1;-30" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="53" y="0" width="19" height="42" fill="gold" >
<animate id="an3" attributeName="y" begin="an2.end" dur="1s" values="-1;-43" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="78" y="0" width="19" height="37" fill="orange" >
<animate id="an4" attributeName="y" begin="an3.end" dur="1s" values="-1;-37" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="103" y="0" width="19" height="51" fill="skyblue" >
<animate id="an5" attributeName="y" begin="an4.end" dur="1s" values="-1;-52" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="128" y="0" width="19" height="47" fill="yellowgreen" >
<animate id="an6" attributeName="y" begin="an5.end" dur="1s" values="-1;-48" fill="freeze" restart="whenNotActive" />
</rect>
<rect x="153" y="0" width="19" height="40" fill="orange" >
<animate id="an7" attributeName="y" begin="an6.end" dur="1s" values="-1;-41" fill="freeze" restart="whenNotActive" />
</rect>
<!-- masking strip -->
<rect x="1" y="0" width="100%" height="100%" fill="white" />
<polyline marker-end ="url(#mark)" points="0,0 200,0" fill="none" stroke="black" />
<polyline marker-end ="url(#mark2)" points="0,0 0,-85" fill="none" stroke="black" />
</g>
<g id="Chartline">
<path id="currency_chart_path" stroke-dasharray="177" stroke-dashoffset="177" stroke="#7C0A67" stroke-width="3px" fill="none" d="M443,439 L464,435 487,421 511,416 532,424 552,408 572,414 591,413 606,419" >
<!-- Line animation -->
<animate attributeName="stroke-dashoffset" begin="city_total_v2.click;an7.end" dur="7s" values="177;0" fill="freeze" restart="whenNotActive" />
</path>
<path id="arrow" transform="rotate(180)" fill="#7C0A67" d="M0,0L0,-5L7,0L0,5">
<!-- Arrow animation -->
<animateMotion
id="an"
dur="7s"
repeatCount="1"
rotate="auto-reverse"
begin="city_total_v2.click;an7.end"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#currency_chart_path"/>
</animateMotion>
</path>
</g>
</svg>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How to make circle / g / path element in SVG pulse - html

Related

SVG element disappears after apply rotate animation

Flip SVG but not text inside

Rotating the Meterhand in CSS

Not able to spin the cog based on the centre origin

Stroke animation, how to attach another path to the appearing stroke?

Categories

Resources