Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="containSVG">
<svg id="orbitSVG" version="1.1" id="scene" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="800px" height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve">
<circle id="planet" fill="#ED1C24" cx="400" cy="400" r="116.666"/>
  <g id="masterOrbit">
<g id="orbit8">
	<rect x="204.863" y="204.863" fill="#00AEEF" width="102.381" height="102.38"/>
	<g>
		<path fill="#FFFFFF" d="M217.742,259.917V248.57h-4.053v-2.311h10.854v2.311H220.5v11.348H217.742z"/>
		<path fill="#FFFFFF" d="M230.618,256.769l2.608,0.438c-0.335,0.957-0.865,1.685-1.588,2.185s-1.629,0.75-2.716,0.75
			c-1.721,0-2.994-0.562-3.82-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.857-0.929,1.941-1.393,3.252-1.393c1.472,0,2.633,0.486,3.484,1.458c0.851,0.972,1.258,2.461,1.22,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812s0.907,0.647,1.509,0.647c0.41,0,0.755-0.112,1.034-0.335S230.475,257.266,230.618,256.769z
			 M230.767,254.123c-0.019-0.758-0.214-1.334-0.587-1.729c-0.373-0.394-0.826-0.591-1.36-0.591c-0.572,0-1.043,0.208-1.416,0.624
			c-0.373,0.416-0.556,0.981-0.55,1.696H230.767z"/>
		<path fill="#FFFFFF" d="M234.242,259.917l3.568-5.096l-3.419-4.798h3.196l1.751,2.721l1.845-2.721h3.075l-3.354,4.687l3.661,5.208
			h-3.214l-2.013-3.065l-2.031,3.065H234.242z"/>
		<path fill="#FFFFFF" d="M250.649,250.023v2.087h-1.789v3.988c0,0.808,0.017,1.278,0.051,1.412
			c0.034,0.133,0.112,0.244,0.233,0.331s0.269,0.13,0.442,0.13c0.242,0,0.593-0.084,1.053-0.251l0.224,2.031
			c-0.609,0.261-1.298,0.391-2.068,0.391c-0.472,0-0.897-0.079-1.276-0.238c-0.379-0.158-0.657-0.363-0.834-0.615
			c-0.177-0.251-0.3-0.592-0.368-1.02c-0.056-0.304-0.084-0.919-0.084-1.845v-4.314h-1.202v-2.087h1.202v-1.966l2.627-1.528v3.494
			H250.649z"/>
		<path fill="#FFFFFF" d="M257.795,259.917v-13.658h2.758v5.375h5.403v-5.375h2.758v13.658h-2.758v-5.972h-5.403v5.972H257.795z"/>
		<path fill="#FFFFFF" d="M277.276,256.769l2.608,0.438c-0.335,0.957-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.335
			S277.133,257.266,277.276,256.769z M277.425,254.123c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H277.425z"/>
		<path fill="#FFFFFF" d="M284.665,259.917h-2.618v-9.895h2.432v1.407c0.416-0.665,0.79-1.102,1.123-1.313
			c0.332-0.211,0.709-0.317,1.132-0.317c0.596,0,1.171,0.165,1.724,0.494l-0.811,2.282c-0.441-0.286-0.852-0.428-1.23-0.428
			c-0.366,0-0.677,0.101-0.932,0.303s-0.455,0.567-0.601,1.095c-0.146,0.528-0.219,1.633-0.219,3.317V259.917z"/>
		<path fill="#FFFFFF" d="M295.313,256.769l2.608,0.438c-0.335,0.957-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.335
			S295.17,257.266,295.313,256.769z M295.462,254.123c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H295.462z"/>
	</g>
