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 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

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

              
                <div id="container">
	<div id="mtv-logo">
		<svg id="masked-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 740 577" version="1.1">

			<mask id="mtv-logo-inner">
				<polygon fill="#FFFFFF" points="598.458238 499.5 384.794636 499.5 384.794636 277 301.230651 349 231.177011 278 231.177011 499.5 10.0076628 499.5 10.0076628 10 228.675096 10 301.230651 90.5 382.29272 10 598.458238 10" />
			</mask>

			<polygon class="outline" xmlns="http://www.w3.org/2000/svg" points="653 29 606.464368 1.50071622e-12 378.289655 1.50071622e-12 330.188211 47.9634393 312.684466 37.0450828 233.178544 1.50071622e-12 0 1.50071622e-12 0 509 240.684291 509 280.714943 475.5 280.714943 343 300.730268 362.5 375.287356 345.5 375.287356 509 607.465134 509 653 475.5" />

			<image id="mask-img" xmlns:xlink="http://www.w3.org/1999/xlink" href="https://mir-s3-cdn-cf.behance.net/project_modules/fs/db5d8d28008799.56e41b3381d42.gif" mask="url(#mtv-logo-inner)"></image>

			<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
				<path class="outline" d="M10.3493026,577 L10.3493026,536.581173 L18.3274712,577 L27.6725288,577 L35.6785931,536.581173 L35.6785931,577 L46,577 L46,524 L29.4299576,524 L23.0418435,556.248295 L16.6258338,524 L0,524 L0,577 L10.3493026,577 Z M74.5131673,577 C77.9366548,577 80.8697509,576.408847 83.3124555,575.226542 C85.0704626,574.382038 86.7498221,572.91622 88.3505338,570.829088 C89.9512456,568.741957 91.1263345,566.30496 91.8758007,563.518097 C92.6252669,560.731233 93,557.769437 93,554.632708 L93,554.632708 L93,523 L80.4533808,523 L80.4533808,555.392761 C80.4533808,558.336461 79.8380783,560.61059 78.6074733,562.215147 C77.3768683,563.819705 75.6790036,564.621984 73.513879,564.621984 C71.3302491,564.621984 69.6231317,563.807641 68.3925267,562.178954 C67.1619217,560.550268 66.5466192,558.288204 66.5466192,555.392761 L66.5466192,555.392761 L66.5466192,523 L54,523 L54,554.632708 C54,557.238606 54.3886121,560.230563 55.1658363,563.608579 C55.6469751,565.707775 56.5398577,567.746649 57.844484,569.725201 C59.1491103,571.703753 60.5879004,573.229893 62.1608541,574.303619 C63.7338078,575.377346 65.6907473,576.095174 68.0316726,576.457105 C70.3725979,576.819035 72.5330961,577 74.5131673,577 Z M117.945113,577 C121.895489,577 125.168922,576.269789 127.765414,574.809367 C130.361905,573.348945 132.383459,571.205805 133.830075,568.379947 C135.276692,565.55409 136,562.467018 136,559.118734 C136,556.269129 135.457519,553.692612 134.372556,551.389182 C133.287594,549.085752 131.553509,547.156332 129.170301,545.600923 C126.787093,544.045515 122.841353,542.507916 117.333083,540.988127 C115.107519,540.394459 113.697995,539.753298 113.104511,539.064644 C112.492481,538.399736 112.186466,537.651715 112.186466,536.82058 C112.186466,535.680739 112.557393,534.713061 113.299248,533.917546 C114.041103,533.122032 115.144612,532.724274 116.609774,532.724274 C118.390226,532.724274 119.78584,533.258575 120.796617,534.327177 C121.807393,535.395778 122.470426,537.105541 122.785714,539.456464 L122.785714,539.456464 L134.664662,538.565963 C134.145363,533.151715 132.51792,529.203826 129.782331,526.722296 C127.046742,524.240765 123.073183,523 117.861654,523 C113.614536,523 110.271554,523.682718 107.832707,525.048153 C105.39386,526.413588 103.567043,528.289578 102.352256,530.676121 C101.137469,533.062665 100.530075,535.597625 100.530075,538.281003 C100.530075,542.365435 101.717043,545.725594 104.090977,548.361478 C106.446366,550.997361 110.387469,553.110818 115.914286,554.701847 C119.289724,555.651715 121.441103,556.66095 122.368421,557.729551 C123.295739,558.798153 123.759398,560.009235 123.759398,561.362797 C123.759398,562.787599 123.272556,564.040237 122.298872,565.120712 C121.325188,566.201187 119.938847,566.741425 118.13985,566.741425 C115.728822,566.741425 113.874185,565.684697 112.57594,563.57124 C111.778446,562.265172 111.249875,560.365435 110.990226,557.872032 L110.990226,557.872032 L99,558.833773 C99.352381,564.105541 100.86391,568.451187 103.534586,571.870712 C106.205263,575.290237 111.008772,577 117.945113,577 Z M156,577 L156,524 L143,524 L143,577 L156,577 Z M184.374474,577 C188.058439,577 191.092567,576.323665 193.476858,574.970995 C195.86115,573.618326 197.85741,571.613052 199.465638,568.955175 C201.073866,566.297297 202.251987,562.986816 203,559.023731 L203,559.023731 L191.863955,554.752142 C191.302945,558.050758 190.400655,560.566249 189.157083,562.298616 C187.913511,564.030982 186.076204,564.897165 183.645161,564.897165 C181.139317,564.897165 179.194483,563.823336 177.810659,561.675676 C176.426835,559.528016 175.734923,555.558998 175.734923,549.768622 C175.734923,545.093606 176.314633,541.664469 177.474053,539.481213 C179.00748,536.538563 181.214119,535.067238 184.093969,535.067238 C185.365591,535.067238 186.515662,535.399473 187.54418,536.063942 C188.572698,536.728411 189.442263,537.677653 190.152875,538.911668 C190.582983,539.64733 190.99439,540.810152 191.387097,542.400132 L191.387097,542.400132 L202.607293,539.232037 C201.167368,533.726434 198.965404,529.644693 196.001403,526.986816 C193.037401,524.328939 188.965404,523 183.785414,523 C177.165498,523 172.046283,525.31971 168.42777,529.95913 C164.809257,534.59855 163,541.23731 163,549.875412 C163,556.353988 164.028518,561.669743 166.085554,565.822676 C168.14259,569.97561 170.587658,572.87673 173.420757,574.526038 C176.253857,576.175346 179.905096,577 184.374474,577 Z M251.250545,577 L251.250545,537.087312 L264,537.087312 L264,524 L226,524 L226,537.087312 L238.749455,537.087312 L238.749455,577 L251.250545,577 Z M304,577 L304,564.997271 L282.488673,564.997271 L282.488673,554.549113 L301.881877,554.549113 L301.881877,543.739427 L282.488673,543.739427 L282.488673,535.315825 L303.394822,535.315825 L303.394822,524 L270,524 L270,577 L304,577 Z M343,577 L343,563.94884 L323.496552,563.94884 L323.496552,524 L311,524 L311,577 L343,577 Z M383,577 L383,564.997271 L361.488673,564.997271 L361.488673,554.549113 L380.881877,554.549113 L380.881877,543.739427 L361.488673,543.739427 L361.488673,535.315825 L382.394822,535.315825 L382.394822,524 L349,524 L349,577 L383,577 Z M414.936438,577 L430,524 L417.262429,524 L408.263059,562.141201 L399.125236,524 L386,524 L401.340466,577 L414.936438,577 Z M448,577 L448,524 L435,524 L435,577 L448,577 Z M473.945113,577 C477.895489,577 481.168922,576.269789 483.765414,574.809367 C486.361905,573.348945 488.383459,571.205805 489.830075,568.379947 C491.276692,565.55409 492,562.467018 492,559.118734 C492,556.269129 491.457519,553.692612 490.372556,551.389182 C489.287594,549.085752 487.553509,547.156332 485.170301,545.600923 C482.787093,544.045515 478.841353,542.507916 473.333083,540.988127 C471.107519,540.394459 469.697995,539.753298 469.104511,539.064644 C468.492481,538.399736 468.186466,537.651715 468.186466,536.82058 C468.186466,535.680739 468.557393,534.713061 469.299248,533.917546 C470.041103,533.122032 471.144612,532.724274 472.609774,532.724274 C474.390226,532.724274 475.78584,533.258575 476.796617,534.327177 C477.807393,535.395778 478.470426,537.105541 478.785714,539.456464 L478.785714,539.456464 L490.664662,538.565963 C490.145363,533.151715 488.51792,529.203826 485.782331,526.722296 C483.046742,524.240765 479.073183,523 473.861654,523 C469.614536,523 466.271554,523.682718 463.832707,525.048153 C461.39386,526.413588 459.567043,528.289578 458.352256,530.676121 C457.137469,533.062665 456.530075,535.597625 456.530075,538.281003 C456.530075,542.365435 457.717043,545.725594 460.090977,548.361478 C462.446366,550.997361 466.387469,553.110818 471.914286,554.701847 C475.289724,555.651715 477.441103,556.66095 478.368421,557.729551 C479.295739,558.798153 479.759398,560.009235 479.759398,561.362797 C479.759398,562.787599 479.272556,564.040237 478.298872,565.120712 C477.325188,566.201187 475.938847,566.741425 474.13985,566.741425 C471.728822,566.741425 469.874185,565.684697 468.57594,563.57124 C467.778446,562.265172 467.249875,560.365435 466.990226,557.872032 L466.990226,557.872032 L455,558.833773 C455.352381,564.105541 456.86391,568.451187 459.534586,571.870712 C462.205263,575.290237 467.008772,577 473.945113,577 Z M511,577 L511,524 L498,524 L498,577 L511,577 Z M540.428571,577 C544.926267,577 548.682028,575.913588 551.695853,573.740765 C554.709677,571.567942 557.013825,568.528364 558.608295,564.622032 C560.202765,560.715699 561,555.711082 561,549.608179 C561,541.201847 559.175115,534.665567 555.525346,529.99934 C551.875576,525.333113 546.677419,523 539.930876,523 C533.35023,523 528.21659,525.37467 524.529954,530.124011 C520.843318,534.873351 519,541.510554 519,550.03562 C519,556.138522 519.930876,561.220317 521.792627,565.281003 C523.654378,569.341689 526.082949,572.310026 529.078341,574.186016 C532.073733,576.062005 535.857143,577 540.428571,577 Z M539.513866,566 C536.888526,566 534.813214,564.83693 533.287928,562.510791 C531.762643,560.184652 531,556.359712 531,551.035971 C531,545.664269 531.767265,541.815348 533.301794,539.489209 C534.836324,537.16307 536.870038,536 539.402936,536 C542.046765,536 544.140566,537.145084 545.684339,539.435252 C547.228113,541.72542 548,545.352518 548,550.316547 C548,556.215827 547.260468,560.304556 545.781403,562.582734 C544.302338,564.860911 542.213159,566 539.513866,566 Z M579.850214,577 L579.850214,547.896999 L595.121969,577 L607,577 L607,524 L595.121969,524 L595.121969,553.319918 L579.766762,524 L568,524 L568,577 L579.850214,577 Z" id="MUSICTELEVISION" fill="#000000" fill-rule="nonzero" />
				<path class="colors" d="M401.159595,141.165653 C407.06541,135.614779 411.807586,132.749925 419.860758,132.213422 C429.256319,131.67575 435.967101,132.213422 442.230419,141.165653 C442.767842,141.88099 483.392372,125.946042 497.618901,106.340902 C512.652734,85.661587 560.256757,112.607113 528.042902,138.479633 C514.621339,149.311377 483.482332,155.667589 458.336762,172.497877 C452.969539,176.079237 469.96964,289.593386 461.021542,373.654823 C460.485287,378.220356 465.764887,399.168506 468.179787,412.955105 C472.65442,438.917627 465.496175,451.450049 445.810126,454.1349 C427.735178,456.553253 415.476085,455.926749 410.106525,424.593356 C406.97545,406.778896 402.94828,381.711714 407.422913,359.331721 C420.754516,292.279406 404.738133,206.427288 398.474815,208.217968 C366.260961,217.437866 360.713817,225.67476 339.506626,241.340872 C320.805463,255.03747 317.136965,288.698046 295.661062,281.536495 C284.206936,277.7763 274.096367,263.274364 277.764866,249.397763 C281.164652,236.865341 292.440027,234.090489 304.60916,229.70379 C329.663601,220.75039 335.211913,205.353114 356.419104,192.104186 C369.751875,183.867292 389.526717,176.079237 391.315402,172.497877 C394.178933,166.679336 391.764033,149.93905 401.159595,141.165653 Z" stroke="#000000" stroke-width="6.12" fill="" />
				<path class="colors" d="M533.755164,250.966475 C537.234716,265.735827 543.327055,307.439396 560.727085,265.735827 C591.439837,191.974143 619.978295,164.606601 663.221068,103.530451 C668.962385,95.3630671 670.355115,89.0208668 678.010583,82.6786664 C691.149497,71.8183147 705.41759,64.4336385 720.556991,72.2527741 C739.438358,81.9833044 739.698501,109.958863 728.388538,126.031593 C716.206131,143.407702 695.412885,146.014459 687.582474,155.571432 C649.559596,201.965575 635.030224,233.329463 605.882873,285.718693 C597.878655,300.140932 591.527309,307.525608 585.872327,322.990322 C579.78226,339.931972 579.78226,344.709891 577.171744,368.168432 C575.692679,381.461984 572.822021,395.015304 557.247534,396.752007 C534.626472,399.358764 523.749323,380.940179 518.094341,363.824972 C497.213623,300.48918 478.159585,218.907225 479.028621,207.612414 C479.898793,195.884277 489.904634,188.585813 501.563347,187.630682 C513.918425,186.674418 525.229524,193.71198 527.666232,205.87571 C529.40544,214.563765 530.971977,239.237204 533.755164,250.966475 Z" stroke="#000000" stroke-width="6.12" fill="" />
			</g>
		</svg>

	</div>
