<h1>"Bob's your uncle"</h1>
<p><a href="https://www.instagram.com/p/Brd6aLkDeq8/" target="_blank">Illustration by thatAfro</a></p>

<div class="canvas" data-tilt data-perspective="3500" data-reverse="true" data-base="window">

	<svg class="hair" width="373px" height="338px">
		<path fill-rule="evenodd" fill="rgb(1, 16, 27)" d="M371.483,250.240 C369.491,379.490 187.400,327.143 187.400,327.143 C185.806,325.208 184.822,322.938 184.303,320.451 C165.608,323.207 17.526,342.050 1.701,250.240 C1.701,250.240 -9.324,102.639 52.976,50.184 C113.904,-1.115 183.552,0.089 186.592,0.167 C189.632,0.089 259.280,-1.115 320.208,50.184 C382.508,102.639 371.483,250.240 371.483,250.240 Z" />
	</svg>

	<svg class="ears" width="407px" height="135px">
		<path fill-rule="evenodd" fill="rgb(113, 65, 43)" d="M404.979,29.887 C404.979,29.887 389.625,89.566 389.621,105.024 C389.621,105.024 391.779,145.918 355.248,132.103 C318.716,118.288 318.704,17.440 360.367,4.272 C360.367,4.272 414.495,-13.888 404.979,29.887 ZM16.876,105.024 C16.872,89.566 1.518,29.887 1.518,29.887 C-7.997,-13.888 46.130,4.272 46.130,4.272 C87.793,17.440 87.781,118.288 51.250,132.103 C14.718,145.918 16.876,105.024 16.876,105.024 Z" />
	</svg>

	<svg class="face" width="327px" height="458px">
		<path fill-rule="evenodd" fill="rgb(154, 97, 70)" d="M326.650,206.640 C326.007,258.921 322.497,308.452 306.024,341.246 C306.024,341.246 294.926,432.429 231.768,434.794 C231.768,434.794 208.027,463.756 163.472,456.409 C118.917,463.756 95.175,434.794 95.175,434.794 C32.017,432.429 20.920,341.246 20.920,341.246 C4.446,308.452 0.937,258.921 0.293,206.640 C-0.048,178.946 17.482,136.478 17.482,136.478 C12.006,78.925 28.483,28.118 28.483,28.118 C51.673,-10.878 146.781,1.776 163.472,4.328 C180.162,1.776 275.270,-10.878 298.461,28.118 C298.461,28.118 314.937,78.925 309.462,136.478 C309.462,136.478 326.991,178.946 326.650,206.640 Z" />
	</svg>

	<svg class="wringles" width="195.063px" height="296.063px">
		<path fill-rule="evenodd" stroke="rgb(113, 65, 43)" stroke-width="2.032px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M161.790,227.409 C161.790,227.409 193.815,255.893 191.532,290.836 " />
		<path fill-rule="evenodd" stroke="rgb(113, 65, 43)" stroke-width="2.032px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M35.754,229.604 C35.754,229.604 3.729,258.088 6.013,293.032 " />
		<path fill-rule="evenodd" stroke="rgb(113, 65, 43)" stroke-width="3.047px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M2.112,30.052 C2.112,30.052 48.492,15.342 72.078,27.612 C95.664,39.883 111.841,32.165 126.198,26.880 C140.554,21.596 174.269,17.748 188.606,26.148 " />
		<path fill-rule="evenodd" stroke="rgb(113, 65, 43)" stroke-width="3.047px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M2.112,10.536 C2.112,10.536 48.492,-4.175 72.078,8.096 C95.664,20.367 111.841,12.649 126.198,7.364 C140.554,2.080 174.269,-1.768 188.606,6.632 " />
	</svg>

	<svg class="lips" width="135px" height="39px">
		<path fill-rule="evenodd" fill="rgb(113, 65, 43)" d="M103.256,35.468 C94.968,38.395 74.978,38.395 67.664,38.395 C60.351,38.395 40.360,38.395 32.072,35.468 C23.783,32.540 0.380,15.464 0.380,15.464 C21.833,-6.980 67.664,1.802 67.664,1.802 C67.664,1.802 113.495,-6.980 134.948,15.464 C134.948,15.464 111.545,32.540 103.256,35.468 Z" />
		<path fill-rule="evenodd" fill="rgb(87, 47, 28)" d="M67.001,17.980 L67.000,18.000 C66.706,18.000 66.364,17.997 66.004,17.994 C65.639,17.997 65.294,18.000 65.000,18.000 L65.003,17.980 C50.706,17.748 0.380,15.464 0.380,15.464 C21.833,-6.980 67.664,1.802 67.664,1.802 C67.664,1.802 113.495,-6.980 134.948,15.464 C134.948,15.464 81.568,17.750 67.001,17.980 Z" />
	</svg>

	<svg class="beard" width="25px" height="39px">
		<path fill-rule="evenodd" fill="rgb(1, 16, 27)" d="M12.664,38.484 L0.719,37.752 L2.913,1.159 L12.664,0.915 L22.415,1.159 L24.609,37.752 L12.664,38.484 Z" />
	</svg>

	<svg class="nose" width="117px" height="40px">
		<path fill-rule="evenodd" fill="rgb(113, 65, 43)" d="M106.202,30.619 C100.745,33.408 77.679,37.206 77.679,37.206 C70.355,40.513 62.287,39.834 58.664,39.278 C55.042,39.834 46.973,40.513 39.649,37.206 C39.649,37.206 16.583,33.408 11.126,30.619 C5.769,27.880 -15.968,0.834 25.346,0.370 C17.418,0.579 -6.906,3.049 9.420,26.228 C9.420,26.228 28.922,13.929 44.768,31.595 C44.768,31.595 50.845,37.901 56.994,38.976 C56.811,38.937 56.714,38.913 56.714,38.913 C56.900,38.959 57.088,38.993 57.277,39.024 C57.661,39.081 58.044,39.115 58.426,39.127 C58.506,39.129 58.585,39.133 58.664,39.133 C58.743,39.133 58.822,39.129 58.902,39.127 C59.284,39.115 59.667,39.081 60.051,39.024 C60.240,38.993 60.428,38.959 60.614,38.913 C60.614,38.913 60.517,38.937 60.334,38.976 C66.484,37.900 72.560,31.595 72.560,31.595 C88.406,13.929 107.908,26.228 107.908,26.228 C124.234,3.049 99.910,0.579 91.982,0.370 C133.296,0.834 111.559,27.880 106.202,30.619 ZM27.704,0.369 C26.894,0.359 26.112,0.361 25.346,0.370 C26.800,0.331 27.704,0.369 27.704,0.369 ZM89.625,0.369 C89.625,0.369 90.528,0.331 91.982,0.370 C91.216,0.361 90.434,0.359 89.625,0.369 Z" />
	</svg>

	<svg class="eyes" width="205px" height="37px">
		<path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M170.000,33.000 C151.285,33.000 135.719,21.250 135.719,14.379 C135.719,7.508 150.890,1.937 169.605,1.937 C188.320,1.937 203.491,7.508 203.491,14.379 C203.491,21.250 188.715,33.000 170.000,33.000 ZM35.000,33.000 C16.285,33.000 0.907,21.250 0.907,14.379 C0.907,7.508 16.078,1.937 34.793,1.937 C53.507,1.937 68.679,7.508 68.679,14.379 C68.679,21.250 53.715,33.000 35.000,33.000 Z" />
		<path fill-rule="evenodd" fill="rgb(48, 20, 7)" d="M34.172,1.906 C42.724,1.906 49.656,8.846 49.656,17.406 C49.656,25.967 42.724,32.906 34.172,32.906 C25.620,32.906 18.688,25.967 18.688,17.406 C18.688,8.846 25.620,1.906 34.172,1.906 Z" />
		<path fill-rule="evenodd" fill="rgb(4, 1, 0)" d="M34.188,11.656 C37.346,11.656 39.906,14.224 39.906,17.391 C39.906,20.558 37.346,23.125 34.188,23.125 C31.029,23.125 28.469,20.558 28.469,17.391 C28.469,14.224 31.029,11.656 34.188,11.656 Z" />
		<path fill-rule="evenodd" opacity="0.502" fill="rgb(75, 47, 35)" d="M38.203,9.469 C40.352,9.469 42.094,11.218 42.094,13.375 C42.094,15.532 40.352,17.281 38.203,17.281 C36.054,17.281 34.312,15.532 34.312,13.375 C34.312,11.218 36.054,9.469 38.203,9.469 Z" />
		<path fill-rule="evenodd" fill="rgb(48, 20, 7)" d="M169.484,1.906 C178.036,1.906 184.969,8.846 184.969,17.406 C184.969,25.967 178.036,32.906 169.484,32.906 C160.933,32.906 154.000,25.967 154.000,17.406 C154.000,8.846 160.933,1.906 169.484,1.906 Z" />
		<path fill-rule="evenodd" fill="rgb(4, 1, 0)" d="M169.484,11.656 C172.651,11.656 175.219,14.224 175.219,17.391 C175.219,20.558 172.651,23.125 169.484,23.125 C166.317,23.125 163.750,20.558 163.750,17.391 C163.750,14.224 166.317,11.656 169.484,11.656 Z" />
		<path fill-rule="evenodd" opacity="0.502" fill="rgb(75, 47, 35)" d="M173.500,9.469 C175.657,9.469 177.406,11.218 177.406,13.375 C177.406,15.532 175.657,17.281 173.500,17.281 C171.343,17.281 169.594,15.532 169.594,13.375 C169.594,11.218 171.343,9.469 173.500,9.469 Z" />
		<path class="eye_lids" fill-rule="evenodd" d="M170.275,37.000 C150.877,37.000 134.741,23.004 134.741,14.820 C134.741,6.635 150.467,-0.000 169.866,-0.000 C189.265,-0.000 204.991,6.635 204.991,14.820 C204.991,23.004 189.674,37.000 170.275,37.000 ZM36.275,37.000 C16.877,37.000 0.741,23.004 0.741,14.820 C0.741,6.635 16.467,-0.000 35.866,-0.000 C55.265,-0.000 70.991,6.635 70.991,14.820 C70.991,23.004 55.674,37.000 36.275,37.000 Z" />
	</svg>

	<svg class="glasses" width="275px" height="69px">
		<path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M272.720,29.111 C272.720,29.111 265.944,56.697 256.387,60.093 C256.387,60.093 211.287,77.182 174.475,62.288 C174.475,62.288 150.787,45.605 150.585,26.183 C150.585,26.183 146.107,19.127 137.664,20.816 C129.221,19.127 124.744,26.183 124.744,26.183 C124.541,45.605 100.853,62.288 100.853,62.288 C64.041,77.182 18.941,60.093 18.941,60.093 C9.384,56.697 2.608,29.111 2.608,29.111 L0.658,6.423 C46.673,-8.943 137.664,9.351 137.664,9.351 C137.664,9.351 228.655,-8.943 274.670,6.423 L272.720,29.111 ZM101.584,9.839 C101.584,9.839 54.049,-1.636 13.091,11.302 C13.091,11.302 -1.607,25.991 18.698,54.238 C18.698,54.238 51.464,68.883 86.469,61.556 C86.469,61.556 114.214,58.101 117.186,29.599 C117.186,29.599 118.347,12.786 101.584,9.839 ZM262.237,11.302 C221.279,-1.636 173.744,9.839 173.744,9.839 C156.981,12.786 158.142,29.599 158.142,29.599 C161.114,58.101 188.859,61.556 188.859,61.556 C223.864,68.883 256.630,54.238 256.630,54.238 C276.935,25.991 262.237,11.302 262.237,11.302 Z" />
		<path fill-rule="evenodd" opacity="0.302" fill="rgb(0, 0, 0)" d="M256.630,54.238 C256.630,54.238 223.864,68.883 188.859,61.556 C188.859,61.556 161.114,58.101 158.142,29.599 C158.142,29.599 156.981,12.786 173.744,9.839 C173.744,9.839 221.279,-1.636 262.237,11.302 C262.237,11.302 276.935,25.991 256.630,54.238 ZM86.469,61.556 C51.464,68.883 18.698,54.238 18.698,54.238 C-1.607,25.991 13.091,11.302 13.091,11.302 C54.049,-1.636 101.584,9.839 101.584,9.839 C118.347,12.786 117.186,29.599 117.186,29.599 C114.214,58.101 86.469,61.556 86.469,61.556 Z" />
	</svg>

	<svg class="eyebrows" width="257px" height="40px">
		<path fill-rule="evenodd" fill="rgb(1, 16, 27)" d="M162.600,5.437 C162.600,5.437 146.397,18.831 168.694,20.806 C190.991,22.782 244.329,23.588 253.775,37.639 C263.220,51.690 255.053,-18.102 162.600,5.437 Z" />
		<path fill-rule="evenodd" fill="rgb(1, 16, 27)" d="M95.072,5.437 C95.072,5.437 111.274,18.831 88.977,20.806 C66.680,22.782 13.342,23.588 3.897,37.639 C-5.549,51.690 2.618,-18.102 95.072,5.437 Z" />
	</svg>