</g>
<g id="orbit7">
	<rect x="145.239" y="348.809" fill="#00AEEF" width="102.38" height="102.381"/>
	<g>
		<path fill="#FFFFFF" d="M158.118,403.863v-11.348h-4.053v-2.311h10.854v2.311h-4.043v11.348H158.118z"/>
		<path fill="#FFFFFF" d="M170.994,400.714l2.608,0.438c-0.335,0.957-0.865,1.685-1.588,2.185s-1.629,0.75-2.716,0.75
			c-1.721,0-2.994-0.562-3.82-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.857-0.929,1.941-1.393,3.252-1.393c1.472,0,2.633,0.486,3.484,1.458c0.851,0.972,1.258,2.461,1.22,4.468h-6.559
			c0.019,0.776,0.229,1.381,0.633,1.813s0.907,0.647,1.509,0.647c0.41,0,0.755-0.112,1.034-0.336S170.851,401.212,170.994,400.714z
			 M171.143,398.068c-0.019-0.758-0.214-1.334-0.587-1.729c-0.373-0.394-0.826-0.591-1.36-0.591c-0.572,0-1.043,0.208-1.416,0.624
			c-0.373,0.416-0.556,0.981-0.55,1.696H171.143z"/>
		<path fill="#FFFFFF" d="M174.618,403.863l3.568-5.096l-3.419-4.798h3.196l1.751,2.721l1.845-2.721h3.075l-3.354,4.687l3.661,5.208
			h-3.214l-2.013-3.065l-2.031,3.065H174.618z"/>
		<path fill="#FFFFFF" d="M191.025,393.969v2.087h-1.789v3.988c0,0.808,0.017,1.278,0.051,1.412
			c0.034,0.134,0.112,0.244,0.233,0.331s0.269,0.13,0.442,0.13c0.242,0,0.593-0.084,1.053-0.251l0.224,2.031
			c-0.609,0.261-1.298,0.391-2.068,0.391c-0.472,0-0.897-0.079-1.276-0.237s-0.657-0.363-0.834-0.615
			c-0.177-0.251-0.3-0.592-0.368-1.02c-0.056-0.305-0.084-0.92-0.084-1.845v-4.314h-1.202v-2.087h1.202v-1.966l2.627-1.528v3.494
			H191.025z"/>
		<path fill="#FFFFFF" d="M198.171,403.863v-13.658h2.758v5.375h5.403v-5.375h2.758v13.658h-2.758v-5.972h-5.403v5.972H198.171z"/>
		<path fill="#FFFFFF" d="M217.652,400.714l2.608,0.438c-0.335,0.957-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.381,0.633,1.813c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.336
			S217.509,401.212,217.652,400.714z M217.801,398.068c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H217.801z"/>
		<path fill="#FFFFFF" d="M225.041,403.863h-2.618v-9.895h2.432v1.407c0.416-0.665,0.79-1.102,1.123-1.313
			c0.332-0.211,0.709-0.317,1.132-0.317c0.596,0,1.171,0.165,1.724,0.494l-0.811,2.282c-0.441-0.286-0.852-0.428-1.23-0.428
			c-0.366,0-0.677,0.101-0.932,0.303s-0.455,0.567-0.601,1.095c-0.146,0.528-0.219,1.633-0.219,3.317V403.863z"/>
		<path fill="#FFFFFF" d="M235.689,400.714l2.608,0.438c-0.335,0.957-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.381,0.633,1.813c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.336
			S235.546,401.212,235.689,400.714z M235.838,398.068c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H235.838z"/>
	</g>
