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

              
                <svg width="401px" height="253px" viewBox="0 0 401 253" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="logo">
    <defs>
        <polygon id="path-1" points="0 0.801672119 400.786 0.801672119 400.786 252.94 0 252.94"></polygon>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="USA_BLACK">
            <path d="M241.374,179.114 C239.411,180.522 237.928,181.909 236.884,183.281 L275.356,170.832 L275.351,165.893 L254.188,172.738 C249.194,174.469 244.915,176.597 241.374,179.114 Z M259.089,178.993 L259.089,183.232 L275.361,177.965 L275.356,173.025 L258.658,178.432 C258.852,178.57 258.993,178.752 259.089,178.993 Z M251.599,194.988 L235.112,200.322 L235.112,205.265 L251.602,199.93 L251.599,194.988 Z M144.047,213.327 L157.67,208.918 L157.663,203.977 L144.057,208.378 L144.047,213.327 Z M144.035,220.468 L157.678,216.05 L157.674,211.112 L144.043,215.521 L144.035,220.468 Z M144.02,227.61 L157.688,223.184 L157.682,218.243 L144.031,222.66 L144.02,227.61 Z M144.008,234.746 L157.698,230.316 L157.692,225.376 L144.018,229.804 L144.008,234.746 Z M259.092,190.369 L275.368,185.102 L275.362,180.16 L259.092,185.425 L259.092,190.369 Z M162.517,234.239 C160.051,234.995 157.689,234.626 157.702,233.147 L157.701,232.509 L144.004,236.944 L144.003,237.864 C143.982,240.822 145.615,242.619 148.906,243.248 C151.797,243.838 155.387,243.481 159.668,242.169 C162.699,241.24 165.591,238.191 166.668,236.492 L166.816,240.677 L181.51,235.903 L181.51,228.812 C182.049,227.255 182.775,225.343 183.902,224.032 L166.664,229.611 C166.398,231.147 164.586,233.606 162.517,234.239 Z M259.085,168.957 L275.348,163.697 L275.341,158.756 L259.082,164.021 L259.085,168.957 Z M275.378,198.027 L275.378,194.431 L259.096,199.697 L259.096,201.405 C259.101,202.79 257.876,203.893 255.423,204.694 C252.876,205.535 251.602,205.259 251.602,203.872 L251.602,202.124 L235.113,207.457 L235.114,209.423 C235.118,212.549 236.688,214.452 239.831,215.147 C242.631,215.793 246.104,215.418 250.262,214.045 C251.998,213.478 253.835,212.594 255.77,211.396 C257.701,210.199 258.813,209.215 259.103,208.447 L258.998,211.216 L284.482,202.899 L284.578,195.048 L275.378,198.027 Z M203.577,218.681 C203.275,218.479 203.004,218.222 202.753,217.931 L188.101,222.669 C188.471,222.776 188.85,222.907 189.257,223.111 C192.594,224.777 191.55,232.616 191.55,232.616 L206.632,227.897 C206.632,227.897 222.197,223.575 225.217,220.033 C228.481,216.21 229.827,212.614 229.685,209.215 L213.108,214.579 C211.667,218.041 206.899,221.172 203.577,218.681 Z M209.136,176.809 C210.83,175.612 212.351,175.708 213.779,176.489 L251.586,164.253 L251.586,161.888 C251.586,160.446 252.897,159.293 255.516,158.434 C257.893,157.646 259.079,157.906 259.079,159.211 L259.081,161.826 L275.34,156.565 L275.337,152.782 C275.34,150.124 273.233,148.701 269.04,148.521 C265.272,148.319 259.908,148.942 254.455,150.731 C249.002,152.533 245.155,154.95 241.393,157.64 C237.542,160.4 237.416,161.796 235.164,165.699 C232.932,168.822 231.44,169.911 227.479,168.78 C224.789,168.009 224.88,162.018 224.88,162.018 L205.67,168.094 C205.67,168.094 193.034,171.797 189.908,179.289 C189.11,181.194 188.732,182.958 188.676,184.61 L207.102,178.647 C207.651,177.983 208.344,177.365 209.136,176.809 Z M181.5,186.93 L181.499,176.059 L166.639,180.739 L166.656,191.738 L181.5,186.93 Z M144.074,199.045 L157.649,194.649 L157.636,183.613 L135.616,190.695 L135.695,198.47 L144.08,195.988 L144.074,199.045 Z M250.187,170.596 L251.591,170.066 L251.589,166.446 L215.789,178.031 C216.949,179.151 218.066,180.556 219.18,181.874 L225.646,179.781 C226.667,178.217 227.779,176.624 229.055,175.776 C231.416,174.595 232.485,174.864 234.587,176.403 L234.584,176.398 L250.187,170.596 Z M144.061,206.186 L157.66,201.782 L157.654,196.846 L144.069,201.239 L144.061,206.186 Z M166.691,213.134 L181.504,208.341 L181.504,203.399 L166.683,208.195 L166.691,213.134 Z M166.67,201.061 L166.68,206.003 L181.504,201.204 L181.502,196.261 L166.67,201.061 Z M166.668,198.869 L181.502,194.069 L181.502,189.126 L166.66,193.931 L166.668,198.869 Z M166.693,215.326 L166.702,220.27 L185.445,214.231 C184.672,214.128 182.139,214.503 181.516,213.26 L181.504,210.533 L166.693,215.326 Z M166.715,227.4 L201.555,216.123 C200.735,214.616 200.007,212.963 198.879,212.049 L166.706,222.458 L166.715,227.4 Z M212.802,210.426 C213.238,210.977 213.452,211.599 213.515,212.253 L229.401,207.112 C229.067,205.623 228.448,204.178 227.587,202.759 L210.622,208.249 C211.431,208.96 212.169,209.686 212.802,210.426 Z M259.095,197.504 L275.374,192.235 L275.37,187.295 L259.094,192.563 L259.095,197.504 Z M208.923,187.388 L191.557,193.01 C192.568,194.345 193.788,195.598 195.144,196.791 L214.006,190.684 C213.268,190.228 212.515,189.774 211.74,189.323 C210.626,188.673 209.703,188.029 208.923,187.388 Z M188.8,186.764 C189.033,188.346 189.581,189.82 190.368,191.199 L207.232,185.74 C205.932,184.163 205.557,182.655 205.816,181.255 L188.8,186.764 Z M197.044,198.366 C198.551,199.553 200.153,200.683 201.761,201.783 L220.969,195.57 C219.536,194.405 217.969,193.261 216.28,192.144 L197.044,198.366 Z M251.597,187.853 L235.109,193.186 L235.112,198.129 L251.597,192.795 L251.597,187.853 Z M251.595,181.894 C251.594,181.42 251.753,180.979 252.052,180.57 L235.438,185.945 C235.228,186.587 235.109,187.22 235.109,187.854 L235.109,190.992 L251.595,185.658 L251.595,181.894 Z M222.824,197.159 L203.94,203.274 C205.61,204.412 207.232,205.533 208.707,206.674 L226.355,200.964 C225.365,199.665 224.179,198.402 222.824,197.159 Z" id="Fill-1" fill="white"></path>
            <g id="Group-5">
                <mask id="mask-2" fill="white">
                    <use xlink:href="#path-1"></use>
                </mask>
                <g id="Clip-3"></g>
                <path d="M94.14,61.295 C101.351,61.295 107.194,55.448 107.194,48.241 C107.194,41.032 101.351,35.187 94.14,35.187 C86.934,35.187 81.091,41.032 81.091,48.241 C81.091,55.448 86.934,61.295 94.14,61.295" id="Fill-2" fill="white" mask="url(#mask-2)"></path>
                <path d="M72.453,77.413 C72.453,77.413 72.453,58.966 72.453,49.491 C72.453,40.024 63.076,31.393 55.838,33.571 C48.602,35.749 18.329,45.009 17.075,45.571 C15.821,46.135 0,52.26 0,69.567 L0.231,182.164 C0.231,182.164 0.924,193.471 12.692,193.241 C12.692,193.241 16.151,193.241 21.689,190.242 C21.689,190.242 35.325,182.794 36.224,182.396 C37.125,181.998 44.533,179.626 44.766,189.778 L44.766,253 L67.145,245.849 C67.145,245.849 67.145,191.598 67.145,189.778 C67.145,185.971 69.883,167.122 79.605,159.324 C80.206,158.823 84.879,155.79 89.063,161.399 C93.249,167.009 96.911,167.86 96.911,167.86 C96.911,167.86 101.425,169.849 105.448,163.017 C105.688,162.544 112.741,150.866 113.061,150.326 C113.38,149.787 114.438,148.247 117.446,148.478 C117.446,148.478 124.827,148.017 123.677,158.404 C123.677,158.404 157.997,147.991 160.821,146.404 C161.269,146.226 174.377,140.971 182.279,128.867 C182.279,128.867 184.635,125.392 187.591,125.636 C188.13,125.636 195.436,126.097 193.357,135.788 C193.357,135.788 226.596,125.616 228.431,124.712 C232.396,123.084 242.75,118.79 242.506,106.716 C242.621,103.149 241.66,96.897 236.509,92.41 C236.214,92.116 213.639,75.477 213.433,75.335 C211.465,73.657 210.44,69.875 213.664,65.874 C213.664,65.874 216.202,62.182 219.896,62.415 C219.896,62.415 222.718,62.279 227.041,67.95 C227.622,68.528 230.824,72.794 233.041,73.259 C233.041,73.259 234.896,73.851 237.195,71.643 C242.812,66.768 245.731,66.566 245.731,66.566 C245.731,66.566 253.808,64.26 253.808,73.489 C253.808,73.489 253.808,91.062 253.808,92.872 C253.808,97.12 259.389,110.103 272.036,109.486 C272.036,109.486 276.424,109.024 280.575,107.868 L294.188,103.486 C294.188,103.486 311.279,98.341 317.261,87.337 C317.261,87.337 320.09,81.8 324.185,81.798 C324.185,81.798 331.342,80.875 330.647,91.718 L350.028,85.259 L350.028,38.419 C350.028,38.419 349.485,32.882 356.025,32.882 C362.467,32.882 362.256,37.957 362.256,37.957 C362.256,37.957 362.256,132.861 362.256,134.864 C362.256,137.595 365.114,146.056 374.484,145.939 C374.484,145.939 400.786,145.714 400.786,123.328 C400.786,121.652 400.786,114.792 400.786,114.792 L394.098,117.099 L394.098,125.175 C394.098,125.175 394.521,130.628 388.327,130.944 C387.77,131.056 381.655,130.841 381.869,124.945 L381.869,6.345 C381.869,6.345 381.405,0.808 375.866,0.808 C375.866,0.808 370.788,0.348 366.87,7.272 C362.949,14.191 361.564,19.499 356.256,19.499 C356.256,19.499 349.945,20.237 350.028,14.651 L350.028,8.655 L330.185,15.115 C330.185,15.115 330.185,37.129 330.185,37.957 C330.185,43.614 325.927,71.78 318.411,71.875 C317.894,71.949 310.838,72.932 310.571,65.874 C310.571,65.874 310.556,41.737 310.571,39.342 C310.754,35.749 307.976,25.066 299.033,26.189 L290.96,27.807 C290.96,27.807 290.96,83.481 290.96,85.259 C290.96,87.036 290.326,95.496 280.809,95.872 C279.941,96.012 270.657,95.639 270.657,86.64 L270.657,49.263 C270.657,49.263 270.191,42.572 276.886,42.11 L277.116,32.42 C277.116,32.42 256.816,37.033 247.351,54.109 C246.222,55.325 243.868,56.417 242.278,56.417 C241.305,56.417 236.733,56.137 236.509,51.571 C236.522,50.495 236.509,45.339 236.509,45.339 L203.046,56.417 C203.046,56.417 189.897,60.567 189.897,73.951 C189.897,73.951 189.892,83.19 195.664,87.565 L218.974,105.104 C218.974,105.104 222.974,107.934 221.046,112.715 C220.79,113.532 218.055,119.046 212.511,119.175 C211.432,119.302 207.887,119.175 205.815,113.867 C205.815,113.867 203.97,106.947 197.975,109.024 C197.975,109.024 186.759,112.947 185.975,113.177 C185.19,113.404 178.59,114.56 178.59,106.716 C178.59,106.716 178.59,82.79 178.59,80.875 C178.59,78.96 176.216,68.017 167.051,68.411 C167.051,68.411 161.746,68.874 157.134,70.952 L157.134,82.257 C157.134,82.257 163.36,81.335 163.36,89.411 L163.36,128.405 C163.36,128.405 163.651,138.148 153.44,138.326 C144.933,138.235 143.521,130.087 143.521,129.098 C143.437,123.576 143.75,4.729 143.75,4.729 L123.445,12.577 L123.677,97.717 C123.677,97.717 122.452,125.37 114.677,136.019 C112.407,139.091 104.544,139.091 103.831,132.326 L103.831,88.487 L83.989,94.718 C83.989,94.718 83.989,109.51 83.989,112.483 C83.989,115.456 81.231,150.714 71.103,150.198 C69.817,150.232 67.092,148.82 67.063,142.767 L67.192,99.814 L47.762,106.716 C47.762,106.716 47.576,130.337 47.532,131.636 C46.934,139.219 48.001,173.397 25.381,173.397 C25.381,173.397 19.844,173.629 19.844,166.938 L19.844,71.415 C19.844,71.415 20.48,60.624 28.845,56.876 C28.845,56.876 37.412,53.825 39.226,53.184 C41.038,52.546 47.994,53.184 47.994,60.799 L47.994,85.025 L72.453,77.413" id="Fill-4" fill="white" mask="url(#mask-2)"></path>
            </g>
            <path d="M390.012,7.733 L391.202,7.733 C392.205,7.733 392.56,7.416 392.56,6.762 C392.56,6.109 392.141,5.889 391.135,5.889 L390.012,5.889 L390.012,7.733 Z M390.012,11.77 L388.638,11.77 L388.638,4.819 L391.268,4.819 C393.01,4.819 393.964,5.371 393.964,6.88 C393.964,8.153 393.19,8.655 392.289,8.739 L393.964,11.77 L392.443,11.77 L390.885,8.806 L390.012,8.806 L390.012,11.77 Z M391.118,3.395 C388.474,3.395 386.396,5.438 386.396,8.302 C386.396,11.169 388.474,13.211 391.118,13.211 C393.73,13.211 395.84,11.169 395.84,8.302 C395.84,5.438 393.73,3.395 391.118,3.395 Z M384.752,8.302 C384.752,4.534 387.75,2.089 391.118,2.089 C394.485,2.089 397.48,4.534 397.48,8.302 C397.48,12.091 394.485,14.516 391.118,14.516 C387.75,14.516 384.752,12.091 384.752,8.302 Z" id="Fill-6" fill="white"></path>
        </g>
    </g>
