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.
Related
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>
Is it possible to animate an SVG gradient set using css background property?
I've tried using the SVG animate element, here's an example:
<?xml version="1.0" encoding="utf-8"?>
<svg id="svg" version="1.1" style="display: block;" viewBox="0.148 0.121 399.909 187.745" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern-0" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
<rect x="0" y="0" width="50" height="100" style="fill: black;"/>
</pattern>
<linearGradient id="gradient-3" gradientUnits="userSpaceOnUse" x1="221.781" y1="-17.569" x2="221.781" y2="162.313" gradientTransform="matrix(-0.999997, 0.002512, -0.002478, -0.986265, 326.399578, 161.652725)" spreadMethod="pad">
<stop offset="0" style="stop-color: #4a87db;"/>
<stop offset="1" style="stop-color: rgb(255, 255, 255);"/>
<animate attributeName="x1" dur="5000ms" repeatCount="indefinite"
from="0%" to="100%" />
</linearGradient>
</defs>
<g id="svgg">
<path id="path1" d="M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0" stroke="none" fill-rule="evenodd" style="fill: url(#gradient-3);"/>
</g>
</svg>
But the animation isn't smooth and I'd like to just change the blue color from one hex to another rather than animating the x1 attribute.
is it possible to animate an SVG gradient set using css background
property?
To do this, add the SVG code with animation inside to CSS
background-image: url("data:image/svg+xml,%3Csvg id='svg' version='1.1' style='display: block;'...
To get this form of recording, you need to encode svg using SVG-encoder
Gradient color animation
To change the color of the gradient, you can use the animation of the stop offset attribute
<svg id="svg" version="1.1" style="display: block;" viewBox="0.148 0.121 399.909 187.745" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient-3" x1="100%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
<stop offset="0" style="stop-color: #4a87db;">
<animate dur="4s" attributeName="offset" fill="freeze" values="0;1;1;0" repeatCount="indefinite" />
</stop>
<stop offset="1" style="stop-color: #A6BCDB;">
<animate dur="4s" attributeName="offset" fill="freeze" values="0;1;1;0" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
<g id="svgg">
<path id="path1" d="M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0" stroke="none" fill-rule="evenodd" style="fill: url(#gradient-3);"/>
</g>
</svg>
Add this encoded svg file to background-image
div {
width: 800px;
height: 500px;
background-image: url("data:image/svg+xml,%3Csvg id='svg' version='1.1' style='display: block;' viewBox='0.148 0.121 399.909 187.745' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradient-3' x1='100%25' y1='0%25' x2='100%25' y2='100%25' spreadMethod='pad'%3E%3Cstop offset='0' style='stop-color: %234a87db;'%3E%3Canimate dur='4s' attributeName='offset' fill='freeze' values='0;1;1;0' repeatCount='indefinite' /%3E%3C/stop%3E%3Cstop offset='1' style='stop-color: %23A6BCDB;'%3E%3Canimate dur='4s' attributeName='offset' fill='freeze' values='0;1;1;0' repeatCount='indefinite' /%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='svgg'%3E%3Cpath id='path1' d='M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0' stroke='none' fill-rule='evenodd' style='fill: url(%23gradient-3);'/%3E%3C/g%3E%3C/svg%3E%0A") ;
background-repeat: no-repeat;
}
<div></div>
I've been able to achieve what I wanted using animate inside stop
<?xml version="1.0" encoding="utf-8"?>
<svg id="svg" version="1.1" style="display: block;" viewBox="0.148 0.121 399.909 187.745" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern-0" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
<rect x="0" y="0" width="50" height="100" style="fill: black;"/>
</pattern>
<linearGradient id="gradient-3" gradientUnits="userSpaceOnUse" x1="221.781" y1="-17.569" x2="221.781" y2="162.313" gradientTransform="matrix(-0.999997, 0.002512, -0.002478, -0.986265, 326.399578, 161.652725)" spreadMethod="pad">
<stop offset="0" style="stop-color: #4a87db;">
<animate attributeName="stop-color" values="#4a87db;#3176d6;#2668c3;#225bab;#2668c3;#3176d6;#4a87db" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop offset="1" style="stop-color: rgb(255, 255, 255);"/>
</linearGradient>
</defs>
<g id="svgg">
<path id="path1" d="M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0" stroke="none" fill-rule="evenodd" style="fill: url(#gradient-3);"/>
</g>
</svg>
How can I make this svg stay within the bounds of the container element?
Here without any CSS, when the viewport is made wide the svg overflows in the y dimension.
.container {
height: 200px;
background-color: gray;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>
Here I have tried some positioning magic, but that doesn't work either. I have tried some different things but am out of ideas.
.container {
height: 200px;
background-color: gray;
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
right: 100%;
bottom: 100%;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>
I know this is not what you asked for, but it could help, it's simple, and it will fit perfectly.
.container {
height:100px;
width:100px;
background-color:grey;
}
svg {
height:100px;
width:100px;
}
It depends on what you mean. If you want the SVG to be clipped off at the edges of the container, you can just add overflow: hidden to the container.
.container {
height: 200px;
background-color: gray;
position: relative;
overflow: hidden;
}
svg {
position: absolute;
left: 0;
top: 0;
right: 100%;
bottom: 100%;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>
If, instead, you want the SVG to resize to fit the container, you can add height: 100% to the SVG.
.container {
height: 200px;
background-color: gray;
position: relative;
}
svg {
position: absolute;
left: 0;
top: 0;
right: 100%;
bottom: 100%;
height: 100%;
}
<div class="container">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="588px" height="588px" viewBox="20.267 102.757 588 588" enable-background="new 20.267 102.757 588 588" xml:space="preserve">
<g>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,104.257h-0.006H314.267z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M593.641,309.856
c7.779,25.038,12.282,51.518,13.015,78.938C606.627,360.895,602.006,334.259,593.641,309.856z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M320.269,689.182
c-1.997,0.04-3.995,0.076-6.002,0.076C316.274,689.258,318.274,689.229,320.269,689.182z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.267,689.258
c-2.007,0-4.005-0.036-6.002-0.076C310.259,689.229,312.259,689.258,314.267,689.258z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M308.266,104.333
c1.995-0.04,3.991-0.076,5.995-0.076C312.256,104.257,310.258,104.286,308.266,104.333z"/>
<path fill="#FFFFFF" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M314.268,104.257
C314.268,104.257,314.268,104.257,314.268,104.257c2.007,0,4.005,0.036,6.003,0.076
C318.275,104.286,316.275,104.257,314.268,104.257z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="241.3174" y1="737.666" x2="389.318" y2="5.6631" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.1" style="stop-color:#E62725"/>
<stop offset="0.3093" style="stop-color:#ED1C24"/>
<stop offset="1" style="stop-color:#1C1B1C"/>
</linearGradient>
<path fill="url(#SVGID_1_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M497.885,194.197
c-35.951-52.42-101.821-88.07-177.614-89.864c-1.998-0.041-3.996-0.076-6.004-0.076c-0.002,0-0.004,0-0.006,0
c-2.004,0-4,0.036-5.995,0.076c-127.188,2.562-234.438,86.301-272.078,201.532c18.136-49.932,52.107-90.06,94.523-111.756
c22.219-11.365,46.75-17.683,72.544-17.683c41.792,0,80.278,16.559,110.958,44.369c31.15,28.237,54.245,68.078,64.56,113.999
c3.892,17.322,5.973,35.505,5.973,54.259c0,24.827-3.645,48.653-10.319,70.803c43.404-10.909,81.033-33.316,108.05-63.098
c27.84-30.689,44.418-69.196,44.418-111.013C526.894,252.353,516.317,221.074,497.885,194.197z"/>
<path fill="#FFF200" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.655,388.794
c-0.732-27.42-5.235-53.9-13.015-78.938c-36.443-117.287-144.715-202.931-273.37-205.523
c75.793,1.793,141.663,37.444,177.614,89.864c18.433,26.877,29.009,58.156,29.009,91.548c0,41.817-16.578,80.324-44.418,111.013
c-27.017,29.781-64.646,52.188-108.05,63.098c-19.077,4.795-39.263,7.38-60.159,7.38c-20.939,0-41.165-2.596-60.276-7.41
c11.732,38.949,32.869,72.69,60.221,97.485c30.68,27.81,69.165,44.369,110.956,44.369c31.125,0,60.417-9.186,86.018-25.359
c56.843-35.912,95.473-106.302,95.473-187.267C606.658,388.967,606.655,388.881,606.655,388.794z"/>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.9668" y1="107.8887" x2="314.2646" y2="107.8887" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_2_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M303.966,689.041
c1.429,0.059,2.862,0.106,4.298,0.141C306.828,689.152,305.398,689.091,303.966,689.041z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="27.7671" y1="364.2666" x2="384.7725" y2="364.2666" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#0090C7"/>
<stop offset="0.8326" style="stop-color:#2E3192"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M249.646,334.825
c20.38-5.543,42.089-8.545,64.622-8.545c22.49,0,44.159,2.99,64.505,8.513c-10.314-45.92-33.409-85.761-64.56-113.999
c-30.68-27.81-69.166-44.369-110.958-44.369c-25.794,0-50.325,6.318-72.544,17.683c-42.417,21.696-76.387,61.824-94.523,111.756
c-8.998,27.543-14.013,56.882-14.375,87.344c-0.014,1.183-0.045,2.361-0.045,3.547c0,158.094,125.431,286.855,282.199,292.285
c-84.513-3.441-156.088-48.998-186.572-112.624c-10.147-21.179-15.754-44.354-15.754-68.649c0-41.816,16.579-80.322,44.418-111.01
C172.146,368.001,208.125,346.119,249.646,334.825z"/>
</g>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="282.7324" y1="647.4258" x2="404.7324" y2="161.4258" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0.6047" style="stop-color:#006838"/>
<stop offset="1" style="stop-color:#538B2E"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#F1F2F2" stroke-width="3" stroke-miterlimit="10" d="M606.767,396.756
c0-2.662-0.04-5.315-0.111-7.961c0,0.086,0.003,0.172,0.003,0.259c0,80.965-38.63,151.355-95.473,187.267
c-25.601,16.174-54.893,25.359-86.018,25.359c-41.791,0-80.276-16.56-110.956-44.369c-27.353-24.795-48.489-58.536-60.221-97.485
c-6.669-22.141-10.311-45.956-10.311-70.772c0-18.743,2.079-36.915,5.965-54.228c-41.521,11.294-77.5,33.176-103.587,61.933
c-27.84,30.688-44.418,69.193-44.418,111.01c0,24.296,5.607,47.471,15.754,68.649c31,64.702,104.491,110.721,190.87,112.765
c1.997,0.04,3.995,0.076,6.002,0.076s4.005-0.036,6.002-0.076c1.438-0.034,2.87-0.082,4.301-0.141
C481.337,683.61,606.767,554.849,606.767,396.756z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="249.6802" y1="400.2422" x2="390.7451" y2="400.2422" gradientTransform="matrix(1 0 0 -1 -6 797)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_5_)" fill-opacity="0" d="M378.772,334.793c-20.346-5.523-42.015-8.513-64.505-8.513
c-22.533,0-44.242,3.002-64.622,8.545c-3.887,17.313-5.965,35.485-5.965,54.228c0,24.816,3.641,48.631,10.311,70.772
c19.111,4.814,39.337,7.41,60.276,7.41c20.896,0,41.082-2.585,60.159-7.38c6.675-22.15,10.319-45.977,10.319-70.803
C384.745,370.298,382.664,352.115,378.772,334.793z"/>
</g>
</svg>
</div>
In this example I am trying to scroll a masked container item using transform: translate and animation: infinite.
Problem is that only a small partition of the masked container item is scrolling. How would I get it scrolling as it does in the imgur link below?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
margin: 20px;
}
#code-main {
animation: code 3s infinite;
}
#keyframes code {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 150px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<svg width="712" height="670" viewBox="0 0 712 670" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_feeling_proud_qne1 1">
<g clip-path="url(#clip0)">
<g id="guy">
<path id="Vector" d="M516.326 380.047V565.042L547.27 615.472L549.625 619.308H671.722L674.189 380.047H516.326Z" fill="#E6E6E6"/>
<path id="Vector_2" opacity="0.1" d="M516.326 380.047V565.042L547.27 615.472L549.169 380.047H516.326Z" fill="black"/>
<path id="Vector_3" d="M221.566 375.113V560.109L190.622 610.539L188.267 614.374H66.17L63.703 375.113H221.566Z" fill="#E6E6E6"/>
<path id="Vector_4" opacity="0.1" d="M221.566 375.113V560.109L190.622 610.539L188.723 375.113H221.566Z" fill="black"/>
<path id="Vector_5" d="M711.188 371.414V382.513H47.67V366.48L109.335 334.414H656.923L711.188 371.414Z" fill="#E6E6E6"/>
<path id="Vector_6" opacity="0.1" d="M711.188 371.414V382.513H47.67V366.48L711.188 371.414Z" fill="black"/>
<path id="Vector_7" d="M142.635 426.912H113.035L100.702 418.279H156.201L142.635 426.912Z" fill="#3F3D56"/>
<path id="Vector_8" d="M142.635 462.678H113.035L100.702 454.045H156.201L142.635 462.678Z" fill="#3F3D56"/>
<path id="Vector_9" d="M142.635 513.244H113.035L100.702 504.61H156.201L142.635 513.244Z" fill="#3F3D56"/>
<path id="Vector_10" d="M142.635 563.809H113.035L100.702 555.176H156.201L142.635 563.809Z" fill="#3F3D56"/>
<path id="Vector_11" d="M595.257 431.845H624.857L637.19 423.212H581.691L595.257 431.845Z" fill="#3F3D56"/>
<path id="Vector_12" d="M595.257 467.611H624.857L637.19 458.978H581.691L595.257 467.611Z" fill="#3F3D56"/>
<path id="Vector_13" d="M595.257 518.177H624.857L637.19 509.544H581.691L595.257 518.177Z" fill="#3F3D56"/>
<path id="Vector_14" d="M595.257 568.742H624.857L637.19 560.109H581.691L595.257 568.742Z" fill="#3F3D56"/>
<path id="Vector_15" d="M490.821 127.605C491.695 127.605 492.403 126.897 492.403 126.023C492.403 125.149 491.695 124.44 490.821 124.44C489.947 124.44 489.239 125.149 489.239 126.023C489.239 126.897 489.947 127.605 490.821 127.605Z" fill="#F2F2F2"/>
<path id="Vector_16" d="M490.821 300.387C494.142 300.387 496.834 297.695 496.834 294.374C496.834 291.053 494.142 288.362 490.821 288.362C487.5 288.362 484.809 291.053 484.809 294.374C484.809 297.695 487.5 300.387 490.821 300.387Z" fill="#F2F2F2"/>
<path id="Vector_17" d="M481.452 357.981V361.146H311.202V358.614L311.436 357.981L315.632 346.589H477.971L481.452 357.981Z" fill="#3F3D56"/>
<path id="Vector_18" d="M546.97 354.883C546.659 356.208 545.489 357.607 542.843 358.93C533.35 363.677 514.046 357.664 514.046 357.664C514.046 357.664 499.173 355.133 499.173 348.487C499.59 348.201 500.026 347.942 500.477 347.712C504.468 345.6 517.702 340.39 541.167 347.932C542.896 348.475 544.44 349.487 545.628 350.855C546.154 351.373 546.55 352.008 546.783 352.708C547.016 353.408 547.08 354.153 546.97 354.883Z" fill="#3F3D56"/>
<path id="Vector_19" opacity="0.1" d="M546.97 354.883C535.35 359.335 524.992 359.667 514.363 352.284C510.343 349.313 505.476 347.71 500.477 347.712C504.468 345.6 517.702 340.39 541.167 347.932C542.896 348.475 544.44 349.487 545.628 350.855C546.154 351.373 546.55 352.008 546.783 352.708C547.016 353.408 547.08 354.153 546.97 354.883Z" fill="black"/>
<path id="Vector_20" d="M532.4 352.284C534.672 352.284 536.514 351.718 536.514 351.019C536.514 350.32 534.672 349.753 532.4 349.753C530.128 349.753 528.286 350.32 528.286 351.019C528.286 351.718 530.128 352.284 532.4 352.284Z" fill="#F2F2F2"/>
<path id="Vector_21" opacity="0.1" d="M481.452 357.981V361.146H311.202V358.614L311.436 357.981H481.452Z" fill="black"/>
<path id="Vector_22" d="M94.6615 0.0286924C92.9336 -0.113172 91.2035 0.273333 89.7002 1.13699C88.2242 2.14779 87.2939 3.91861 86.3443 5.56646C82.7136 11.9421 77.7985 17.4942 71.9101 21.8711C67.6211 25.0131 62.1684 28.9308 62.9022 34.7238C63.2893 36.6369 63.996 38.4711 64.9927 40.1493C68.9493 48.1363 79.7463 54.3086 78.6843 63.4224C82.6153 56.8415 77.3573 53.5874 81.2883 47.0065C83.1604 43.8725 86.4124 40.3348 89.2388 42.303C90.1852 42.962 90.8066 44.1439 91.792 44.7222C94.1432 46.1019 96.6446 43.4642 98.7259 41.5958C105.903 35.1532 116.109 36.841 125.04 38.8484C129.256 39.7961 133.887 41.0394 136.379 45.0691C139.656 50.3673 133.266 56.0894 131.651 62.0796C131.52 62.59 131.513 63.1248 131.633 63.6381C131.753 64.1514 131.996 64.6281 132.34 65.0273C132.684 65.4266 133.12 65.7365 133.61 65.9305C134.1 66.1246 134.63 66.1971 135.154 66.1417C137.834 65.8774 141.009 65.6607 141.167 64.4848C144.539 64.6048 148.67 64.223 150.114 60.7123C150.556 59.3233 150.789 57.8765 150.807 56.4191C151.337 50.5219 153.84 45.1419 155.498 39.5292C157.156 33.9164 157.877 27.3387 155.079 22.3624C154.08 20.7067 152.845 19.2057 151.413 17.9068C135.534 2.54006 114.657 0.00588238 94.6615 0.0286924Z" fill="#2F2E41"/>
<path id="Vector_23" d="M82.1377 74.9337C82.1377 74.9337 85.5911 103.712 72.9286 106.014C60.2661 108.317 84.4399 147.455 84.4399 147.455L141.997 154.362L128.183 108.317C128.183 108.317 118.974 104.863 124.73 81.8406C130.485 58.8178 82.1377 74.9337 82.1377 74.9337Z" fill="#FFB8B8"/>
<path id="Vector_24" d="M47.028 569.347L51.633 632.66H75.806L68.9 569.347H47.028Z" fill="#FFB8B8"/>
<path id="Vector_25" d="M224.303 449.629L227.756 502.581L254.233 491.07L243.872 447.327L224.303 449.629Z" fill="#FFB8B8"/>
<path id="Vector_26" d="M29.761 327.608C29.761 327.608 30.9121 394.374 37.819 416.246C44.7259 438.117 43.5747 439.268 42.4236 442.722C41.2724 446.175 40.1213 443.873 40.1213 449.629C40.1213 455.384 37.819 546.324 40.1213 554.382C42.4235 562.44 33.2145 576.254 40.1213 577.405C47.0281 578.556 79.2599 577.405 80.411 570.498C81.5622 563.591 71.202 561.289 75.8065 556.684C80.4111 552.08 87.3179 457.687 87.3179 457.687L103.434 392.072L133.363 357.538H196.676L216.245 433.513C216.245 433.513 208.187 455.384 213.943 455.384C219.699 455.384 254.233 462.291 254.233 436.966C254.233 411.641 242.721 336.817 240.419 334.515C238.117 332.213 241.57 324.155 238.117 320.701C234.663 317.248 194.374 293.074 179.409 288.47C164.444 283.865 143.451 278.385 143.451 278.385L29.761 327.608Z" fill="#2F2E41"/>
<path id="Vector_27" d="M254.233 481.86C254.233 481.86 236.966 476.105 228.908 493.372C220.85 510.639 224.303 515.243 224.303 515.243C224.303 515.243 250.779 524.452 255.384 519.848C257.387 517.845 263.748 517.149 270.296 517.002C280.269 516.778 282.923 502.668 273.504 499.383C273.223 499.285 272.939 499.2 272.651 499.127C263.442 496.825 254.233 481.86 254.233 481.86Z" fill="#2F2E41"/>
<path id="Vector_28" d="M108.038 93.9275C127.111 93.9275 142.572 78.4661 142.572 59.3934C142.572 40.3208 127.111 24.8593 108.038 24.8593C88.9656 24.8593 73.5042 40.3208 73.5042 59.3934C73.5042 78.4661 88.9656 93.9275 108.038 93.9275Z" fill="#FFB8B8"/>
<path id="Vector_29" d="M63.144 120.404C63.144 120.404 119.55 131.915 133.363 113.497C147.177 95.0786 152.933 165.298 152.933 165.298L159.839 238.971L149.479 279.26C149.479 279.26 95.3758 323.004 78.1087 326.457C60.8417 329.91 34.3655 332.213 34.3655 332.213C34.3655 332.213 42.4236 204.437 42.4236 202.134C42.4236 199.832 63.144 120.404 63.144 120.404Z" fill="#6C63FF"/>
<path id="Vector_30" d="M80.2983 98.8144C80.2983 98.8144 67.7485 91.6252 64.2951 98.532C60.8417 105.439 28.6099 122.706 25.1565 122.706C21.7031 122.706 32.0633 218.25 27.4587 229.762C22.8542 241.273 0.982611 325.306 13.6451 332.213C26.3076 339.119 17.0985 325.306 29.761 342.573C42.4235 359.84 104.585 359.84 108.038 352.933C111.492 346.026 80.411 294.225 86.1667 245.877C91.9224 197.53 101.131 130.764 93.0735 121.555C85.0156 112.346 80.2983 98.8144 80.2983 98.8144Z" fill="#2F2E41"/>
<path id="Vector_31" d="M121.852 106.59L123.455 101.072C123.455 101.072 171.351 116.95 173.653 127.31C175.955 137.671 174.804 210.192 166.746 215.948C158.688 221.704 147.177 230.913 155.235 244.726C163.293 258.54 172.502 273.505 179.409 274.656C186.316 275.807 198.978 283.865 195.525 291.923C192.071 299.981 150.63 285.016 150.63 285.016C150.63 285.016 123.003 264.296 124.154 232.064C125.305 199.832 121.852 106.59 121.852 106.59Z" fill="#2F2E41"/>
<path id="Vector_32" d="M162.142 242.424L134.514 294.225C134.514 294.225 94.2246 335.666 117.247 340.271C140.27 344.875 152.933 302.283 152.933 302.283L182.862 259.691L162.142 242.424Z" fill="#FFB8B8"/>
<path id="Vector_33" d="M96.3438 9.06446C94.9518 8.96132 93.5575 9.23175 92.3051 9.8478C91.1726 10.6749 90.2393 11.7445 89.5733 12.9785C86.5029 17.5971 82.5005 21.5224 77.8232 24.5025C74.3318 26.7233 69.893 29.4922 70.4904 33.5867C70.8146 34.9595 71.3917 36.2599 72.1922 37.4214C75.4241 43.1236 76.7108 49.7234 75.8574 56.2221L85.4575 42.2681C86.9814 40.053 89.6287 37.5526 91.9296 38.9437C92.6999 39.4095 93.2058 40.2449 94.0079 40.6535C95.9219 41.6287 97.9581 39.7644 99.6524 38.4439C105.495 33.8903 113.803 35.0832 121.073 36.502C124.505 37.1718 128.275 38.0506 130.304 40.8987C133.676 45.6319 130.155 52.4709 132.123 57.9388C132.674 57.5531 133.141 57.0608 133.498 56.491C133.855 55.9211 134.095 55.2855 134.201 54.6216C136.946 54.7064 140.309 54.4366 141.485 51.9552C141.842 50.9828 142.033 49.9568 142.049 48.9208C142.48 44.7527 144.518 40.9502 145.867 36.9831C147.217 33.0161 147.804 28.367 145.526 24.8497C144.693 23.658 143.687 22.5967 142.542 21.7006C129.616 10.8395 112.621 9.04834 96.3438 9.06446Z" fill="#2F2E41"/>
<path id="Vector_34" d="M162.142 122.706L172.867 125.553C172.867 125.553 197.827 189.472 192.071 233.215C186.316 276.958 182.862 267.749 182.862 267.749C182.862 267.749 173.653 247.029 152.933 251.633L162.142 122.706Z" fill="#2F2E41"/>
<path id="Vector_35" d="M48.6229 624.292C45.847 628.064 46.4035 633.456 43.9446 637.443C41.8132 640.898 37.7962 642.71 35.1302 645.771C34.2795 646.788 33.5212 647.879 32.8641 649.031C30.391 653.174 28.3808 658.483 30.8165 662.648C32.7758 665.998 36.8943 667.307 40.6715 668.2C45.4455 669.328 50.4058 670.23 55.235 669.368C60.0642 668.506 64.7838 665.549 66.5057 660.956C66.8441 659.801 67.2464 658.666 67.7108 657.555C70.3282 652.402 78.5383 652.347 81.217 647.225C83.0917 643.641 81.3684 639.309 79.6459 635.649L74.3848 624.472C72.6389 620.763 65.5611 622.896 61.8714 622.007C57.0591 620.848 52.0848 619.571 48.6229 624.292Z" fill="#2F2E41"/>
<path id="Vector_36" d="M10.1917 265.447L58.5394 340.271C58.5394 340.271 88.4689 378.258 97.678 360.991C106.887 343.724 65.4462 314.946 65.4462 314.946L34.3655 257.389L10.1917 265.447Z" fill="#FFB8B8"/>
<path id="Vector_37" d="M34.3655 125.008L25.1564 122.706C25.1564 122.706 6.73827 128.462 2.13372 152.635C-2.47081 176.809 0.982583 273.505 6.73826 274.656C12.4939 275.807 35.1655 257.819 38.7945 261.633C42.4235 265.447 30.9121 245.877 34.3655 235.517C37.8189 225.157 34.3655 125.008 34.3655 125.008Z" fill="#2F2E41"/>
<path id="Vector_38" d="M615.414 120.485H366.228C364.991 120.485 363.765 120.728 362.622 121.202C361.478 121.675 360.439 122.37 359.564 123.245C358.689 124.12 357.995 125.159 357.522 126.302C357.048 127.446 356.804 128.671 356.805 129.909V297.766C356.804 299.004 357.048 300.23 357.522 301.373C357.995 302.516 358.689 303.555 359.564 304.43C360.439 305.306 361.478 306 362.622 306.473C363.765 306.947 364.991 307.19 366.228 307.19H460.821L457.277 329.817C457.277 329.817 437.025 340.576 451.265 340.892C465.505 341.209 532.593 340.892 532.593 340.892C532.593 340.892 545.567 340.892 524.998 329.5L521.664 307.19H615.414C616.651 307.19 617.877 306.947 619.02 306.473C620.164 306 621.203 305.306 622.078 304.43C622.953 303.555 623.647 302.516 624.121 301.373C624.594 300.23 624.838 299.004 624.838 297.766V129.909C624.838 128.671 624.594 127.446 624.121 126.302C623.647 125.159 622.953 124.12 622.078 123.245C621.203 122.37 620.164 121.675 619.02 121.202C617.877 120.728 616.651 120.485 615.414 120.485Z" fill="#3F3D56"/>
</g>
<path id="Vector_39" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="366" y="130" width="250" height="140">
<path id="Vector_40" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
</mask>
<g mask="url(#mask0)">
<g id="code-main" filter="url(#filter0_d)">
<g id="code-main_2">
<g id="Group 15">
<path id="Rectangle 59" d="M424.752 164.345H395V171.444H424.752V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 60" d="M527.784 164.345H517.315V171.444H527.784V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 61" d="M548.721 164.345H538.252V171.444H548.721V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 62" d="M506.296 164.345H435.221V171.444H506.296V164.345Z" fill="#6C63FF"/>
<path id="Rectangle 63" d="M547.619 134.308H517.866V141.408H547.619V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 64" d="M587.839 134.308H558.087V141.408H587.839V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 66" d="M405.468 134.308H395V141.408H405.468V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 67" d="M426.405 134.308H415.937V141.408H426.405V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 68" d="M507.949 134.308H436.874V141.408H507.949V134.308Z" fill="#6C63FF"/>
<path id="Rectangle 69" d="M485.91 149.6H456.158V156.699H485.91V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 70" d="M445.689 149.6H415.937V156.699H445.689V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 71" d="M405.468 149.6H395V156.699H405.468V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 73" d="M587.839 149.6H577.371V156.699H587.839V149.6Z" fill="#6C63FF"/>
<path id="Rectangle 74" d="M566.902 149.6H495.827V156.699H566.902V149.6Z" fill="#6C63FF"/>
</g>
</g>
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_d" x="391" y="-181" width="200.839" height="360.444" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="711.188" height="669.683" fill="white"/>
</clipPath>
</defs>
</svg>
</body>
</html>
Codepen: https://codepen.io/DevKris/pen/KKpVxVa
Desired outcome: https://imgur.com/a/lG7vgem
You need to reuse the #Group15 several times:
Also I would use ids with no sapces: i.e. id="Group15" instead of id="Group 15"
I hope this is what you are asking.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align:center;
margin: 20px;
}
#code-main {
animation: code 3s infinite;
}
#keyframes code {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 150px);
}
}
<svg width="712" height="670" viewBox="0 0 712 670" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_feeling_proud_qne1 1">
<g clip-path="url(#clip0)">
<g id="guy">
<path id="Vector_38" d="M615.414 120.485H366.228C364.991 120.485 363.765 120.728 362.622 121.202C361.478 121.675 360.439 122.37 359.564 123.245C358.689 124.12 357.995 125.159 357.522 126.302C357.048 127.446 356.804 128.671 356.805 129.909V297.766C356.804 299.004 357.048 300.23 357.522 301.373C357.995 302.516 358.689 303.555 359.564 304.43C360.439 305.306 361.478 306 362.622 306.473C363.765 306.947 364.991 307.19 366.228 307.19H460.821L457.277 329.817C457.277 329.817 437.025 340.576 451.265 340.892C465.505 341.209 532.593 340.892 532.593 340.892C532.593 340.892 545.567 340.892 524.998 329.5L521.664 307.19H615.414C616.651 307.19 617.877 306.947 619.02 306.473C620.164 306 621.203 305.306 622.078 304.43C622.953 303.555 623.647 302.516 624.121 301.373C624.594 300.23 624.838 299.004 624.838 297.766V129.909C624.838 128.671 624.594 127.446 624.121 126.302C623.647 125.159 622.953 124.12 622.078 123.245C621.203 122.37 620.164 121.675 619.02 121.202C617.877 120.728 616.651 120.485 615.414 120.485Z" fill="#3F3D56"/>
</g>
<path id="Vector_39" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
<mask id="mask0">
<path id="Vector_40" d="M616 130H366V270H616V130Z" fill="#F2F2F2"/>
</mask>
<g mask="url(#mask0)" >
<g id="code-main" filter="url(#filter0_d)">
<g id="code-main_2">
<g id="Group15">
<path id="Rectangle59" d="M424.752 164.345H395V171.444H424.752V164.345Z" fill="#6C63FF"/>
<path id="Rectangle60" d="M527.784 164.345H517.315V171.444H527.784V164.345Z" fill="#6C63FF"/>
<path id="Rectangle61" d="M548.721 164.345H538.252V171.444H548.721V164.345Z" fill="#6C63FF"/>
<path id="Rectangle62" d="M506.296 164.345H435.221V171.444H506.296V164.345Z" fill="#6C63FF"/>
<path id="Rectangle63" d="M547.619 134.308H517.866V141.408H547.619V134.308Z" fill="#6C63FF"/>
<path id="Rectangle64" d="M587.839 134.308H558.087V141.408H587.839V134.308Z" fill="#6C63FF"/>
<path id="Rectangle66" d="M405.468 134.308H395V141.408H405.468V134.308Z" fill="#6C63FF"/>
<path id="Rectangle67" d="M426.405 134.308H415.937V141.408H426.405V134.308Z" fill="#6C63FF"/>
<path id="Rectangle68" d="M507.949 134.308H436.874V141.408H507.949V134.308Z" fill="#6C63FF"/>
<path id="Rectangle69" d="M485.91 149.6H456.158V156.699H485.91V149.6Z" fill="#6C63FF"/>
<path id="Rectangle70" d="M445.689 149.6H415.937V156.699H445.689V149.6Z" fill="#6C63FF"/>
<path id="Rectangle71" d="M405.468 149.6H395V156.699H405.468V149.6Z" fill="#6C63FF"/>
<path id="Rectangle73" d="M587.839 149.6H577.371V156.699H587.839V149.6Z" fill="#6C63FF"/>
<path id="Rectangle74" d="M566.902 149.6H495.827V156.699H566.902V149.6Z" fill="#6C63FF"/>
</g>
<use xlink:href="#Group15" y="-45" />
<use xlink:href="#Group15" y="-90" />
<use xlink:href="#Group15" y="-135" />
<use xlink:href="#Group15" y="-180" />
</g>
</g>
</g>
</g>
</g>
<defs>
<filter id="filter0_d" x="391" y="-181" width="200.839" height="360.444" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="711.188" height="669.683" fill="white"/>
</clipPath>
</defs>
</svg>
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.