Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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>
	<defs>
		<clipPath id="clip-00" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="m 341.4087,58.040727 0,951.927273 -112.60986,0 -66.8335,-432.74767 0,432.74767 -107.42188,0 0,-951.927273 107.42188,0 72.02149,428.631863 0,-428.631863 107.42187,0 z" />
			<path d="m 614.54102,58.040727 73.54737,951.927273 -131.53077,0 -6.40869,-171.09997 -46.08154,0 -7.6294,171.09997 -133.05664,0 65.30762,-951.927273 185.85205,0 z M 546.48682,670.11996 Q 536.72119,508.42756 526.95557,270.88672 507.42432,543.7059 502.54151,670.11996 l 43.94531,0 z" />
			<path d="m 934.6704,58.040727 0,190.503053 -76.29394,0 0,761.42422 -128.47902,0 0,-761.42422 -75.98874,0 0,-190.503053 280.7617,0 z" />
			<path d="m 1256.0205,58.040727 0,636.186103 q 0,108.18692 -3.6621,152.28484 -3.6621,43.50995 -21.6675,89.95977 -18.0054,45.86185 -47.6074,69.96876 -29.2969,23.5188 -69.2749,23.5188 -44.2505,0 -78.125,-28.2226 -33.8745,-28.2227 -50.65919,-73.49656 -16.78469,-45.27388 -19.83647,-95.25154 -3.0517,-50.56562 -3.0517,-211.67004 l 0,-563.277533 128.47906,0 0,713.798453 q 0,62.32507 3.3568,79.96425 3.6622,17.05119 14.3433,17.05119 12.207,0 15.564,-18.81512 3.6621,-19.40309 3.6621,-90.54774 l 0,-701.451033 128.479,0 z" />
			<path d="m 1305.7642,58.040727 90.9424,0 q 90.9423,0 122.9858,13.523364 32.3486,13.523365 52.4902,69.380729 20.4468,55.26941 20.4468,176.97969 0,111.12678 -14.3433,149.34498 -14.3432,38.21821 -56.4575,45.86185 38.147,18.22714 51.2696,48.80171 13.1225,30.57455 16.1743,56.44534 3.3569,25.28282 3.3569,140.5254 l 0,251.06421 -119.3237,0 0,-316.32915 q 0,-76.43641 -6.4087,-94.66354 -6.1035,-18.22715 -32.6538,-18.22715 l 0,429.21984 -128.479,0 0,-951.927273 z m 128.479,162.868343 0,211.67006 q 21.6674,0 30.2123,-11.17148 8.8502,-11.75945 8.8502,-74.67248 l 0,-52.32955 q 0,-45.27388 -8.545,-59.38521 -8.2397,-14.11134 -30.5175,-14.11134 z" />
			<path d="m 1642.6782,58.040727 214.2334,0 0,190.503053 -85.7544,0 0,180.50751 80.2613,0 0,181.09549 -80.2613,0 0,209.31816 94.2994,0 0,190.50306 -222.7784,0 0,-951.927273 z" />
		</clipPath>
		<clipPath id="clip-01" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="m 341.4087,0.57038152 0,1084.09241848 -112.60986,0 -66.8335,-492.83018 0,492.83018 -107.42188,0 0,-1084.09241848 107.42188,0 72.02149,488.14289848 0,-488.14289848 107.42187,0 z" />
			<path d="M 614.54102,0.57038152 688.08839,1084.6628 l -131.53077,0 -6.40869,-194.85544 -46.08154,0 -7.6294,194.85544 -133.05664,0 65.30762,-1084.09241848 185.85205,0 z M 546.48682,697.63039 Q 536.72119,513.4887 526.95557,242.96781 507.42432,553.66506 502.54151,697.63039 l 43.94531,0 z" />
			<path d="m 934.6704,0.57038152 0,216.95239848 -76.29394,0 0,867.14002 -128.47902,0 0,-867.14002 -75.98874,0 0,-216.95239848 280.7617,0 z" />
			<path d="m 1256.0205,0.57038152 0,724.51385848 q 0,123.20754 -3.6621,173.428 -3.6621,49.55085 -21.6675,102.44976 -18.0054,52.2293 -47.6074,79.6832 -29.2969,26.7841 -69.2749,26.7841 -44.2505,0 -78.125,-32.141 -33.8745,-32.1411 -50.65919,-83.7008 -16.78469,-51.55968 -19.83647,-108.47621 -3.0517,-57.58613 -3.0517,-241.0582 l 0,-641.48270848 128.47906,0 0,812.90186848 q 0,70.97826 3.3568,91.06645 3.6622,19.41857 14.3433,19.41857 12.207,0 15.564,-21.4274 3.6621,-22.09701 3.6621,-103.11934 l 0,-798.84014848 128.479,0 z" />
			<path d="m 1305.7642,0.57038152 90.9424,0 q 90.9423,0 122.9858,15.40094148 32.3486,15.400942 52.4902,79.013514 20.4468,62.942983 20.4468,201.551463 0,126.55557 -14.3433,170.07996 -14.3432,43.52441 -56.4575,52.22929 38.147,20.75778 51.2696,55.57731 13.1225,34.81951 16.1743,64.28219 3.3569,28.79307 3.3569,160.03587 l 0,285.92188 -119.3237,0 0,-360.24817 q 0,-87.0488 -6.4087,-107.80658 -6.1035,-20.7578 -32.6538,-20.7578 l 0,488.81255 -128.479,0 0,-1084.09241848 z m 128.479,185.48089848 0,241.05823 q 21.6674,0 30.2123,-12.72252 8.8502,-13.39213 8.8502,-85.03997 l 0,-59.59496 q 0,-51.55968 -8.545,-67.63022 -8.2397,-16.07056 -30.5175,-16.07056 z" />
			<path d="m 1642.6782,0.57038152 214.2334,0 0,216.95239848 -85.7544,0 0,205.56909 80.2613,0 0,206.23869 -80.2613,0 0,238.37979 94.2994,0 0,216.95245 -222.7784,0 0,-1084.09241848 z" />
		</clipPath>
		<clipPath id="clip-02" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="M 0 0 L 0 1080 L 1920 1080 L 1920 0 L 0 0 z M 54.542969 58.041016 L 161.96484 58.041016 L 233.98633 486.67188 L 233.98633 58.041016 L 341.4082 58.041016 L 341.4082 1009.9688 L 228.79883 1009.9688 L 161.96484 577.2207 L 161.96484 1009.9688 L 54.542969 1009.9688 L 54.542969 58.041016 z M 428.68945 58.041016 L 614.54102 58.041016 L 688.08789 1009.9688 L 556.55859 1009.9688 L 550.14844 838.86719 L 504.06836 838.86719 L 496.4375 1009.9688 L 363.38086 1009.9688 L 428.68945 58.041016 z M 653.9082 58.041016 L 934.66992 58.041016 L 934.66992 248.54297 L 858.37695 248.54297 L 858.37695 1009.9688 L 729.89648 1009.9688 L 729.89648 248.54297 L 653.9082 248.54297 L 653.9082 58.041016 z M 962.13672 58.041016 L 1090.6152 58.041016 L 1090.6152 771.83984 C 1090.6152 813.38989 1091.7348 840.04328 1093.9727 851.80273 C 1096.4141 863.17019 1101.1937 868.85547 1108.3145 868.85547 C 1116.4525 868.85547 1121.6409 862.58248 1123.8789 850.03906 C 1126.3203 837.10367 1127.541 806.92195 1127.541 759.49219 L 1127.541 58.041016 L 1256.0195 58.041016 L 1256.0195 694.22656 C 1256.0195 766.35118 1254.8008 817.11311 1252.3594 846.51172 C 1249.918 875.51835 1242.695 905.50416 1230.6914 936.4707 C 1218.6878 967.04527 1202.8187 990.36818 1183.084 1006.4395 C 1163.5527 1022.1187 1140.4606 1029.959 1113.8086 1029.959 C 1084.3083 1029.959 1058.2666 1020.5514 1035.6836 1001.7363 C 1013.1006 982.92119 996.21323 958.42281 985.02344 928.24023 C 973.83364 898.05765 967.22202 866.30672 965.1875 832.98828 C 963.15303 799.27787 962.13672 728.72131 962.13672 621.31836 L 962.13672 58.041016 z M 1305.7637 58.041016 L 1396.707 58.041016 C 1457.3352 58.041016 1498.331 62.548877 1519.6934 71.564453 C 1541.2591 80.58003 1558.7539 103.70707 1572.1816 140.94531 C 1585.8128 177.79159 1592.6289 236.78364 1592.6289 317.92383 C 1592.6289 392.00835 1587.8474 441.79073 1578.2852 467.26953 C 1568.723 492.74834 1549.9043 508.0351 1521.8281 513.13086 C 1547.2595 525.28229 1564.3493 541.55055 1573.0977 561.93359 C 1581.846 582.31663 1587.2389 601.13171 1589.2734 618.37891 C 1591.5114 635.23412 1592.6289 682.07591 1592.6289 758.9043 L 1592.6289 1009.9688 L 1473.3066 1009.9688 L 1473.3066 693.63867 C 1473.3066 642.68107 1471.169 611.12603 1466.8965 598.97461 C 1462.8275 586.82318 1451.9443 580.74805 1434.2441 580.74805 L 1434.2441 1009.9688 L 1305.7637 1009.9688 L 1305.7637 58.041016 z M 1642.6777 58.041016 L 1856.9121 58.041016 L 1856.9121 248.54297 L 1771.1562 248.54297 L 1771.1562 429.05078 L 1851.418 429.05078 L 1851.418 610.14648 L 1771.1562 610.14648 L 1771.1562 819.46484 L 1865.457 819.46484 L 1865.457 1009.9688 L 1642.6777 1009.9688 L 1642.6777 58.041016 z M 1434.2441 220.9082 L 1434.2441 432.58008 C 1448.6891 432.58008 1458.7585 428.85586 1464.4551 421.4082 C 1470.3552 413.56857 1473.3066 388.6764 1473.3066 346.73438 L 1473.3066 294.40625 C 1473.3066 264.22366 1470.4564 244.42708 1464.7598 235.01953 C 1459.2666 225.61197 1449.096 220.9082 1434.2441 220.9082 z M 526.95508 270.88672 C 513.93424 452.76617 505.79622 585.8431 502.54102 670.11914 L 546.48633 670.11914 C 539.97591 562.32421 533.46549 429.24728 526.95508 270.88672 z" />
		</clipPath>
		<clipPath id="clip-03" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="m 286.89969,-48.196686 0,1179.620386 -122.53281,0 -72.722725,-536.25736 0,536.25736 -116.887671,0 0,-1179.620386 116.887671,0 78.367875,531.157026 0,-531.157026 116.88766,0 z" />
			<path d="m 584.09985,-48.196686 80.02821,1179.620386 -143.12098,0 -6.97341,-212.02571 -50.14215,0 -8.30169,212.02571 -144.78131,0 71.06239,-1179.620386 202.22894,0 z M 510.04886,710.28679 Q 499.4227,509.91892 488.79656,215.5603 467.54425,553.63553 462.23118,710.28679 l 47.81768,0 z" />
			<path d="m 932.43836,-48.196686 0,236.069786 -83.0168,0 0,943.5506 -139.80032,0 0,-943.5506 -82.68471,0 0,-236.069786 305.50183,0 z" />
			<path d="m 1282.1052,-48.196686 0,788.356496 q 0,134.06433 -3.9848,188.71011 -3.9848,53.91717 -23.5768,111.47738 -19.592,56.8317 -51.8025,86.7048 -31.8785,29.1442 -75.3793,29.1442 -48.1497,0 -85.0092,-34.9732 -36.8594,-34.9733 -55.12314,-91.0763 -18.26372,-56.10303 -21.58442,-118.03493 -3.32061,-62.66049 -3.32061,-262.29974 l 0,-698.008816 139.80037,0 0,884.533076 q 0,77.23271 3.6526,99.09103 3.9849,21.1297 15.6072,21.1297 13.2826,0 16.9355,-23.31554 3.9848,-24.04415 3.9848,-112.206 l 0,-869.232266 139.8003,0 z" />
			<path d="m 1336.2322,-48.196686 98.956,0 q 98.956,0 133.8231,16.75804 35.1991,16.758041 57.1155,85.976019 22.2485,68.489387 22.2485,219.311757 0,137.70738 -15.6072,185.06705 -15.6071,47.35969 -61.4324,56.83162 41.5084,22.58691 55.7874,60.47467 14.2788,37.88773 17.5995,69.9466 3.6527,31.33025 3.6527,174.13789 l 0,311.11674 -129.8382,0 0,-391.9925 q 0,-94.71936 -6.9734,-117.30627 -6.6414,-22.58694 -35.5312,-22.58694 l 0,531.88571 -139.8003,0 0,-1179.620386 z m 139.8003,201.825086 0,262.29978 q 23.5767,0 32.8745,-13.84361 9.6301,-14.57221 9.6301,-92.53351 l 0,-64.84634 q 0,-56.10301 -9.298,-73.58966 -8.9658,-17.48666 -33.2066,-17.48666 z" />
			<path d="m 1702.8343,-48.196686 233.1112,0 0,236.069786 -93.3109,0 0,223.68341 87.3338,0 0,224.41201 -87.3338,0 0,259.38532 102.6089,0 0,236.06986 -242.4092,0 0,-1179.620386 z" />
		</clipPath>
		<clipPath id="clip-04" clipPathUnits="objectBoundingBox" transform="scale(0.0005208333333333333, 0.000925925925925926)">
			<path d="m 627.19098,-2.268656 0,532.305926 -245.24327,0 -145.5509,-241.98713 0,241.98713 -233.9447844,0 0,-532.305926 233.9447844,0 156.84938,239.685626 0,-239.685626 233.94479,0 z" />
			<path d="m 1224.0372,-2.268656 160.1724,532.305926 -286.4495,0 -13.9569,-95.67698 -100.35699,0 -16.61542,95.67698 -289.77253,0 142.22781,-532.305926 404.75113,0 z M 1075.8278,339.99846 q -21.2677,-90.41638 -42.5354,-223.24628 -42.53542,152.55711 -53.16928,223.24628 l 95.70468,0 z" />
			<path d="m 1921.2192,-2.268656 0,106.526946 -166.1539,0 0,425.77898 -279.8033,0 0,-425.77898 -165.4894,0 0,-106.526946 611.4466,0 z" />
			<path d="m 626.31123,527.76119 0,396.14546 q 0,67.36674 -7.85117,94.82595 -7.85151,27.0931 -46.45387,56.0169 -38.60271,28.5576 -102.06762,43.5687 -62.81074,14.6449 -148.52115,14.6449 -94.87062,0 -167.49541,-17.5739 Q 81.297021,1097.8153 45.311615,1069.6238 9.326243,1041.4323 2.7833949,1010.3118 -3.759281,978.82519 -3.759281,878.50736 l 0,-350.74617 275.451591,0 0,444.4737 q 0,38.80911 7.19665,49.79281 7.85151,10.6176 30.75119,10.6176 26.17126,0 33.36825,-11.716 7.85151,-12.082 7.85151,-56.38296 l 0,-436.78515 275.45132,0 z" />
			<path d="m 676.95878,527.76119 232.02431,0 q 232.02391,0 313.77741,8.42084 82.5316,8.42084 133.9198,43.20255 52.1666,34.4156 52.1666,110.20313 0,69.19731 -36.5945,92.99533 -36.5945,23.79802 -144.0421,28.55762 97.3256,11.34983 130.8059,30.38824 33.4797,19.03841 41.2661,35.14784 8.5646,15.74331 8.5646,87.50348 l 0,156.33468 -304.4344,0 0,-196.97437 q 0,-47.59604 -16.3506,-58.94585 -15.5722,-11.34983 -83.3106,-11.34983 l 0,267.27005 -327.79252,0 0,-592.75371 z m 327.79252,101.41617 0,131.80441 q 55.2807,0 77.0814,-6.95635 22.5798,-7.32247 22.5798,-46.49766 l 0,-32.58498 q 0,-28.1915 -21.8012,-36.97846 -21.022,-8.78696 -77.86,-8.78696 z" />
			<path d="m 1475.2826,527.76119 459.3039,0 0,118.62397 -183.8522,0 0,112.39986 172.0753,0 0,112.766 -172.0753,0 0,130.33988 202.1723,0 0,118.624 -477.624,0 0,-592.75371 z" />
		</clipPath>
	</defs>