</g>
<g id="orbit6">
	<rect x="204.863" y="492.755" fill="#00AEEF" width="102.38" height="102.381"/>
	<g>
		<path fill="#FFFFFF" d="M217.742,547.811v-11.348h-4.053v-2.311h10.854v2.311H220.5v11.348H217.742z"/>
		<path fill="#FFFFFF" d="M230.618,544.661l2.608,0.438c-0.335,0.956-0.865,1.684-1.588,2.184s-1.629,0.75-2.716,0.75
			c-1.721,0-2.994-0.562-3.82-1.686c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.857-0.929,1.941-1.394,3.252-1.394c1.472,0,2.633,0.486,3.484,1.459c0.851,0.972,1.258,2.461,1.22,4.467h-6.559
			c0.019,0.777,0.229,1.381,0.633,1.813s0.907,0.647,1.509,0.647c0.41,0,0.755-0.112,1.034-0.335
			C230.264,545.518,230.475,545.158,230.618,544.661z M230.767,542.016c-0.019-0.758-0.214-1.334-0.587-1.729
			s-0.826-0.592-1.36-0.592c-0.572,0-1.043,0.208-1.416,0.624c-0.373,0.416-0.556,0.981-0.55,1.696H230.767z"/>
		<path fill="#FFFFFF" d="M234.242,547.811l3.568-5.097l-3.419-4.798h3.196l1.751,2.721l1.845-2.721h3.075l-3.354,4.686l3.661,5.209
			h-3.214l-2.013-3.066l-2.031,3.066H234.242z"/>
		<path fill="#FFFFFF" d="M250.649,537.916v2.086h-1.789v3.988c0,0.808,0.017,1.277,0.051,1.412c0.034,0.133,0.112,0.243,0.233,0.33
			s0.269,0.131,0.442,0.131c0.242,0,0.593-0.084,1.053-0.252l0.224,2.031c-0.609,0.261-1.298,0.391-2.068,0.391
			c-0.472,0-0.897-0.078-1.276-0.237c-0.379-0.158-0.657-0.363-0.834-0.614c-0.177-0.252-0.3-0.592-0.368-1.021
			c-0.056-0.304-0.084-0.919-0.084-1.845v-4.314h-1.202v-2.086h1.202v-1.967l2.627-1.527v3.494H250.649z"/>
		<path fill="#FFFFFF" d="M257.795,547.811v-13.658h2.758v5.375h5.403v-5.375h2.758v13.658h-2.758v-5.973h-5.403v5.973H257.795z"/>
		<path fill="#FFFFFF" d="M277.276,544.661l2.608,0.438c-0.335,0.956-0.865,1.684-1.589,2.184s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.686c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.394,3.251-1.394c1.473,0,2.634,0.486,3.484,1.459c0.852,0.972,1.258,2.461,1.221,4.467h-6.559
			c0.019,0.777,0.229,1.381,0.633,1.813c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.335
			C276.922,545.518,277.133,545.158,277.276,544.661z M277.425,542.016c-0.019-0.758-0.214-1.334-0.587-1.729
			c-0.372-0.395-0.826-0.592-1.36-0.592c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H277.425z"/>
		<path fill="#FFFFFF" d="M284.665,547.811h-2.618v-9.895h2.432v1.406c0.416-0.664,0.79-1.102,1.123-1.313
			c0.332-0.211,0.709-0.317,1.132-0.317c0.596,0,1.171,0.166,1.724,0.494l-0.811,2.283c-0.441-0.286-0.852-0.429-1.23-0.429
			c-0.366,0-0.677,0.101-0.932,0.303s-0.455,0.567-0.601,1.095c-0.146,0.527-0.219,1.633-0.219,3.316V547.811z"/>
		<path fill="#FFFFFF" d="M295.313,544.661l2.608,0.438c-0.335,0.956-0.865,1.684-1.589,2.184s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.686c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.394,3.251-1.394c1.473,0,2.634,0.486,3.484,1.459c0.852,0.972,1.258,2.461,1.221,4.467h-6.559
			c0.019,0.777,0.229,1.381,0.633,1.813c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.335
			C294.959,545.518,295.17,545.158,295.313,544.661z M295.462,542.016c-0.019-0.758-0.214-1.334-0.587-1.729
			c-0.372-0.395-0.826-0.592-1.36-0.592c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H295.462z"/>
	</g>
