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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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="header">
  <h1 class="title">Codevember <span class="number"> #24 </span></h1>
  <h2 class="type">Heart</h2>
  <div class="social">
    <a href="https://www.linkedin.com/in/rominamartinliberon/" class="social"><img src="http://www.freepngimg.com/thumb/linkedin/3-2-linkedin-download-png-thumb.png" alt="linkedin"></img></a>
		<a href="https://rominamartin.github.io/" class="social"><img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github"></img></a>
		<a href="https://twitter.com/rominamartinlib" class="social"><img src="https://i.imgsafe.org/43/431dd07874.png" alt="twitter"></img></a>
  </div>
</div>

<canvas id="screen"></canvas>

<div class="content">
	<svg x="0px" y="0px" width="45%" viewBox="0 0 318.842 566">
		<g id="container">
			<g id="globes">
					<rect x="134.822" y="254.615" transform="matrix(1 0.0032 -0.0032 1 1.1695 -0.4337)" fill="#75463A" width="1.826" height="219.31"/>
				
					<rect x="164.183" y="124.847" transform="matrix(0.9982 0.0594 -0.0594 0.9982 18.1389 -9.2731)" fill="#75463A" width="1.825" height="351.43"/>
				
					<rect x="206.445" y="265.155" transform="matrix(0.9771 0.213 -0.213 0.9771 84.1098 -35.6118)" fill="#75463A" width="1.825" height="214.92"/>
				
					<rect x="-14.492" y="363.793" transform="matrix(0.0599 0.9982 -0.9982 0.0599 456.7584 244.4413)" fill="#75463A" width="226.202" height="1.826"/>
				<g class="single_globe">
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#AB294D" d="M175.492,148.415c-26.797,0-68.662-50.252-68.662-91.052
						c0-19.155,16.42-34.331,35.575-34.331s33.087,18.657,33.087,26.37c0-7.712,13.932-26.37,33.087-26.37
						c19.156,0,35.575,15.175,35.575,34.331C244.154,98.162,205.44,148.415,175.492,148.415z"/>
					<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" fill="#D9224E" d="M172.236,136.367
						c-21.174,0-54.252-39.706-54.252-71.942c0-15.135,12.974-27.125,28.108-27.125c15.136,0,26.144,14.742,26.144,20.835
						c0-6.094,11.007-20.835,26.143-20.835s28.108,11.99,28.108,27.125C226.487,96.661,195.898,136.367,172.236,136.367z"/>
					
						<ellipse transform="matrix(0.9628 0.2704 -0.2704 0.9628 20.2981 -35.3909)" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="138.604" cy="55.978" rx="7.548" ry="10.639"/>
					<ellipse fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="133.126" cy="80.062" rx="5.599" ry="6.771"/>
				</g>
				<g class="single_globe">
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#AB294D" d="M96.43,253.569c-20.824,7.401-67.239-20.088-78.509-51.795
						c-5.291-14.886,3.277-31.215,18.164-36.506s30.866,5.36,32.997,11.354c-2.131-5.994,3.543-24.341,18.43-29.632
						c14.886-5.291,31.838,1.967,37.129,16.854C135.909,195.551,119.704,245.297,96.43,253.569z"/>
					<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" fill="#D9224E" d="M90.571,245.106
						c-16.454,5.848-53.128-15.872-62.032-40.924c-4.181-11.762,2.59-24.664,14.353-28.844c11.762-4.181,24.389,4.235,26.071,8.971
						c-1.683-4.736,2.8-19.232,14.563-23.413c11.762-4.181,25.156,1.554,29.336,13.316C121.766,199.264,108.961,238.57,90.571,245.106z
						"/>
					
						<ellipse transform="matrix(0.9977 -0.0677 0.0677 0.9977 -12.8954 3.2991)" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="42.231" cy="191.922" rx="6.225" ry="8.775"/>
					
						<ellipse transform="matrix(0.9423 -0.3349 0.3349 0.9423 -68.4691 27.1939)" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="44.625" cy="212.151" rx="4.618" ry="5.585"/>
				</g>
				<g class="single_globe">
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#AB294D" d="M229.604,274.377c-22.078-1.015-54.667-44.003-53.122-77.617
						c0.726-15.782,14.828-27.663,30.61-26.938s26.554,16.625,26.262,22.979c0.292-6.354,12.477-21.198,28.259-20.473
						s28.735,13.85,28.009,29.632C288.077,235.575,254.278,275.512,229.604,274.377z"/>
					<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" fill="#D9224E" d="M227.377,264.328
						c-17.443-0.802-43.193-34.768-41.973-61.328c0.573-12.47,11.716-21.857,24.187-21.284c12.47,0.573,20.98,13.136,20.75,18.156
						c0.23-5.021,9.857-16.749,22.328-16.176c12.47,0.573,22.704,10.943,22.131,23.413
						C273.579,233.669,246.873,265.224,227.377,264.328z"/>
					
						<ellipse transform="matrix(0.9493 0.3143 -0.3143 0.9493 72.1303 -53.7365)" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="202.713" cy="196.823" rx="6.225" ry="8.775"/>
					
						<ellipse transform="matrix(0.9989 0.0459 -0.0459 0.9989 10.1426 -8.8268)" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="197.287" cy="216.457" rx="4.617" ry="5.585"/>
				</g>
				<g class="single_globe">
					<path fill-rule="evenodd" clip-rule="evenodd" fill="#AB294D" d="M136.741,269.297c-21.938-2.675-51.195-47.998-47.122-81.4
						c1.913-15.682,16.871-26.467,32.554-24.554c15.683,1.913,25.225,18.578,24.455,24.893c0.77-6.314,14.038-20.198,29.722-18.285
						c15.682,1.913,27.609,15.976,25.696,31.658C197.973,235.012,161.26,272.288,136.741,269.297z"/>
					<path opacity="0.7" fill-rule="evenodd" clip-rule="evenodd" fill="#D9224E" d="M135.278,259.109
						c-17.334-2.114-40.451-37.924-37.232-64.316c1.512-12.391,13.33-20.912,25.721-19.401c12.392,1.511,19.932,14.679,19.323,19.668
						c0.608-4.989,11.093-15.959,23.483-14.448c12.392,1.511,21.815,12.623,20.305,25.014
						C183.659,232.019,154.651,261.472,135.278,259.109z"/>
					
						<ellipse transform="matrix(0.9229 0.3849 -0.3849 0.9229 82.031 -29.928)" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="115.771" cy="189.937" rx="6.225" ry="8.776"/>
					
						<ellipse transform="matrix(0.9926 0.1211 -0.1211 0.9926 26.1197 -11.6449)" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="108.881" cy="209.107" rx="4.617" ry="5.585"/>
				</g>
			</g>
			<g>
				<path fill="#75463A" d="M64.172,383.055c0,0-9.122,23.851-4.266,28.898s27.992,13.332,27.992,13.332l6.216-10.597
					c0,0-24.093-6.509-25.563-9.236S67.777,381.155,64.172,383.055z"/>
				<path class="boy_arm" fill="#75463A" d="M120.617,413.622l23.596,30.617l-3.581,4.05l-23.984-25.325
					C116.647,422.964,117.492,409.567,120.617,413.622z"/>
				<path fill="#8D5F55" d="M83.07,455.154l-0.744,2.47c0,0,8.321,4.38,18.971,6.087c10.649,1.706,23.98,0.459,29.29-2.163
					l-1.487-3.912L83.07,455.154z"/>
				<path fill="#75463A" d="M101.776,403.547c-5.294,5.396-25.593,35.609-18.706,51.607c1.01,2.347,44.016,13.594,46.029,2.481
					c-2.023-11.127-11.375-39.63-10.979-49.827C118.617,395.009,107.07,398.151,101.776,403.547z"/>
				<g>
					<path fill="#F2BA9D" d="M155.124,383.447c0,0,15.992,11,15.193-10.921C169.52,350.605,153.942,371.265,155.124,383.447z"/>
					<path fill="#F2BA9D" d="M59.919,370.681c-0.716,26.88,28.581,37.068,55.188,37.777c26.605,0.708,44.156-17.769,44.872-44.649
						c0.716-26.88-20.271-49.245-46.878-49.954C86.494,313.146,60.636,343.801,59.919,370.681z"/>
					<path fill="#FBCEB0" d="M63.798,369.528c-0.631,23.688,22.255,31.075,43.449,31.64s35.648-14.232,36.279-37.921
						s-16.039-43.349-37.232-43.914C85.1,318.769,64.43,345.84,63.798,369.528z"/>
					<g>
						
							<ellipse transform="matrix(-0.9973 -0.0733 0.0733 -0.9973 227.6818 756.3545)" fill="#6E5142" cx="127.724" cy="373.998" rx="2.491" ry="4.081"/>
						
							<ellipse transform="matrix(-0.9877 -0.1562 0.1562 -0.9877 197.7726 761.9955)" fill="#FFFFFF" cx="128.82" cy="373.229" rx="0.963" ry="1.4"/>
					</g>
					<g>
						
							<ellipse transform="matrix(-0.9973 -0.0733 0.0733 -0.9973 139.2652 741.2083)" fill="#6E5142" cx="83.238" cy="368.048" rx="2.491" ry="4.081"/>
						
							<ellipse transform="matrix(-0.9877 -0.1562 0.1562 -0.9877 110.2443 743.2227)" fill="#FFFFFF" cx="84.333" cy="367.278" rx="0.963" ry="1.4"/>
					</g>
					
						<ellipse transform="matrix(0.9884 0.1519 -0.1519 0.9884 59.6417 -16.0506)" opacity="0.3" fill="#D9224E" cx="134.867" cy="382.31" rx="11.443" ry="3.814"/>
					
						<ellipse transform="matrix(0.9884 0.1519 -0.1519 0.9884 57.3672 -6.447)" opacity="0.3" fill="#D9224E" cx="70.875" cy="372.209" rx="11.442" ry="3.814"/>
					<path fill="#FFFFFF" d="M101.875,392.915c-5.659,1.056-9.763-3.773-9.813-3.833c-0.343-0.412-0.286-1.023,0.126-1.365
						c0.41-0.342,1.021-0.287,1.364,0.124l0,0c0.201,0.241,5.01,5.84,11.09,1.855c0.447-0.295,1.049-0.168,1.343,0.279
						c0.293,0.447,0.168,1.048-0.279,1.342C104.374,392.19,103.089,392.688,101.875,392.915z"/>
					<g>
						<path fill="#403634" d="M64.422,333.664c-2.486-1.132-4.444-3.354-5.115-6.22c-1.068-4.563,1.494-9.124,5.805-10.665
							c-0.005-0.021-0.013-0.041-0.019-0.062c-1.148-4.907,1.898-9.816,6.805-10.965c1.273-0.298,2.546-0.309,3.755-0.082
							c0.989-2.863,3.372-5.174,6.539-5.916c2.522-0.59,5.041-0.067,7.054,1.243c0.752-3.292,3.299-6.04,6.809-6.862
							c3.787-0.887,7.568,0.732,9.628,3.771c1.133-2.483,3.354-4.438,6.217-5.108c3.059-0.716,6.118,0.199,8.268,2.178
							c0.84-0.532,1.775-0.943,2.799-1.182c4.906-1.149,9.815,1.897,10.965,6.804c0,0,0,0.001,0,0.001
							c1.194-2.233,3.3-3.965,5.959-4.587c4.907-1.149,9.816,1.897,10.965,6.804c4.907-1.149,9.816,1.897,10.966,6.804
							c0.227,0.971,0.284,1.94,0.201,2.882c0.301-0.104,0.608-0.195,0.926-0.27c4.906-1.149,9.815,1.897,10.965,6.804
							c0.767,3.275-0.343,6.545-2.619,8.703c2.742,1.042,4.934,3.383,5.652,6.454c0.775,3.313-0.365,6.621-2.695,8.778
							c1.795,10.751-2.893,25.046-4.753,29.548c1.517-11.156-10.355-13.712-10.457-7.404c-0.169,10.492-10.577,10.932-10.577,10.932
							c3.898-5.823-0.462-14.265-4.362-19.867c-0.383,0.146-0.773,0.277-1.184,0.373c-4.818,1.128-9.631-1.794-10.891-6.547
							c-0.839,0.53-1.772,0.939-2.793,1.179c-3.772,0.884-7.54-0.719-9.604-3.734c-0.506,0.222-1.036,0.407-1.593,0.537
							c-4.086,0.957-8.165-1.001-10.082-4.515c-1.241,1.678-3.058,2.943-5.248,3.457c-3.911,0.915-7.816-0.839-9.825-4.071
							c-1.22,2.089-3.254,3.695-5.794,4.29c-3.165,0.741-6.325-0.271-8.482-2.395c-1.205,2.179-3.282,3.863-5.897,4.476
							c-4.906,1.149-9.815-1.897-10.965-6.804C60.968,339.122,62.103,335.821,64.422,333.664z"/>
						<path opacity="0.3" fill="#574E4D" d="M68.397,326.285c-0.995-4.251,1.644-8.504,5.895-9.5c0.665-0.156,1.329-0.212,1.982-0.198
							c0.085-3.512,2.513-6.663,6.093-7.501c2.702-0.632,5.401,0.207,7.269,1.992c-0.012-0.045-0.028-0.087-0.038-0.132
							c-0.996-4.251,1.644-8.504,5.895-9.499c3.175-0.744,6.351,0.542,8.17,3.012c0.93-2.303,2.923-4.136,5.525-4.745
							c2.512-0.588,5.019,0.1,6.859,1.632c0.445-0.197,0.912-0.36,1.403-0.475c4.066-0.952,8.126,1.425,9.344,5.353
							c2.623-0.317,5.163,0.705,6.844,2.591c0.742-2.703,2.902-4.926,5.824-5.61c4.251-0.996,8.504,1.644,9.499,5.895
							c0.329,1.404,0.254,2.805-0.137,4.091c0.922,0.979,1.61,2.202,1.938,3.605c4.252-0.995,8.504,1.644,9.5,5.895
							c0.332,1.418,0.252,2.834-0.15,4.132c3.373,0.229,6.348,2.621,7.159,6.085c0.979,4.183-1.564,8.36-5.696,9.441
							c0.369,0.646,0.655,1.354,0.834,2.115c0.995,4.251-1.644,8.504-5.895,9.5c-4.043,0.946-8.082-1.398-9.324-5.287
							c-0.439,0.193-0.899,0.354-1.384,0.467c-3.987,0.934-7.978-1.331-9.277-5.125c-0.06,0.016-0.116,0.037-0.177,0.051
							c-2.438,0.571-4.875-0.058-6.699-1.498c-1.042,1.152-2.43,2.013-4.056,2.394c-3.46,0.811-6.92-0.788-8.626-3.702
							c-0.406,0.172-0.829,0.319-1.274,0.423c-3.033,0.711-6.061-0.436-7.911-2.691c-0.894,0.718-1.951,1.26-3.142,1.538
							c-3.279,0.768-6.553-0.632-8.338-3.261c-0.905,0.742-1.983,1.301-3.2,1.585c-2.716,0.637-5.429-0.216-7.296-2.02
							c-0.873,2.445-2.925,4.413-5.641,5.049c-4.251,0.996-8.504-1.644-9.499-5.895c-0.432-1.841-0.179-3.681,0.589-5.258
							C69.872,329.663,68.828,328.126,68.397,326.285z"/>
					</g>
				</g>
				<path opacity="0.5" fill="#8D5F55" d="M98.955,411.494c0,0-13.08,27.682-10.674,42.283c0,0,22.096,8.145,33.135,2.446
					l-6.039-42.282C115.377,413.941,103.779,413.158,98.955,411.494z"/>
				<path fill="#8D5F55" d="M102.755,414.954c0,0-8.571,37.567-3.871,45.235c0,0,2.396-39.504,6.232-44.431L102.755,414.954z"/>
				<path fill="#75463A" d="M106.192,451.314c1.422,0.206,15.709-1.499,15.709-1.499l1.177,3.469l-16.389,1.068L106.192,451.314z"/>
				<path fill="#75463A" d="M83.433,444.239c1.027,0.296,11.466,5.452,11.466,5.452l-0.797,2.647l-10.383-3.126L83.433,444.239z"/>
				<path fill="#4F271F" d="M115.978,406.373c-2.288-0.29-23.998-2.935-23.998-2.935s-5.343,13.506-2.097,14.821
					s29.938-2.327,29.938-2.327l1.574-4.949C121.395,410.983,118.266,406.662,115.978,406.373z"/>
				<path class="boy_arm" fill="#F2BA9D" d="M140.632,448.289c0,0,6.716,3.239,8.152,0.949c1.437-2.289-5.24-5.867-5.24-5.867
					L140.632,448.289z"/>
			</g>
			<g>
				<path fill="#75463A" d="M248.926,434.81c3.381-4.176,2.911-10.206-0.942-13.827c0.001-0.002,0.002-0.005,0.003-0.007
					c-5.813-14.343,15.717-39.322,3.186-52.751c-0.004-0.004-0.007-0.009-0.01-0.013c-19.04-15.212-11.936-32.727-42.206-30.288
					c-8.531,3.112-6.01,11.435-4.947,16.836c2.039,10.362,0.5,23.879-4.517,30.296c0,0-10.313,21.013-9.27,25.222
					c0.001,0.002,0.002,0.004,0.004,0.006c-0.411,0.307-0.794,0.662-1.131,1.078c-2.186,2.699-1.769,6.659,0.931,8.845
					c0.978,0.792,2.121,1.237,3.285,1.361c-0.775,2.76,0.098,5.84,2.467,7.758c1.765,1.428,3.985,1.909,6.053,1.513
					c0.313,1.664,1.192,3.229,2.611,4.378c2.441,1.977,5.755,2.138,8.327,0.669c-0.208,2.369,0.728,4.797,2.716,6.406
					c2.828,2.29,6.829,2.146,9.489-0.154c0.503,0.762,1.128,1.462,1.876,2.067c3.923,3.176,9.677,2.57,12.852-1.353
					c1.041-1.286,1.668-2.769,1.913-4.292C244.371,438.393,247.052,437.125,248.926,434.81z"/>
				<path id="girl_arm" fill="#F2BA9D" d="M176.66,423.491c0,0-25.015,21.526-27.876,23.529s-0.424,4.077,7.701,1.269
					c7.813-2.7,21.796-16.076,21.796-16.076L176.66,423.491z"/>
				<path fill="#B12541" d="M200.012,426.081c0.122,2.751-2.271,15.577,2.332,26.154c4.578,10.519,9.156,15.467,9.156,15.467
					s-31.637,19.682-49.563-1.691c0,0,6.271-17.098,10.785-30.672c0.99-2.977-0.873-5.572,0.205-8.02
					c2.234-5.074,8.734-7.502,10.139-7.868C189.211,417.849,199.578,416.333,200.012,426.081z"/>
				<path opacity="0.7" fill="#D9224E" d="M196.859,434.217c-1.118,2.033-2.337,12.498,7.392,32.722
					c-13.353,9.03-31.1,5.881-38.656-3.13c0,0,5.287-14.417,9.094-25.862c0.417-1.255,3.291,0.738,3.116-0.381s-3.681-6.487-3.62-7.613
					c0.327-6.096,5.668-6.415,6.795-6.896c4.97-2.115,16.086-1.431,16.629-0.143C198.2,424.318,197.985,432.17,196.859,434.217z"/>
				<g>
					<path fill="#B12541" d="M197.309,413.927c-2.288-0.29-23.998-2.935-23.998-2.935s-5.343,13.506-2.097,14.821
						s29.938-2.327,29.938-2.327l1.574-4.949C202.726,418.537,199.597,414.216,197.309,413.927z"/>
					<path fill="#F2BA9D" d="M221.444,406.493c0,0,1.551,21.322,14.909,7.225C248.08,401.342,231.007,393.455,221.444,406.493z"/>
					<path fill="#F2BA9D" d="M146.112,381.142c-3.688,23.521,20.878,35.802,44.16,39.452s40.795-10.577,44.483-34.099
						s-12.196-45.55-35.478-49.2C175.996,333.645,149.8,357.619,146.112,381.142z"/>
					<path fill="#FBCEB0" d="M149.649,380.57c-3.25,20.729,16.005,29.82,34.552,32.728c18.546,2.908,32.922-8.439,36.172-29.169
						c3.251-20.729-9.149-39.89-27.696-42.798C174.131,338.423,152.899,359.842,149.649,380.57z"/>
					
						<ellipse transform="matrix(0.9607 0.2777 -0.2777 0.9607 118.8621 -42.2968)" opacity="0.3" fill="#D9224E" cx="208.755" cy="398.479" rx="10.132" ry="3.377"/>
					
						<ellipse transform="matrix(0.9607 0.2777 -0.2777 0.9607 112.509 -28.2097)" opacity="0.3" fill="#D9224E" cx="155.835" cy="383.055" rx="9.094" ry="3.031"/>
					<path fill="#FFFFFF" d="M180.427,405.439c1.091-0.062,2.274-0.352,3.541-0.966c0.427-0.207,0.605-0.721,0.398-1.146
						c-0.207-0.427-0.721-0.604-1.146-0.399c-5.797,2.811-9.378-2.656-9.527-2.89c-0.256-0.399-0.785-0.516-1.185-0.263
						c-0.399,0.254-0.519,0.782-0.266,1.182C172.279,401.016,175.335,405.726,180.427,405.439z"/>
					<path fill="#6E5142" d="M193.31,389.813c0,0,4.479-8.063,10.477-1.278c0,0,1.449-1.296,1.371-0.625
						c-0.078,0.67-1.008,2.693-1.357,2.897C203.45,391.011,198.454,385.649,193.31,389.813z"/>
					<path fill="#6E5142" d="M166.425,381.9c0,0,1.051-8.722-7.366-6.841c0,0-0.394-1.809-0.708-1.247
						c-0.314,0.561-0.729,2.641-0.572,2.992C157.935,377.157,164.783,375.814,166.425,381.9z"/>
					<g>
						<path fill="#75463A" d="M243.315,358.158c3.82-21.123-25.961-38.503-52.666-33.893c-21.209,3.661-36.306,18.463-41.237,36.489
							C149.412,360.755,171.254,372.899,243.315,358.158z"/>
						<path fill="#75463A" d="M209.278,362.843c0,0,21.974,32.151,0,46.337c0,0,6.034,7.364,18.183-9.23
							c4.401-0.626,11.257,1.035,11.044,7.475c8.486-1.488,32.347-42.025,0.034-54.169
							C238.539,353.255,210.537,356.894,209.278,362.843z"/>
						<path opacity="0.3" fill="#75463A" d="M235.627,354.493c0.325-0.864,0.313-22.961-22.269-23.72c0,0,7.533,5.503,11.167,11.859
							c0,0-31.281-25.561-65.059,4.726c0,0,44.967-12.031,57.874,0.873c0,0-44.211-5.124-63.946,10.815c0,0,62.431-9.487,69.452-1.707
							c0,0,4.195-6.551-1.792-11.72c0,0,11.198,1.473,14.181,9.821"/>
						<path opacity="0.3" fill="#75463A" d="M228.539,359.047c0,0,22.382,3.098,4.669,31.69
							C233.093,389.788,235.37,374.229,228.539,359.047z"/>
					</g>
				</g>
				<path fill="#F2BA9D" d="M199.235,425.313c0,0,15.83,13.329,24.223,23.345c1.297,1.153,4.282,0.126,4.733,1.4
					c0.295,0.836-3.6,4.9-6.747,3.489c-8.025-3.597-22.582-15.768-24.585-19.33C194.856,430.653,194.707,424.842,199.235,425.313z"/>
			</g>
			<g>
				<path fill="#BC7C73" d="M66.675,479.447c0,0-3.473,49.915,12.888,61.523c15.154,10.753,95.93,18.869,115.963,10.938
					c26.151-10.354,29.229-72.461,29.229-72.461H66.675z"/>
				<path opacity="0.5" fill="#E29E97" d="M72.588,486.518c0,0-2.823,40.584,10.479,50.022c12.321,8.743,77.997,15.341,94.284,8.893
					c21.263-8.418,23.766-58.915,23.766-58.915s-34.093,4.844-66.406,4.844S72.588,486.518,72.588,486.518z"/>
				<path fill="#BC7C73" d="M50.284,450.671c0,0,101.943,27.021,184.445,3.661c0,0,17.01,20.325-3.911,25.44
					c-49.656,12.142-174.526,7.156-184.826-9.068C35.692,454.479,50.284,450.671,50.284,450.671z"/>
				<path opacity="0.5" fill="#E29E97" d="M52.592,455.515c0,0-6.56,9.328-2.263,13.079c4.297,3.752,111.065,27.125,179.934,3.746
					c0,0,10.218-11.033-9.372-8.621C201.301,466.13,93.012,477.029,52.592,455.515z"/>
				<path fill="#BC7C73" d="M187.912,510.554c-2.079,0-4.275-0.064-6.563-0.216c-1.51-0.1-2.652-1.404-2.552-2.914
					c0.1-1.509,1.398-2.667,2.914-2.552c13.219,0.879,23.402-1.395,23.503-1.417c1.471-0.335,2.943,0.588,3.278,2.063
					c0.335,1.475-0.59,2.943-2.064,3.278C206.056,508.882,198.554,510.554,187.912,510.554z"/>
				<path fill="#BC7C73" d="M170.897,525.351c-0.009,0-0.017,0-0.025,0c-0.237-0.003-5.963-0.063-19.651-0.972
					c-1.51-0.1-2.652-1.404-2.552-2.913c0.099-1.51,1.405-2.657,2.914-2.552c13.533,0.896,19.281,0.958,19.339,0.958
					c1.512,0.014,2.728,1.251,2.714,2.764C173.622,524.141,172.398,525.351,170.897,525.351z"/>
				<path fill="#BC7C73" d="M184.491,536.507c-4.114,0-8.764-0.104-13.456-0.416c-1.51-0.1-2.652-1.404-2.552-2.913
					c0.099-1.51,1.408-2.663,2.914-2.552c13.432,0.89,26.915,0.01,27.049,0c1.515-0.11,2.815,1.04,2.916,2.55s-1.041,2.814-2.55,2.915
					C198.439,536.116,192.471,536.507,184.491,536.507z"/>
				<path fill="#BC7C73" d="M88.772,497.389c-5.921,0-13.065-1.146-17.167-2.33c-1.454-0.42-2.292-1.938-1.872-3.392
					c0.42-1.452,1.935-2.291,3.391-1.872c3.478,1.005,11.058,2.319,17.005,2.091c1.487-0.039,2.783,1.121,2.841,2.634
					c0.057,1.511-1.122,2.783-2.634,2.84C89.827,497.379,89.304,497.389,88.772,497.389z"/>
				<path fill="#BC7C73" d="M110.089,509.033c-0.671,0-16.534-0.015-24.015-1.353c-1.489-0.266-2.481-1.688-2.214-3.179
					c0.266-1.489,1.7-2.482,3.177-2.213c7.008,1.252,22.893,1.267,23.052,1.267c1.514,0,2.739,1.226,2.739,2.738
					C112.828,507.808,111.603,509.033,110.089,509.033z"/>
				<path fill="#E29E97" d="M143.052,505.147c-4.115,0-8.765-0.104-13.457-0.415c-1.51-0.1-2.652-1.404-2.552-2.914
					c0.1-1.509,1.395-2.663,2.913-2.552c13.433,0.89,26.917,0.01,27.051,0c1.516-0.109,2.814,1.041,2.916,2.55
					c0.101,1.51-1.041,2.815-2.551,2.916C157,504.758,151.03,505.147,143.052,505.147z"/>
				<path fill="#E29E97" d="M97.133,522.608c-3.634,0-10.273-0.223-16.965-1.584c-1.482-0.302-2.44-1.748-2.138-3.229
					c0.301-1.481,1.752-2.438,3.229-2.138c9.078,1.846,18.334,1.433,18.43,1.427c1.528-0.066,2.793,1.096,2.866,2.606
					c0.071,1.511-1.095,2.794-2.606,2.866C99.822,522.563,98.789,522.608,97.133,522.608z"/>
				<path fill="#BC7C73" d="M131.694,523.28c-0.857,0-7.203-0.036-14.477-1.056c-1.499-0.21-2.543-1.595-2.332-3.093
					c0.209-1.498,1.598-2.55,3.092-2.332c7.253,1.017,13.723,1.009,13.782,1.002c0.004,0,0.008,0,0.012,0
					c1.507,0,2.731,1.219,2.739,2.728c0.006,1.512-1.215,2.743-2.727,2.751C131.77,523.28,131.739,523.28,131.694,523.28z"/>
				<path fill="#BC7C73" d="M152.57,543.3c-0.856,0-7.203-0.036-14.477-1.056c-1.499-0.21-2.543-1.595-2.332-3.093
					c0.209-1.498,1.604-2.551,3.092-2.332c7.254,1.017,13.736,1.01,13.783,1.002c0.003,0,0.007,0,0.012,0
					c1.506,0,2.731,1.219,2.738,2.728c0.007,1.512-1.214,2.743-2.727,2.751C152.646,543.3,152.616,543.3,152.57,543.3z"/>
				<path fill="#E29E97" d="M115.796,536.831c-4.182,0-11.048-0.231-15.7-1.574c-1.453-0.419-2.292-1.938-1.871-3.391
					c0.419-1.454,1.935-2.296,3.391-1.872c6.09,1.758,17.482,1.307,17.593,1.301c1.519-0.075,2.789,1.111,2.852,2.621
					c0.063,1.512-1.11,2.788-2.621,2.852C119.272,536.775,117.861,536.831,115.796,536.831z"/>
			</g>
		</g>
	</svg>