</svg>

<div class="video-container">
	<video loop autoplay muted playsinline>
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_bhtftq.webm" type="video/webm">
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_cibsgl.mp4" type="video/mp4">
	</video>
</div>
<div class="video-container">
	<video loop autoplay muted playsinline>
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_bhtftq.webm" type="video/webm">
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_cibsgl.mp4" type="video/mp4">
	</video>
</div>
<div class="video-container">
	<video loop autoplay muted playsinline>
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_bhtftq.webm" type="video/webm">
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_cibsgl.mp4" type="video/mp4">
	</video>
</div>
<div class="video-container">
	<video loop autoplay muted playsinline>
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_bhtftq.webm" type="video/webm">
		<source src="https://css-tricks.com/wp-content/uploads/2018/05/mt-baker_cibsgl.mp4 type="video/mp4">
	</video>
</div>


              
            
!

CSS

              
                body {
	margin: 0;
}

svg {
	width: 0;
	height: 0;
	position: absolute;
}

.video-container {
	video {
		width: 100%;
		display: block;
		
		clip-path: url(#clip-00);
	}
	
	position: relative;
	
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		clip-path: url(#clip-00);
	}
	
	&:nth-of-type(1) {
		background: #406e8d;
		&::after {
			background-color: #3f51b5;
			mix-blend-mode: screen;
		}
	}
	&:nth-of-type(2) {
		background: #406e8d;
		&::after {
			background-color: #3f51b5;
			mix-blend-mode: color;
			clip-path: url(#clip-02);
		}
	}
	&:nth-of-type(3) {
		background: #406e8d;
		&::after {
			background-color: #3f51b5;
			mix-blend-mode: multiply;
		}
	}
	&:nth-of-type(4) {
		background: #406e8d;
		&::after {
			background-color: #3f51b5;
			mix-blend-mode: color-burn;
		}
	}
}

              
            
!

JS

              
                
              
            
!
999px

Console