</g>
<g id="orbit5">
	<rect x="348.81" y="552.381" fill="#00AEEF" width="102.381" height="102.38"/>
	<g>
		<path fill="#FFFFFF" d="M361.689,607.436v-11.348h-4.053v-2.311h10.854v2.311h-4.043v11.348H361.689z"/>
		<path fill="#FFFFFF" d="M374.565,604.286l2.608,0.438c-0.335,0.956-0.865,1.685-1.588,2.185s-1.629,0.75-2.716,0.75
			c-1.721,0-2.994-0.563-3.82-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.857-0.929,1.941-1.393,3.252-1.393c1.472,0,2.633,0.486,3.484,1.458c0.851,0.972,1.258,2.461,1.22,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812s0.907,0.647,1.509,0.647c0.41,0,0.755-0.111,1.034-0.335S374.422,604.783,374.565,604.286z
			 M374.714,601.641c-0.019-0.758-0.214-1.334-0.587-1.729s-0.826-0.592-1.36-0.592c-0.572,0-1.043,0.208-1.416,0.624
			c-0.373,0.416-0.556,0.981-0.55,1.696H374.714z"/>
		<path fill="#FFFFFF" d="M378.189,607.436l3.568-5.097l-3.419-4.798h3.196l1.751,2.721l1.845-2.721h3.075l-3.354,4.687l3.661,5.208
			h-3.214l-2.013-3.065l-2.031,3.065H378.189z"/>
		<path fill="#FFFFFF" d="M394.596,597.541v2.087h-1.789v3.987c0,0.808,0.017,1.278,0.051,1.412c0.034,0.133,0.112,0.243,0.233,0.33
			s0.269,0.131,0.442,0.131c0.242,0,0.593-0.084,1.053-0.252l0.224,2.031c-0.609,0.261-1.298,0.392-2.068,0.392
			c-0.472,0-0.897-0.079-1.276-0.238c-0.379-0.158-0.657-0.363-0.834-0.614c-0.177-0.252-0.3-0.592-0.368-1.021
			c-0.056-0.304-0.084-0.919-0.084-1.845v-4.313h-1.202v-2.087h1.202v-1.966l2.627-1.528v3.494H394.596z"/>
		<path fill="#FFFFFF" d="M401.742,607.436v-13.658h2.758v5.375h5.403v-5.375h2.758v13.658h-2.758v-5.973H404.5v5.973H401.742z"/>
		<path fill="#FFFFFF" d="M421.224,604.286l2.608,0.438c-0.335,0.956-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.563-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.111,1.034-0.335
			S421.08,604.783,421.224,604.286z M421.372,601.641c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.395-0.826-0.592-1.36-0.592
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H421.372z"/>
		<path fill="#FFFFFF" d="M428.612,607.436h-2.618v-9.895h2.432v1.406c0.416-0.664,0.79-1.102,1.123-1.313
			c0.332-0.211,0.709-0.316,1.132-0.316c0.596,0,1.171,0.165,1.724,0.494l-0.811,2.282c-0.441-0.286-0.852-0.429-1.23-0.429
			c-0.366,0-0.677,0.102-0.932,0.303c-0.255,0.202-0.455,0.567-0.601,1.095c-0.146,0.528-0.219,1.634-0.219,3.317V607.436z"/>
		<path fill="#FFFFFF" d="M439.261,604.286l2.608,0.438c-0.335,0.956-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.563-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.111,1.034-0.335
			S439.117,604.783,439.261,604.286z M439.409,601.641c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.395-0.826-0.592-1.36-0.592
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H439.409z"/>
	</g>
