feat: animate the logo in the navbar

This commit is contained in:
2026-09-23 22:47:04 +02:00
parent c0daacf1ba
commit 93b2fcb2ae
7 changed files with 346 additions and 305 deletions
@@ -0,0 +1,22 @@
<svg width="112" height="46" viewBox="0 0 112 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_652_4234" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="68" y="0" width="44" height="46">
<path d="M68.9169 0H111.588V45.3429H68.9169V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_652_4234)">
<mask id="mask1_652_4234" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="69" y="0" width="43" height="46">
<path d="M84.4732 2.42832C84.9494 1.7184 86.0031 1.36344 87.6343 1.36344C90.4711 1.36344 92.4671 2.2762 93.6322 4.09157C94.7973 5.90695 95.385 8.46268 95.385 11.7588C95.385 13.6755 95.1418 15.4199 94.6656 16.9818C94.1894 18.5436 93.308 19.8012 92.0415 20.7342C90.7751 21.6673 88.9007 22.1439 86.4387 22.1439H83.7538V6.74872C83.7538 4.57838 83.997 3.13825 84.4732 2.42832ZM110.643 40.9265C110.228 41.3829 109.843 41.7277 109.488 41.9609C109.134 42.1942 108.688 42.326 108.141 42.3666C107.35 42.3666 106.743 42.0319 106.327 41.3626C105.912 40.6932 105.517 39.5269 105.142 37.8535L103.703 31.4034C103.156 28.8172 101.981 26.8801 100.167 25.582C98.3536 24.2838 95.5775 23.4826 91.8186 23.148C93.4499 22.9654 94.9189 22.6814 96.1955 22.2961C98.617 21.5658 100.522 20.5821 101.92 19.3549C103.318 18.1278 104.301 16.7891 104.888 15.3489C105.476 13.9088 105.77 12.4788 105.77 11.059C105.77 7.59048 104.331 4.91306 101.454 3.01655C98.5765 1.12003 94.2401 0.166708 88.4448 0.166708C87.6545 0.166708 86.3172 0.186992 84.4428 0.227559C82.5685 0.268126 80.6232 0.28841 78.6272 0.28841C76.8745 0.28841 75.1116 0.268126 73.3385 0.227559C71.5655 0.186992 70.1572 0.146425 69.1136 0.105858V1.36344C70.4105 1.404 71.3932 1.56627 72.0822 1.82996C72.7712 2.09364 73.2271 2.60073 73.4601 3.33094C73.6931 4.06115 73.8046 5.19703 73.8046 6.73858V37.7927C73.8046 39.2937 73.6931 40.4194 73.4601 41.1699C73.2271 41.9204 72.7813 42.4275 72.1227 42.6709C71.4642 42.9143 70.451 43.0867 69.1136 43.1678V44.4152C70.1572 44.3341 71.5655 44.2834 73.3385 44.2631C75.1116 44.2428 76.996 44.2327 79.0021 44.2327C80.7549 44.2327 82.4773 44.2428 84.1895 44.2631C85.9018 44.2834 87.3202 44.3341 88.4448 44.4152V43.178C87.1074 43.0968 86.1145 42.9244 85.4458 42.681C84.7772 42.4376 84.3313 41.9305 84.0983 41.18C83.8653 40.4295 83.7538 39.3038 83.7538 37.8028V23.4015H87.0669H87.8166C89.1135 23.4015 90.1165 23.7869 90.846 24.5577C91.5755 25.3284 92.1428 26.373 92.5684 27.6915C92.9939 29.0099 93.3384 30.5413 93.6322 32.2958L94.7568 38.5533C95.2127 41.1395 96.1753 42.9143 97.6342 43.8676C99.0932 44.8209 100.947 45.3077 103.207 45.3077C105.04 45.3077 106.601 45.0238 107.898 44.466C109.194 43.9082 110.4 42.9751 111.525 41.677L110.643 40.9265Z" fill="white"/>
</mask>
<g mask="url(#mask1_652_4234)">
<path d="M-71.3516 -5.69522H156.01V50.381H-71.3516V-5.69522Z" fill="#1D1D1B"/>
</g>
</g>
<g clip-path="url(#clip0_652_4234)">
<path d="M31.887 0.679123H63.4551L64.0928 13.3064H62.9449C61.1592 9.01223 59.2885 6.07865 57.3328 4.50556C55.3771 2.88995 52.5073 2.08215 48.7233 2.08215H46.4912V21.7883H48.6595C50.6578 21.7883 52.3371 21.0443 53.6977 19.5562C55.0582 18.0256 56.0148 15.9849 56.5675 13.4339H57.5241V32.311H56.44C55.6747 29.1223 54.633 26.8477 53.315 25.4872C52.0396 24.1267 50.2752 23.4464 48.0218 23.4464H46.4912V43.9179H48.9146C52.8261 43.9179 56.1424 42.7486 58.8634 40.4103C61.6269 38.0719 63.5189 35.0746 64.5392 31.4182H65.8147L65.3045 45.3209H31.887V43.9179H35.4743V2.08215H31.887V0.679123Z" fill="#1D1D1B"/>
</g>
<rect y="18.6099" width="25.5096" height="7.18178" fill="#1D1D1B"/>
<defs>
<clipPath id="clip0_652_4234">
<rect width="35.8728" height="44.6418" fill="white" transform="translate(30.2926 0.679123)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB