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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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 class="crWrap">
<svg 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 820 280" style="enable-background:new 0 0 820 280;" xml:space="preserve">

<defs>
		
<clippath id="CR-m-e" maskUnits="userSpaceOnUse">
	<rect id="CR-block-blue-mask" x="227.5" y="104.6" class="color-mask-white" width="109.7" height="136.7"/>
</clippath>
		
<clippath id="CR-m-creative" maskUnits="userSpaceOnUse">
		<rect id="CR-full-word-creative-MASK" x="34.4" y="121.5" class="color-mask-white" width="728.9" height="104.1"/>
</clippath>
		
<clippath id="CR-m-ative-scrpt" maskUnits="userSpaceOnUse">
		<rect id="CR-ative-scrpt-MASK" x="318.9" y="37.6" class="color-mask-white" width="439" height="196.2"/>
</clippath>
		
</defs>

<g id="CRSVG">
	
		<g id="CR-confetti">
		<g id="CR-confetti-squiggle-2">
			<path class="color-pale-yellow" d="M174.2,102.4c-6.7,5.6-16,7.4-24.1,4.6c-4.1-1.4-6.3-5.8-4.9-9.9c1.4-4.1,5.8-6.3,9.9-4.9
				c3,1,6.5,0.3,9.1-1.8c2.6-2.2,3.9-5.5,3.4-8.6c-0.7-4.3,2.3-8.3,6.5-8.9c4.3-0.7,8.3,2.3,8.9,6.5
				C184.3,87.9,180.9,96.8,174.2,102.4z"/>
		</g>
		<polygon id="CR-confetti-star-2" class="color-light-blue" points="240.5,79.4 252.7,91.1 269.3,87.6 262,102.9 270.5,117.5 253.7,115.3 
			242.4,127.9 239.3,111.3 223.8,104.4 238.7,96.3 		"/>
		
			<rect id="CR-confetti-rectangle-2" x="114" y="150.3" transform="matrix(0.8872 0.4613 -0.4613 0.8872 90.0935 -40.428)" class="color-pale-yellow-2" width="27.5" height="27.5"/>
		<g id="CR-confetti-circle-2_1_">
			<path class="color-pale-yellow-2" d="M601.8,80.2C601.8,80.2,601.8,80.2,601.8,80.2l0,5.1c0,0,0,0,0,0c6.6,0,12,5.4,12,12s-5.4,12-12,12
				c0,0,0,0,0,0v5.1c0,0,0,0,0,0c9.5,0,17.2-7.7,17.2-17.2S611.3,80.2,601.8,80.2z"/>
			<path class="color-pale-orange" d="M601.8,109.4c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12v-5.1c-9.5,0-17.2,7.7-17.2,17.2s7.7,17.2,17.2,17.2
				V109.4z"/>
		</g>
		<g id="CR-confetti-circle-1">
			<path class="color-medium-blue" d="M277.7,158.4v5c5.3,0,9.5,4.3,9.5,9.5c0,5.3-4.3,9.5-9.5,9.5v5c8,0,14.6-6.5,14.6-14.6
				C292.3,164.9,285.8,158.4,277.7,158.4z"/>
			<path class="color-medium-purple-2" d="M263.2,172.9c0,8,6.5,14.6,14.6,14.6c0,0,0,0,0,0v-5c0,0,0,0,0,0c-5.3,0-9.5-4.3-9.5-9.5
				c0-5.3,4.3-9.5,9.5-9.5c0,0,0,0,0,0v-5c0,0,0,0,0,0C269.7,158.4,263.2,164.9,263.2,172.9z"/>
		</g>
		<g id="CR-confetti-squiggle-1_1_">
			<path class="color-pale-orange" d="M694.7,66.9c7.7,2.2,13.8,8.2,15.9,15.7c1.1,3.8-1.2,7.7-4.9,8.7c-3.8,1.1-7.7-1.1-8.7-4.9
				c-0.8-2.8-3.1-5-6-5.9c-2.9-0.8-6.1-0.1-8.2,1.9c-2.9,2.7-7.4,2.6-10-0.3c-2.7-2.9-2.6-7.3,0.3-10
				C678.7,66.7,687,64.7,694.7,66.9z"/>
		</g>
		<polygon id="CR-confetti-star-1" class="color-medium-blue" points="594.3,153.9 596.3,167 608.3,172.8 596.4,178.8 594.6,192 585.2,182.6 
			572.1,184.9 578.2,173.1 571.9,161.3 585,163.5 		"/>
		
			<rect id="CR-confetti-rectangle-1" x="660.8" y="134" transform="matrix(0.9565 -0.2917 0.2917 0.9565 -14.692 204.4849)" class="color-dark-orange" width="35" height="35"/>
		<circle id="CR-confetti-elipse-1" class="color-pale-orange" cx="167.3" cy="149.5" r="6.7"/>
	</g>
	
	<rect id="CR-block-pale-orange" x="337.2" y="104.6" class="color-pale-orange" width="445.9" height="136.7"/>
	<rect id="CR-block-drk-purple" x="337.2" y="104.6" class="color-medium-purple-2" width="445.9" height="136.7"/>
	<rect id="CR-block-blue" x="227.5" y="104.6" class="color-medium-blue" width="109.7" height="136.7"/>
	
	<g id="CR-letter-cr">
		<path id="CR-letter-c" class="color-medium-purple-2" d="M36.7,172.7c0-35,33.6-55.6,66.1-48c4.7,1,9.1,3.4,13.9,3c9.5-9.3,7.7,7,8.4,13
			c0.1,6.7,1.7,13.7,0.7,20.3c-3.9,1.3-6.4,0.9-8.3-2.8C103.8,138.9,67,144,64.4,169.4c-4.4,29.6,33.2,41.1,51.7,21.4
			c3-4.2,4-7,9.5-4.5c1.2,7.5-0.8,16.4-0.8,24.3c-0.4,7.3,0.2,16.1-9,8.7c-4.6,0.1-8.7,2.3-13.1,3C69.8,230.5,35.5,208.1,36.7,172.7
			z"/>
		<path id="CR-letter-r" class="color-medium-purple-2" d="M229.5,158.5c0.4,11.6-6.3,22.7-17.1,26.9c-4.5,1.4,3.4,8,4.7,10.3
			c3.7,5.1,7.6,10.2,11.4,15c1.8,2.7,5.7,4.5,6.5,7.4c-0.8,2-1.3,4.3-4,3.4c-8.6,0.3-16.9,0.1-25.7,0.1c-13.4,0.7-7.5-1.5-9.8-10.9
			c-5.2-7.1-10.5-14.4-16-21.1c-3.2-1.2-10.8-1.7-9.4,3.9c-0.1,4.2,0.1,8.4-0.1,12.5c-1.2,8,6.5,9.2,4.6,14.6
			c-8,2.7-18.9,0.2-27.7,1c-3.6-0.5-9.5,1.9-9.4-3.6c-0.5-2.1,3.7-2.9,3.9-5.4c1.8-4.2,0.9-8.8,1.2-13.2
			c-0.3-18.8,0.1-37.5-0.1-56.3c0.2-3.6,0.1-7.5-1.8-10.6c-0.7-1.5-3.7-2.1-3.2-3.9c0.2-1.6,0.5-4.1,2.8-3.6c15.1-0.1,29.9,0.1,45,0
			C208.3,123.1,229.8,132.6,229.5,158.5z M172,148.4c-3.8,1.2-1,10.7-1.9,14.2c-1,6.9,3.3,6.5,8.7,6.1c5.1,0.1,10.4,0.4,15.2-0.3
			c9.3-1.8,11-15.3,2.2-19C188.5,147.3,179.9,148.2,172,148.4z"/>
	</g>
	
	<g id="CR-scrpt-letter-ative" clip-path="url(#CR-m-ative-scrpt)" >
		<path class="color-dark-orange" d="M528.4,79.9c16.8,6.1,33.5-26,13-30.4C526,46.1,511.4,73.9,528.4,79.9z"/>
		<path class="color-dark-orange" d="M741.7,155.1c-3.6,3.5-4.9,9.3-7.4,13.6c-26,59.2-97.2,64.2-74.1,8.3c26,18.3,51.6-3.6,57.2-30.4
			c2-9.2,7.3-18,6.8-27.4c1.4-19.8-21.4-28.6-38.1-25.1c-26.5,4.7-32,33.7-39.8,55.2c-1.3,4.6-2.9,9.2-4.6,13.8
			c-2.2,2.9-2.8,7.7-5.7,10.1c-6.5,10.8-19.8,23.9-32.5,22.4c10.6-24,21.9-49.8,26.8-76.4c0.8-7.2,3.8-15.1,2.4-22.1
			c-3.3-2.4-9-0.9-13-1.2c-5.4-1.2-7.3,2.5-6.8,7.4c-1.3,6.9-2.2,13.9-4.1,20.7c-4.1,17.8-10,35.1-17.1,51.9
			c-3.1,12.6-18.8,4-20.1,19.8c-1.5,4.2,5.4,8.3,1.2,11.2c-10.6,12.8-21.6,4.7-15.9-10c7.7-24.1,16.1-48,24.2-72
			c1.9-5.7,3.7-11,5.6-16.8c2.3-5.3,5.8-13.8-3.5-12.1c-4.8,0.9-12.1-2.3-15.3,2.1c-7.2,22.2-15.1,44.6-22.5,66.6
			c-7.1,13.2-13.4,27.7-23.5,39c-11.5,17.7-23.9,8.3-16.2-9.7c9.9-30.8,21-61.4,31-92.3c3.9-8-7.9-5.2-12.7-5.6
			c-10.6-2.9-10,10.1-13.3,16.8c-3.4,10.1-6.6,20-10,30.1c-1.2,5.3-4.2,13-7.5,21.6c-3.6,6.9-6.7,14.1-11,20.6
			c-5.2,10.9-37.7,47.7-36.6,15.9c5-20.4,13.2-40.6,19.8-60.5c2.4-8.5,5.8-16.5,8.3-25.1c2.8-4.6,2.7-12.6,6.5-15.9
			c4.8-1,21.4,2.3,22.7-2.1c7.2-13.5-2.9-10.2-12.4-10.3c-9.2,0.6-6-2.3-4.1-8.8c3.8-11.1,7.7-22.2,11.2-33.3
			c4-9.6-13.3-4.1-18.3-5.6c-5,2.2-4.8,10.6-7.1,15.3c-3.1,8.3-5.5,16.6-8.6,24.8c-1.5,11.7-7.9,6.3-16.8,7.7
			c-3.8-0.3-3,4.6-4.7,6.8c-3.1,5.7,3.3,6.1,7.4,5.6c11.2-1.7,5.3,5.4,3.5,11.8c-2.7,8-5.2,15.5-8,23.3c-3.4,10.9-7.4,21.6-11,32.4
			c-0.2,0.2-0.4,0.5-0.5,0.7c-7.3,14.4-15.2,29.8-26.8,41.3c-13.6,13.7-16.3-6.9-10.9-16.8c8-24.4,16.5-49.4,25.1-73.8
			c1.6-12.3,16.1-25.5-6.2-22.4c-5.3,0.9-7.8,12-12.7,4.4c-9.8-9.3-25.2-7.9-36.6-2.7c-12.3,8.5-16,23.5-20.9,36.6
			c-6.2,19.7-13.2,39.1-19.8,58.7c-15.7,37.5,22.5,49.9,44.3,21.8c4.4-1.9,3.1,8.2,7.1,9.7c5.4,6.9,16.9,6.7,24.5,3.5
			c10-4.4,17-12.3,22.8-21.1c-0.2,9.6,2.9,18.1,13.4,22.3c19.7,3,33.7-7.9,44.8-22.8c-0.7,12.4,3.3,22,17.5,23.7
			c15.1,0.6,25.7-9.9,33.9-21.8c0,2.9,0.3,5.9,1.2,8.9c3.7,16.2,24,15.8,36.3,10.3c10.2-3.6,17.1-12.2,24.5-19.2
			c15.1,0.6,28.9-5.2,39.5-14.9c-0.1,3.9,0.2,7.9,1.2,11.9c7.9,31.9,51,30.5,72.9,14.2c18.4-14,30.3-34.7,40.1-55.5
			C752.8,158.5,746.8,155.1,741.7,155.1z M669.7,147.4c3.4-9.3,5.9-19.1,10.6-27.7c6.9-15.9,28.6-11.2,22.4,7.1
			c-5.2,13-6.5,30.1-18.9,38.6C670.5,172.5,663,158.9,669.7,147.4z M368.2,196.7c-9.8,21.2-31.6,23.5-20.9-4.7
			c6.6-20.3,13.5-40.2,20.4-60.5c6.3-29.2,38.4-29.9,24.8,3.5C385.3,156.1,379,177.2,368.2,196.7z"/>
	</g>
	
	<g id="CR-scrpt-letter-e">
		<path class="color-dark-orange" d="M331.7,165.2c2.5-4.3,3.8-10.1,7.4-13.6c5.1,0,11.1,3.4,6.8,8.9c-9.8,20.8-21.7,41.5-40.1,55.5
			c-21.9,16.3-65,17.7-72.9-14.2c-4.8-19.2,5.7-37.8,10.9-56.1c7.8-21.5,13.4-50.4,39.8-55.2c16.7-3.6,39.5,5.3,38.1,25.1
			c0.5,9.4-4.8,18.2-6.8,27.4c-5.6,26.8-31.3,48.6-57.2,30.4C234.4,229.4,305.7,224.4,331.7,165.2z M300.1,123.3
			c6.2-18.3-15.6-23-22.4-7.1c-4.8,8.7-7.2,18.4-10.6,27.7c-6.8,11.4,0.8,25,14.2,18C293.6,153.4,294.9,136.3,300.1,123.3z"/>
	</g>
	
	<g id="CR-plus">
		<g>
			<path class="color-pale-orange" d="M489.4,158.6v21.8c0,1.6-1.3,2.8-2.8,2.8h-60.9c-0.4,0-0.8,0.4-0.8,0.8v62c0,1.6-1.3,2.8-2.8,2.8h-24.2
				c-1.6,0-2.8-1.3-2.8-2.8v-62c0-0.4-0.4-0.8-0.8-0.8h-60.7c-1.6,0-2.8-1.3-2.8-2.8v-21.8c0-1.6,1.3-2.8,2.8-2.8h60.7
				c0.4,0,0.8-0.4,0.8-0.8v-62c0-1.6,1.3-2.8,2.8-2.8H422c1.6,0,2.8,1.3,2.8,2.8v62c0,0.4,0.4,0.8,0.8,0.8h60.9
				C488.1,155.7,489.4,157,489.4,158.6z"/>
		</g>
	</g>
	
	<g id="CR-code-group">
		
		<g id="CR-code-letter-c">
		<path class="color-medium-purple-2" d="M196.2,172.7c0-35,33.6-55.6,66.1-48c4.7,1,9.1,3.4,13.9,3c9.5-9.3,7.7,7,8.4,13
			c0.1,6.7,1.7,13.7,0.7,20.3c-3.9,1.3-6.4,0.9-8.3-2.8c-13.7-19.3-50.5-14.2-53.1,11.2c-4.4,29.6,33.2,41.1,51.7,21.4
			c3-4.2,4-7,9.5-4.5c1.2,7.5-0.8,16.4-0.8,24.3c-0.4,7.3,0.2,16.1-9,8.7c-4.6,0.1-8.7,2.3-13.1,3
			C229.3,230.5,195.1,208.1,196.2,172.7z"/>
		</g>
		
		<g id="CR-code-letter-de">
			<path class="color-dark-orange" d="M475.7,192c-4.6,10-3.3,30.5,11.2,16.8c12.2-12.4,19.8-27.9,27.7-43.1c3.8-8.1,5-14.8,14.5-7.1
				c-0.7,6-5.3,11.2-7.4,16.8c-12.8,20.6-23.5,53-51.6,54.6c-17.9,0.8-14.9-14.6-20.9-15.3c-11.2,17.9-47.7,23.6-47.8-4.4
				c1.1-16.1,8.7-30.6,13.3-46c8.2-20.6,11.4-45.1,25.7-62c9.4-10.7,30.2-12.8,40.1-1.8c4.7,5.6,5.9-6,7.1-9.1
				c9.8-25,16.2-51.7,26.6-76.1c4.2-1.9,9.4-0.1,14.2-0.9c8.8-0.8,6.4,5.1,4.1,10.9C513.1,81,494.9,136.7,475.7,192z M427.3,192
				c-10,28.7,10.7,25.6,21.2,4.7c10.1-19.1,17.1-39.3,23.3-59.9c6.9-13.3,6.4-34.9-13.9-24.2c-6.9,6.3-8.5,15.6-11.8,23.9
				C439.8,154.8,433.7,174.2,427.3,192z"/>
			<path class="color-dark-orange" d="M608.2,168.7c2.5-4.3,3.8-10.1,7.4-13.6c5.1,0,11.2,3.4,6.8,8.9c-9.8,20.8-21.7,41.5-40.1,55.5
				c-21.9,16.3-65,17.7-72.9-14.2c-4.8-19.2,5.7-37.8,10.9-56.1c7.8-21.5,13.4-50.4,39.8-55.2c16.7-3.6,39.5,5.3,38.1,25.1
				c0.5,9.4-4.8,18.2-6.8,27.4c-5.7,26.8-31.3,48.6-57.2,30.4C510.9,232.9,582.2,227.9,608.2,168.7z M576.6,126.8
				c6.2-18.3-15.6-23-22.4-7.1c-4.8,8.7-7.2,18.4-10.6,27.7c-6.8,11.4,0.8,25,14.2,18C570.1,156.9,571.4,139.8,576.6,126.8z"/>
		</g>
		
		<g id="CR-code-letter-o">
		<path class="color-pale-orange" d="M293.6,172.9c-0.2-37.5,38-58.2,71.6-46.9c45.6,12.9,44.4,84.7-1.5,95.8
			C329.9,232.7,292.1,210.3,293.6,172.9z M371.2,172.9c-0.3-34-50.7-32.9-49.7,0.8C321,209,372.9,207.7,371.2,172.9z"/>
		</g>
		
		</g>
	
		<g id="CR-code-nmbrs-group">
		<g id="code-numbers">
			<path id="CR-code-number-1" class="color-dark-orange" d="M488.2,22.8c-17.2,52.3-36,105.6-53.4,158.1c-6.1,15.5-10.2,33.7-17.1,48.4
				c-8.5,1.2-27,4.1-18.3-10c12.4-37,25-73.8,37.5-110.6c7.5-22.4,14.9-44.3,22.7-67c-2.5-5.9-20.1,10.5-18.9-3.8
				c-5.6-12.4,9-12.2,16.8-16.8c4.3-2,9.1-5.4,12.4-7.4C476.8,15.2,496,9.2,488.2,22.8z"/>
			<path id="CR-code-number-2" class="color-dark-orange" d="M467.3,214.9c-13.6-30.9,14.6-70.7,20.9-102.4c14.5-31.3,15.4-75.2,46.3-95.6
				c25.7-16.9,68-2.9,64.3,32.8c-2.4,21.6-13.3,41.9-18.9,62.8c-14.4,34.5-19.1,76.3-42.5,106.8
				C518.7,238.3,480.5,240.9,467.3,214.9z M488.5,183.3c-10.5,23.2,9.7,44.9,30.7,25.4c12.7-15.2,16-36.9,23-55.2
				c8.9-25.7,17.2-50.4,25.7-76.1c3.8-12.1,9.4-22.7,8.3-35.4c-2-15.6-22.7-18.9-31.9-7.7C530,47.8,528.2,69.5,521,86.9
				C510.1,118.8,499.2,151.1,488.5,183.3z"/>
			<path id="CR-code-number-3" class="color-dark-orange" d="M588,214.9c-13.6-30.9,14.6-70.7,20.9-102.4c14.5-31.3,15.4-75.2,46.3-95.6
				c25.7-16.9,68-2.9,64.3,32.8c-2.9,23.4-14.5,45.3-20.6,68.1c-13.7,32.6-18.2,72.7-40.7,101.5C639.3,238.3,601.1,240.9,588,214.9z
				 M609.2,183.3c-10.5,23.2,9.7,44.9,30.7,25.4c12.7-15.2,16-36.9,23-55.2c8.9-25.7,17.2-50.4,25.7-76.1
				c3.8-12.1,9.4-22.7,8.3-35.4c-2-15.6-22.7-18.9-31.9-7.7c-14.3,13.4-16.1,35.1-23.3,52.5C630.8,118.8,619.9,151.1,609.2,183.3z"
				/>
			<path id="CR-code-number-4" class="color-dark-orange" d="M790,22.8c-17.2,52.3-36,105.6-53.4,158.1c-6.1,15.5-10.2,33.7-17.1,48.4
				c-8.5,1.2-27,4.1-18.3-10c12.4-37,25-73.8,37.5-110.6c7.5-22.4,14.9-44.3,22.7-67c-2.5-5.9-20.1,10.5-18.9-3.8
				c-5.6-12.4,9-12.2,16.8-16.8c4.3-2,9.1-5.4,12.4-7.4C778.6,15.2,797.8,9.2,790,22.8z"/>
		</g>
		<rect id="CR-code-blue-rect" x="424" y="66.2" class="color-light-blue" width="394.4" height="66.5"/>
	</g>
	
	<g id="CR-Full-CREATIVE-group">
		<rect id="CR-word-red-block" x="280.2" y="104.2" class="color-dark-orange" width="506.3" height="137.3"/>
		
		<g id="CR-word-creative">
			
			<path id="CR-letter-full-C" class="color-medium-purple-2" d="M36.7,172.7c0-35,33.6-55.6,66.1-48c4.7,1,9.1,3.4,13.9,3c9.5-9.3,7.7,7,8.4,13c0.1,6.7,1.7,13.7,0.7,20.3
				c-3.9,1.3-6.4,0.9-8.3-2.8C103.8,138.9,67,144,64.4,169.4c-4.4,29.6,33.2,41.1,51.7,21.4c3-4.2,4-7,9.5-4.5
				c1.2,7.5-0.8,16.4-0.8,24.3c-0.4,7.3,0.2,16.1-9,8.7c-4.6,0.1-8.7,2.3-13.1,3C69.8,230.5,35.5,208.1,36.7,172.7z"/>
			
			<path id="CR-letter-full-R" class="color-medium-purple-2" d="M229.5,158.5c0.4,11.6-6.3,22.7-17.1,26.9c-4.5,1.4,3.4,8,4.7,10.3
				c3.7,5.1,7.6,10.2,11.4,15c1.8,2.7,5.7,4.5,6.5,7.4c-0.8,2-1.3,4.3-4,3.4c-8.6,0.3-16.9,0.1-25.7,0.1c-13.4,0.7-7.5-1.5-9.8-10.9
				c-5.2-7.1-10.5-14.4-16-21.1c-3.2-1.2-10.8-1.7-9.4,3.9c-0.1,4.2,0.1,8.4-0.1,12.5c-1.2,8,6.5,9.2,4.6,14.6
				c-8,2.7-18.9,0.2-27.7,1c-3.6-0.5-9.5,1.9-9.4-3.6c-0.5-2.1,3.7-2.9,3.9-5.4c1.8-4.2,0.9-8.8,1.2-13.2
				c-0.3-18.8,0.1-37.5-0.1-56.3c0.2-3.6,0.1-7.5-1.8-10.6c-0.7-1.5-3.7-2.1-3.2-3.9c0.2-1.6,0.5-4.1,2.8-3.6
				c15.1-0.1,29.9,0.1,45,0C208.3,123.1,229.8,132.6,229.5,158.5z M172,148.4c-3.8,1.2-1,10.7-1.9,14.2c-1,6.9,3.3,6.5,8.7,6.1
				c5.1,0.1,10.4,0.4,15.2-0.3c9.3-1.8,11-15.3,2.2-19C188.5,147.3,179.9,148.2,172,148.4z"/>

			<g clip-path="url(#CR-m-e)">
				<path id="CR-letter-full-E" class="color-pale-orange" d="M245.1,140c0.6-4.4-2-7.8-4.8-10.3c-0.7-5.4,3.9-4.5,7.7-4.4
				c11.4,0.2,22.8-0.4,34.1,0.1c6.6-0.3,13.4,0,19.9-0.1c4.5-0.1,9.2,0.8,12.8-2.1c3,0.4,5.3-0.7,5.5,3.6c1.3,3.4,2.2,6.9,3.3,10.2
				c0.2,4.5,7,12.4,0,13.9c-2.8-0.4-5.2-2.8-8.4-2.8c-6.6,0.1-13.3,0-19.9,0.1c-6.8,0.2-13.8-0.5-20.5,0.1c-3.7,1.7-1.3,6.8-2.1,9.9
				c-0.7,6.3,7,4,11,4.3c6,0,12.2,0.2,18.2-0.1c4.4-0.7,6.6-7.3,11-3.7c0.8,6,0.1,12.6,0.3,18.9c-0.1,3.5,0.2,7.2-0.1,10.8
				c-2.2,0.8-4.9,1.9-5.9-1c-5.9-5.6-23.9-2.4-32.4-2.9c-3.6,1.5-1.2,6.1-2.1,9.1c-0.8,4.9,3,5.7,7,5.1c3.3,0.1,6.5,0.1,9.8,0.1
				c9.1-1,25.5,2.4,32.5-2.6c7.6-0.8,3.7,5.6,2.8,9.9c-2.1,5.5-3.3,11.8-5.7,17.2c-2.7,1.1-5.2,0.1-7.4-1.2
				c-3.2-0.9-6.5-0.1-9.8-0.4c-20,0.1-39.8-0.2-59.7,0.1c-6.4-4.2,4.4-6.6,3-16.5C245.1,184,245.3,161.6,245.1,140z"/>
			</g>
			
			<g clip-path="url(#CR-m-creative)">
			<path id="CR-letter-full-A" class="color-pale-orange" d="M400.9,141.5c5.7,14.5,11.5,29,17.7,43.6c4,9.4,7.1,20.6,12.8,29.4
				c9.2,8.4-3.1,7.7-9.4,7.3c-6.4,0-12.8,0-19.2,0.1c-5.9,0.4-5.7-4.8-3-8.3c0-3.5-0.9-7.4-2.9-9.9c-10.2-0.9-20.8-0.1-31.3-0.3
				c-4.4-0.7-6,8.6-4.6,11.7c2.3,2.1,1.1,3.5,0.1,5.9c-3.7,1.9-8.8,0.1-13,0.7c-5-0.1-10,0.3-15-0.1c-3.7,0.5-8.6,1-7.4-4.3
				c5-3.5,7-9.7,9.1-15.4c8.5-20.9,17.6-42.4,25.7-63.6c1.2-3,1.3-6.5-1.5-8.6c0.4-1.8,0.8-5.1,3.2-4.7c12.5,1.1,25.9-1.6,38.1,1.1
				C402.6,131.8,395.7,132.7,400.9,141.5z M388.1,179.2c-2-5.7-4.2-11-6.1-16.5c-3.2-8.4-6,7.7-7.4,10.2c-2,5.4-6.3,9.9,2.6,9
				C379.8,180.9,389.8,183.9,388.1,179.2z"/>
			</g>
			
			<g clip-path="url(#CR-m-creative)">
			<path id="CR-letter-full-T" class="color-medium-purple-2" d="M451.1,221.4c-4-5.2,4.3-6.3,3.7-12.6c0.6-13.2-0.4-26.6,0.3-39.7
				c-0.5-5.4,0.1-10.9-0.3-16.4c1.4-6.3-6.4-4.3-10.2-4.4c-6.5-0.4-13-0.2-18.6,2.8c-4.8-1.2-2.8-4.2-1.9-7.7
				c1.6-4,2.5-7.7,3.7-11.9c3-12.9,4.7-6.9,14.2-6.2c12.3,0.1,24.8,0,37.1,0c34.5,3,23.4-14.9,34.8,19.6c1.7,3.8,0.4,5.5-3.3,6.3
				c-2.5-2-5.3-2.8-8.4-3c-5.6,0.2-11.2,0.1-16.8,0c-5.2,0.1-2,17.5-2.8,21.8c0,12-0.1,24,0,36.3c-1.4,9.2,7.8,9.2,3.9,15.3
				C475.1,222.1,462.6,222.2,451.1,221.4z"/>
			</g>
			
			<g clip-path="url(#CR-m-creative)">
			<path id="CR-letter-full-I" class="color-medium-purple-2" d="M524.2,137c-0.3-1.9-1.2-3.8-2.5-5.2c-0.5-0.5-1-1-1.6-1.4c-1.9-4.3,1.4-6,5.7-5.3
				c4,0.3,8,0.1,12.1,0.1c6.9,0,26.6-2.7,16.7,7.3c-1.2,1.2-2.2,4.4-2.4,6.2c-0.3,3.2,0,69.7,0.3,70.9c1.3,6,7.9,8.8,2.7,12.4
				c-8.1,0-15.9,0.1-23.9,0c-4.4-0.3-14.3,2-11.3-5.2c2.6-1.5,3.8-3.8,4.3-6.5C525,205.9,524.4,138,524.2,137z"/>
			</g>
			
			<g clip-path="url(#CR-m-creative)">
			<path id="CR-letter-full-V" class="color-medium-purple-2" d="M596.3,205.5c-8-19.1-17.4-38.3-25.4-57.4c-2.6-4-3.4-8.9-5.8-13
				c-1.4-3.5-7.6-5.5-4.1-9.5c10.3-1.2,21.7,0.1,32.5-0.4c3.9,0,3.9,5.1,1.8,7.4c-1.1,3.1,0.8,6.3,1.5,9c6,13.3,11,27.1,17,39.9
				c2.3,3.6,10.6-23.4,12.7-26.1c2.6-7.4,7.1-14.3,7.7-22.1c-1.7-3.3-2.9-3.8-0.8-7.4c2.3-1.7,5.4-0.2,8-0.7
				c4.5,0.1,9.1-0.3,13.4,0.1c2.6-0.3,5.7-0.1,8.4-0.1c3.1-0.5,6.1-0.2,6.1,3.6c-7.9,7.9-10.4,19.9-15.7,29.8
				c-5.7,14-12.5,27.5-18.3,41.6c-1.7,4-4.4,8-4.3,12.5c-0.3,1.8,1.1,3.2,2.2,4.4c-0.1,3.3-2.3,5.3-5.7,4.6
				c-6.5-0.1-12.9,0.2-19.3,0c-3.5-0.8-8.4,1.4-11-1C594,215.8,602,214.1,596.3,205.5z"/>
			</g>
			
			<g clip-path="url(#CR-m-creative)">
			<path id="CR-letter-full-E2" class="color-medium-purple-2" d="M677.3,140c0.2-3.6-1-7.9-4.4-9.5c-2.1-5.6,3.1-5.6,7.3-5.2c5.3,0.3,10.6-0.2,15.7,0
				c14.8,0,29.3,0.1,44,0c4.2,0.9,8.4-4.4,12-1c1.8,7,4.3,13.6,6.2,20.5c1.9,3.2,0.7,5.8-3,6.2c-2.7-1.6-5.3-2.9-8.5-2.9
				c-12.7,0.2-25.3,0.1-37.9,0c-5.9,0.1-3.3,8.8-3.4,12.5c1.8,3.8,8.1,1.4,11.6,1.9c5.7,0,11.7,0.2,17.4-0.1
				c4.3-0.7,5.9-6.4,10.3-4.3c1.9,1.2,0.9,4.5,0.8,6.3c0.5,3.8-0.1,7.7,0.3,11.4c-0.5,7.2,2,19.4-8.3,9.9c-4.6-2.6-9.8-1.2-14.8-1.7
				c-5.2,0.5-10.6-0.3-15.6,0.3c-3.6,1.5-1.2,6.1-2.1,9.1c-0.9,5.5,3.7,5.5,7.9,5.1c3.6,0.1,7.1,0.2,10.6,0
				c8.4-0.5,24.7,2.2,30.9-2.5c7.6-0.8,3.7,5.6,2.8,9.9c-2.1,5.5-3.3,11.8-5.7,17.2c-2.7,1.1-5.2,0.1-7.4-1.2
				c-3.2-0.9-6.5-0.1-9.8-0.4c-20,0.1-39.8-0.2-59.7,0.1c-6.4-4.2,4.4-6.6,3-16.5C677.3,184,677.5,161.6,677.3,140z"/>
			</g>
		</g>
	</g>
	
	<g id="crosshairs">
		<line class="die-line" x1="410" y1="13.6" x2="410" y2="261.7"/>
		<line class="die-line" x1="355.2" y1="104.6" x2="464.8" y2="104.6"/>
	</g>
