cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="453.5px" height="453.5px" viewBox="0 0 453.5 453.5"
	 overflow="scroll" enable-background="new 0 0 453.5 453.5" xml:space="preserve" id="scene">
<defs>
	<symbol id="heart">
		<path d="M16.6,0c-4.6-0.3-5.9,3.2-5.9,3.2S7.9-1.1,4,0.4C0.1,1.8-2.7,8.5,4.3,14.3c5.4,4.5,6.2,4.5,6.2,4.5
	s0.8,0,6.7-4.8C24,8.3,21.2,0.4,16.6,0z M16.5,13.7c-5.6,4.6-6,4.6-6,4.6S10.2,18.4,5,14C-1.6,8.4,0.5,2.2,4.3,0.8
	c3.7-1.4,6.4,3.5,6.4,3.5s1.3-4.1,5.7-3.8C20.8,0.8,23,8.3,16.5,13.7z"/>
	</symbol>
</defs>
	
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
	
<g>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M156.91,67.08c2.109-1.11,3.489-3.88,6.17-3.57c5.79-0.08,11.05,4.07,12.569,9.62  c-1.71,4.86-7.42,5.43-9.989,9.51c-2.431,2.91-5.08,5.62-7.341,8.66c-2.199,2.97-3.43,6.5-5.34,9.65  c-8.31,13.01-14.689,27.14-20.52,41.399c-1.04,2.301-1.63,4.76-2.42,7.15c-0.66-0.29-1.971-0.87-2.62-1.16  c-2.54-7.619-0.47-15.57,0.33-23.27c-4.98,0.039-9.87,1.06-14.82,1.459c-9.479,0.851-18.55,3.841-27.64,6.431  c-6.03,0.96-11.67,4.19-17.891,3.74c-3.689-1.36-3.97-5.62-3.899-8.97c2.029-1,4.25-1.24,6.479-1.291  c13.311-2.449,26.29-7.319,39.98-7.17c5.67-0.35,11.31,0.59,16.97,0.5c3.98-0.26,4.74-4.81,6.25-7.7  c5.38-12.85,12.021-25.12,19.71-36.74c-6.36,0.67-12.56,2.46-18.89,3.45c-7.101,2.2-14.46,3.25-21.69,4.92  c-8.25,1.28-16.399,3.59-24.8,3.55c-5.49,0.02-10.98,0.87-16.46,0.07c-1.25-1.82-2.74-3.55-3.54-5.63c-0.18-1.93,0.76-3.76,1.2-5.6  c3.75,0.79,7.31,2.62,11.26,2.27c20.22,0.03,40.34-2.9,60.12-7.01C145.78,70.35,151.56,69.38,156.91,67.08z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M192.8,112.29c4.36-1.51,9.5-3.41,13.87-0.99c2.439,2.28,6.04,5.11,4.76,8.88  c-2.68,3.69-6.52,6.35-9.38,9.91c-2.81,3.52-5.21,7.37-8.33,10.641c-5.82,6.149-10.42,14.08-10.35,22.77  c-1.28,0.05-2.551,0.061-3.82-0.04c-1.11-1.729-2.36-3.44-2.85-5.46c-0.391-3.95,1.71-7.561,2.14-11.43  c-6.93-0.061-13.311,3.66-20.23,4.1c-4.779,0.23-10.26,2.76-14.42-0.74c-2.09-0.93-1.819-3.479-2.3-5.33  c5.32-1.699,10.88-2.34,16.44-2.56c7.68-1.19,15.68,1.13,23.149-1.62c4.11-6.04,8.2-12.25,11.061-19.02  c-10.681,0.029-20.98,3.289-31.55,4.33c-5.811,0.76-9.891-5.33-9.91-10.631c1.5-0.5,3.02-1.26,4.649-0.87  C168.16,115.971,180.38,112.02,192.8,112.29z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M96.63,142.42c1.62-0.09,3.24-0.32,4.859-0.13c2.74,1.79,5.62,4.21,5.671,7.79  c-0.771,3.46-2.771,6.439-4.2,9.63c-2.59,7.41-7.271,14.261-7.58,22.319c0.189,1.361-0.351,3.691,1.56,3.99  c8.2,2.08,16.61,3.541,25.101,3.49c-0.801,4.62-5.92,5.25-9.38,7.12c-5.061,2.46-10.74,2.591-16.11,3.91  c-5.46,1.01-11.061,0.62-16.5,1.8c-8.19,1.28-15.6,5.301-23.72,6.85c-10.23,3.281-20.65,6.181-30.41,10.791  c-3.391,1.58-6.46,3.859-9.95,5.209C10.4,225.96,3.94,225.29,0,220.85v-6.14c6.25-5.08,13.81-7.88,21.38-10.319  c11.27-5.101,23.27-8.25,35.02-12.031c9.761-2.189,19.79-2.899,29.521-5.299c-0.09-3.9-0.45-7.851,0.31-11.711  c1.48-8.01,5.061-15.43,6.92-23.34C93.89,148.68,95.15,145.49,96.63,142.42z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M258.26,73.13c3.85-0.27,7.12,2.34,8.979,5.51c0.641,2.18,0.511,4.53,0.181,6.76  c-1.311,1.8-3.61,2.4-5.37,3.65c-3.68,2.67-5.82,6.82-8.97,10.01c-8.051,10.47-16.45,20.85-22.24,32.799  c-4.15,7.871-9.08,15.771-9.75,24.861c-1.18,1.619-3.18,4.219-5.39,2.659c-3.671-1.5-2.971-6.26-3.881-9.45  c2.37-15.14,11.75-27.66,19.9-40.17c7.94-11.14,15.6-22.47,23.37-33.74C255.96,74.89,256.88,73.67,258.26,73.13z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M159.14,159.58c2.69,2.05,6.23,3.23,8.15,6.12c1.26,4.159,0.08,8.75-2.15,12.37  c-2.16,3.66-3.24,7.84-5.49,11.459c-2.09,3.58-3.84,7.341-4.72,11.421c8.24,0.09,16.7-1.29,24.71,1.239  c3.4,0.33,7.08,0.67,8.92,4.051c-1,1.07-2,2.15-2.97,3.25c-5.5-0.6-11.061-1.1-16.58-0.73c-4.36,0.9-8.92-0.029-13.2,1.32  c-3.83,1.23-7.92,1.061-11.76,2.21c-9.97,2.521-19.59,6.19-29.33,9.46c-4.09,1.1-6.9,5.7-11.47,4.79  c-3.59-0.08-5.79-3.261-8.08-5.56c1.22-3.98,5.25-5.471,8.689-7.03c4.62-2.37,9.74-3.479,14.4-5.78c9.29-3.29,19.15-4.6,28.86-6.05  c-0.311-2.21-2.13-4.49-0.94-6.69c1.87-3.41,2.3-7.31,3.4-10.99c2.21-6.799,4.97-13.41,7.02-20.26  C157.07,162.46,158.24,161.07,159.14,159.58z"/>
	
	
	
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M255.59,110.15c4.27-0.3,5.53,4.62,8.06,7.15c2.48,2.47,2.67,6.37,5.37,8.64  c5.04,4.961,9.101,10.94,14.94,15.061c-0.25,1.38-0.51,2.75-0.8,4.12c-8.091-4.28-17.721-7.47-22.66-15.74  C256.2,124.16,252.46,116.88,255.59,110.15z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M440.43,15.51c2.899-4.76,2.7-10.64,5.359-15.5c3.971,3.24,5.29,8.98,4.2,13.83  c-1.2,3.15-1.729,6.65-3.779,9.41c-3.271,4.35-6.601,8.77-10.98,12.09c-3.81,2.84-7,6.48-11.15,8.85  c-8.989,4.83-16.899,11.41-26.119,15.84c-7.07,3.7-13.73,8.43-21.49,10.62c-2.38,0.8-4.28,2.56-6.62,3.44  c-6.38,0.82-11.771,4.62-17.311,7.59c0.461,5.59-2.52,10.55-4.18,15.7c-5.359,9.58-9.71,19.7-14.66,29.5  c-3.06,5.53-5.529,11.55-10.08,16.08c2.73,0.89,5.44,2.03,8.381,1.75c2.34,2.069,2.52,6.45-1.19,6.92  c-5.88-0.8-11.88-0.43-17.67,0.851c-3.021,0.76-5.79,2.319-8.87,2.84c-8.14,1.26-15.25,5.68-22.42,9.41  c-2.91,1.52-6.28,0.799-9.41,0.709c-2.109-1.35-3.29-3.649-4.649-5.66c3.17-1.459,6.26-3.079,9.319-4.739  c7.141-2.851,14.44-5.24,21.61-7.979c0.27-8.711,0.64-17.57,3.37-25.931c1.439-5.601,3.3-11.15,6.439-16.04  c1.59,0.11,3.19,0.14,4.76,0.49c0.891,1.3,1.45,2.78,2.04,4.24c-1.109,1.41-2.609,2.56-3.3,4.25  c-3.689,9.97-6.24,20.331-7.899,30.831c4.27-0.82,8.569-1.521,12.8-2.57c-0.73-3.54-1.46-7.6,0.62-10.85  c3.149-5.11,6.72-9.971,9.479-15.33c2.65-5.25,6.181-10.03,8.57-15.42c2.33-5.1,5.75-9.71,7.32-15.14  c-7.23,1.74-13.65,5.75-20.82,7.66c-9.57,4.37-21.34,6.8-31.149,1.93c-3.091-1.4-4.94-4.26-5.931-7.38  c3.78-2.01,7.86-0.09,11.72,0.46c16.471-1.22,32.16-6.85,47.73-11.98c14.21-5.69,28.66-11.04,41.95-18.73  C401.57,49.53,416.4,40.62,429.4,29.38C433.9,25.49,437.39,20.58,440.43,15.51z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M244.64,142.24c3.59-0.311,5.76,2.99,7.4,5.68c1.64,2.46,2.06,5.4,2.779,8.21  c-4.68,7.03-7.069,15.28-11.29,22.58c4.221,0.05,8.61-0.33,12.65,1.21c3.13,1.109,6.31,2.061,9.53,2.87  c-0.021,1.67-0.16,3.34-0.36,5c-7.12-2.61-14.87-2.83-22.359-2.36c-12.04,2.211-24.101,4.291-36.08,6.83  c-3.73,0.54-7.71,2.221-11.33,0.27c-3.29-1.069-4.29-4.76-4.261-7.859c3.261-0.359,6.62,0.301,9.82-0.62  c5.2-1.54,10.62-2.01,15.93-3.1c7.271-0.39,14.46-2.021,21.771-1.729c-0.17-8.351-1.88-16.881,0.439-25.111  C240.65,149.99,242.14,145.84,244.64,142.24z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M308,178.45c3.939,0.13,7.819-0.53,11.649-1.37c0.03,1.46-0.01,2.93-0.09,4.391  c-5.05,1.299-9.22,4.629-14.34,5.689c-5.641,2.029-11.84,3.41-17.62,1.029c-3.5-1.129-8.33-3.479-7.82-7.859  C289.27,180.939,298.51,178.02,308,178.45z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M361.39,102.14c3.71,0.03,6.83,2.71,10.6,2.3c4.98-0.34,10.37,1.11,15.03-1.14  c1.14,0.58,2.29,1.17,3.44,1.78c-0.051,1.32-0.141,2.65-0.261,3.97c-3.31,1.17-6.58,2.97-10.199,2.7  c-5.45-0.47-11.271-0.7-16.04-3.69C361.93,106.79,361.56,104.32,361.39,102.14z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M352.22,124.35c3.319-0.16,6.68-0.31,9.92,0.57c7.88,0.73,15.83,0.17,23.74,0.551  c0.6,1.399,1.25,2.779,1.84,4.189c-5.891,3.029-12.51,3-18.95,3.15c-0.74,1.51-1.49,3.049-2.74,4.209  c-4.05,4.25-7.47,9.15-9.41,14.73c7.17-0.26,14.16-2.67,21.381-2.189c2.39,0.039,4.76-0.34,7.149-0.461  c0.83,1.41,1.521,2.891,1.55,4.561c-6.06,2.21-12.43,3.38-18.479,5.609c-5.11,1.23-10.33,3.121-15.65,2.211  c-4.63-2.67-8.16-7.141-8.85-12.541c1.569-7.09,6.26-12.83,9.859-18.969C352.85,128.16,352.39,126.279,352.22,124.35z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M361.93,175.54c10.05-0.05,20.05-1.96,30.109-1.24c3.421,0.261,6.801-0.38,10.181-0.771  c-0.36,2.07-0.771,4.141-1.061,6.23c-3.06-0.01-6.13-0.1-9.17,0.26c-4.729,0.711-9.479-0.879-14.189,0.121  c-7.471,0.369-14.94,0.85-22.391,1.51c-3.409,0.699-6.79,1.6-10.29,1.81c-3.63,0.24-6.84,2.06-10.069,3.54  c-3.13-1.62-4.53-4.721-4.86-8.1c2.84-2.28,6.37-1.121,9.65-1.131C347.11,176.221,354.56,176.26,361.93,175.54z"/>
	
	
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M334.1,210c0,2.2-0.8,4.1-2.3,5.6c-1.6,1.5-3.4,2.6-5.4,3.3c-0.2,0.1-0.4,0.2-0.5,0.2
		c-0.2,0-0.2-0.1-0.2-0.4c0-0.3,0.2-0.5,0.6-0.6c1.5-0.5,2.8-1.3,3.9-2.5c1.1-1.1,1.7-2.5,1.9-4.2c-0.7,0.5-1.4,0.8-2.2,0.8
		c-0.8,0-1.5-0.3-2-0.9c-0.5-0.6-0.7-1.4-0.5-2.2c0.1-0.9,0.5-1.6,1.3-2.2c0.7-0.6,1.6-0.9,2.5-0.9c0.9,0,1.7,0.4,2.2,1.2
		C333.8,207.9,334.1,208.9,334.1,210z"/>
	<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M344.1,240c0.7,0.1,1.2,0.2,1.5,0.2c2.3,0,4.5-1.3,6.7-4c1.2-1.5,3.3-5.2,6.4-11.1c0.1-0.3,0.3-0.4,0.6-0.4
		c0.5-0.1,0.8,0.1,0.8,0.6c0,0.1-0.1,0.4-0.4,1c-0.3,0.5-0.5,1.1-0.7,1.6c-0.2,0.5-0.6,1.3-1.1,2.3c-0.5,1-0.9,1.8-1.3,2.5
		c-0.4,0.6-0.8,1.4-1.4,2.3c-0.6,0.9-1.1,1.6-1.7,2.1l-1.8,1.9c-1,1-2.1,1.6-3.4,2c-2.1,0.7-4.1,0.7-6.1,0.2
		c-1.3,0.6-2.5,0.8-3.5,0.8c-4,0-6.5-1.6-7.3-4.8c-0.2-0.7-0.3-1.6-0.3-2.7c0-1,0.4-2.1,1.1-3c0.7-1,1.5-1.5,2.3-1.5
		c2.9-5.5,5.4-10.5,7.4-14.9c2.3-4.8,4.9-7.2,7.9-7.2c0.8,0,1.6,0.2,2.3,0.6c0.8,0.4,1,0.8,0.9,1.2c-0.2,0.5-0.6,0.5-1.2,0.3
		c-0.6-0.3-1.2-0.4-1.6-0.4s-0.8,0.1-1.2,0.3c-1.9,0.9-2.9,2.9-2.9,5.9c0,1.6,0.2,2.9,0.7,3.9c0.5,1,1,2.1,1.5,3.3
		c1.3,2.9,2,5.4,2,7.2c0,1.9-0.6,3.7-1.8,5.5C347.1,237.4,345.7,238.8,344.1,240z M334.8,237.1c0,0.3,0,0.7,0.1,1.1
		c0.5,1.5,1.5,2.3,3.1,2.3c0.7,0,1.2-0.1,1.7-0.3c-2.1-1.3-3.2-3.4-3.4-6.4C335.3,234.8,334.8,235.9,334.8,237.1z M341.2,239.4
		c2.5-1.9,3.7-5,3.7-9.4c0-1.8-0.2-4.2-0.6-7.2c-0.4-3.1-0.6-5.1-0.6-6.2c0-1.1,0-1.8,0.1-2.2c-4.3,8.6-7,13.9-8,15.7
		c1.2,0,1.8,0.8,1.8,2.5C337.6,236,338.8,238.2,341.2,239.4z"/>
	<g>
		<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M194.5,285.1c-3.9,3.1-8.2,4.7-13,4.7c-5.4,0-8.7-1.5-10-4.5c-0.3-0.7-0.4-1.5-0.4-2.5
			c0-0.9,0.5-2,1.4-3.1c1.5-1.7,3.6-2.6,6.3-2.6c1.8,0,3.6,0.3,5.4,1c1.8,0.7,5.1,2.2,9.7,4.7c2.1-2,4.2-4.7,6.3-8.1
			c2.1-3.4,3.9-6.6,5.4-9.7c1.5-3.1,3.4-6.5,5.6-10.2c2.2-3.7,4.4-6.8,6.6-9.2c-4.7-2.8-9.7-4.2-15-4.2c-2.2,0-4.4,0.2-6.7,0.7
			c-6.5,1.4-11.5,4.2-14.8,8.5c-2.1,2.6-3.1,5.1-3.1,7.4c0,3.2,1.5,5.3,4.6,6.2c1.1,0.3,2,0.4,2.8,0.4c0.8,0,1.7-0.1,2.7-0.4
			c1-0.3,2-0.8,2.9-1.8c1.8-1.8,2.8-3.6,3-5.2c0-0.4,0.3-0.5,0.7-0.4c0.4,0.1,0.6,0.4,0.5,1c-0.4,3.1-2,5.4-4.8,7
			c-1.7,0.9-3.4,1.4-5.2,1.4l-3.3-0.6c-3.2-1.1-5.3-3.1-6.3-6.1c-0.4-1.1-0.6-2.3-0.6-3.4c0-2.3,0.9-4.6,2.6-6.9
			c3.7-4.9,10.2-8.1,19.6-9.5c1.8-0.3,3.7-0.4,5.5-0.4c5.8,0,11.4,1.4,16.7,4.2c1.6-1.9,3.1-3.3,4.5-4.3c1.4-1,2.5-1.5,3.3-1.5
			c0.5,0,0.7,0.1,0.8,0.3c0.1,0.2,0.1,0.3,0,0.4c-0.1,0.1-0.2,0.2-0.4,0.2c-0.7,0-1.6,0.8-2.8,2.3c-1.1,1.5-2.1,2.9-2.8,4.2
			c4.5,3,7.9,6.8,10.3,11.5c1.9,3.7,2.8,7.8,2.8,12.2c0,5.5-1.3,9.8-3.9,13c-2.1,2.6-4.7,4.5-7.8,5.6c-3.6,1.3-7.3,2-10.8,2
			C205.8,289.5,199.6,288,194.5,285.1z M192.4,284.1c-4.9-2.3-8-3.8-9.3-4.2c-1.3-0.5-2.6-0.7-3.8-0.7c-1.2,0-2.2,0.5-3,1.4
			c-0.7,0.9-1.1,1.8-1.1,2.5s0.2,1.4,0.5,2.1c0.9,1.8,2.7,2.7,5.4,2.7C185.2,287.9,188.9,286.6,192.4,284.1z M196,283.9
			c4.2,2.5,9.2,3.8,14.9,3.8c6.6,0,11.9-1.9,15.9-5.7c3.1-3.1,4.7-7.3,4.7-12.7c0-3.9-0.8-7.5-2.3-10.9c-1.9-4.3-4.7-7.9-8.4-10.8
			c-1.2,1.9-3.6,5.7-7,11.4c-3.5,5.7-6.4,10.4-8.8,13.9c-2.4,3.6-4.3,6.1-5.7,7.6C198.1,282.1,196.9,283.2,196,283.9z"/>
		<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M248.9,283.7c-1.1,2.1-1.8,3.7-2,4.7c-0.2,1-0.3,1.9-0.3,2.5c0,0.6,0.2,1,0.7,1c0.6,0,1.4-0.6,2.3-1.7
			c1.4-1.7,2.7-3.9,4-6.6c0.1-0.3,0.3-0.5,0.4-0.5c0.3-0.1,0.4,0,0.4,0.3c0,0.2,0,0.4-0.1,0.6c-3.1,6.2-5.6,9.3-7.7,9.3
			c-1,0-1.7-0.5-2.3-1.4c-0.3-0.5-0.4-1.2-0.4-2c0-0.8,0.2-1.8,0.5-3c-2.7,4.3-4.9,6.4-6.9,6.4c-0.5,0-1-0.2-1.4-0.5
			c-1-0.7-1.5-1.9-1.5-3.6c0-3.3,1.4-6.6,4.2-9.9c1.6-1.9,3.5-3.1,5.9-3.6c0.6-0.2,1.2-0.3,1.8-0.3c1.5,0,2.8,0.5,3.9,1.6
			c0.3,0.4,0.4,0.7,0.3,1c-0.1,0.3-0.4,0.5-0.8,0.4c-0.4-1.2-1.2-1.8-2.4-1.8c-1.4,0-3.2,1.1-5.3,3.4c-1.2,1.3-2.3,2.9-3.3,4.7
			c-1.3,2.2-1.9,3.9-1.9,5.2c0,1.3,0.4,1.9,1.2,1.9c2,0,4.6-3.1,7.8-9.2c0.6-1.2,1.2-2.1,1.6-2.5c0.4-0.4,1-0.7,1.6-0.7
			c0.1,0,0.5,0.1,1,0.1c0.5,0.1,1,0.1,1.2,0.1C250.9,280.3,250,281.6,248.9,283.7z"/>
		<path class="letter-path" stroke-alignment="outer" fill="none" class="text-path" d="M245,315.9c-2,0-3.5-0.4-4.6-1.3c-1.1-0.8-1.6-1.8-1.6-3c0-1.2,0.3-2.5,1-4c1.2-2.3,3.3-4.2,6.4-5.6
			c2.3-1.1,5.3-2.1,9.1-3c3.8-0.9,6.2-1.5,7.3-1.9c1.6-2.8,3.6-7.9,5.8-15.2c-2.6,4.6-4.8,7.8-6.6,9.7c-1.8,1.9-3.5,2.8-5.3,2.8
			c-2.4,0-3.9-1-4.3-3c-0.2-0.3-0.2-0.8-0.1-1.4c0.1-0.6,0.1-1.1,0.2-1.4c0-0.3,0.2-0.7,0.4-1.3c0.3-0.6,0.5-1,0.5-1.3
			c0.5-1,0.9-1.8,1.3-2.4c-0.7,0-0.9-0.4-0.6-1.1l1.2-2.4c1.5-2.9,2.8-5.4,3.8-7.4c0.5-0.9,1.3-1.4,2.6-1.4h4.1
			c-0.1,0.1-0.3,0.3-0.7,0.5c-0.8,0.5-1.4,1.2-1.8,1.9c-1.6,2.8-3.7,6.8-6.1,12c-1,2.1-1.5,3.7-1.5,4.7c0,1,0.2,1.7,0.5,2.1
			c0.3,0.4,0.8,0.6,1.4,0.6c0.9,0,2.1-0.9,3.6-2.7c3.2-3.7,6.7-9.6,10.6-17.7c0.5-0.9,1.4-1.4,2.6-1.4h3.7c-1.2,0.8-2.1,1.8-2.8,3.1
			c-0.7,1.2-1.4,2.9-2.2,5c-0.8,2.1-1.8,4.9-3,8.5c-1.2,3.5-2.1,6.2-2.7,7.9c4.2-1.3,7.5-3.5,9.7-6.7c1-1.4,2.4-3.9,4.3-7.4
			c0.3-0.6,0.6-0.9,0.8-0.7c0.2,0.1,0.4,0.3,0.4,0.5c0,0.2-0.4,1.1-1.1,2.6c-0.7,1.5-1.5,2.9-2.3,4.2c-0.8,1.3-1.8,2.6-3,4
			c-1.2,1.4-2.6,2.4-4.1,3.2c-1.5,0.8-3.5,1.6-6,2.5c-3.5,6.3-7,11-10.5,13.9C252.4,314.5,248.8,315.9,245,315.9z M241,309.2
			c-0.5,1-0.7,1.9-0.7,2.7c0,0.8,0.3,1.5,0.9,1.9c0.6,0.4,1.4,0.7,2.4,0.7c2.6,0,5.4-1.3,8.4-4c3-2.7,5.6-5.6,7.9-8.6l1.5-2.5
			c-7.4,1.9-12.1,3.3-14.1,4.2C244.4,304.8,242.3,306.7,241,309.2z"/>
		
		
		
		
	</g>
