<html>
<head>
  <meta charset="utf-8">
  <title>brew install buzzwords</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
  <body>

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-20 0 270 250" style="enable-background:new 0 0 192 192;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#F9D35F;}
</style>
<g>
	<g>
		<path class="st0 mug" d="M43.29,99.36c0.72,4.72,1.51,9.64,4.3,13.54c3.55,4.97,9.85,7.44,15.99,7.81c5.26,0.32,10.59-0.72,15.33-2.99
			c6.76-3.24,12.12-8.82,18.71-12.4c6.59-3.58,15.74-4.63,20.93,0.74c0.6,0.62,1.14,1.34,1.24,2.19c0.16,1.25-0.67,2.39-1.45,3.39
			c-14.12,18.02-29.05,35.41-44.74,52.11c-0.58,0.61-1.19,1.25-2.01,1.48c-1.27,0.36-2.58-0.37-3.69-1.09
			c-16.26-10.45-31.31-22.72-44.78-36.52c-0.82-0.84-1.67-1.76-1.83-2.91c-0.22-1.57,0.91-2.99,1.97-4.18
			c6.54-7.36,13.07-14.73,19.61-22.09"/>
	</g>
	<circle class="st0 mug" cx="122.73" cy="96.1" r="4.49"/>
	<circle class="st0 mug" cx="97.83" cy="73.88" r="3.17"/>
	<circle class="st0 mug" cx="91.94" cy="100.56" r="2.11"/>
	<path class="st0 hexagon-1" d="M145.76,86.53l-24.13-20.25l5.96-30.52l30.04-10.21l24.13,20.25l-5.96,30.52L145.76,86.53z M125.41,64.95
		l21.08,17.69l26.31-8.94l5.18-26.56L156.9,29.45l-26.31,8.94L125.41,64.95z"/>
	<path class="mug" d="M74.07,171.36l-58.29-48.91L84.96,40l58.29,48.91L74.07,171.36z M22.59,121.85l50.88,42.69l62.97-75.05L85.56,46.8
		L22.59,121.85z"/>
	<polygon class="mug" points="24.49,115.83 1.69,96.7 57.16,30.6 79.95,49.73 77.29,52.9 57.67,36.43 7.53,96.19 27.15,112.66 	"/>
	<polygon class="mug" points="28.22,107.85 13.42,95.43 58.68,41.5 73.47,53.92 70.81,57.09 59.19,47.33 19.26,94.92 30.88,104.68 	"/>
  <g class="mug">
    <rect x="48.64" y="105.61" transform="matrix(0.6433 -0.7656 0.7656 0.6433 -90.4134 88.4085)" width="2.07" height="71.25"/>
	  <rect x="106.8" y="34.56" transform="matrix(0.6433 -0.7656 0.7656 0.6433 -15.2742 107.5905)" width="2.07" height="71.25"/>
  </g>
	<path class="st0 hexagon-2" d="M170.63,147.97l-31.49-4.37l-11.89-28.82l19.67-24.42l31.49,4.37l11.89,28.82L170.63,147.97z M141.57,140.45
		l27.6,3.83l17.17-21.3l-10.36-25.1l-27.6-3.83l-17.17,21.3L141.57,140.45z"/>
	<g class="mug">
		<rect x="66.78" y="67.81" transform="matrix(0.7682 0.6402 -0.6402 0.7682 77.4345 -21.6667)" width="3.72" height="56.58"/>
		<rect x="78.76" y="82.63" transform="matrix(0.7682 0.6402 -0.6402 0.7682 76.6356 -41.6401)" width="34.13" height="4.76"/>
		<rect x="45.49" y="122.55" transform="matrix(0.7682 0.6402 -0.6402 0.7682 94.4808 -11.0875)" width="34.13" height="4.76"/>
		<rect x="102.94" y="92.93" transform="matrix(0.7682 0.6402 -0.6402 0.7682 90.8677 -43.1912)" width="4.27" height="21.91"/>
		<rect x="80.74" y="119.58" transform="matrix(0.7682 0.6402 -0.6402 0.7682 102.7778 -22.8001)" width="4.27" height="21.91"/>
		<rect x="71.68" y="105.6" transform="matrix(0.7682 0.6402 -0.6402 0.7682 88.0607 -27.8733)" width="21.69" height="4.13"/>
		<rect x="92" y="108.87" transform="matrix(0.7682 0.6402 -0.6402 0.7682 93.3447 -34.4267)" width="4.43" height="5.65"/>
		<rect x="86.38" y="114.89" transform="matrix(0.7682 0.6402 -0.6402 0.7682 95.8989 -29.434)" width="4.43" height="5.65"/>
	</g>
</g>
</svg>
    


  </body>
</html>

svg {
  display: block;
  width: 50%;
  max-width: 50em;
  margin: 1em auto;
  padding: 0.5em 1em;
}

.mug {
    animation: moveMug 3s infinite;
    animation-direction: alternate;
}

@keyframes moveMug {
    30% {
        transform: translateX(-15px);
    }
    50% {
        transform: translateY(6px) translateX(6px);
    }
}

.hexagon-1 {
    animation: moveHexagon 3s infinite;
    animation-direction: alternate;
    animation-timing-function: ease;
    transform-origin: 75% 50%;
}

.hexagon-2 {
    animation: moveHexagon 3s infinite;
    animation-timing-function: ease;
    animation-direction: alternate;
}

@keyframes moveHexagon {
    37% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.