</g>
</svg>
</div>
              
            
!

CSS

              
                body{background-color:#d67886;}

	.crWrap{width:100%; max-width:940px; margin:0 auto; text-align:center; visibility:hidden; /* set hidden and avoid flash of content */}
		
	.color-medium-blue{fill:#6979E4;}
	.color-medium-purple-2{fill:#3F3B75;}
	.color-pale-yellow{fill:#FDDFAB;}
	.color-pale-yellow-2{fill:#F3C9BB;}
	.die-line{fill:none;stroke:#231F20;stroke-miterlimit:10;}
		
	.color-dark-purple{fill:#2C2C45;}
	.color-medium-purple{fill:#36394D;}
	.color-light-purple{fill:#656EAE;}
	.color-pale-orange{fill:#EEBD65;}
	.color-pink{fill:#EB9299;}
	.color-medium-orange{fill:#E98679;}
	.color-dark-orange{fill:#DB5E57;}
	.color-pale-green{fill:#74DBAE;}
	.color-light-blue{fill:#72C4E9;}
	.color-white{fill:#FFFFFF;}
	.color-yellow-green{fill:#BED877;}
	.color-stroke-white{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
	.color-mask-white{fill:#ffffff;}
              
            
!

JS

              
                	/* fade in entire Creative+Code container */
	gsap.to(".crWrap", {autoAlpha:1, duration:.75})
		
	/* initial visibility is zero for most elements in the sequence */
	gsap.set("#crosshairs, #CR-code-group, #CR-code-number-1, #CR-code-number-2, #CR-code-number-3, #CR-code-number-4, #CR-code-blue-rect, #CR-letter-cr, #CR-scrpt-letter-ative, #CR-plus, #CR-scrpt-letter-e, #CR-block-blue, #CR-word-red-block, #CR-block-pale-orange, #CR-block-drk-purple", {autoAlpha:0});
		
	/* initially the letters E and A need to be dark purple */
	gsap.set("#CR-letter-full-E, #CR-letter-full-A", {fill:"#3F3B75"})
	
	/* set initials ready for animating */
	gsap.set("#CR-block-blue, #CR-block-pale-orange, #CR-block-drk-purple", {scaleY:.2, transformOrigin: "50% 100%"})
	gsap.set("#CR-scrpt-letter-e", {y:60})
	gsap.set("#CR-m-ative-scrpt", {y:200})
	gsap.set("#CR-plus", {scale:.5, rotation:-8, transformOrigin: "50% 50%"});

	gsap.set("#CR-confetti-squiggle-2", {opacity:0, x:220, y:50, transformOrigin: "50% 50%"})
	gsap.set("#CR-confetti-star-2", {opacity:0, x:140, y:40, transformOrigin: "50% 50%"})
	gsap.set("#CR-confetti-rectangle-2", {opacity:0, x:260, y:10, transformOrigin: "50% 50%"})
	gsap.set("#CR-confetti-circle-2_1_", {opacity:0, x:-120, y:30, transformOrigin: "50% 50%"})
	gsap.set("#CR-confetti-circle-1", {opacity:0, x:100, transformOrigin: "50% 50%"})
	gsap.set("#CR-confetti-squiggle-1_1_", {opacity:0, x:-210, y:50, transformOrigin: "50% 50%"})
	gsap.set("#CR-confetti-star-1", {opacity:0, x:-100, transformOrigin: "50% 50%"})
	gsap.set("#CR-confetti-rectangle-1", {opacity:0, x:-200, y:20, transformOrigin: "50% 50%"})
	gsap.set("#CR-confetti-elipse-1", {opacity:0, x:200, y:20, transformOrigin: "50% 50%"})
	
	gsap.set("#CR-code-letter-de", {x:-80})
	gsap.set("#CR-code-letter-c", {y:-40, rotation:20})
	gsap.set("#CR-code-letter-o", {y:40, rotation:-20})
	gsap.set("#CR-code-number-1, #CR-code-number-3", {transformOrigin: "50% 100%", rotation:20, y:-40})
	gsap.set("#CR-code-number-2, #CR-code-number-4", {transformOrigin: "50% 0%", rotation:-20, y:40})
	gsap.set("#CR-code-blue-rect", {transformOrigin: "0% 50%", scaleX:0.2})
	gsap.set("#CR-word-red-block", {scaleX:.2, transformOrigin: "0% 50%"})

		

	
/* CR Intro */
function CRIntro() {
let CRIntroTl = gsap.timeline();
		CRIntroTl
		.to("#CR-block-blue", {duration:.75, scaleY: 1, autoAlpha:1, ease:"circ.out"}, "0")
		.to("#CR-block-pale-orange", {duration:.75, scaleY: 1, autoAlpha:1, ease:"circ.out"}, "<.2")
		.to("#CR-letter-full-E", {duration:.25, y:-119, ease:"sine.inOut"}, "<.15")
		.to("#CR-scrpt-letter-e", {duration:.25, autoAlpha:1, y:0, ease:"circ.out"}, "<.16")
		.to("#CR-letter-full-A, #CR-letter-full-T, #CR-letter-full-I, #CR-letter-full-V, #CR-letter-full-E2", {duration:.22, y:-119, autoAlpha:0, stagger:0.07, ease:"sine.inOut"}, "<.1")
		.to("#CR-scrpt-letter-ative", {duration:.4, autoAlpha:6, ease:"sine.out"}, "<.15")
		.to("#CR-m-ative-scrpt", {duration:.6, y:0, ease:"sine.inOut"}, "<.1")
		.to("#CR-block-drk-purple", {duration:.75, scaleY: 1, autoAlpha:1, ease:"circ.out"}, "<")
		.to("#CR-block-pale-orange", {duration:.001, autoAlpha:0}, ">")
		.to("#CR-block-blue", {duration:.35, x:128, ease:"circ.inOut"})
		.to("#CR-block-drk-purple", {duration:.001, transformOrigin: "0% 100%"}, "<")
		.to("#CR-block-drk-purple", {duration:.35, x:108, scaleX:.15, ease:"circ.inOut"}, "<")
		.to("#CR-scrpt-letter-e, #CR-scrpt-letter-ative, #CR-letter-full-C, #CR-letter-full-R", {duration:.02, autoAlpha:0}, "<.14")
		.to("#CR-plus", {duration:.2, scale:1.15, rotation:5, autoAlpha:1, ease:"circ.in"}, ">-.14")
		.to("#CR-plus", {duration:1.2, scale:1, rotation:0, ease:"circ.inOut"}, ">")
	
  return CRIntroTl;
}
	
	/* CR Confetti */
let CRconfettiTl = gsap.timeline({defaults: {duration:1, ease:"expo.out"}, paused: true});
		CRconfettiTl
				.set("#CR-confetti-squiggle-2, #CR-confetti-star-2, #CR-confetti-rectangle-2, #CR-confetti-circle-2_1_, #CR-confetti-circle-1, #CR-confetti-squiggle-1_1_, #CR-confetti-star-1, #CR-confetti-rectangle-1, #CR-confetti-elipse-1", {opacity:1})
				.to("#CR-confetti-squiggle-2", {x:0, y:0, rotation:-260}, "0")
				.to("#CR-confetti-star-2", {x:0, y:0}, ".1")
				.to("#CR-confetti-star-2", {rotation:-160, duration:4}, "<")
				.to("#CR-confetti-rectangle-2", {x:0, y:0}, ".15")
				.to("#CR-confetti-rectangle-2", {rotation:560, duration:3.4}, "<")
				.to("#CR-confetti-circle-2_1_", {x:0, y:0}, "0")
				.to("#CR-confetti-circle-2_1_", {rotation:560, duration:3}, "<")
				.to("#CR-confetti-circle-1", {x:0}, ".1")
				.to("#CR-confetti-circle-1", {rotation:490, duration:4}, "<")
				.to("#CR-confetti-squiggle-1_1_", {x:0, y:0, rotation:360}, ".15")
				.to("#CR-confetti-star-1", {x:0}, "0")
				.to("#CR-confetti-star-1", {rotation:190, duration:6}, "<")
				.to("#CR-confetti-rectangle-1", {x:0, y:0}, ".1")
				.to("#CR-confetti-rectangle-1", {rotation:-580, duration:4}, "<")
				.to("#CR-confetti-elipse-1", {x:0, y:0}, ".15")
				.to("#CR-confetti-squiggle-2, #CR-confetti-star-2, #CR-confetti-rectangle-2, #CR-confetti-circle-2_1_", {opacity:0, duration:2}, ".8")
				.to("#CR-confetti-circle-1, #CR-confetti-squiggle-1_1_, #CR-confetti-star-1, #CR-confetti-rectangle-1, #CR-confetti-elipse-1", {opacity:0, duration:2}, "1.3")


function CRconfetti() {
  CRconfettiTl.play(0);
}
	
	
	/* CR set 2 */
function CRcode() {
let CRcodeTl = gsap.timeline({});
		CRcodeTl
				.to("#CR-plus", {duration:.2, scale:.8, rotation:-20, autoAlpha:0, ease:"circ.inOut"})
				.to("#CR-block-drk-purple", {duration:.35, x:0, scaleX:.65, ease:"circ.inOut"}, "<")
				.to("#CR-block-blue", {duration:.35, x:0, ease:"circ.inOut"}, "<")
				.to("#CR-code-group", {duration:.4, autoAlpha:1}, "<.2")
				.to("#CR-code-letter-de", {duration:.4, x:0, ease:"circ.inOut"}, "<-.3")
				.to("#CR-code-letter-c", {duration:.4, y:0, rotation:0, ease:"circ.out"}, "<.25")
				.to("#CR-code-letter-o", {duration:.4, y:0, rotation:0, ease:"circ.out"}, "<.1")
				.to("#CR-code-letter-de", {duration:.1, opacity:0}, ">")
				.to("#CR-code-number-1", {duration:.3, autoAlpha:1, rotation:0, y:0, ease:"circ.inOut"}, "<-.1")
				.to("#CR-code-number-2", {duration:.3, autoAlpha:1, rotation:0, y:0, ease:"circ.inOut"}, "<.1")
				.to("#CR-code-number-3", {duration:.3, autoAlpha:1, rotation:0, y:0, ease:"circ.inOut"}, "<.1")
				.to("#CR-code-number-4", {duration:.3, autoAlpha:1, rotation:0, y:0, ease:"circ.inOut"}, "<.1")
				.to("#CR-code-blue-rect", {duration:.4, autoAlpha:1, ease:"sine.inOut", scaleX:1}, "<")
				.to("#CR-code-blue-rect", {duration:.0001, transformOrigin: "100% 50%"})
				.to("#CR-code-blue-rect", {duration:.7, autoAlpha:0, ease:"circ.inOut", scaleX:.2}, "<")
				.to("#CR-code-number-1", {duration:.15, autoAlpha:0, ease:"circ.inOut"}, "<")
				.to("#CR-code-number-2", {duration:.15, autoAlpha:0, ease:"circ.inOut"}, "<.1")
				.to("#CR-code-number-3", {duration:.15, autoAlpha:0, ease:"circ.inOut"}, "<.1")
				.to("#CR-code-number-4", {duration:.15, autoAlpha:0, ease:"circ.inOut"}, "<.1")
	
	
		  return CRcodeTl;
}
	

	
	
/* CR Creative Word Build */
function CRcreative() {
let CRcreativeTl = gsap.timeline({});
		CRcreativeTl
				.set("#CR-letter-full-E, #CR-letter-full-A", {fill:"#EEBD65"})
				.to("#CR-code-letter-c", {duration:.3, x:-159.5, ease:"sine.inOut"})
				.to("#CR-code-letter-o", {duration:.1, autoAlpha:0, ease:"sine.inOut"}, "<.2")
				.to("#CR-letter-full-C", {duration:.0001, autoAlpha:1})
				.to("#CR-block-blue", {duration:.2, x:"-=56.5", ease:"sine.inOut"}, "<-.1")
				.to("#CR-word-red-block", {duration:.55, autoAlpha:1, scaleX:1, ease:"circ.inOut"}, "<-.1")
				.set("#CR-block-drk-purple", {autoAlpha:0}, ">")
				
				.to("#CR-letter-full-R, #CR-letter-full-E, #CR-letter-full-A, #CR-letter-full-T, #CR-letter-full-I, #CR-letter-full-V, #CR-letter-full-E2", {duration:.22, y:0, autoAlpha:1, stagger:0.07, ease:"sine.out"}, "<-.4")
				.set("#CR-block-blue, #CR-word-red-block", {transformOrigin: "0% 0%"}, ">")
				.to("#CR-block-blue, #CR-word-red-block", {duration:.3, scaleY:.0001, stagger:.2, ease:"sine.inOut"}, "<.2")
				.to("#CR-letter-full-E, #CR-letter-full-A", {duration:.13, fill:"#3F3B75", stagger:.2, ease:"sine.out"}, "<")
		
		  return CRcreativeTl;
}		
		
		
		
let masterCR = gsap.timeline({repeat:-1, repeatDelay:0});
   	masterCR
   	.add(CRIntro(), "0")
	.call(CRconfetti, null, 1.65)
	//.add(CRconfetti(), ">-1.35")
	.add(CRcode(), "2.1")
	.add(CRcreative(), ">-.7")
	

	//GSDevTools.create();
              
            
!
999px

Console