</g>
<g id="orbit4">
	<rect x="492.756" y="492.755" fill="#00AEEF" width="102.38" height="102.382"/>
	<g>
		<path fill="#FFFFFF" d="M505.635,547.811v-11.348h-4.053v-2.311h10.854v2.311h-4.043v11.348H505.635z"/>
		<path fill="#FFFFFF" d="M518.511,544.662l2.608,0.438c-0.336,0.957-0.865,1.685-1.588,2.185c-0.725,0.5-1.629,0.75-2.717,0.75
			c-1.721,0-2.994-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.409c0-1.64,0.429-2.924,1.286-3.853s1.94-1.394,3.252-1.394
			c1.471,0,2.633,0.486,3.484,1.458c0.85,0.973,1.258,2.462,1.22,4.468H514.7c0.019,0.776,0.229,1.381,0.634,1.813
			c0.403,0.432,0.906,0.647,1.509,0.647c0.41,0,0.755-0.112,1.034-0.336S518.367,545.159,518.511,544.662z M518.66,542.016
			c-0.02-0.758-0.215-1.334-0.588-1.729c-0.372-0.394-0.826-0.591-1.359-0.591c-0.572,0-1.044,0.208-1.416,0.624
			c-0.373,0.416-0.557,0.981-0.551,1.695H518.66z"/>
		<path fill="#FFFFFF" d="M522.135,547.811l3.568-5.096l-3.42-4.799h3.196l1.751,2.721l1.846-2.721h3.074l-3.354,4.687l3.66,5.208
			h-3.213l-2.014-3.065l-2.03,3.065H522.135z"/>
		<path fill="#FFFFFF" d="M538.541,537.916v2.087h-1.788v3.988c0,0.808,0.017,1.277,0.052,1.411
			c0.033,0.134,0.111,0.244,0.232,0.331s0.269,0.13,0.442,0.13c0.242,0,0.593-0.084,1.053-0.251l0.224,2.031
			c-0.609,0.261-1.299,0.391-2.068,0.391c-0.473,0-0.897-0.079-1.276-0.237s-0.657-0.363-0.834-0.615
			c-0.177-0.251-0.3-0.592-0.368-1.02c-0.056-0.305-0.084-0.92-0.084-1.845v-4.314h-1.201v-2.087h1.201v-1.966l2.628-1.527v3.493
			H538.541z"/>
		<path fill="#FFFFFF" d="M545.688,547.811v-13.658h2.758v5.376h5.403v-5.376h2.758v13.658h-2.758v-5.972h-5.403v5.972H545.688z"/>
		<path fill="#FFFFFF" d="M565.169,544.662l2.608,0.438c-0.335,0.957-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.409c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.394,3.251-1.394c1.473,0,2.634,0.486,3.484,1.458c0.852,0.973,1.258,2.462,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.381,0.633,1.813c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.336
			S565.025,545.159,565.169,544.662z M565.317,542.016c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.695H565.317z"/>
		<path fill="#FFFFFF" d="M572.558,547.811h-2.618v-9.895h2.432v1.407c0.416-0.665,0.79-1.103,1.123-1.313
			c0.332-0.211,0.709-0.317,1.132-0.317c0.596,0,1.171,0.165,1.724,0.494l-0.811,2.282c-0.441-0.285-0.852-0.428-1.23-0.428
			c-0.366,0-0.677,0.101-0.932,0.303c-0.255,0.201-0.455,0.566-0.601,1.095c-0.146,0.527-0.219,1.633-0.219,3.316V547.811z"/>
		<path fill="#FFFFFF" d="M583.206,544.662l2.608,0.438c-0.335,0.957-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.409c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.394,3.251-1.394c1.473,0,2.634,0.486,3.484,1.458c0.852,0.973,1.258,2.462,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.381,0.633,1.813c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.336
			S583.063,545.159,583.206,544.662z M583.354,542.016c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.695H583.354z"/>
	</g>