</svg>

<ul class="module">
	<li class="thumbnail">
		<svg width="256" height="256" viewBox="0 0 128 128">
			<defs>
				<clipPath id="clip-path-left">
						<polygon points="64 68.73508918222262 8.574 99.9935923731656 63.35810017508558 67.62284396863708 64 3.993592373165592 64.64189982491442 67.62284396863708 119.426 99.9935923731656"></polygon>
				</clipPath>
			</defs>

			<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://images.reverb.com/image/upload/s--GXIJ2xff--/a_exif,c_limit,e_unsharp_mask:80,f_auto,fl_progressive,g_south,h_1600,q_80,w_1600/v1492803147/iwr4s2txspw4skunvmyn.jpg" clip-path="url(#clip-path-left)"/>
		</svg>
		<span>Les Paul Flame Top</span>
	</li>

	<li class="thumbnail">
		<svg width="256" height="256" viewBox="0 0 128 128">
			<defs>
				<clipPath id="clip-path-right">
						<polygon points="64 68.73508918222262 8.574 99.9935923731656 63.35810017508558 67.62284396863708 64 3.993592373165592 64.64189982491442 67.62284396863708 119.426 99.9935923731656"></polygon>
				</clipPath>
			</defs>

			<image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://www.tuneyoursound.com/sites/default/files/sam_6462_0.jpg" clip-path="url(#clip-path-right)"/>
		</svg>
		<span>ES 335 Cherry</span>
	</li>
