<!doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codevember-6: Music</title>
</head>
<body>
<div id="svgs">
<svg id="solNotes" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 156" fill="none">
<rect x="12" y="2" width="150" height="150" fill="white"/>
<g filter="url(#filter4_d)" class="nScale1">
<path fill-rule="evenodd" clip-rule="evenodd" d="M87.8367 5.47756C87.8367 5.47756 93.2005 12.8756 101.63 14.2312C110.064 15.5648 117.462 10.2019 117.462 10.2019C117.462 10.2019 111.999 18.4822 101.446 16.7993C101.404 16.7927 101.365 16.7849 101.325 16.777C101.292 16.7708 101.26 16.7645 101.227 16.7588C101.194 16.7539 101.162 16.7499 101.129 16.7459C101.089 16.7409 101.049 16.7359 101.007 16.7293C90.4537 15.0464 87.8367 5.47756 87.8367 5.47756ZM102.173 10.8301C103.214 10.9961 104.191 10.2868 104.357 9.2462C104.523 8.20556 103.815 7.22733 102.774 7.0613C101.733 6.89535 100.755 7.60455 100.589 8.64519C100.423 9.68584 101.132 10.6641 102.173 10.8301Z" fill="#0D0D0D"/>
</g>
<g filter="url(#filter3_d)" class="nScale2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M59.1897 55.9493C62.4329 53.8344 64.2631 50.6412 63.9238 48.106L63.9244 48.1059L60.5776 18.5689C61.2083 20.276 63.2002 21.3628 65.4743 22.6035C69.1078 24.586 73.4616 26.9614 74.1331 32.8882C74.5073 36.1906 73.6813 39.199 73.262 40.7261C73.1563 41.1111 73.0764 41.402 73.0482 41.5797C73.07 41.5522 73.1011 41.5157 73.1401 41.4699C73.7776 40.7213 76.5317 37.4873 75.7552 30.6346C75.2698 26.3508 72.6826 22.911 69.0674 20.6813C68.6813 20.4432 68.2688 20.2044 67.8394 19.9559C64.7996 18.1964 60.9141 15.9476 59.6054 9.98829L59.3899 8.08665L59.2948 8.09731L58.0594 8.23741L62.2686 45.3854C60.1154 43.8949 56.3234 44.2368 52.9756 46.4195C48.9767 49.0273 47.1258 53.2743 48.8416 55.9059C50.558 58.5374 55.1907 58.5566 59.1897 55.9493Z" fill="#0D0D0D"/>
</g>
<g filter="url(#filter5_d)" class="nScale3">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.1409 90.4422C24.6287 92.4053 23.4683 95.0747 21.1033 97.0195C18.1874 99.4172 14.5445 99.8055 12.9668 97.8867C11.3891 95.9678 12.4738 92.4686 15.3897 90.0706C17.8307 88.0636 20.7812 87.4646 22.6031 88.4485L17.3487 65.2988L16.8087 62.9196L16.5784 61.905L16.0594 59.6183L15.5194 57.2392L43.0076 51.0001L43.5476 53.3791L50.5971 84.4374L50.5965 84.4375C51.0844 86.4005 49.924 89.07 47.559 91.0148C44.643 93.4124 41.0002 93.8007 39.4225 91.8819C37.8447 89.963 38.9295 86.4638 41.8453 84.0658C44.2864 82.0589 47.2369 81.4599 49.0588 82.4437L43.8044 59.294L18.3818 65.0643L24.1419 90.442L24.1409 90.4422ZM17.8418 62.6851L17.6115 61.6706L43.0341 55.9003L43.2643 56.9148L17.8418 62.6851Z" fill="#0D0D0D"/>
</g>
<g filter="url(#filter7_d)" class="nScale4">
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.4467 126.081C51.9981 129.192 48.7638 132.353 44.2208 133.766C38.619 135.506 33.1493 133.93 32.0035 130.244C30.8577 126.559 34.4695 122.159 40.0707 120.417C44.7599 118.96 49.3569 119.827 51.4022 122.311L58.8823 76.9889L60.5056 77.2568L52.4474 126.081L52.4467 126.081Z" fill="#0D0D0D"/>
</g>
<g filter="url(#filter2_d)" class="nScale5">
<path d="M80.3523 146.863C78.6797 148.081 75.8234 147.008 73.972 144.466C72.1205 141.925 71.9756 138.878 73.6483 137.659C75.3203 136.441 78.1773 137.514 80.028 140.055C81.8795 142.596 82.0244 145.645 80.3523 146.863ZM76.6534 136.021C71.1337 136.312 66.8147 139.493 67.0061 143.125C67.1975 146.757 71.8275 149.466 77.3466 149.175C82.8663 148.884 87.1853 145.703 86.9939 142.071C86.8025 138.439 82.1732 135.731 76.6534 136.021Z" fill="#0D0D0D"/>
</g>
<g filter="url(#filter1_d)" class="nScale6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M128.826 149.106L134.871 92.3958L130.893 91.9718L129.119 108.623L125.165 109.69C126.653 108.119 127.312 105.834 126.707 103.592C125.782 100.165 122.254 98.1373 118.827 99.0621C115.4 99.9869 113.372 103.514 114.297 106.941C115.222 110.368 118.749 112.396 122.176 111.471C122.406 111.409 122.63 111.335 122.847 111.25L122.857 111.287L129.012 109.626L127.165 126.948L122.983 128.077C124.471 126.506 125.13 124.221 124.525 121.979C123.6 118.552 120.073 116.523 116.646 117.448C113.219 118.373 111.191 121.901 112.116 125.328C113.041 128.755 116.568 130.782 119.995 129.858C120.225 129.796 120.449 129.722 120.666 129.637L120.676 129.674L127.058 127.951L124.849 148.682L128.826 149.106Z" fill="#0D0D0D"/>
</g>
<g filter="url(#filter0_d)" class="nScale7">
<path fill-rule="evenodd" clip-rule="evenodd" d="M120.322 88.7539C120.355 90.3758 118.974 92.2574 116.779 93.3586C114.073 94.7161 111.155 94.3732 110.261 92.5925C109.368 90.8117 110.838 88.2676 113.544 86.9098C115.809 85.7735 118.223 85.8288 119.473 86.9218V70.4777V69.7042V66.6101V63.2127V62.97L160 48V48.6672H160V74.2088H159.999C160.032 75.8306 158.651 77.7122 156.456 78.8132C153.75 80.1709 150.832 79.8277 149.939 78.0469C149.045 76.2662 150.515 73.7221 153.221 72.3647C155.486 71.228 157.9 71.2835 159.151 72.3766V55.5096L139.979 62.7419V81.4737H139.979C140.012 83.0956 138.63 84.9772 136.436 86.0784C133.729 87.4359 130.811 87.0929 129.918 85.3123C129.025 83.5315 130.494 80.9874 133.2 79.6297C135.466 78.4933 137.88 78.5486 139.13 79.6415V63.0623L120.323 70.1573V88.7539H120.322ZM159.151 51.642V54.7806L139.979 61.9914V58.8743L159.151 51.642ZM139.13 59.1947V62.3109L120.323 69.3847V66.2897L139.13 59.1947Z" fill="#0D0D0D"/>
</g>
<g filter="url(#filter6_d)" class="nScale8">
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.612 73.1266L110 72.7964L119.931 24.3157L119.932 24.3159C120.5 21.2247 123.854 18.1904 128.448 16.9541C134.112 15.4291 139.517 17.2152 140.52 20.9426C141.524 24.67 137.745 28.9275 132.081 30.4518C127.339 31.7284 122.779 30.6847 120.831 28.1242L111.612 73.1266Z" fill="#0D0D0D"/>
</g>
<g filter="url(#filter8_di)" class="nScale0">
<path d="M82.1807 112.256C78.5277 112.395 75.4721 115.381 75.4721 120.173C75.4721 124.964 79.2638 129.756 86.2223 129.756C93.1806 129.756 99.9722 124.339 99.5975 118.297C99.2566 112.808 86.9999 62.0062 86.9999 54.3394C86.9999 46.6726 89.1389 33.5196 94.8886 33.1169C96.9696 32.9711 98.2641 35.4228 98.6668 40.4622C99.7662 54.1999 67 68.0061 67 87.4502C67 104.784 85.8889 107.595 90.5556 107.562C96.3473 107.52 107 102.673 107 91.8948C107 82.2282 97.7779 79.784 95.4446 79.784C93.1114 79.784 79.5556 78.6726 79.5556 90.8949C79.5556 98.2293 86 99.3396 87.5556 99.3396C87.5556 99.3396 83.4643 97.4417 83.4643 91.7752C83.4643 88.6783 86.5557 85.2285 94.5557 85.2285C98.2224 85.2285 102.444 88.4507 102.444 94.0061C102.444 99.5616 96.222 105.895 89.3334 105.895C82.4445 105.895 71.9976 100.561 72.1111 90.4504C72.3332 70.6729 101.666 69.4505 101.666 44.3394C101.666 44.3394 101.472 31.7979 93.9688 25C88.0139 29.464 85.2885 36.5033 84.8054 47.0473C84.4883 53.9699 94.3967 100.212 98.3333 117.562C99.0833 120.867 94.7222 127.478 88.2777 127.589C83.6355 127.669 81.9722 126.589 81.9722 126.589C81.9722 126.589 88.9722 124.339 88.9722 120.006C88.9722 116.506 86.5532 112.09 82.1807 112.256" fill="#0D0D0D"/>
</g>
<defs>
<filter id="filter0_d" x="106" y="44" width="58" height="54.1889" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="101" y="87" width="51.7267" height="68.6955" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter2_d" x="63" y="132" width="28" height="21.1962" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter3_d" x="44.2013" y="4.08665" width="35.6907" height="57.8055" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter4_d" x="82.4135" y="0.699127" width="39.173" height="22.4273" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter5_d" x="0" y="47" width="56.0973" height="56.9001" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter6_d" x="106" y="10" width="39.6375" height="70.81" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter7_d" x="27.7914" y="72.9889" width="36.7142" height="65.4855" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter8_di" x="63" y="24" width="48" height="112.756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="3"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
</defs>
</svg>
<h1>LOADING</h1>
</div>
</body>
</html>* {
font-family: 'Roboto', sans-serif;
}
#svgs {
position: fixed;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin-top: -75px;
margin-left: -75px;
}
h1 {
width: 170px;
height: 36px;
font-family: Roboto;
font-weight: normal;
font-size: 24px;
line-height: 36px;
text-align: center;
top: 158px;
left: -10px;
position: absolute;
margin: 0;
color: #0D0D0D;
}
#solNotes {
top: -2px;
left: -12px;
position: absolute;
width: 164px;
height: 156px;
animation: n-all 1s linear 0s 1 alternate;
animation-fill-mode: backwards;
}
.nScale0 {
animation: n-main 1s linear 0s infinite alternate;
transform-origin: 50% 50%;
}
.nScale1 {
animation: n-scale 4s linear 0.5s infinite alternate;
animation-fill-mode: backwards;
transform-origin: 62.8% 7.69%;
}
.nScale2 {
animation: n-scale 4s linear 1s infinite alternate;
animation-fill-mode: backwards;
transform-origin: 37.8% 21.15%;
}
.nScale3 {
animation: n-scale 4s linear 1.5s infinite alternate;
animation-fill-mode: backwards;
transform-origin: 19.51% 48.08%;
}
.nScale4 {
animation: n-scale 4s linear 2s infinite alternate;
animation-fill-mode: backwards;
transform-origin: 31.1% 69.23%;
}
.nScale5 {
animation: n-scale 4s linear 2.5s infinite alternate;
animation-fill-mode: backwards;
transform-origin: 46.95% 91.03%;
}
.nScale6 {
animation: n-scale 4s linear 3s infinite alternate;
animation-fill-mode: backwards;
transform-origin: 79.27% 75.64%;
}
.nScale7 {
animation: n-scale 4s linear 3.5s infinite alternate;
animation-fill-mode: backwards;
transform-origin: 84.76% 45.51%;
}
.nScale8 {
animation: n-scale 4s linear 4s infinite alternate;
animation-fill-mode: backwards;
transform-origin: 73.17% 22.44%;
}
@keyframes n-scale {
0% {
transform: scale(0);
}
35% {
transform: scale(0);
}
45% {
transform: scale(0.5);
}
50% {
transform: scale(1);
}
55% {
transform: scale(0.5);
}
65% {
transform: scale(0);
}
100% {
transform: scale(0);
}
}
@keyframes n-main {
from {
transform: rotate(0deg);
}
to {
transform: rotate(4deg);
}
}
@keyframes n-all {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.