113 lines
5.2 KiB
HTML
113 lines
5.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" >
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Customisable Netflix Logo Animation</title>
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="netflix-container"><svg width="867" height="233" viewBox="0 0 867 233" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g id="N">
|
||
|
|
<path id="N1-base" class="base" d="M0 232.8L37 227.8V101.6L35.1 0H0V232.8Z" />
|
||
|
|
<path id="N1-shadow" d="M0 232.8L37 227.8V101.6L35.1 0H0V232.8Z" fill="url(#N1-shadowFill)" />
|
||
|
|
<path id="N3-base" class="base" d="M82.6 0H119V218.4L82.6 222.3V0Z" />
|
||
|
|
<path id="N3-shadow" d="M82.6 0H119V218.4L82.6 222.3V0Z" fill="url(#N3-shadowFill" />
|
||
|
|
<path id="N2" class="base" d="M79.2 222.7L119 218.4L35.1 0H0L79.2 222.7Z" />
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="N1-shadowFill" x1="50%" y1="0%" x2="50%" y2="100%" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop class="shadow-start" offset="0%" />
|
||
|
|
<stop class="shadow-end" offset="100%" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="N3-shadowFill" x1="50%" y1="100%" x2="50%" y2="0%" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop class="shadow-start" offset="0%" />
|
||
|
|
<stop class="shadow-end" offset="100%" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</g>
|
||
|
|
<g id="E">
|
||
|
|
<path id="E1-base" class="base" d="M255.1 171.6V208.2L153.6 215.8V178.5L255.1 171.6Z" />
|
||
|
|
<path id="E1-shadow" d="M255.1 171.6V208.2L153.6 215.8V178.5L255.1 171.6Z" fill="url(#E1-shadowFill)" />
|
||
|
|
<path id="E4" class="base" d="M239.9 85.2V121.2L153.6 121.5V85.6L239.9 85.2Z" />
|
||
|
|
<path id="E2-base" class="base" d="M190.1 213.1L153.6 215.8V0H190.1V213.1Z" />
|
||
|
|
<path id="E2-shadow" d="M190.1 213.1L153.6 215.8V0H190.1V213.1Z" fill="url(#E2-shadowFill)" />
|
||
|
|
<path id="E3" class="base" d="M255 0H153.6V36.4H255V0Z" />
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="E1-shadowFill" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
|
||
|
|
<stop class="shadow-start" offset="0%" />
|
||
|
|
<stop class="shadow-end" offset="100%" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="E2-shadowFill" x1="50%" y1="0%" x2="50%" y2="40%" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop class="shadow-start" offset="0%" />
|
||
|
|
<stop class="shadow-end" offset="100%" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</g>
|
||
|
|
<g id="T">
|
||
|
|
<path id="T2-base" class="base" d="M317 0V204.6L353.4 203.2V0H317Z" />
|
||
|
|
<path id="T2-shadow" d="M317 0V204.6L353.4 203.2V0H317Z" fill="url(#T2-shadowFill)" />
|
||
|
|
<path id="T1" class="base" d="M391.7 0H278.7V36.4H391.7V0Z" />
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="T2-shadowFill" x1="50%" y1="0%" x2="50%" y2="100%" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop class="shadow-start" offset="0%" />
|
||
|
|
<stop class="shadow-end" offset="100%" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</g>
|
||
|
|
<g id="F">
|
||
|
|
<path id="F3" class="base" d="M501 84H415V120H501V84Z" />
|
||
|
|
<path id="F2-base" class="base" d="M414.8 0V202.2H451.8V0H414.8Z" />
|
||
|
|
<path id="F2-shadow" d="M414.8 0V202.2H451.8V0H414.8Z" fill="url(#F2-shadowFill)" />
|
||
|
|
<path id="F1" class="base" d="M516.8 0H414.8V36.4H516.8V0Z" />
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="F2-shadowFill" x1="50%" y1="0%" x2="50%" y2="40%" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop class="shadow-start" offset="0%" />
|
||
|
|
<stop class="shadow-end" offset="100%" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</g>
|
||
|
|
<g id="L">
|
||
|
|
<path id="L1-base" class="base" d="M540.5 0H576.9V205.9L540.5 204.1V0Z" />
|
||
|
|
<path id="L1-shadow" d="M540.5 0H576.9V205.9L540.5 204.1V0Z" fill="url(#L1-shadowFill)" />
|
||
|
|
<path id="L2" class="base" d="M540.5 167.5L639.5 173.1V209.1L540.5 204.1V167.5Z" />
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="L1-shadowFill" x1="50%" y1="100%" x2="50%" y2="0%" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop class="shadow-start" offset="0%" />
|
||
|
|
<stop class="shadow-end" offset="100%" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</g>
|
||
|
|
<path id="I" class="base" d="M669.2 0H705.7V214.3L669.2 211.2V0Z" />
|
||
|
|
<g id="X">
|
||
|
|
<path id="X2-base" class="base" d="M737 0L825.1 227.2L866.8 232.8L776.5 0H737Z" />
|
||
|
|
<path id="X2-shadow" d="M737 0L825.1 227.2L866.8 232.8L776.5 0H737Z" fill="url(#X2-shadowFill)" />
|
||
|
|
<path id="X1" class="base" d="M733.1 216.8L771.5 220.8L866.8 0H826.7L733.1 216.8Z" />
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="X2-shadowFill" x1="0%" y1="10%" x2="80%" y2="100%" gradientUnits="objectBoundingBox">
|
||
|
|
<stop class="shadow-end" offset="0%" />
|
||
|
|
<stop class="shadow-start" offset="50%" />
|
||
|
|
<stop class="shadow-end" offset="100%" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
</g>
|
||
|
|
</svg></div>
|
||
|
|
<div class="themesContainer">
|
||
|
|
<div id="theme1" class="theme">
|
||
|
|
<div class="bg-colour"></div>
|
||
|
|
</div>
|
||
|
|
<div id="theme2" class="theme">
|
||
|
|
<div class="bg-colour"></div>
|
||
|
|
</div>
|
||
|
|
<div id="theme3" class="theme">
|
||
|
|
<div class="bg-colour"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script>
|
||
|
|
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
|
||
|
|
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js'></script><script src="./script.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|