citywebshop_cms/static/trumbowyg/docs/img/beer.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293.9 343.6">
	<style>
		@keyframes bubble1 {
			0% {
				opacity: 0;
				transform: translateY(0) scale(0.2);
			}
			50% {
				opacity: 0.3;
				transform: translateY(-10px) scale(0.5);
			}
			100% {
				opacity: 0;
				transform: translateY(-150px);
			}
		}
		@keyframes bubble2 {
			0% {
				opacity: 0;
				transform: translateY(0) scale(0.2);
			}
			30% {
				opacity: 0.3;
				transform: translateY(-10px) scale(0.5);
			}
			100% {
				opacity: 0;
				transform: translateY(-150px);
			}
		}
		@keyframes bubbleSlow {
			0% {
				opacity: 0;
				transform: translateY(70px) scale(0.2);
			}
			10% {
				opacity: 0.3;
				transform: translateY(40px) scale(0.5);
			}
			80% {
				opacity: 0.3;
			}
			100% {
				opacity: 0;
				transform: translateY(-100px);
			}
		}

		.bubble {
			opacity: 0;
			transform-origin: center center;
		}
		.bubble1 {
			animation: bubble1 2s linear infinite;
		}
		.bubble2 {
			animation: bubbleSlow 8s linear infinite 2s;
		}
		.bubble3 {
			animation: bubble1 1.5s linear infinite 0.7s;
		}
		.bubble4 {
			animation: bubble2 3s linear infinite 2.3s;
		}
		.bubble5 {
			animation: bubble1 5s linear infinite 2.7s;
		}
		.bubble6 {
			animation: bubbleSlow 4s linear infinite;
		}
		.bubble7 {
			animation: bubble1 2.5s linear infinite 1.2s;
		}
	</style>
	<path fill="#E2A25D" d="M258.7 316s0-.1 0 0v-6.5h-3.6c-13.6-12-64.6-20.9-125.4-20.9S17.8 297.5 4.2 309.5H.7v6.9c1.1 14.9 58.4 26.9 129 26.9s127.9-12 129-26.9v-.4z"/>
	<ellipse cx="129.7" cy="308.6" fill="#FFB864" rx="129" ry="27.4"/>
	<path fill="#EFEFEF" d="M247 14.4H16.6l24.6 291c.6 7.9 41 14.2 90.9 14.2 50.2 0 90.9-6.4 90.9-14.4v-.2l24-290.6z"/>
	<linearGradient id="a" x1="86.0467" x2="86.0467" y1="307.6227" y2="26.3726" gradientUnits="userSpaceOnUse">
		<stop offset="0" stop-color="#FBB03B"/>
		<stop offset="1" stop-color="#FFD23E"/>
	</linearGradient>
	<path fill="url(#a)" d="M52.2 293.4h.2l.5 6.3c8.7 3.2 35.1 7.6 76.2 7.9l13.4-281.3H29.7l22.5 267.1z"/>
	<linearGradient id="b" x1="181.479" x2="181.479" y1="307.6332" y2="26.3726" gradientUnits="userSpaceOnUse">
		<stop offset="0" stop-color="#FBA23B"/>
		<stop offset="1" stop-color="#FFC93E"/>
	</linearGradient>
	<path fill="url(#b)" d="M132.1 307.6c42.8 0 70.3-4.6 79.3-7.9L234 26.4h-91.6L129 307.6h3.1z"/>
	<path fill="#E5E5E5" d="M247 14.4H143l-.6 12H234l-22.6 273.4c-8.9 3.2-36.4 7.9-79.3 7.9H129l-.6 12h3.7c50.2 0 90.9-6.4 90.9-14.4v-.2l24-290.7z"/>
	<g fill="#FFF">
		<circle cx="84" cy="252.3" r="10.6" opacity=".3" class="bubble bubble1"/>
		<circle cx="119.7" cy="197.6" r="7.3" opacity=".3" class="bubble bubble2"/>
		<circle cx="96" cy="100.3" r="10.6" opacity=".3" class="bubble bubble6"/>
		<circle cx="151.4" cy="274.8" r="8.1" opacity=".3" class="bubble bubble3"/>
		<circle cx="179.5" cy="229.9" r="10.2" opacity=".3" class="bubble bubble2"/>
		<circle cx="133.7" cy="143.2" r="10.2" opacity=".3" class="bubble bubble4"/>
		<circle cx="132.2" cy="139.7" r="4.5" opacity=".3" class="bubble bubble6"/>
		<circle cx="169.9" cy="147" r="5.6" opacity=".3" class="bubble bubble5"/>
		<circle cx="189.2" cy="99.7" r="5.6" opacity=".3" class="bubble bubble2"/>
		<circle cx="80.2" cy="201.7" r="3" opacity=".3" class="bubble bubble6"/>
		<circle cx="157.5" cy="279.8" r="3" opacity=".3" class="bubble bubble7"/>
		<circle cx="161.2" cy="74.3" r="3" opacity=".3" class="bubble bubble1"/>
	</g>
	<path fill="#F4B20C" d="M31.2 44.9l.6 7.5h29.4v128.4c0 5.7 4.2 10.7 9.9 11.3 6.5.6 12.1-4.5 12.1-10.9v-70.5c0-5.5 4.5-10 10-10 6.1 0 11-5 11-11V52.4h127.6l.5-7.9-201.1.4z" opacity=".5"/>
	<path fill="#E5E5E5" d="M31.9 52.3H19.8l-.7-8.7h12.1"/>
	<path fill="#D3D3D3" d="M231.8 52.4h12.1l.7-8.7h-12.1"/>
	<path fill="#FFFAEE" d="M260.5 23c0 12.6-10.3 23-23 23H25.2c-12.6 0-23-10.3-23-23 0-12.6 10.3-23 23-23h212.4c12.6 0 22.9 10.4 22.9 23z"/>
	<g>
		<path fill="#FFFAEE" d="M88.3 17.2H73.5c-1.1 0-2.1.2-3.1.5-1.9-.6-4-.7-6.1 0-4.8 1.4-8 5.9-8 10.9v148.3c0 5.7 4.2 10.7 9.9 11.3 6.5.6 12.1-4.5 12.1-10.9v-70.5c0-5.5 4.5-10 10-10 6.1 0 11-4.9 11-11V28.2c0-6.1-5-11-11-11z"/>
		<g fill="#FFEBCC">
			<path d="M257.3 11.3c.1.7.1 1.4.1 2.1 0 12.6-10.3 23-23 23H99.3v-8.2c0-5.1-3.5-9.4-8.3-10.6.1.6.2 1.2.2 1.8v57.4c0 6.1-5 11-11 11-5.5 0-10 4.5-10 10v70.5c0 6.4-5.6 11.6-12.1 10.9-.5-.1-1.1-.2-1.6-.3.9 4.8 4.7 8.7 9.7 9.1 6.5.6 12.1-4.5 12.1-10.9v-70.5c0-5.5 4.5-10 10-10 6 0 11-5 11-11V46h138.3c12.6 0 23-10.3 23-23-.1-4.2-1.2-8.2-3.3-11.7zM25.2 46h31.1v-9.6H6.6c4.1 5.8 10.9 9.6 18.6 9.6z"/>
		</g>
	</g>
	<path d="M249.5 298.5c-6-3.1-14.6-6-25.3-8.5l-1.2 15s0 .8-.2 1.3c1.4-.4 26.7-7.8 26.7-7.8z" opacity=".1"/>
	<path d="M256.5 303.5l33.6-9.6c3.5-1 3.2-6-.3-6.6l-64.3-12-1.3 14.8c0-.1 24.8 5.1 32.3 13.4z" opacity=".05"/>
</svg>