Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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="greeting">
        
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   x="-100px" y="0px"
           viewBox="0 0 800 800" >


        <g id="bg">
        	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="162.5809" y1="1048.8982" x2="1065.5358" y2="33.4489">
        		<stop  offset="0" style="stop-color:#D3145A"/>
        		<stop  offset="1" style="stop-color:#FF6D5D"/>
        	</linearGradient>
        	<rect x="1" y="1" class="st0" width="100%" height="100%"/>
        	<path class="st1" d="M640,512"/>
        </g>
        <g id="CN">
        	<g>
        		<g>
        			<g>
        				<path class="st8" d="M525.7,378.9l-12.3-14.7l-2.5-2.8l2.9-2.4l2.3,2.9l3.3,3.9l4-3.3l2.5-2.2l2.6,3.1l-2.6,2l-4,3.3l6.6,7.9
        					l5.9-5l2.4-2.2l2.5,3l-2.6,2l-14.4,12l-2.1,1.9l-2.5-3l2.3-1.8L525.7,378.9z"/>
        				<path class="st8" d="M533.7,346.8c0.3-1.1,0.4-2.2,0.4-3.3c1.7,0.3,3.5,0.7,5.2,1.2c0,0.3,0,0.8-0.1,1.6c0,0.8-0.1,1.4-0.1,1.9
        					c-0.5-0.2-1.1-0.4-1.8-0.6S535.4,347.1,533.7,346.8z M536.8,354.6c0.1-0.4,0.2-0.8,0.2-1.2c0.1-0.4,0.1-1.1,0-2.1
        					c2.6,0.5,4.3,0.8,5.1,1c0,0.3,0,0.6,0,0.7l-0.1,1.7l0,1.1c-1.1-0.4-2-0.6-2.6-0.8C538.8,354.9,537.9,354.7,536.8,354.6z
        					 M543.5,349.6l-0.2,1.1c-0.5-0.2-1-0.5-1.4-0.6c-0.4-0.2-1.1-0.4-2-0.5c0.2-0.5,0.4-1.1,0.6-1.8c0.2-0.7,0.3-1.6,0.2-2.8
        					c-0.1-1.2-0.1-2.1-0.2-2.8c-0.1-0.7-0.2-1.4-0.4-2.3c1.3-0.1,2.5-0.3,3.4-0.6c0.1,0.8,0.1,1.5,0.2,2.2l8.2-4.6l3.1-1.8l1.6,2.9
        					l-3.2,1.7l-9.6,5.4c0,0.7,0,1.3,0,2l0,0.7C543.7,348.7,543.6,349.4,543.5,349.6z M543.9,367.1c0-0.3,0.1-0.6,0.1-0.9
        					c0-0.3,0-0.8-0.1-1.5s-0.1-1.4-0.2-2.1c-0.1-0.7-0.2-1.5-0.4-2.5c-0.2-1-0.4-1.7-0.5-2.1l-0.3-0.9c1.6,0.3,2.5,0.5,2.7,0.5
        					l0.8,0.1c0.1,0.5,0.1,0.8,0.2,1l0.7,3.3c0.4,2,0.6,3.6,0.7,4.8l0.1,1.6c-0.4-0.2-0.8-0.4-1.3-0.6
        					C545.8,367.5,545,367.3,543.9,367.1z M552.1,361.1l-2.4,1.5c-0.2-0.6-0.3-1.1-0.4-1.4c-0.1-0.3-0.3-0.9-0.6-1.8
        					c-0.3-0.9-0.5-1.6-0.7-2.1l-0.5-1.4l-2.2,1.3l-1.6-2.9l2.5-1.3c-0.2-0.4-0.3-0.7-0.4-0.9c-0.1-0.2-0.3-0.8-0.7-1.7
        					c-0.4-0.9-0.6-1.4-0.6-1.4l-0.3-0.5l0.1-1.7l1.8-1l0.4-0.2l6.2,15.2L552.1,361.1z M548,348.3l-1.2-2.9l6.3-3.6l1.4,2.7
        					L548,348.3z M550.4,354.4l-1.2-3l2.7-1.5c-1.2-0.4-2-0.7-2.6-0.9c0.3-0.5,0.5-1,0.7-1.3l1.7-1c0.6,0.2,1.4,0.5,2.5,0.9l-0.5,1.3
        					l2.4-1.3l1.5,2.8L550.4,354.4z M555.2,352.4c0.6,0.2,1.4,0.6,2.4,0.9c-0.3,0.5-0.6,1-0.9,1.7l2.4-1.4l1.1,2.9l-7.2,4l-1.2-2.8
        					l3.6-2c-0.3-0.1-0.6-0.3-0.9-0.4c-0.3-0.1-1.1-0.4-2.3-0.8c0.2-0.2,0.3-0.4,0.3-0.5l0.1-0.1L555.2,352.4z M556.1,340.1l1.2,2.3
        					c0.5,0.9,0.7,1.4,0.8,1.6l0.9,1.8l2.1-1.2l1.6,2.9l-2.2,1.2c0.2,0.4,0.4,0.8,0.5,1l0.7,1.4l0.5,1l1.8-1.1l1.6,2.8l-2,1
        					c0.1,0.4,0.2,0.9,0.3,1.4c0.1,0.5,0.1,1,0.1,1.6c-0.1,0.6-0.3,1.2-0.8,1.9c-0.5,0.7-1.6,1.5-3.4,2.6c-0.3-0.4-0.6-0.8-0.9-1.1
        					c-0.3-0.3-1-0.8-1.9-1.5c1.2-0.5,1.9-0.8,2.1-0.9c0.2-0.1,0.6-0.4,1.1-0.8c0.5-0.4,0.7-0.8,0.6-1.2l-0.1-0.4l-1.1-2.9
        					c-0.4-0.8-0.7-1.5-1-2l-0.6-1.3l-1.5-2.8l-1.5-2.9l-1.4-2.7L556.1,340.1z"/>
        				<path class="st8" d="M573.1,349.1c0.6-0.7,1.3-1.7,2-3.2c0.7-1.5,1.2-2.7,1.6-3.7c0.4-1,0.7-2.1,1-3.4l-4.7,1.6l-3.1,1.2
        					l-1.2-3.4l3.2-1l6.6-2.2l-1-3.1l-5.4,1.8l-2.6,1l-1.1-3.4l2.7-0.8l5.4-1.8l-0.6-1.7l-1-2.5l3.4-1.2l0.8,2.6l0.6,1.7l5.2-1.8
        					l2.7-1l1.1,3.4l-2.7,0.8l-5.2,1.8l1,3.1l6.4-2.2l3.1-1.2l1.2,3.4l-3.2,1l-4.3,1.5c1,1,1.9,1.8,2.8,2.4c0.9,0.6,1.9,1.2,3.1,1.6
        					c1.2,0.5,2.2,0.7,2.9,0.8s1.6,0.1,2.5,0.1c-0.1,0.6-0.3,1.2-0.4,2c-0.2,0.7-0.3,1.4-0.4,2.1c-1.7-0.3-3.5-0.8-5.3-1.4
        					c-1.8-0.7-4-2-6.4-4.2l2.3,6.7l1.3,3.5l-3.4,1.2l-1.1-3.6l-2.2-6.4c-0.9,2.6-1.6,4.6-2.2,5.9c-0.6,1.3-1.2,2.4-1.7,3.3l-0.9,1.4
        					l-0.7,1.2c-1.2-0.9-2-1.3-2.3-1.5l-1.4-0.7C571.9,350.3,572.4,349.7,573.1,349.1z"/>
        				<path class="st8" d="M603.5,327.3c-0.3-0.4-0.5-0.7-0.8-1.1c-0.3-0.3-1-0.8-2-1.5c1.8-1.4,3.3-2.7,4.3-4.1
        					c1.1-1.4,1.8-2.5,2.2-3.4l0.6-1.4l3.8,0.6l-0.8,1.7l-2.2,3.4l-2.3,2.8l-1.8,1.9L603.5,327.3z M628.4,337.4l0.5,3.4l-2.4,0.3
        					l-20.4,2.9l-2.2,0.4l-0.5-3.4l2.4-0.2l20.2-2.8L628.4,337.4z M609.5,338L609,338l-2.8,0.5l-0.3-2.3l-1.3-9.5l2.3-2.5l0.6-0.1
        					L609.5,338z M620.8,325.4l-4.9,0.7l0.3,2.4l4.9-0.7l0.4,3.1l-4.9,0.7l0.3,2.4l4.9-0.7l0.4,2.9l-12.2,1.7l-0.4-2.9l4.2-0.6
        					l-0.3-2.4l-4.2,0.6l-0.4-3.1l4.2-0.6l-0.3-2.4l-4.2,0.6l-0.4-3.1l12.2-1.7L620.8,325.4z M614.3,322.7l1-2.3l-6.2,0.9l2.2-3.4
        					l7.9-1.1l0.9,1.1c-0.4,0.8-0.6,1.3-0.6,1.4l-1.5,2.9L614.3,322.7z M620.8,322.2l1.2-0.2l1.9-0.3l0.2,2.2l1.3,9l0.5,2.8l-2.4,0.3
        					l-0.7,0.1L620.8,322.2z"/>
        				<path class="st8" d="M654.9,322.5c-0.4,1.9-0.8,3.5-1.2,4.9c-0.4,1.5-0.9,2.8-1.4,3.9c-0.5,1-1.1,2-1.7,2.7c1,1.1,2.4,2,4.1,2.8
        					c1.7,0.8,3.6,1.4,5.6,1.8c-0.3,0.5-0.6,1-0.8,1.5c-0.3,0.5-0.6,1.3-0.9,2.3c-2.5-0.8-4.4-1.6-5.8-2.4c-1.3-0.8-2.4-1.5-3.2-2.2
        					l-1.5-1.3c-1.4,1-3,2-4.7,2.8c-1.7,0.8-3.8,1.5-6.3,2.1c-0.1-0.5-0.2-0.9-0.4-1.4s-0.5-1.3-1.2-2.5c3.3,0,6.7-1.3,10.2-3.8
        					c-1.2-1.8-2-3.6-2.6-5.4c-0.6-1.9-1-3.5-1.2-5.1l-0.2-1.1c0.7,0,1-0.1,1.1-0.1l0.1,0l2.2,0.1c0.1,0.9,0.3,1.7,0.4,2.6
        					c0.2,1.1,0.5,2.1,0.9,3.2c0.4,1.1,1,2.2,1.8,3.5c0.2-0.3,0.5-0.7,0.8-1.2c0.3-0.5,0.7-1.4,1.2-2.8c0.5-1.4,0.8-2.8,1-4.2
        					l0.1-0.7L654.9,322.5z M645.1,321.4L645.1,321.4l-0.4,0l-5.2-0.2l-3.2,0l0.2-3.6l3.2,0.3l8,0.4c-0.1-0.3-0.2-0.5-0.3-0.9
        					c-0.1-0.3-0.5-1.2-1.2-2.5c1.3-0.5,2.3-0.9,3.1-1.4c0.2,0.3,0.3,0.5,0.4,0.7c0.1,0.1,0.3,0.6,0.7,1.6c0.4,0.9,0.7,1.5,0.7,1.6
        					l0.2,0.7c-0.4,0.1-0.8,0.2-1.1,0.4l7.7,0.4l2.8,0l-0.2,3.6L658,322L645.1,321.4z"/>
        				<path class="st8" d="M681.9,319.6c-1.7,2.5-2.8,4-3.3,4.6l-0.9,1.1l0.5,0.1l-0.7,2.5l-3,12.9l-0.8,4l-3.3-0.8l1-3.9l2.5-10.9
        					c-0.5,0.4-0.9,0.8-1.3,1.2c-0.4,0.4-1.1,0.8-2,1.4c-0.2-1.6-0.6-3-1.1-4.3c0.5-0.2,1.1-0.5,1.9-0.9c0.8-0.4,1.7-1.3,2.8-2.6
        					c1.1-1.3,2-2.5,2.7-3.5c0.7-1,1.2-1.8,1.4-2.3l0.7-1.4C679.9,318,680.9,318.9,681.9,319.6z M681.4,330.5l1.3-0.2l1.9-8.4
        					l0.6-2.9l3.5,0.8l-0.8,2.8l-1.6,6.7c1.6-0.5,2.8-1,3.6-1.3s1.9-1,3.3-1.9c0.4,1.4,1,2.7,1.6,3.8c-0.3,0.1-0.6,0.2-0.7,0.3
        					c-0.2,0.1-1,0.4-2.5,1.1c-1.5,0.6-3.6,1.4-6.2,2.1l-1.9,8.3c-0.1,0.4-0.1,0.7,0,1c0.1,0.2,0.9,0.5,2.2,0.8
        					c1,0.2,1.8,0.2,2.3-0.1c0.5-0.3,0.8-0.6,1-0.9c0.2-0.3,0.3-0.7,0.4-1.1c0.1-0.4,0.2-0.6,0.2-0.6l0.3-1c0.3,0.3,0.6,0.5,0.9,0.8
        					c0.4,0.3,1.1,0.7,2.3,1.2c-0.2,0.5-0.4,1-0.6,1.5s-0.5,1.2-0.9,2c-0.4,0.8-0.9,1.4-1.6,1.8c-0.6,0.4-1.4,0.6-2.3,0.6
        					c-0.9,0-2.2-0.3-4-0.7c-1.9-0.5-3.1-1-3.6-1.6c-0.5-0.6-0.7-1.1-0.7-1.5c0-0.4,0.1-0.7,0.2-1l2-8.7c-1.1,0.2-2,0.3-2.9,0.4
        					c-0.1-1.7-0.2-2.7-0.3-3.1l-0.3-1C679.9,330.6,680.9,330.6,681.4,330.5z"/>
        				<path class="st8" d="M705.3,334.1l1.4-3.2l2.6,1.3l5.2,2.3l-1.2,2.6c-1.2,1-2,1.7-2.4,2l-1.6,1l-0.4,0.9c0.7,0,1.6-0.2,2.7-0.4
        					c0,1.9,0,3.1,0,3.7l-0.1,1.1c-0.7,0.1-1.7,0.3-3,0.6c0.1-1.9,0.2-3,0.2-3.4l0-0.9l-3.8,8.5l-1.5,3.7l-2.9-1.3l1.7-3.7l3-6.7
        					c-0.4,0.2-0.7,0.3-1,0.4c-0.3,0.1-0.8,0.4-1.7,0.8c0-0.4-0.1-0.9-0.1-1.3c-0.1-0.5-0.3-1.3-0.6-2.5c0.5,0,1,0,1.4-0.1
        					c0.4-0.1,1.1-0.3,2.1-0.7c1-0.4,1.7-0.8,2.3-1.1c0.6-0.3,1.4-0.9,2.5-1.7l-2.1-0.9L705.3,334.1z M705.3,351.4
        					c0.6,0,1.4,0,2.2-0.1c1.1-0.1,2-0.6,2.7-1.4c0.7-0.8,1.3-1.6,1.8-2.5c0.5-0.8,0.8-1.5,1-1.9l0.7-1.5l2.8,1.2
        					c-0.3,0.7-0.6,1.4-0.9,2c-0.3,0.7-0.8,1.5-1.3,2.5c-0.5,1-1.1,1.8-1.8,2.5c-0.6,0.7-1.5,1.3-2.5,1.8c-1,0.5-2.3,1-4,1.4
        					c-0.3-1.7-0.6-2.7-0.7-3.1l-0.2-0.5L705.3,351.4z M710.7,327.8c1.2,0,2.3-0.1,3.3-0.4c0.3,1.5,0.4,3.2,0.5,5
        					c-1.2,0.1-2.3,0.3-3.3,0.6c0-0.5,0-1.1,0-1.8C711.2,330.5,711,329.3,710.7,327.8z M713.3,339.6l2.8-6.3l1.3-3.1l2.9,1.4
        					l-5.4,12.3l-0.8-0.3l-2-0.8l0-0.5L713.3,339.6z M720.6,347.1l-3.4,7.8c-0.2,0.4-0.3,0.7-0.2,0.9c0.1,0.2,0.2,0.4,0.5,0.5
        					c0.4,0.2,0.7,0.2,1,0.2c0.2-0.1,0.5-0.3,0.7-0.7c0.2-0.4,0.5-0.9,0.9-1.4l0.4-0.7l0.4-0.8c0.2,0.3,0.5,0.7,0.8,1
        					c0.3,0.4,0.9,0.9,1.8,1.5c-0.4,0.7-0.9,1.5-1.5,2.4c-0.6,0.9-1.2,1.6-1.7,2c-0.5,0.4-1.1,0.6-1.8,0.4c-0.7-0.1-1.6-0.5-2.7-1
        					c-0.6-0.3-1.1-0.6-1.7-1.1c-0.5-0.4-0.8-1-0.7-1.5c0.1-0.6,0.2-1.1,0.4-1.6l4.1-9.2L720.6,347.1z M716.5,341.2l5.3,2.3l2.8-6.4
        					l-5.3-2.3l1.3-3l5.3,2.3l3,1.2l-1.4,3l-2.8,6.3l-1.3,3.2l-2.6-1.3l-5.7-2.5L716.5,341.2z"/>
        				<path class="st8" d="M728,361.1c1.3,0.5,2.9,0.9,4.6,1.1s3.3,0.1,4.9-0.5c1.5-0.6,2.7-1.3,3.6-2c0.9-0.7,1.7-1.5,2.3-2.3
        					l1.3-1.6l-8.4-5.8l2-2.9l2.7,2l5.7,3.9c1.2-1.7,1.9-2.7,2.1-3l1.8-2.8c1.3,1.1,2,1.7,2.1,1.7l0.9,0.6c-0.8,1-1.2,1.6-1.3,1.7
        					l-2.7,3.8l5.9,4l2.8,1.8l-2.1,3l-2.7-2l-5.9-4c-0.4,0.6-0.6,1-0.8,1.4c-0.2,0.4-0.4,1-0.6,1.8c-0.3,0.9-0.4,1.8-0.6,2.8
        					c-0.1,1-0.1,2.4,0,4.4c0.2,1.9,0.6,3.4,1.3,4.4c0.7,1,1.4,1.9,2.2,2.8c-0.4,0.2-0.8,0.4-1.2,0.6s-0.9,0.6-1.5,1.1l-0.9,0.7
        					c-0.4-0.6-1-1.6-1.8-2.9c-0.8-1.3-1.3-3-1.5-5.2c-0.3-2.1-0.3-3.6-0.2-4.4l0.3-2.4c-0.7,0.5-1.5,0.9-2.2,1.3
        					c-0.7,0.4-1.8,0.8-3.2,1.1s-3,0.4-4.8,0.3c-1.8-0.1-3.3-0.3-4.6-0.5c0.1-0.4,0.2-0.8,0.3-1.2C727.9,363.8,728,362.7,728,361.1z"
        					/>
        				<path class="st8" d="M777.1,385.5c0,0.2,0,0.3,0,0.5c0,0.3,0.1,1.2,0.2,2.6c-1.5-0.2-2.8-0.5-4-0.6c-0.3,0.5-0.7,1.4-1.3,2.5
        					c-0.5,1.1-0.8,2.4-0.7,4c0.1,1.6,0.3,3,0.9,4.4c-0.7,0.1-1.3,0.1-1.7,0.2c-0.5,0.1-1.2,0.2-2.2,0.5c-0.4-2.1-0.6-3.7-0.4-5
        					c0.1-1.3,0.4-2.4,0.7-3.5c0.4-1.1,1-2.3,1.7-3.7l-1.1-0.3c-0.3,0.4-0.6,0.8-0.9,1.1c-0.3,0.3-0.8,0.9-1.7,1.8
        					c-0.8,0.8-1.6,1.5-2.2,1.9c-0.6,0.4-1.4,0.7-2.2,0.7c-0.8,0-2-0.7-3.5-2.2c0.7-1.1,1.2-1.8,1.3-2.1l0.6-1.3
        					c0.8,1.2,1.4,1.8,1.9,1.8c0.4,0.1,0.9-0.1,1.3-0.5c0.5-0.4,0.8-0.7,1.1-0.9l0.3-0.3c-1.2-0.2-2.6-0.5-4.2-0.9
        					c-1.6-0.4-3-0.9-4-1.3l-3.5-1.5c0.4-0.9,0.6-1.6,0.7-2.1l0.3-1.5c2.6,1.7,5,2.8,7.3,3.4c2.3,0.6,4.1,0.9,5.5,1.1
        					c0.1-0.2,0.2-0.4,0.3-0.6c-1.7-0.4-3.3-0.7-4.6-1.1c-1.3-0.4-3.1-1.1-5.2-2.1c0.2-0.4,0.4-0.9,0.5-1.2c0.1-0.4,0.3-1.1,0.6-2.1
        					c0.9,0.6,1.7,1.1,2.5,1.5c0.7,0.4,1.7,0.8,2.9,1.2c1.2,0.4,2.5,0.7,3.8,1l0-0.4c-1.3-0.6-2.3-1-3-1.3c-0.7-0.3-1.7-0.9-3.1-1.7
        					c0.2-0.4,0.3-0.8,0.5-1.1c0.1-0.3,0.3-1.1,0.6-2.3c0.7,0.5,1.6,1.3,2.9,2.1s3.1,1.7,5.6,2.4l-2.8-2.8l-1.7-1.6l2.3-2.2l1.6,1.7
        					l7.9,8l1.9,1.8l-2.3,2.2l-1.8-1.9l-2.8-2.8c0,0.5,0.1,0.9,0.1,1.4c-1.1-0.3-2.2-0.5-3.2-0.8c0.1,1.1,0.1,1.7,0.1,2.1l-0.2,0.9
        					c2.6,0.4,4.1,0.5,4.7,0.5l1.2,0L777.1,385.5z M765,370.1l1.2-1.1l2.3-2.3l1.5-1.6l2.1,2.2l5.1,5.1c0.1-0.5,0.1-1.2,0-2.1
        					c0.4,0.2,0.8,0.3,1.1,0.4c0.3,0.1,1,0.3,2.2,0.5c0.1,1.6,0.1,2.9,0,3.7c-0.3-0.1-0.6-0.1-0.9-0.1l5.5,5.5l2.1,1.9l-1.6,1.5
        					l-2.3,2.3l-1.1,1.2l-2.4-2.4l1.2-1.1l1.5-1.5L770,369.9l-1.5,1.5l-1.1,1.2L765,370.1z"/>
        			</g>
        		</g>
        		<circle class="st9" cx="640" cy="512" r="200"/>
        	</g>
        </g>     
        <g id="pattern">
        	<g id="ring1">
        		<g>
        			<path class="st10" d="M738.7,583.7C754,563,761.8,537.6,762,512C802.4,528.5,781.9,594.3,738.7,583.7z"/>
        		</g>
        		<g>
        			<path class="st10" d="M677.7,628.1c24.3-7.9,46.1-23.6,61-44.4C762.5,621.3,705.6,661.2,677.7,628.1z"/>
        		</g>
        		<g>
        			<path class="st10" d="M602.3,628.1c24.3,8,51.1,8,75.4,0C675,671.7,605.1,672,602.3,628.1z"/>
        		</g>
        		<g>
        			<path class="st10" d="M541.3,583.7c14.9,20.8,36.7,36.5,61,44.4C574.5,661.1,517.5,621.3,541.3,583.7z"/>
        		</g>
        		<g>
        			<path class="st10" d="M518,512c0.2,25.6,8,51,23.3,71.7C498.6,594.2,477.4,528.6,518,512z"/>
        		</g>
        		<g>
        			<path class="st10" d="M541.3,440.3C526,461,518.2,486.4,518,512C477.6,495.5,498.1,429.7,541.3,440.3z"/>
        		</g>
        		<g>
        			<path class="st10" d="M602.3,395.9c-24.3,7.9-46.1,23.6-61,44.4C517.5,402.7,574.4,362.8,602.3,395.9z"/>
        		</g>
        		<g>
        			<path class="st10" d="M677.7,395.9c-24.3-8-51.1-8-75.4,0C605,352.3,674.9,352,677.7,395.9z"/>
        		</g>
        		<g>
        			<path class="st10" d="M738.7,440.3c-14.9-20.8-36.7-36.5-61-44.4C705.5,362.9,762.5,402.7,738.7,440.3z"/>
        		</g>
        		<g>
        			<path class="st10" d="M762,512c-0.2-25.6-8-51-23.3-71.7C781.4,429.8,802.6,495.4,762,512z"/>
        		</g>
        	</g>
        	<g id="ring2">
        		<g>
        			<path class="st10" d="M856.4,595.1c10.3-26.4,15.5-54.8,15.5-83.1C911.3,529.9,899.2,592.9,856.4,595.1z"/>
        		</g>
        		<g>
        			<path class="st10" d="M811.9,666.9c19.1-20.9,34.3-45.4,44.5-71.9C886.8,625.9,852.5,680.3,811.9,666.9z"/>
        		</g>
        		<g>
        			<path class="st10" d="M744.4,717.9c25.4-12.6,48.4-30,67.5-51C828.9,706.5,778.3,745.6,744.4,717.9z"/>
        		</g>
        		<g>
        			<path class="st10" d="M663.1,741c28.2-2.6,55.9-10.4,81.3-23.1C746.3,760.7,684.2,779.1,663.1,741z"/>
        		</g>
        		<g>
        			<path class="st10" d="M578.9,733.2c27.3,7.8,55.9,10.3,84.2,7.8C649.3,781.1,585.3,776.7,578.9,733.2z"/>
        		</g>
        		<g>
        			<path class="st10" d="M503.3,695.5c22.6,17.1,48.4,29.9,75.6,37.7C550.9,766.6,493.4,737.4,503.3,695.5z"/>
        		</g>
        		<g>
        			<path class="st10" d="M446.3,633.1c14.9,24.1,34.3,45.4,57,62.5C465.1,716.4,422.5,668.5,446.3,633.1z"/>
        		</g>
        		<g>
        			<path class="st10" d="M415.8,554.3c5.2,27.9,15.6,54.7,30.5,78.8C402.9,639.2,381,578.3,415.8,554.3z"/>
        		</g>
        		<g>
        			<path class="st10" d="M415.8,469.7c-5.2,27.9-5.2,56.6,0,84.6C373.6,544,373.6,480,415.8,469.7z"/>
        		</g>
        		<g>
        			<path class="st10" d="M446.3,390.9c-14.9,24.1-25.3,50.9-30.5,78.8C381.2,445.8,402.5,384.7,446.3,390.9z"/>
        		</g>
        		<g>
        			<path class="st10" d="M503.3,328.5c-22.6,17.1-42,38.4-57,62.5C422.6,355.7,464.9,307.5,503.3,328.5z"/>
        		</g>
        		<g>
        			<path class="st10" d="M578.9,290.8c-27.3,7.7-53,20.6-75.6,37.7C493.3,286.6,550.9,257.4,578.9,290.8z"/>
        		</g>
        		<g>
        			<path class="st10" d="M663.1,283c-28.3-2.6-56.9,0-84.2,7.8C585.2,247.3,649.3,242.9,663.1,283z"/>
        		</g>
        		<g>
        			<path class="st10" d="M744.4,306.1c-25.3-12.6-53.1-20.5-81.3-23.1C684.2,245,746.3,263.2,744.4,306.1z"/>
        		</g>
        		<g>
        			<path class="st10" d="M811.9,357.1c-19.1-21-42.1-38.3-67.5-51C778.3,278.4,828.9,317.5,811.9,357.1z"/>
        		</g>
        		<g>
        			<path class="st10" d="M856.4,428.9c-10.2-26.4-25.4-50.9-44.5-71.9C852.3,343.8,887,397.9,856.4,428.9z"/>
        		</g>
        		<g>
        			<path class="st10" d="M871.9,512c-0.1-28.3-5.3-56.7-15.5-83.1C899.2,431.1,911.4,494.1,871.9,512z"/>
        		</g>
        	</g>
        	<g id="ring3">
        		<g>
        			<path class="st10" d="M944,596.9c7.8-27.6,11.5-56.2,11.7-84.9C994.8,529.9,986.3,590.4,944,596.9z"/>
        		</g>
        		<g>
        			<path class="st10" d="M910,675.5c14.8-24.4,26.7-51.1,34.1-78.6C976.4,624.1,952.6,680.7,910,675.5z"/>
        		</g>
        		<g>
        			<path class="st10" d="M855.8,741.9c21-19.5,39.2-42,54.2-66.4C933.4,710.1,894.9,758,855.8,741.9z"/>
        		</g>
        		<g>
        			<path class="st10" d="M785.8,791.3c25.5-13.2,49-29.9,70-49.4C869.8,782.1,819.3,817.7,785.8,791.3z"/>
        		</g>
        		<g>
        			<path class="st10" d="M705.1,820.1c27.9-5.9,55.5-15.3,80.7-28.8C788.1,833.7,730.5,854.6,705.1,820.1z"/>
        		</g>
        		<g>
        			<path class="st10" d="M619.6,825.8c28.7,2,57.3-0.2,85.5-5.7C695.7,862.4,634.2,865,619.6,825.8z"/>
        		</g>
        		<g>
        			<path class="st10" d="M535.7,808.5c27,9.6,55.3,15.5,83.9,17.3C599.5,863.1,539.4,850.8,535.7,808.5z"/>
        		</g>
        		<g>
        			<path class="st10" d="M459.7,769c23.4,16.6,49,29.6,76,39.5C506.4,839,451.7,810.7,459.7,769z"/>
        		</g>
        		<g>
        			<path class="st10" d="M397.1,710.5c17,22.6,39.6,42.3,62.7,58.5C423.6,790.2,377.6,748.8,397.1,710.5z"/>
        		</g>
        		<g>
        			<path class="st10" d="M352.5,637.3c11.4,26.3,26.5,51,44.6,73.2C356.4,721.1,324.3,668.6,352.5,637.3z"/>
        		</g>
        		<g>
        			<path class="st10" d="M329.5,554.8c3.9,28.5,11.8,56,23,82.5C310.4,636.8,293.5,577.4,329.5,554.8z"/>
        		</g>
        		<g>
        			<path class="st10" d="M329.5,469.1c-4,28.3-4,57.4,0,85.7C289.1,542.7,289.1,481.3,329.5,469.1z"/>
        		</g>
        		<g>
        			<path class="st10" d="M352.5,386.6c-11.2,26.4-19.3,54.1-23,82.5C293.5,446.6,310.4,387.2,352.5,386.6z"/>
        		</g>
        		<g>
        			<path class="st10" d="M397.1,313.5c-18.1,22.2-33.2,46.9-44.6,73.2C324.4,355.5,356.2,302.8,397.1,313.5z"/>
        		</g>
        		<g>
        			<path class="st10" d="M459.7,255c-23,16.2-45.7,35.9-62.7,58.5C377.7,275.4,423.3,233.7,459.7,255z"/>
        		</g>
        		<g>
        			<path class="st10" d="M535.7,215.5c-27,9.9-52.6,22.8-76,39.5C451.7,213.5,506.4,184.9,535.7,215.5z"/>
        		</g>
        		<g>
        			<path class="st10" d="M619.6,198.2c-28.6,1.9-56.9,7.7-83.9,17.3C539.4,173.3,599.5,160.8,619.6,198.2z"/>
        		</g>
        		<g>
        			<path class="st10" d="M705.1,203.9c-28.2-5.5-56.9-7.7-85.5-5.7C634.2,159,695.7,161.6,705.1,203.9z"/>
        		</g>
        		<g>
        			<path class="st10" d="M785.8,232.7c-25.1-13.4-52.8-22.9-80.7-28.8C730.5,169.4,788.1,190.3,785.8,232.7z"/>
        		</g>
        		<g>
        			<path class="st10" d="M855.8,282.1c-21-19.5-44.5-36.2-70-49.4C819.2,206.3,869.8,241.8,855.8,282.1z"/>
        		</g>
        		<g>
        			<path class="st10" d="M910,348.5c-15-24.4-33.2-46.9-54.2-66.4C894.6,266,933.4,313.8,910,348.5z"/>
        		</g>
        		<g>
        			<path class="st10" d="M944,427.1c-7.3-27.5-19.3-54.2-34.1-78.6C952.5,343.3,976.4,399.9,944,427.1z"/>
        		</g>
        		<g>
        			<path class="st10" d="M955.7,512c-0.2-28.7-3.9-57.3-11.7-84.9C986.2,433.6,994.8,494.1,955.7,512z"/>
        		</g>
        	</g>
        </g>
        <g id="Btn">
          <circle x="1" y="1"  r="400"/>
          <path class="st1" d="M640,512"/>
        </g>
        </svg>


      </div>

              
            