</g>
<g id="orbit3">
	<rect x="552.381" y="348.809" fill="#00AEEF" width="102.381" height="102.381"/>
	<g>
		<path fill="#FFFFFF" d="M565.26,403.864v-11.348h-4.053v-2.311h10.854v2.311h-4.043v11.348H565.26z"/>
		<path fill="#FFFFFF" d="M578.136,400.715l2.608,0.438c-0.336,0.956-0.865,1.685-1.588,2.185c-0.725,0.5-1.629,0.75-2.717,0.75
			c-1.721,0-2.994-0.563-3.819-1.687c-0.652-0.9-0.979-2.038-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853s1.94-1.393,3.252-1.393
			c1.471,0,2.633,0.486,3.484,1.458c0.85,0.972,1.258,2.461,1.22,4.468h-6.559c0.019,0.776,0.229,1.38,0.634,1.812
			c0.403,0.432,0.906,0.647,1.509,0.647c0.41,0,0.755-0.111,1.034-0.335S577.992,401.212,578.136,400.715z M578.285,398.069
			c-0.02-0.758-0.215-1.334-0.588-1.729c-0.372-0.394-0.826-0.591-1.359-0.591c-0.572,0-1.044,0.208-1.416,0.624
			c-0.373,0.416-0.557,0.981-0.551,1.696H578.285z"/>
		<path fill="#FFFFFF" d="M581.76,403.864l3.568-5.097l-3.42-4.798h3.196l1.751,2.721l1.846-2.721h3.074l-3.354,4.687l3.66,5.208
			h-3.213l-2.014-3.066l-2.03,3.066H581.76z"/>
		<path fill="#FFFFFF" d="M598.166,393.969v2.087h-1.788v3.988c0,0.808,0.017,1.278,0.052,1.412c0.033,0.133,0.111,0.243,0.232,0.33
			s0.269,0.131,0.442,0.131c0.242,0,0.593-0.084,1.053-0.252l0.224,2.031c-0.609,0.261-1.299,0.392-2.068,0.392
			c-0.473,0-0.897-0.079-1.276-0.238c-0.379-0.158-0.657-0.363-0.834-0.614c-0.177-0.252-0.3-0.592-0.368-1.021
			c-0.056-0.304-0.084-0.919-0.084-1.845v-4.314h-1.201v-2.087h1.201v-1.966l2.628-1.528v3.494H598.166z"/>
		<path fill="#FFFFFF" d="M605.313,403.864v-13.659h2.758v5.375h5.403v-5.375h2.758v13.659h-2.758v-5.973h-5.403v5.973H605.313z"/>
		<path fill="#FFFFFF" d="M624.794,400.715l2.608,0.438c-0.335,0.956-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.563-3.819-1.687c-0.652-0.9-0.979-2.038-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.111,1.034-0.335
			S624.65,401.212,624.794,400.715z M624.942,398.069c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H624.942z"/>
		<path fill="#FFFFFF" d="M632.183,403.864h-2.618v-9.895h2.432v1.407c0.416-0.665,0.79-1.102,1.123-1.313
			c0.332-0.211,0.709-0.317,1.132-0.317c0.596,0,1.171,0.165,1.724,0.494l-0.811,2.282c-0.441-0.286-0.852-0.428-1.23-0.428
			c-0.366,0-0.677,0.101-0.932,0.303s-0.455,0.567-0.601,1.095c-0.146,0.528-0.219,1.633-0.219,3.317V403.864z"/>
		<path fill="#FFFFFF" d="M642.831,400.715l2.608,0.438c-0.335,0.956-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.563-3.819-1.687c-0.652-0.9-0.979-2.038-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.111,1.034-0.335
			S642.688,401.212,642.831,400.715z M642.979,398.069c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H642.979z"/>
	</g>
