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"> #27 </span></h1>
  <h2 class="type">Beer</h2>
  <div class="social">
    <a href="https://www.linkedin.com/in/rominamartinliberon/" target="_blank" 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/" target="_blank" class="social"><img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="github"></img></a>
		<a href="https://twitter.com/rominamartinlib" target="_blank" class="social"><img src="https://i.imgsafe.org/43/431dd07874.png" alt="twitter"></img></a>
  </div>
</div>


<div class="content">
	<svg x="0px" y="0px" width="50%" viewBox="0 0 500 493">
		<circle fill="#1D2628" cx="255.995" cy="243" r="233"/>
		<g id="right">
			<g id="right_glass">
				<path opacity="0.6" fill="#FFFFFF" d="M400.703,220.496l-16.397-2.344l2.253-15.751c1.446-10.121-5.585-19.499-15.706-20.946
					l-78.445-11.215c-10.121-1.447-19.499,5.584-20.946,15.705l-20.315,142.103c-1.447,10.119,5.585,19.5,15.705,20.943l78.446,11.217
					c10.121,1.445,19.497-5.586,20.945-15.705l0.413-2.893l16.396,2.344c10.122,1.447,19.498-5.586,20.946-15.705l12.41-86.808
					C417.854,231.321,410.822,221.943,400.703,220.496z M401.119,251.999l-8.84,61.833c-1.03,7.209-7.711,12.217-14.92,11.188
					l-8.166-1.168l12.574-87.942l8.164,1.168C397.142,238.108,402.151,244.786,401.119,251.999z"/>
				<path fill="#FFB625" d="M378.112,194.128c0.582,0.345,1.166,0.354,1.719,0.777c1.672,10.629-1.587,20.805-3.881,31.215
					c-2.29,10.39-1.793,20.847-3.438,31.505c-1.65,10.683-3.879,21.28-5.184,32.286c-1.269,10.707-5.95,21.525-6.655,32.404
					c-0.649,10.037,0.995,22.725-10.305,27.465c-5.716,2.396-8.72-0.414-14.587-1.451c-5.139-0.91-10.199,0.164-15.438-0.676
					c-10.142-1.623-19.08-4.551-29.299-5.49c-7.506-0.689-21.412,0.566-26.777-5.029c-18.434-19.219-0.835-60.377,2.825-81.874
					c1.978-11.613,2.167-23.428,4.679-34.703c1.354-6.076,4.671-10.969,6.195-16.781c1.389-5.302,0.202-10.341,1.859-15.699
					c6.55-21.175,31.406-6.001,45.648-7.564c8.119-0.89,15.142-8.579,23.691-6.011c4.089,1.229,6.965,6.855,10.926,7.087
					c3.399,0.198,6.061-4.308,10.089-4.11c1.136,2.439,3.005,4.976,4.548,6.797"/>
				<path fill="#C99A39" d="M339.281,342.617l17.191-120.241c0.889-6.215-2.429-11.83-7.408-12.541
					c-0.929-0.135-1.849-0.086-2.737,0.117c2.038-3.146,5.273-5.005,8.616-4.526c4.981,0.711,8.298,6.327,7.408,12.542l-17.19,120.239
					c-0.723,5.057-4.007,8.951-7.888,9.844C338.273,346.51,338.989,344.66,339.281,342.617z"/>
				<path fill="#C99A39" d="M310.991,338.572l17.189-120.241c0.889-6.215-2.428-11.83-7.408-12.542
					c-0.928-0.133-1.848-0.083-2.737,0.121c2.04-3.148,5.275-5.005,8.617-4.529c4.979,0.713,8.296,6.328,7.407,12.542L316.87,334.162
					c-0.723,5.055-4.006,8.951-7.889,9.844C309.98,342.463,310.698,340.615,310.991,338.572z"/>
				<path fill="#C99A39" d="M282.698,334.527l17.19-120.243c0.889-6.213-2.427-11.828-7.408-12.54
					c-0.928-0.133-1.848-0.085-2.737,0.119c2.04-3.147,5.275-5.006,8.617-4.528c4.98,0.713,8.297,6.327,7.409,12.542l-17.191,120.241
					c-0.724,5.055-4.006,8.951-7.888,9.844C281.688,338.418,282.405,336.57,282.698,334.527z"/>
				<path fill="#C99A39" d="M263.053,331.717l17.19-120.239c0.889-6.215-1.194-11.654-4.652-12.148
					c-0.645-0.092-1.291-0.005-1.922,0.236c1.564-3.217,3.909-5.201,6.23-4.869c3.457,0.494,5.54,5.933,4.65,12.148l-17.191,120.239
					c-0.722,5.059-3.188,9.068-5.946,10.121C262.179,335.629,262.761,333.762,263.053,331.717z"/>
				<path fill="#C99A39" d="M355.645,344.957l17.19-120.241c0.888-6.217-1.193-11.654-4.652-12.148
					c-0.645-0.094-1.291-0.006-1.922,0.236c1.563-3.215,3.908-5.201,6.229-4.869c3.458,0.492,5.54,5.932,4.651,12.146l-17.19,120.243
					c-0.724,5.053-3.19,9.066-5.946,10.119C354.771,348.865,355.352,347,355.645,344.957z"/>
			</g>
			<path id="right_foam" fill="#FFFFFF" d="M273.316,183.449c-5.096-3.451-7.93-11.705-8.533-17.579
				c-0.836-8.133,5.593-14.598,12.911-8.237c0.859-7.688-2.052-15.063-0.371-23.228c1.672-8.122,6.848-17.09,14.563-20.315
				c17.622-7.367,15.933,14.306,13.021,23.349c2.776-16.629,23.396-41.462,41.016-42.387c26.029-1.366-6.735,32.062-9.358,39.587
				c7.509-4.895,13.188-12.171,21.85-15.312c4.945-1.793,17.518-4.426,21.289,1.27c5.724,8.646-11.624,22.229-15.704,28.387
				c6.568-4.727,30.414-27.713,39.964-18.019c8.542,8.672-13.439,29.917-19.121,34.737c8.052-1.673,39.193-17.02,31.878,3.832
				c-3.896,11.101-18.626,17.223-28.62,21.295c4.921-0.85,18.579,0.247,15.267,7.915c-2.23,5.164-15.909,5.967-20.198,4.896
				c0.819,7.534-2.571,12.184-10.502,9.088c-6.926-2.701-10.956-10.871-14.883-16.722c3.301,4.718,19.738,35.501,5.405,28.697
				c-10.492-4.98-15.195-23.532-20.834-32.709c0.269,8.132,4.793,16.069-8.182,11.643c-8.462-2.887-13.68-10.582-20.645-15.395
				c4.599,6.065,11.808,19.288-2.169,15.248c-9.243-2.671-16.824-11.022-22.298-18.428c-0.043,8.965-10.95,6.445-13.533,0.423
				c-0.113-0.135-0.015-0.184-0.707-0.643c-0.223-0.147-0.676-0.482-1.48-1.323"/>
			
				<path fill="none" stroke="#000000" stroke-width="6.8201" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M358.171,252.214c0.562-1.971,0.707-4.092,0.35-6.246c-1.292-7.787-8.65-13.051-16.436-11.76
				c-6.092,1.012-10.64,5.732-11.713,11.471"/>
			
				<path fill="none" stroke="#000000" stroke-width="6.8201" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M309.081,242.999c0.281-2.029,0.128-4.148-0.526-6.232c-2.365-7.529-10.386-11.716-17.916-9.351
				c-5.891,1.849-9.733,7.162-9.996,12.992"/>
			<path fill="#450000" d="M341.69,268.041l-56.252-11.263c0,0-10.44,24.917,21.902,38.69
				C307.341,295.469,338.783,306.053,341.69,268.041z"/>
			<path fill="#9E3C3C" d="M322.098,279.99c6.017-0.467,11.671,0.58,16.288,2.715c-8.797,20.25-31.045,12.764-31.045,12.764
				c-2.795-1.189-5.264-2.465-7.454-3.797C303.893,285.426,312.198,280.76,322.098,279.99z"/>
		</g>
		<g id="left">
			<g id="left_glass">
				<path opacity="0.6" fill="#FFFFFF" d="M260.35,344.98l-17.693-142.454c-1.26-10.145-10.506-17.348-20.652-16.087l-78.639,9.767
					c-10.146,1.26-17.349,10.506-16.089,20.651l1.961,15.792L112.8,234.69c-10.146,1.26-17.349,10.506-16.088,20.652l10.807,87.021
					c1.26,10.145,10.506,17.348,20.652,16.088l16.437-2.041l0.36,2.9c1.26,10.145,10.506,17.348,20.652,16.09l78.641-9.77
					C254.404,364.373,261.607,355.125,260.35,344.98z M134.212,339.625c-7.227,0.896-13.813-4.234-14.711-11.461l-7.699-61.985
					c-0.897-7.229,4.233-13.814,11.461-14.711l8.186-1.018l10.949,88.159L134.212,339.625z"/>
				<path fill="#FFB625" d="M232.087,200.192c0.652,0.178,1.218,0.033,1.864,0.295c4.426,9.807,3.976,20.483,4.521,31.127
					c0.542,10.627,3.788,20.58,5.024,31.293c1.236,10.739,1.893,21.548,3.549,32.507c1.609,10.662-0.041,22.332,2.16,33.01
					c2.029,9.85,6.975,21.65-2.668,29.213c-4.877,3.824-8.519,1.91-14.451,2.461c-5.196,0.484-9.792,2.859-15.065,3.438
					c-10.208,1.119-19.604,0.662-29.706,2.461c-7.42,1.322-20.498,6.213-27.155,2.238c-22.863-13.654-16.787-58.002-18.947-79.701
					c-1.168-11.723-4.113-23.167-4.675-34.704c-0.303-6.219,1.6-11.814,1.531-17.822c-0.063-5.48-2.541-10.025-2.362-15.63
					c0.71-22.153,28.696-14.1,42.017-19.377c7.593-3.008,12.33-12.281,21.255-12.068c4.268,0.102,8.531,4.768,12.413,3.941
					c3.33-0.708,4.703-5.758,8.641-6.633c1.741,2.051,4.213,4.003,6.185,5.35"/>
				<path fill="#D9A63D" d="M171.959,357.924l-14.97-120.54c-0.774-6.229,2.645-11.781,7.638-12.402
					c0.93-0.115,1.849-0.049,2.735,0.172c-1.981-3.186-5.182-5.104-8.532-4.688c-4.993,0.619-8.413,6.172-7.639,12.402l14.971,120.536
					c0.629,5.07,3.84,9.025,7.705,9.988C172.896,361.834,172.213,359.973,171.959,357.924z"/>
				<path fill="#D9A63D" d="M200.32,354.4L185.35,233.862c-0.774-6.228,2.646-11.783,7.639-12.402c0.93-0.117,1.85-0.051,2.734,0.17
					c-1.981-3.186-5.182-5.104-8.532-4.686c-4.993,0.619-8.412,6.17-7.639,12.402l14.971,120.534c0.629,5.07,3.841,9.025,7.706,9.988
					C201.257,358.311,200.575,356.449,200.32,354.4z"/>
				<path fill="#D9A63D" d="M228.682,350.877l-14.971-120.538c-0.774-6.228,2.645-11.783,7.638-12.402
					c0.931-0.115,1.85-0.049,2.735,0.17c-1.981-3.184-5.182-5.102-8.532-4.686c-4.993,0.619-8.412,6.172-7.638,12.402l14.97,120.536
					c0.63,5.068,3.841,9.023,7.706,9.988C229.619,354.787,228.936,352.926,228.682,350.877z"/>
				<path fill="#D9A63D" d="M248.377,348.432l-14.972-120.536c-0.773-6.232,1.409-11.631,4.875-12.063
					c0.646-0.08,1.291,0.02,1.917,0.273c-1.503-3.244-3.812-5.273-6.138-4.984c-3.467,0.43-5.649,5.828-4.875,12.059l14.97,120.538
					c0.629,5.068,3.021,9.125,5.762,10.229C249.178,352.359,248.629,350.479,248.377,348.432z"/>
				<path fill="#D9A63D" d="M155.556,359.959l-14.971-120.536c-0.774-6.23,1.409-11.63,4.875-12.058
					c0.646-0.082,1.291,0.018,1.917,0.27c-1.503-3.244-3.813-5.271-6.138-4.984c-3.467,0.432-5.649,5.832-4.875,12.06l14.97,120.538
					c0.629,5.068,3.022,9.125,5.76,10.229C156.357,363.887,155.811,362.008,155.556,359.959z"/>
			</g>
			<path id="left_foam" fill="#FFFFFF" d="M236.094,187.853l0.372-0.557c2.183-3.68,1.417-7.158-0.873-10.373
				c-0.333-7.128-5.516-13.887-9.485-19.648c-3.506-5.089-11.252-16.848-19-13.347c-5.08,2.295-3.568,7.867-0.885,12.619
				c-9.43-4.427-22.666-8.57-17.784,2.966c-9.992-14.597-30.734-26.622-48.218-29.257c-19.071-2.874-15.793,17.125-6.779,27.323
				c-10.31-7.903-30.15-18.822-40.306-4.434c-11.896,16.85,9.06,34,25.086,33.702c-7.499,1.466-32.374,6.546-25.121,19.145
				c8.02,13.934,26.198-0.821,35.921-0.987c-2.016,3.495-17.499,23.278-1.906,19.108c7.05-1.885,14.495-13.412,20.64-17.322
				c-5.637,4.127-11.27,24.044,0.99,16.146c10.08-6.492,18.772-14.393,27.83-22.375c-2.681,3.486-4.801,7.254-5.642,11.495
				c9.323,11.168,22.51-10.194,27.942-16.049c-4.719,7.234-0.071,11.403,7.592,10.305c8.567-1.229,14.423-7.282,21.361-11.418
				c-0.167,5.355,4.099,7.637,8.294,4.795C239.474,197.421,238.183,186.676,236.094,187.853z"/>
			
				<path fill="none" stroke="#000000" stroke-width="6.8201" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M157.484,268.104c-0.525-1.979-0.631-4.104-0.234-6.251c1.435-7.762,8.889-12.889,16.649-11.455
				c6.071,1.123,10.531,5.928,11.499,11.684"/>
			
				<path fill="none" stroke="#000000" stroke-width="6.8201" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
				M206.736,259.794c-0.243-2.031-0.051-4.15,0.641-6.221c2.504-7.484,10.601-11.521,18.085-9.02
				c5.855,1.959,9.601,7.342,9.755,13.176"/>
			<path fill="#450000" d="M173.669,284.232l56.451-10.225c0,0,9.98,25.105-22.611,38.279
				C207.51,312.287,175.876,322.293,173.669,284.232z"/>
			<path fill="#9E3C3C" d="M193.039,296.539c-6.006-0.58-11.679,0.363-16.335,2.416c8.422,20.408,30.806,13.332,30.806,13.332
				c2.816-1.139,5.307-2.367,7.521-3.66C211.142,302.309,202.923,297.49,193.039,296.539z"/>
		</g>
		<g>
			<g>
				<path fill="#FCFCFC" d="M106.905,94.882c-3.037-3.037-4.556-4.556-7.592-7.593c0.496-0.496,0.744-0.742,1.242-1.233
					c3.013,3.061,4.52,4.591,7.533,7.652C107.614,94.175,107.376,94.411,106.905,94.882z"/>
				<path fill="#FCFCFC" d="M109.821,84.841c-1.206-1.313-1.728-2.731-1.543-4.257s0.975-2.909,2.364-4.115
					c0.909-0.79,1.888-1.314,2.928-1.571s2.023-0.214,2.945,0.122c0.924,0.336,1.723,0.924,2.403,1.755
					c0.69,0.843,1.107,1.761,1.26,2.75s0.015,1.947-0.411,2.885s-1.042,1.755-1.854,2.461c-0.88,0.765-1.823,1.271-2.837,1.524
					s-1.982,0.233-2.907-0.066S110.458,85.535,109.821,84.841z M111.124,83.682c0.867,0.96,1.855,1.44,2.958,1.454
					c1.104,0.012,2.108-0.38,3.028-1.179c0.937-0.814,1.467-1.758,1.597-2.852s-0.239-2.174-1.123-3.236
					c-0.559-0.672-1.183-1.147-1.871-1.421s-1.41-0.326-2.163-0.156c-0.754,0.169-1.456,0.535-2.102,1.096
					c-0.917,0.797-1.475,1.753-1.667,2.852C109.589,81.336,110.041,82.482,111.124,83.682z"/>
				<path fill="#FCFCFC" d="M123.927,79.604c-2.688-3.351-4.031-5.026-6.718-8.376c0.548-0.44,0.822-0.661,1.372-1.096
					c4.218,0.963,6.297,1.497,10.389,2.66c-2.007-2.71-3.01-4.065-5.017-6.775c0.524-0.389,0.787-0.583,1.313-0.967
					c2.53,3.471,3.795,5.208,6.325,8.679c-0.535,0.391-0.802,0.587-1.334,0.983c-4.072-1.18-6.141-1.723-10.339-2.703
					c2.092,2.648,3.139,3.974,5.231,6.622C124.659,79.017,124.414,79.212,123.927,79.604z"/>
				<path fill="#FCFCFC" d="M133.738,72.18c-2.486-3.503-3.729-5.254-6.215-8.757c0.553-0.393,0.829-0.588,1.383-0.977
					c2.168,3.106,3.253,4.658,5.422,7.765c1.976-1.383,2.972-2.058,4.978-3.377c0.278,0.424,0.417,0.636,0.695,1.06
					C137.471,69.557,136.219,70.415,133.738,72.18z"/>
				<path fill="#FCFCFC" d="M143.415,65.696c-0.969-1.54-1.453-2.313-2.422-3.853c-2.928-1.081-4.412-1.598-7.414-2.579
					c0.684-0.453,1.026-0.677,1.713-1.123c1.545,0.541,2.315,0.818,3.84,1.386c0.708,0.269,2.008,0.883,2.037,0.865
					c0.093-0.057,0.071-1.449,0.158-2.329c0.164-1.584,0.251-2.379,0.443-3.967c0.669-0.402,1.006-0.6,1.678-0.995
					c-0.487,3.159-0.701,4.734-1.072,7.877c0.957,1.548,1.435,2.322,2.392,3.87C144.227,65.185,143.956,65.355,143.415,65.696z"/>
				<path fill="#FCFCFC" d="M153.912,59.503c-2.071-3.764-3.107-5.646-5.179-9.41c1.521-0.838,2.285-1.25,3.819-2.056
					c0.866-0.455,1.554-0.75,2.057-0.894c0.704-0.201,1.367-0.247,1.984-0.144c0.801,0.134,1.516,0.463,2.136,0.988
					s1.139,1.219,1.561,2.079c0.359,0.732,0.58,1.429,0.665,2.089s0.071,1.248-0.044,1.766s-0.296,0.971-0.542,1.36
					c-0.247,0.39-0.588,0.765-1.028,1.128s-0.982,0.711-1.623,1.047C156.189,58.257,155.428,58.668,153.912,59.503z M154.701,57.628
					c0.905-0.49,1.36-0.734,2.27-1.212c0.703-0.369,1.225-0.712,1.566-1.035c0.342-0.324,0.578-0.652,0.709-0.987
					c0.185-0.472,0.245-1.01,0.18-1.613c-0.065-0.603-0.28-1.268-0.643-1.993c-0.502-1.005-1.077-1.682-1.729-2.029
					s-1.299-0.475-1.937-0.376c-0.46,0.071-1.128,0.333-1.999,0.791c-0.93,0.489-1.395,0.737-2.32,1.238
					C152.359,53.297,153.14,54.741,154.701,57.628z"/>
				<path fill="#FCFCFC" d="M164.656,53.984c-1.851-3.877-2.777-5.815-4.628-9.692c2.004-0.957,3.012-1.422,5.035-2.325
					c1.017-0.454,1.832-0.704,2.438-0.757c0.607-0.052,1.165,0.08,1.673,0.395s0.875,0.745,1.105,1.29
					c0.297,0.702,0.287,1.402-0.023,2.103s-1.98,1.947-1.98,1.947c0.004,0.015,0.831,0.027,1.102,0.101
					c0.58,0.158,1.178,0.423,1.785,0.784c1.23,0.745,1.84,1.121,3.052,1.883c-0.729,0.304-1.092,0.458-1.818,0.769
					c-0.929-0.574-1.398-0.859-2.338-1.424c-0.684-0.405-1.233-0.7-1.648-0.89s-0.761-0.298-1.035-0.325
					c-0.275-0.026-0.54-0.016-0.785,0.04c-0.178,0.041-0.46,0.152-0.837,0.324c-0.679,0.311-1.019,0.467-1.696,0.784
					c0.809,1.728,1.212,2.592,2.021,4.319C165.508,53.577,165.225,53.713,164.656,53.984z M163.536,47.876
					c1.262-0.591,1.895-0.88,3.164-1.449c0.675-0.303,1.175-0.597,1.503-0.888c0.328-0.29,0.534-0.614,0.615-0.972
					c0.082-0.357,0.056-0.695-0.082-1.014c-0.201-0.466-0.562-0.766-1.083-0.896s-1.204-0.01-2.044,0.365
					c-1.437,0.641-2.153,0.968-3.581,1.636C162.631,45.945,162.934,46.589,163.536,47.876z"/>
				<path fill="#FCFCFC" d="M175.837,49.044c-1.621-3.978-2.431-5.968-4.052-9.946c0.611-0.249,0.916-0.371,1.528-0.615
					c1.591,3.99,2.386,5.985,3.978,9.975C176.709,48.69,176.418,48.808,175.837,49.044z"/>
				<path fill="#FCFCFC" d="M179.849,47.46c-1.539-4.011-2.309-6.016-3.847-10.027c0.63-0.242,0.945-0.361,1.577-0.598
					c3.629,2.243,5.405,3.402,8.866,5.787c-1.09-3.192-1.636-4.788-2.726-7.979c0.596-0.203,0.894-0.304,1.49-0.502
					c1.359,4.075,2.038,6.114,3.397,10.189c-0.607,0.202-0.912,0.304-1.518,0.511c-3.438-2.394-5.198-3.558-8.804-5.811
					c1.187,3.16,1.78,4.74,2.967,7.9C180.689,47.139,180.409,47.245,179.849,47.46z"/>
				<path fill="#FCFCFC" d="M191.037,43.537c-1.309-4.091-1.963-6.137-3.272-10.229c0.625-0.199,0.938-0.298,1.563-0.493
					c0.634,2.034,0.95,3.05,1.584,5.084c1.657-2.746,2.519-4.112,4.305-6.826c0.854-0.239,1.282-0.355,2.138-0.586
					c-1.547,2.219-2.298,3.335-3.755,5.58c2.762,1.849,4.115,2.795,6.767,4.729c-0.792,0.213-1.188,0.323-1.978,0.543
					c-2.198-1.644-3.317-2.453-5.592-4.04c-0.559,0.884-0.835,1.327-1.381,2.215c0.443,1.421,0.665,2.131,1.108,3.553
					C191.927,43.253,191.63,43.348,191.037,43.537z"/>
				<path fill="#FCFCFC" d="M204.353,34.387c-0.419-1.732-0.226-3.217,0.608-4.447s2.111-2.038,3.811-2.4
					c1.113-0.237,2.167-0.21,3.153,0.077s1.789,0.809,2.411,1.553c0.623,0.745,1.029,1.647,1.226,2.703
					c0.199,1.071,0.136,2.072-0.181,3.006s-0.864,1.7-1.642,2.305s-1.658,1.013-2.652,1.224c-1.078,0.229-2.091,0.205-3.05-0.078
					s-1.756-0.78-2.394-1.497S204.574,35.303,204.353,34.387z M205.952,34.029c0.295,1.26,0.905,2.165,1.819,2.721
					c0.915,0.556,1.927,0.712,3.053,0.473c1.147-0.244,2.015-0.805,2.614-1.69s0.776-2.005,0.513-3.362
					c-0.167-0.858-0.473-1.578-0.926-2.153c-0.453-0.575-1.036-0.976-1.742-1.198c-0.707-0.224-1.456-0.252-2.247-0.084
					c-1.124,0.239-2.018,0.792-2.669,1.648C205.718,31.239,205.584,32.456,205.952,34.029z"/>
				<path fill="#FCFCFC" d="M218.489,36.786c-0.745-4.23-1.117-6.345-1.862-10.575c0.658-0.115,0.988-0.171,1.646-0.281
					c3.108,2.898,4.616,4.375,7.538,7.377c-0.462-3.34-0.693-5.011-1.155-8.352c0.618-0.085,0.927-0.125,1.545-0.206
					c0.558,4.258,0.837,6.387,1.395,10.646c-0.629,0.082-0.944,0.124-1.573,0.211c-2.897-3.007-4.392-4.487-7.476-7.392
					c0.562,3.328,0.843,4.993,1.405,8.321C219.366,36.634,219.074,36.684,218.489,36.786z"/>
				<path fill="#FCFCFC" d="M234.683,34.595c-0.413-4.275-0.618-6.414-1.031-10.688c1.684-0.162,2.527-0.233,4.213-0.363
					c0.952-0.073,1.682-0.071,2.189-0.003c0.709,0.095,1.327,0.316,1.842,0.655c0.669,0.44,1.183,1.025,1.538,1.752
					s0.554,1.568,0.602,2.524c0.041,0.814-0.028,1.543-0.206,2.183s-0.417,1.174-0.72,1.604s-0.642,0.774-1.013,1.033
					c-0.372,0.26-0.822,0.467-1.357,0.625s-1.156,0.263-1.86,0.316C237.2,34.361,236.361,34.434,234.683,34.595z M236.109,33.189
					c1-0.088,1.5-0.129,2.5-0.206c0.772-0.059,1.373-0.166,1.804-0.327c0.432-0.162,0.77-0.37,1.017-0.625
					c0.348-0.359,0.609-0.829,0.783-1.409c0.173-0.58,0.238-1.275,0.191-2.084c-0.064-1.121-0.319-1.971-0.771-2.548
					s-0.986-0.949-1.596-1.112c-0.44-0.118-1.141-0.143-2.099-0.069c-1.022,0.079-1.534,0.122-2.556,0.212
					C235.673,28.289,235.818,29.921,236.109,33.189z"/>
				<path fill="#FCFCFC" d="M245.15,33.853c1.594-4.372,2.438-6.551,4.217-10.89c0.699-0.017,1.048-0.025,1.748-0.037
					c2.079,4.261,3.069,6.405,4.952,10.712c-0.703-0.004-1.054-0.005-1.757-0.004c-0.548-1.3-0.827-1.949-1.392-3.245
					c-1.982,0.017-2.971,0.038-4.952,0.101c-0.479,1.317-0.714,1.976-1.177,3.295C246.134,33.809,245.806,33.823,245.15,33.853z
					 M248.385,29.319c1.615-0.048,2.423-0.064,4.039-0.082c-0.51-1.184-0.769-1.776-1.293-2.957c-0.4-0.897-0.904-2.209-0.904-2.209
					c-0.025,0.001-0.346,1.378-0.61,2.063C249.115,27.407,248.871,28.044,248.385,29.319z"/>
				<path fill="#FCFCFC" d="M259.379,33.684c0.04-1.819,0.063-2.728,0.103-4.547c-1.782-2.515-2.702-3.764-4.592-6.24
					c0.79,0,1.186,0.002,1.976,0.01c0.955,1.304,1.422,1.958,2.349,3.272c0.428,0.614,1.158,1.842,1.183,1.843
					c0.103,0.003,0.83-1.17,1.369-1.856c0.978-1.232,1.474-1.846,2.479-3.067c0.756,0.032,1.132,0.05,1.888,0.089
					c-2.084,2.372-3.098,3.57-5.073,5.989c-0.054,1.818-0.081,2.729-0.135,4.547C260.306,33.706,259.997,33.697,259.379,33.684z"/>
				<path fill="#FCFCFC" d="M266.629,30.513c0.595-0.014,0.893-0.021,1.487-0.031c0.035,0.541,0.169,0.991,0.4,1.351
					c0.231,0.36,0.607,0.665,1.126,0.914c0.518,0.25,1.108,0.398,1.773,0.451c0.591,0.046,1.117,0.012,1.584-0.109
					s0.824-0.312,1.072-0.572c0.247-0.259,0.386-0.554,0.417-0.884c0.031-0.335-0.049-0.64-0.241-0.91
					c-0.192-0.27-0.532-0.511-1.012-0.725c-0.309-0.138-0.998-0.374-2.074-0.694c-1.076-0.319-1.832-0.596-2.259-0.833
					c-0.551-0.306-0.961-0.663-1.218-1.077c-0.257-0.414-0.373-0.867-0.345-1.359c0.031-0.541,0.236-1.037,0.615-1.487
					c0.376-0.449,0.91-0.775,1.601-0.973c0.688-0.199,1.443-0.266,2.268-0.203c0.908,0.07,1.701,0.266,2.37,0.582
					c0.67,0.317,1.167,0.742,1.489,1.272c0.321,0.53,0.464,1.111,0.431,1.741c-0.616-0.02-0.927-0.028-1.543-0.043
					c-0.019-0.683-0.249-1.219-0.697-1.606s-1.142-0.62-2.077-0.693c-0.975-0.076-1.697,0.032-2.164,0.316
					c-0.467,0.284-0.713,0.648-0.742,1.091c-0.025,0.385,0.114,0.713,0.407,0.982c0.29,0.267,1.071,0.575,2.341,0.937
					c1.269,0.361,2.132,0.666,2.591,0.904c0.668,0.347,1.147,0.764,1.434,1.235c0.286,0.473,0.398,0.995,0.341,1.568
					c-0.058,0.568-0.289,1.086-0.695,1.555c-0.406,0.468-0.955,0.812-1.645,1.031c-0.689,0.22-1.446,0.294-2.277,0.229
					c-1.052-0.083-1.924-0.288-2.619-0.618s-1.228-0.788-1.602-1.379C266.791,31.885,266.61,31.23,266.629,30.513z"/>
				<path fill="#FCFCFC" d="M284.956,35.81c0.547-3.749,0.823-5.623,1.37-9.371c-1.594-0.231-2.394-0.339-3.99-0.541
					c0.063-0.503,0.098-0.754,0.162-1.257c3.865,0.488,5.791,0.776,9.635,1.436c-0.086,0.5-0.13,0.75-0.216,1.249
					c-1.595-0.273-2.394-0.404-3.992-0.648c-0.574,3.745-0.86,5.617-1.436,9.361C285.877,35.945,285.569,35.898,284.956,35.81z"/>
				<path fill="#FCFCFC" d="M291.917,36.94c0.764-4.227,1.146-6.342,1.91-10.568c0.642,0.115,0.962,0.176,1.603,0.296
					c-0.326,1.733-0.488,2.599-0.814,4.332c2.465,0.461,3.692,0.71,6.146,1.244c0.377-1.723,0.565-2.583,0.942-4.307
					c0.637,0.139,0.958,0.208,1.594,0.352c-0.948,4.188-1.426,6.283-2.374,10.473c-0.604-0.136-0.908-0.203-1.514-0.335
					c0.433-1.978,0.65-2.966,1.082-4.944c-2.438-0.53-3.662-0.777-6.112-1.236c-0.374,1.99-0.56,2.983-0.935,4.973
					C292.835,37.105,292.527,37.05,291.917,36.94z"/>
				<path fill="#FCFCFC" d="M302.187,39.05c2.729-3.777,4.139-5.645,7.041-9.338c0.683,0.174,1.021,0.261,1.702,0.44
					c0.856,4.667,1.235,7,1.893,11.659c-0.682-0.196-1.021-0.292-1.704-0.482c-0.177-1.4-0.272-2.101-0.467-3.501
					c-1.926-0.523-2.892-0.774-4.827-1.251c-0.821,1.137-1.226,1.708-2.032,2.853C303.151,39.275,302.828,39.199,302.187,39.05z
					 M306.549,35.563c1.577,0.393,2.363,0.596,3.935,1.019c-0.173-1.279-0.263-1.917-0.45-3.196c-0.144-0.972-0.278-2.374-0.278-2.374
					c-0.025-0.005-0.708,1.235-1.148,1.823C307.775,33.923,307.365,34.468,306.549,35.563z"/>
				<path fill="#FCFCFC" d="M315.718,42.668c1.104-3.625,1.656-5.436,2.76-9.061c-1.552-0.471-2.328-0.699-3.887-1.141
					c0.139-0.488,0.208-0.732,0.347-1.219c3.77,1.069,5.646,1.646,9.374,2.885c-0.16,0.481-0.241,0.722-0.401,1.203
					c-1.548-0.515-2.323-0.764-3.878-1.249c-1.131,3.616-1.697,5.423-2.829,9.039C316.608,42.94,316.313,42.849,315.718,42.668z"/>
				<path fill="#FCFCFC" d="M326.502,46.268c1.474-4.035,2.209-6.054,3.683-10.089c3.375,1.229,5.053,1.88,8.385,3.252
					c-0.193,0.469-0.289,0.703-0.482,1.172c-2.707-1.114-4.067-1.647-6.803-2.667c-0.46,1.232-0.691,1.847-1.151,3.08
					c2.522,0.941,3.776,1.432,6.274,2.454c-0.191,0.466-0.284,0.699-0.476,1.165c-2.483-1.016-3.733-1.503-6.241-2.438
					c-0.512,1.37-0.766,2.055-1.277,3.424c2.735,1.02,4.097,1.554,6.803,2.672c-0.194,0.468-0.292,0.705-0.486,1.173
					C331.46,48.114,329.814,47.475,326.502,46.268z"/>
				<path fill="#FCFCFC" d="M336.714,50.297c1.684-3.953,2.524-5.93,4.208-9.882c0.623,0.265,0.934,0.399,1.555,0.669
					c1.06,4.138,1.539,6.205,2.39,10.334c1.438-3.051,2.155-4.576,3.593-7.627c0.574,0.271,0.86,0.406,1.433,0.681
					c-1.858,3.873-2.787,5.811-4.646,9.685c-0.583-0.28-0.875-0.419-1.46-0.694c-0.826-4.119-1.294-6.183-2.329-10.313
					c-1.345,3.096-2.016,4.645-3.361,7.741C337.543,50.651,337.268,50.533,336.714,50.297z"/>
				<path fill="#FCFCFC" d="M347.63,55.318c1.907-3.85,2.861-5.774,4.769-9.623c1.549,0.768,2.321,1.158,3.857,1.958
					c0.866,0.451,1.501,0.848,1.906,1.18c0.567,0.464,0.988,0.984,1.258,1.552c0.35,0.736,0.487,1.511,0.412,2.32
					c-0.075,0.809-0.347,1.632-0.812,2.469c-0.396,0.713-0.845,1.293-1.338,1.739c-0.494,0.446-0.988,0.77-1.479,0.969
					c-0.492,0.2-0.969,0.31-1.43,0.329c-0.46,0.019-0.966-0.049-1.516-0.204c-0.551-0.155-1.146-0.4-1.787-0.734
					C349.94,56.474,349.173,56.083,347.63,55.318z M349.613,54.892c0.916,0.462,1.373,0.698,2.284,1.172
					c0.703,0.366,1.285,0.598,1.747,0.694c0.461,0.096,0.863,0.104,1.214,0.021c0.494-0.117,0.97-0.373,1.429-0.771
					c0.46-0.398,0.887-0.953,1.275-1.665c0.538-0.986,0.763-1.844,0.675-2.578c-0.089-0.734-0.354-1.34-0.799-1.808
					c-0.321-0.338-0.92-0.737-1.792-1.19c-0.932-0.485-1.398-0.726-2.335-1.198C351.833,50.498,351.093,51.962,349.613,54.892z"/>
				<path fill="#FCFCFC" d="M364.58,58.607c0.913-1.531,2.102-2.447,3.584-2.726c1.48-0.279,2.996,0.058,4.51,1.02
					c0.991,0.63,1.753,1.407,2.281,2.32c0.527,0.913,0.758,1.861,0.693,2.838c-0.063,0.978-0.401,1.91-1.002,2.801
					c-0.608,0.903-1.362,1.57-2.257,2.005s-1.843,0.585-2.847,0.455s-1.945-0.476-2.831-1.039c-0.959-0.61-1.688-1.354-2.196-2.239
					s-0.746-1.808-0.71-2.772S364.097,59.417,364.58,58.607z M366.012,59.497c-0.672,1.106-0.86,2.185-0.578,3.233
					c0.283,1.049,0.921,1.884,1.924,2.521c1.021,0.648,2.062,0.875,3.132,0.678c1.071-0.197,1.987-0.866,2.751-2.019
					c0.482-0.729,0.764-1.46,0.834-2.194c0.07-0.734-0.078-1.437-0.443-2.103c-0.365-0.665-0.9-1.227-1.604-1.674
					c-1-0.636-2.05-0.881-3.135-0.738C367.808,57.345,366.851,58.115,366.012,59.497z"/>
				<path fill="#FCFCFC" d="M373.351,70.461c2.436-3.538,3.653-5.309,6.089-8.847c0.571,0.394,0.857,0.592,1.426,0.991
					c0.267,4.307,0.35,6.451,0.412,10.711c2.018-2.702,3.025-4.054,5.043-6.756c0.522,0.391,0.783,0.588,1.303,0.983
					c-2.596,3.422-3.895,5.133-6.49,8.556c-0.529-0.402-0.793-0.602-1.324-0.999c-0.04-4.245-0.111-6.381-0.355-10.674
					c-1.935,2.766-2.901,4.149-4.836,6.916C374.111,70.987,373.858,70.812,373.351,70.461z"/>
				<path fill="#FCFCFC" d="M393.476,74.482c-0.39,0.473-0.582,0.707-0.972,1.18c-0.519-0.429-0.779-0.641-1.301-1.065
					c0.305-0.375,0.456-0.564,0.761-0.939c0.412-0.508,0.782-0.814,1.111-0.924c0.437-0.145,0.932-0.129,1.474,0.058
					c-0.01,0.257-0.018,0.387-0.028,0.644c-0.321-0.12-0.612-0.141-0.871-0.067c-0.259,0.075-0.526,0.272-0.809,0.59
					C393.096,74.167,393.221,74.272,393.476,74.482z M395.565,76.23c-0.396,0.468-0.593,0.7-0.988,1.168
					c-0.515-0.436-0.772-0.653-1.289-1.084c0.31-0.372,0.463-0.558,0.772-0.929c0.419-0.503,0.795-0.806,1.126-0.911
					c0.438-0.138,0.928-0.114,1.468,0.081c-0.013,0.258-0.017,0.386-0.03,0.643c-0.32-0.125-0.611-0.151-0.87-0.081
					c-0.261,0.071-0.535,0.266-0.821,0.58C395.186,75.91,395.313,76.016,395.565,76.23z"/>
				<path fill="#FCFCFC" d="M394.05,86.759c1.212-1.357,1.819-2.035,3.031-3.392c0.188-3.152,0.256-4.738,0.337-7.925
					c0.637,0.544,0.956,0.818,1.589,1.37c-0.074,1.652-0.118,2.477-0.222,4.12c-0.053,0.764-0.273,2.195-0.241,2.224
					c0.086,0.078,1.429-0.314,2.311-0.461c1.59-0.257,2.392-0.378,3.997-0.605c0.592,0.553,0.885,0.831,1.473,1.391
					c-3.228,0.344-4.826,0.548-7.993,1.015c-1.223,1.348-1.834,2.021-3.057,3.369C394.786,87.419,394.541,87.198,394.05,86.759z"/>
				<path fill="#FCFCFC" d="M406.01,85.143c0.424-0.442,0.637-0.662,1.061-1.104c0.501,0.481,0.751,0.722,1.249,1.208
					c-0.338,0.346-0.508,0.52-0.846,0.866c-0.457,0.468-0.853,0.743-1.183,0.82c-0.457,0.106-0.952,0.043-1.478-0.185
					c0.032-0.258,0.048-0.387,0.079-0.646c0.305,0.144,0.595,0.188,0.868,0.129c0.274-0.057,0.56-0.226,0.854-0.503
					C406.373,85.493,406.252,85.375,406.01,85.143z M407.998,87.075c0.43-0.437,0.645-0.655,1.074-1.091
					c0.496,0.488,0.744,0.734,1.237,1.227c-0.342,0.342-0.515,0.513-0.856,0.854c-0.463,0.462-0.861,0.732-1.194,0.805
					c-0.459,0.1-0.954,0.028-1.478-0.207c0.035-0.258,0.051-0.385,0.085-0.643c0.304,0.148,0.597,0.194,0.871,0.14
					c0.275-0.054,0.562-0.217,0.858-0.493C408.356,87.431,408.237,87.311,407.998,87.075z"/>
			</g>
		</g>
	</svg>
