SVG Animation rotate group around its center
You can also work around any browser problems with transform-origin by using nested groups.
<g transform="translate(243.35 194.85)">
<g id="Circleelement">
<g transform="translate(-243.35 -194.85)">
That way the CSS rotation is working on a group that it thinks is centred on the origin. So the element stays in place.
svg {
width: 50%;
}
/* Rotate around the circle center */
#Circleelement {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
/* _x31_ */
#_x31_, #_x32_7, #_x33_1, #_x31_3 {
-webkit-animation: flickerAnimation 3s infinite;
-moz-animation: flickerAnimation 3s infinite;
-o-animation: flickerAnimation 3s infinite;
animation: flickerAnimation 3s infinite;
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
}
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* _x32_ */
#_x32_, #_x32_8, #_x32_3, #_x31_0 {
animation: flickerAnimation 9s infinite;
-webkit-animation: flickerAnimation 9s infinite;
-moz-animation: flickerAnimation 9s infinite;
-o-animation: flickerAnimation 9s infinite;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
}
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* _x3_ */
#_x33_, #_x33_2, #_x32_5, #_x31_7 {
-webkit-animation: flickerAnimation 13s infinite;
-moz-animation: flickerAnimation 13s infinite;
-o-animation: flickerAnimation 13s infinite;
animation: flickerAnimation 13s infinite;
animation-delay: 0.75s;
-webkit-animation-delay: 0.75s;
-moz-animation-delay: 0.75s;
-o-animation-delay: 0.75s;
}
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* _x34_ */
#_x34_, #_x32_4, #_x33_6, #_x33_5, #_x31_5 {
-webkit-animation: flickerAnimation 23s infinite;
-moz-animation: flickerAnimation 23s infinite;
-o-animation: flickerAnimation 23s infinite;
animation: flickerAnimation 23s infinite;
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
}
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* _x35_ */
#_x35_, #_x32_2, #_x33_0, #_x31_9 {
-webkit-animation: flickerAnimation 15s infinite;
-moz-animation: flickerAnimation 15s infinite;
-o-animation: flickerAnimation 15s infinite;
animation: flickerAnimation 15s infinite;
animation-delay: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
}
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* _x36_ */
#_x36_, #_x32_0, #_x32_9, #_x31_1 {
-webkit-animation: flickerAnimation 18s infinite;
-moz-animation: flickerAnimation 18s infinite;
-o-animation: flickerAnimation 18s infinite;
animation: flickerAnimation 18s infinite;
animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
}
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* _x37_ */
#_x37_, #_x33_4, #_x31_2 {
-webkit-animation: flickerAnimation 6s infinite;
-moz-animation: flickerAnimation 6s infinite;
-o-animation: flickerAnimation 6s infinite;
animation: flickerAnimation 6s infinite;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
}
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* _x38_ */
#_x38_, #_x32_6, #_x31_6 {
-webkit-animation: flickerAnimation 10s infinite;
-moz-animation: flickerAnimation 10s infinite;
-o-animation: flickerAnimation 10s infinite;
animation: flickerAnimation 10s infinite;
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
}
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* _x39_ */
#_x39_, #_x33_3, #_x31_4 {
-webkit-animation: flickerAnimation 25s infinite;
-moz-animation: flickerAnimation 25s infinite;
-o-animation: flickerAnimation 25s infinite;
animation: flickerAnimation 25s infinite;
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
}
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* _x31_0 */
#_x31_0, #_x32_1, #_x31_8 {
-webkit-animation: flickerAnimation 30s infinite;
-moz-animation: flickerAnimation 30s infinite;
-o-animation: flickerAnimation 30s infinite;
animation: flickerAnimation 30s infinite;
animation-delay: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
}
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}<body>
<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g transform="translate(243.35 194.85)">
<g id="Circleelement">
<g transform="translate(-243.35 -194.85)">
<circle id="_x31_" fill="#000000" stroke-miterlimit="10" cx="242.5" cy="81.5" r="11.1"> </circle>
<circle id="_x32_" fill="#000000" stroke-miterlimit="10" cx="277.1" cy="87" r="10.8"/>
<circle id="_x33_" fill="#000000" stroke-miterlimit="10" cx="307.5" cy="102" r="10.5"/>
<circle id="_x34_" fill="#000000" stroke-miterlimit="10" cx="332.1" cy="124.9" r="10.2"/>
<circle id="_x35_" fill="#000000" stroke-miterlimit="10" cx="349.1" cy="154.2" r="9.9"/>
<circle id="_x36_" fill="#000000" stroke-miterlimit="10" cx="357" cy="188.1" r="9.6"/>
<circle id="_x37_" fill="#000000" stroke-miterlimit="10" cx="354.3" cy="223.4" r="9.4"/>
<circle id="_x38_" fill="#000000" stroke-miterlimit="10" cx="341.7" cy="255.1" r="9.1"/>
<circle id="_x39_" fill="#000000" stroke-miterlimit="10" cx="320.7" cy="281.4" r="8.8"/>
<circle id="_x31_0" fill="#000000" stroke-miterlimit="10" cx="293.1" cy="300.6" r="8.5"/>
<circle id="_x31_1" fill="#000000" stroke-miterlimit="10" cx="260.3" cy="311.1" r="8.2"/>
<circle id="_x31_2" fill="#000000" stroke-miterlimit="10" cx="224.7" cy="311.3" r="7.9"/>
<circle id="_x31_3" fill="#000000" stroke-miterlimit="10" cx="191.8" cy="301.2" r="7.6"/>
<circle id="_x31_4" fill="#000000" stroke-miterlimit="10" cx="164" cy="282.3" r="7.3"/>
<circle id="_x31_5" fill="#000000" stroke-miterlimit="10" cx="142.7" cy="256.3" r="7"/>
<circle id="_x31_6" fill="#000000" stroke-miterlimit="10" cx="129.7" cy="224.7" r="6.8"/>
<circle id="_x31_7" fill="#000000" stroke-miterlimit="10" cx="126.6" cy="189.4" r="6.5"/>
<circle id="_x31_8" fill="#000000" stroke-miterlimit="10" cx="134" cy="155.5" r="6.2"/>
<circle id="_x31_9" fill="#000000" stroke-miterlimit="10" cx="150.7" cy="126.1" r="5.9"/>
<circle id="_x32_0" fill="#000000" stroke-miterlimit="10" cx="174.9" cy="102.9" r="5.6"/>
<circle id="_x32_1" fill="#000000" stroke-miterlimit="10" cx="205.2" cy="87.5" r="5.3"/>
<circle id="_x32_2" fill="#000000" stroke-miterlimit="10" cx="242.6" cy="123.6" r="10.4"/>
<circle id="_x32_3" fill="#000000" stroke-miterlimit="10" cx="282.5" cy="136.5" r="9.7"/>
<circle id="_x32_4" fill="#000000" stroke-miterlimit="10" cx="308.8" cy="168" r="9.1"/>
<circle id="_x32_5" fill="#000000" stroke-miterlimit="10" cx="314" cy="210.3" r="8.4"/>
<circle id="_x32_6" fill="#000000" stroke-miterlimit="10" cx="261.1" cy="269.4" r="7.1"/>
<circle id="_x32_7" fill="#000000" stroke-miterlimit="10" cx="218.3" cy="268.8" r="6.5"/>
<circle id="_x32_8" fill="#000000" stroke-miterlimit="10" cx="184.1" cy="246.1" r="5.8"/>
<circle id="_x32_9" fill="#000000" stroke-miterlimit="10" cx="167.1" cy="208.3" r="5.2"/>
<circle id="_x33_0" fill="#000000" stroke-miterlimit="10" cx="200.5" cy="135.4" r="3.9"/>
<circle id="_x33_1" fill="#000000" stroke-miterlimit="10" cx="242.2" cy="164.1" r="5.4"/>
<circle id="_x33_2" fill="#000000" stroke-miterlimit="10" cx="271.9" cy="181.8" r="4.8"/>
<circle id="_x33_3" fill="#000000" stroke-miterlimit="10" cx="271.5" cy="216.9" r="4.1"/>
<circle id="_x33_4" fill="#000000" stroke-miterlimit="10" cx="241.3" cy="233.9" r="3.5"/>
<circle id="_x33_5" fill="#000000" stroke-miterlimit="10" cx="211.4" cy="216.5" r="2.8"/>
<circle id="_x33_6" fill="#000000" stroke-miterlimit="10" cx="211.4" cy="181.4" r="2.2"/>
</g>
</g>
</g>
<g id="Name">
<text transform="matrix(1 0 0 1 44 439.7)" font-family="'Gotham-Book'" font-size="54">S O M E T E X T</text>
</g>
</svg>
</body>You need to set a transform-origin
#Circleelement {
transform-origin:center;
}
Jsfiddle Demo
CSS-Tricks Article
Note: The 'origin' base point for SVG can be different between browsers. The above example works in Chrome but may not in FF. There are a number of questions in SO relating to this point.
Just use transform-box: fill-box; on that element, or on all elements.