</g>
	
	
</svg>

            
          
!
            
              html, body {
	height: 100%;
}

body {
	overflow: hidden;
	background: radial-gradient(circle at center, #20438E, #69d2fb);
}

#scene {
	width: 100%;
	height: 100%;
}

            
          
!
            
              function random(min, max) {
    return Math.random() * (max - min) + min;
}

var max = 453.5;

var $hearts = $(".heart-path");

$hearts.each(function(i, v){
	var _ = $(this);
	var x = random(0, max);
	var y = random(max, max + 10);

	TweenMax.set(_.find("use"), { scale: random(1, 4), fill: "white" });

	TweenMax.fromTo(_, random(5, 8), { 
		attr: { x: x, y: y },
		opacity: 1,
	}, {
		attr: { x: x + (random(-20, 20)), y: random(10, max/2)},
		repeat: -1,
		opacity: 0,
		delay: i * .3,
		ease: Back.easeOut
	});
	
});

var pathTime = 1;
var perc = .2;

var tl = new TimelineMax({
	repeat: -1,
	repeatDelay: 5
});

tl.set(".letter-path", { stroke: "rgba(255, 255, 255, .8)", strokeWidth: "1", transformOrigin: "50% 50%"})
	.staggerFromTo(".letter-path", pathTime, { drawSVG: "0"}, {drawSVG: "100%", ease: Back.easeIn }, pathTime * perc, "stag")
	.staggerFromTo(".letter-path", pathTime, {fill: "transparent", scale: 2 }, {fill: "white", scale: 1 }, pathTime * perc, "stag+=" + pathTime * .9);
            
          
!
999px
Loading ..................

Console