</g>
<g id="orbit2">
	<rect x="492.756" y="204.862" fill="#00AEEF" width="102.381" height="102.381"/>
	<g>
		<path fill="#FFFFFF" d="M505.636,259.917v-11.348h-4.053v-2.311h10.854v2.311h-4.044v11.348H505.636z"/>
		<path fill="#FFFFFF" d="M518.512,256.768l2.608,0.438c-0.335,0.957-0.864,1.685-1.589,2.185c-0.723,0.5-1.629,0.75-2.715,0.75
			c-1.721,0-2.994-0.562-3.82-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.285-3.853
			c0.857-0.929,1.941-1.393,3.252-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.335
			S518.369,257.265,518.512,256.768z M518.66,254.122c-0.018-0.758-0.214-1.334-0.586-1.729c-0.373-0.394-0.826-0.591-1.361-0.591
			c-0.571,0-1.043,0.208-1.416,0.624s-0.556,0.981-0.549,1.696H518.66z"/>
		<path fill="#FFFFFF" d="M522.136,259.917l3.568-5.096l-3.419-4.798h3.195l1.752,2.721l1.844-2.721h3.075l-3.354,4.687l3.662,5.208
			h-3.215l-2.012-3.065l-2.031,3.065H522.136z"/>
		<path fill="#FFFFFF" d="M538.543,250.022v2.087h-1.789v3.988c0,0.808,0.018,1.278,0.051,1.412
			c0.034,0.133,0.112,0.244,0.233,0.331s0.269,0.13,0.442,0.13c0.242,0,0.594-0.084,1.053-0.251l0.224,2.031
			c-0.608,0.261-1.298,0.391-2.068,0.391c-0.472,0-0.897-0.079-1.276-0.238c-0.379-0.158-0.656-0.363-0.834-0.615
			c-0.177-0.251-0.3-0.592-0.367-1.02c-0.057-0.304-0.084-0.919-0.084-1.845v-4.314h-1.202v-2.087h1.202v-1.966l2.627-1.528v3.494
			H538.543z"/>
		<path fill="#FFFFFF" d="M545.688,259.917v-13.658h2.758v5.375h5.403v-5.375h2.758v13.658h-2.758v-5.972h-5.403v5.972H545.688z"/>
		<path fill="#FFFFFF" d="M565.17,256.768l2.608,0.438c-0.335,0.957-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.335
			S565.026,257.265,565.17,256.768z M565.318,254.122c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H565.318z"/>
		<path fill="#FFFFFF" d="M572.559,259.917h-2.618v-9.895h2.432v1.407c0.416-0.665,0.79-1.102,1.123-1.313
			c0.332-0.211,0.709-0.317,1.132-0.317c0.596,0,1.171,0.165,1.724,0.494l-0.811,2.282c-0.441-0.286-0.852-0.428-1.23-0.428
			c-0.366,0-0.677,0.101-0.932,0.303s-0.455,0.567-0.601,1.095c-0.146,0.528-0.219,1.633-0.219,3.317V259.917z"/>
		<path fill="#FFFFFF" d="M583.207,256.768l2.608,0.438c-0.335,0.957-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.335
			S583.063,257.265,583.207,256.768z M583.355,254.122c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H583.355z"/>
	</g>