</ul>
              
            
!

CSS

              
                html,body {height: 100%;}body{width:100%;background:#9E4512;display:flex;align-items:center;flex-direction:column;justify-content: center;height: 100%;}

html,
body {
	background: #DD881F;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#logo {
	height: 84px;
	width: 84px;
}

.module {
	display: flex;
}

.thumbnail {
	height: 256px;
	position: relative;
	width: 256px;

	&:hover {
		cursor: pointer;
	}

	span {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		text-align: center;
		color: white;
		opacity: 0;
	}
}
              
            
!

JS

              
                function clipMorph(e, points, o) {
	var tl = anime.timeline({
		autoplay: false,
		duration: 200
	});

	tl.add({
		targets: e.currentTarget.children[0].childNodes[1].children[0].childNodes[1],
		points: points,
		easing: 'easeInOutSine'
	})
	.add({
		targets: e.currentTarget.children[1],
		opacity: o,
		easing: 'easeInOutSine'
	});

	return tl;
}

$('.thumbnail').each(function(i) {
	$(this).hover(function(e) {
		clipMorph(e, '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96', 1).play();
	}, function(e) {
		clipMorph(e, '64 68.73508918222262 8.574 99.9935923731656 63.35810017508558 67.62284396863708 64 3.993592373165592 64.64189982491442 67.62284396863708 119.426 99.9935923731656', 0).play();
	});
})
              
            
!
999px

Console