Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

SVG Animation rotate group around its center

Tags:

css

centering

rotation

svg

I have a svg image that contains a circle group and a text group. The circle group consists of multiple dots. This Circle group should rotate around its circle center, but it keeps rotating around the svg's top left corner. To solve this issue I have searched everywhere, but I was not able to change the rotation center of that circle without placing the circle group at a totally wrong position.

So my question is: How can I define the rotation center of a svg image group without changing the groups position?

This is the code I'm using: https://jsfiddle.net/1pe2c837/1/

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 id="Circleelement" transform="translate(150 170) rotate(45) translate(-150 -170)">
	<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 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>
like image 480
Stefan Avatar asked May 15 '15 20:05

Stefan

People also ask

How do I rotate a path in SVG?

Just use the element type selector and add the transform: rotate(180deg) property to it like in the below snippet.

How do you rotate an animation in CSS?

To create a rotating animation in CSS, use the animation property and set the value of animations like duration, direction, and speed. Moreover, the rotate() CSS function is being used to rotate an element circularly in the transform property.

Does svgs support animation?

SVG supports the ability to change vector graphics over time, to create animated effects. SVG content can be animated in the following ways: Using SVG's animation elements [svg-animation]. SVG document fragments can describe time-based modifications to the document's elements.

What is animateTransform?

<animateTransform> The animateTransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.

1 Answers

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>
like image 90
Paul LeBeau Avatar answered Oct 29 '22 07:10

Paul LeBeau
Sign in to Comment

Related questions

Transitioning Affixed Navigation bar - CSS
Why does jQuery .css('background-color') return rgba(0,0,0,0) for 'transparent'?
How to remove 3D border of input filed in Chrome
Add dropdown arrow indicators to menu items that have submenus only?
Difference between position and margin [duplicate]
Vertical align using transform: translateY(-50%); inside absolutely positioned div
How does one right-justify bootstrap pills with css
Button inside TextArea in HTML
JQuery mouseover function firing multiple times
Bootstrap 3 tooltip gets wrapped on every white space?
Is a CSS Arch using border-radius possible?
Gulp: Compile Stylus and concat with pure CSS
CSS gradient: define width in pixels
How to remove the border line in a div-CSS
Scale image with CSS but limit to orignial size
Clickable div that redirect me to another HTML page
Draw triangle on right-border [duplicate]
Alternating colours per row per div using only css
Add inline CSS via jQuery
Space between Bootstrap 3 buttons

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!