</g>
<g id="orbit1">
	<rect x="348.81" y="145.238" fill="#00AEEF" width="102.381" height="102.381"/>
	<g>
		<path fill="#FFFFFF" d="M361.689,200.293v-11.348h-4.053v-2.311h10.854v2.311h-4.043v11.348H361.689z"/>
		<path fill="#FFFFFF" d="M374.565,197.144l2.608,0.438c-0.335,0.957-0.865,1.685-1.588,2.185s-1.629,0.75-2.716,0.75
			c-1.721,0-2.994-0.562-3.82-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.857-0.929,1.941-1.393,3.252-1.393c1.472,0,2.633,0.486,3.484,1.458c0.851,0.972,1.258,2.461,1.22,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812s0.907,0.647,1.509,0.647c0.41,0,0.755-0.112,1.034-0.335S374.422,197.641,374.565,197.144z
			 M374.714,194.498c-0.019-0.758-0.214-1.334-0.587-1.729c-0.373-0.394-0.826-0.591-1.36-0.591c-0.572,0-1.043,0.208-1.416,0.624
			c-0.373,0.416-0.556,0.981-0.55,1.696H374.714z"/>
		<path fill="#FFFFFF" d="M378.189,200.293l3.568-5.096l-3.419-4.798h3.196l1.751,2.721l1.845-2.721h3.075l-3.354,4.687l3.661,5.208
			h-3.214l-2.013-3.065l-2.031,3.065H378.189z"/>
		<path fill="#FFFFFF" d="M394.596,190.398v2.087h-1.789v3.988c0,0.808,0.017,1.278,0.051,1.412
			c0.034,0.133,0.112,0.244,0.233,0.331s0.269,0.13,0.442,0.13c0.242,0,0.593-0.084,1.053-0.251l0.224,2.031
			c-0.609,0.261-1.298,0.391-2.068,0.391c-0.472,0-0.897-0.079-1.276-0.238c-0.379-0.158-0.657-0.363-0.834-0.615
			c-0.177-0.251-0.3-0.592-0.368-1.02c-0.056-0.304-0.084-0.919-0.084-1.845v-4.314h-1.202v-2.087h1.202v-1.966l2.627-1.528v3.494
			H394.596z"/>
		<path fill="#FFFFFF" d="M401.742,200.293v-13.658h2.758v5.375h5.403v-5.375h2.758v13.658h-2.758v-5.972H404.5v5.972H401.742z"/>
		<path fill="#FFFFFF" d="M421.224,197.144l2.608,0.438c-0.335,0.957-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.335
			S421.08,197.641,421.224,197.144z M421.372,194.498c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H421.372z"/>
		<path fill="#FFFFFF" d="M428.612,200.293h-2.618v-9.895h2.432v1.407c0.416-0.665,0.79-1.102,1.123-1.313
			c0.332-0.211,0.709-0.317,1.132-0.317c0.596,0,1.171,0.165,1.724,0.494l-0.811,2.282c-0.441-0.286-0.852-0.428-1.23-0.428
			c-0.366,0-0.677,0.101-0.932,0.303s-0.455,0.567-0.601,1.095c-0.146,0.528-0.219,1.633-0.219,3.317V200.293z"/>
		<path fill="#FFFFFF" d="M439.261,197.144l2.608,0.438c-0.335,0.957-0.865,1.685-1.589,2.185s-1.629,0.75-2.716,0.75
			c-1.72,0-2.993-0.562-3.819-1.687c-0.652-0.9-0.979-2.037-0.979-3.41c0-1.64,0.429-2.924,1.286-3.853
			c0.856-0.929,1.94-1.393,3.251-1.393c1.473,0,2.634,0.486,3.484,1.458c0.852,0.972,1.258,2.461,1.221,4.468h-6.559
			c0.019,0.776,0.229,1.38,0.633,1.812c0.404,0.432,0.907,0.647,1.51,0.647c0.41,0,0.755-0.112,1.034-0.335
			S439.117,197.641,439.261,197.144z M439.409,194.498c-0.019-0.758-0.214-1.334-0.587-1.729c-0.372-0.394-0.826-0.591-1.36-0.591
			c-0.571,0-1.043,0.208-1.416,0.624c-0.372,0.416-0.556,0.981-0.55,1.696H439.409z"/>
	</g>
</g>
    </g>
</svg>
  
<div id="myComments">Thanks for the help and fixes @PointC, @akapowl and #mikel of Greensock's forum...</div>
</div>
              
            
!

CSS

              
                *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, 
.clearfix:after {
  display: table;  content: '';
}
.clearfix:after { clear: both; }
#containSVG {
  text-align: center;
  width: 50%; height: 50%;
	margin: 0 auto;
}
  #orbitSVG {
  width: 100%; height: 100%;
}

#orbit1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-size: 100% 100%;
;}


#orbit1 rect {
  fill: tomato
}

#myComments {
  width:600px,
  color: silver;
}
              
            
!

JS

              
                // start animation
var tl = gsap.timeline({
  defaults: {
    duration: 0.5,
    ease: "none",
    repeat: -1,
    rotation: "+=45",
    svgOrigin: "400 400",    
    repeat: -1,
    repeatRefresh: true,
    repeatDelay: 0.5
  }
});
tl.to("#masterOrbit", {});
tl.to(
  "#masterOrbit > g",
  { duration: 0.5, rotation: "-=45", transformOrigin: "center center" }, 0);

              
            
!
999px

Console