</div>
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Redressed&display=swap");

body {
	background-color: #02020f;
	color: white;
	font-size: 65.2%;
	text-align: center;
	overflow-x: hidden; /* Hide horizontal scrollbar */
	h1 {
		font-family: "Redressed";
		font-size: 5em;
		margin-bottom: 0;
	}
	p {
		font-family: "Redressed";
		font-size: 3em;
		margin-top: 0;
	}
	a {
		color: white;
		text-decoration: none;
		transition: all 0.5s;
		&:hover {
			color: #b41818;
		}
	}
}

// The artwork
.canvas {
	max-height: 600px;
	height: 100%;
	transform-style: preserve-3d;
	position: relative;

	svg {
		// centre svg
		display: block;
		margin-left: auto;
		margin-right: auto;
		& {
			position: relative;
			&.hair {
				//empty because it seats at far back
			}
			&.ears {
				top: -110px;
				transform: translateZ(40px);
			}
			&.face {
				top: -380px;
				transform: translateZ(60px);
			}
			&.wringles {
				top: -780px;
				transform: translateZ(80px);
			}
			&.lips {
				top: -765px;
				transform: translateZ(140px);
			}
			&.beard {
				top: -860px;
				transform: translateZ(120px);
			}
			&.nose {
				top: -950px;
				transform: translateZ(140px);
			}
			&.eyes {
				top: -1070px;
				transform: translateZ(100px);
				.eye_lids {
					fill: rgba(87, 47, 28, 0);
					animation: blink 5s infinite;
					animation-fill-mode: forwards;
				}
				@keyframes blink {
					0% {
						fill: rgba(87, 47, 28, 0);
					}
					5% {
						fill: rgba(87, 47, 28, 1);
					}
					7% {
						fill: rgba(87, 47, 28, 0);
					}
				}
			}
			&.glasses {
				top: -1120px;
				transform: translateZ(140px);
			}
			&.eyebrows {
				top: -1230px;
				transform: translateZ(100px);
			}
		}
	}
}
View Compiled
// https://universal-tilt-js.github.io/universal-tilt.js/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://unpkg.com/universal-tilt.js@2.0.6/lib/universal-tilt.min.js