</div>
              
            
!

CSS

              
                *,
*:before,
*:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

*:before,
*:after {
	position: absolute;
	content: "";
}

:root {
	--logo-width: 40vw;
	--stroke-color: #193eda;
}

html {
	background-color: #dad2f3;
	background-image: linear-gradient(315deg, #fba8a4 0%, #dad2f3 74%);
}

body {
	background: ;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;
	background: url(https://mir-s3-cdn-cf.behance.net/project_modules/fs/4e0cc328008799.56e41b35c50a5.gif)
		center center / cover no-repeat;
}

svg image {
	width: auto;
	height: 100%;
}

#mtv-logo {
	position: relative;
	width: calc(var(--logo-width) - calc(var(--logo-width) / 5.6));
	height: calc(var(--logo-width) / 1.28);
	max-height: 80vh;
}

#mtv-logo svg {
	position: absolute;
	width: var(--logo-width);
	height: inherit;
	max-height: 80vh;
}

.colors {
	fill: #dfcefd;
	stroke: var(--stroke-color);
}

.outline {
	fill: var(--stroke-color);
}

              
            
!

JS

              
                $(document).ready(function () {
	$("body").hide(0).delay(500).fadeIn(1000);
	var gifLogo = [
		"https://mir-s3-cdn-cf.behance.net/project_modules/fs/4e0cc328008799.56e41b35c50a5.gif",
		"https://mir-s3-cdn-cf.behance.net/project_modules/1400_opt_1/d15e9128008799.56e41b36a8e6f.gif",
		"https://mir-s3-cdn-cf.behance.net/project_modules/fs/47171428008799.56e41b3897dfb.gif",
		"https://mir-s3-cdn-cf.behance.net/project_modules/fs/18f1e128008799.56e41b39392b1.gif",
		"https://mir-s3-cdn-cf.behance.net/project_modules/fs/7142c728008799.56e41b32d9084.gif"
	];

	var gifBg = [
		"https://mir-s3-cdn-cf.behance.net/project_modules/fs/21166e28008799.56e41b34c3e64.gif",
		"https://mir-s3-cdn-cf.behance.net/project_modules/fs/4c032e28008799.56e41b3bbd979.gif",
		"https://mir-s3-cdn-cf.behance.net/project_modules/fs/4e0cc328008799.56e41b35c50a5.gif",
		"https://mir-s3-cdn-cf.behance.net/project_modules/fs/7142c728008799.56e41b32d9084.gif",
		"https://mir-s3-cdn-cf.behance.net/project_modules/fs/56442f28008799.56e41b3d5f421.gif"
	];

	var tvColor = ["#E05AD6", "#19FCDF", "#FFCB05", "#FDB5F9", "#1685f8"];
	var strokeColor = ["#2a2569", "#BF85FE", "#1685f8", "#215BD0", "#403566"];

	(counter = 0),
		(timer = setInterval(function () {
			var selectedLogo = gifLogo[counter];
			var selectedBG = gifBg[counter];
			var selectedFill = tvColor[counter];
			var selectedStroke = strokeColor[counter];
			$("#mask-img").attr("href", selectedLogo);
			$("body").css({
				background: "url('" + selectedBG + "') center center / cover no-repeat"
			});
			$(".colors").css({
				fill: selectedFill
			});
			$(":root").get(0).style.setProperty("--stroke-color", selectedStroke);
			counter++;

			if (counter === gifLogo.length) {
				counter = 0;
			}
		}, 2000));
});

              
            
!
999px

Console