</div>
              
            
!

CSS

              
                html, body {
  margin:0;
  width: 100%;
  height: 100%;
	background: #FCE3E5;
  font-family: "Quicksand";
  position: absolute;
  overflow: hidden;
}

.header { position: absolute; z-index: 1;}
.header h1, h2 { margin: 0; }
.header h1 { color: #533156; }
.number {color: #ffc0cb}
.type { color: #D8224D; text-shadow: 2px 4px 3px rgba(0, 119, 119,0.3); }
.social a img { height: 1.5em; }
.description { color: #e83a4c; text-shadow: 1px 1px #f6f1ed; text-align: center; margin-top: 80px; padding-bottom: 5px; }
h3.instructions {
  margin: 0;
  padding: 0;
  text-align: center;
  margin-bottom: 10px
}

.content {
  text-align: center;
  width: 100%;
}

svg {
  padding-top: 100px;
  position: relative;
  max-width: 250px;
  animation: xAxis 12s linear alternate infinite;
}

#container {
  animation: swing 3s linear forwards infinite, yAxis 12s linear alternate infinite;
}

@keyframes yAxis {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-100px); }
}

@keyframes xAxis {
  0% {transform: translateX(-50%)}
  100% { transform: translateX(50%); }
}

@keyframes swing {
  0%{transform: rotate(5deg);}
  50%{transform: rotate(-5deg)}
  100%{transform: rotate(5deg);}
}

#screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
              
            
!

JS

              
                $(function() {
  let WIDTH = window.innerWidth;
  let HEIGHT = window.innerHeight;
  let FPS = 60;

  var hearts = [];

  let canvas = $("#screen")[0];

  canvas.width = WIDTH;
  canvas.height = HEIGHT;
  let ctx = canvas.getContext("2d");

  var heartImage = new Image();
  heartImage.src = "https://i.imgsafe.org/8c/8c431a0041.png";

  function heart(I) {
    I = {};
    I.x = Math.random() * WIDTH;
    I.y = 0;

    I.size = Math.random() * (25 - 15) + 15;

    I.draw = function() {
      ctx.drawImage(heartImage, this.x, this.y, this.size, this.size);
    };

    I.update = function() {
      I.y += 0.5;
    };

    return I;
  };

  function update() {
    hearts.forEach(function(heart) {
      heart.update();
    });

    if(Math.random() < 0.05)
      hearts.push(heart());
  }

  function draw() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
    hearts.forEach(function(heart) {
      heart.draw();
    });
  }

  function initialize() {
    setInterval(function() {
      update();
      draw();
    }, 1000/FPS);
  }

  initialize();
});
              
            
!
999px

Console