!

CSS

              
                
        	.st0{fill:url(#SVGID_1_);}
        	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#1B1464;}

        	.st8{fill:#F3FFBD;}
        	.st9{fill:none;}
          .st10{fill:#000;}


#greeting {
  position: relative;
  width: 800px;
  height: 800px;
  overflow: hidden;
  background-color: #ff6d5d;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto
}

/* Greeting */

#bg {
  opacity:1;
}

#pattern {
  transform: translate(-240px, -110px);
  fill:#FF6D5D;
}

#CN {
/*   transform: translate(-240px, -110px); */
}


#Btn {
  opacity:0;
  transform: scale(.8) translate(500px, 505px);

}

              
            
!

JS

              
                // Greeting//

var masterTl = new TimelineMax({});

masterTl
.set('#CN',{x:-240, y:-110}, {rotation:180,transformOrigin:"50%, 50%"})
.add('Start Rotate')
.to('#ring1', 40, {rotation:359, transformOrigin:"50%, 50%", ease:Power0.easeNone, repeat:-1}, 'Start Rotate')
.to('#ring2', 50, {rotation:359, transformOrigin:"50%, 50%", ease:Power0.easeNone, repeat:-1}, 'Start Rotate')
.to('#ring3', 60, {rotation:359, transformOrigin:"50%, 50%", ease:Power0.easeNone, repeat:-1}, 'Start Rotate')

.add('textRot')
.to('#CN', 10, {rotation:360, transformOrigin:"50%, 50%", ease:Elastic.easeOut}, 'Start Rotate')
.to('#Eng', 10, {rotation:360, transformOrigin:"50%, 50%", ease:Elastic.easeOut}, 'Start Rotate+=0.2')




var Greet = document.getElementById("Btn");

Greet.onmouseover = function(){
  TweenMax.to('#CN', 6, {rotation:"+=180", transformOrigin:"50%, 50%", ease:Power3.easeOut});
  TweenMax.to('#pattern', 8, {rotation:"+=60", transformOrigin:"50%, 50%", ease:Power3.easeOut}, "+=0.5");

};
              
            
!
999px

Console