</div>
              
            
!

CSS

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

.header { position: absolute; z-index: 1;}
.header h1, h2 { margin: 0; }
.header h1 { color: #533156; }
.number {color: #5B4332}
.type { color: rgba(81, 53, 31, .6); text-shadow: 1px 2px 2px rgba(255, 182, 37, .4) }
.social a img { height: 1.5em; }

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

svg {
  max-width: 500px;
  margin-top: 50px;
}

#background {
  animation: turn 8s forwards infinite;
  transform-origin: center;
}

#left {
  animation: turn 2s linear alternate infinite;
  transform-origin: center;
}
#right {
  animation: turn_l 2s linear alternate infinite;
  transform-origin: center;
}

#right_foam {
  animation: foam_l 2s ease-in-out alternate infinite;
  transform-origin: bottom;
}
#left_foam {
  animation: foam 2s ease-in-out alternate infinite;
  transform-origin: bottom;
}

.window {
  animation: pulse 8s ease-in-out infinite;
}


@keyframes pulse {
  100% {fill: #333}
}

@keyframes turn {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(20deg);}
}

@keyframes turn_l {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(-20deg);}
}

@keyframes foam_l {
  0% {transform: skewX(0)}
  100% {transform: skewX(15deg)}
}

@keyframes foam {
  0% {transform: skewX(0)}
  100% {transform: skewX(-15deg)}
}
              
            
!

JS

              
                
              
            
!
999px

Console