Illusion/sharper.ly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animate the logo in the navbar

Browse Source
This commit is contained in:
Illusion
2026-09-23 22:47:04 +02:00
parent c0daacf1ba
commit 93b2fcb2ae
7 changed files with 346 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/public/assets/sharp-er-suffix-inverse.svg
+22 -1
View File
@@ -1 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" width="116.87" height="46" viewBox="217.133 0 116.867 46"><!-- "-ER" of the SHARP-ER lockup: dash, E and R from Figma logo/sharp-er (317:5571), in its 334x46 units. The viewBox starts at the P's right edge so this sits flush after sharp-wordmark-inverse.svg; glyphs are lowered 0.66 units onto the SHARP baseline. --><g fill="#FFFFFF" transform="translate(0 0.655)"><rect x="222.411" y="18.612" width="25.518" height="7.181"/><path transform="translate(254.297 0.680)" d="M0 0H31.5681L32.2058 12.6272H31.0579C29.2722 8.33311 27.4015 5.39953 25.4458 3.82644C23.4901 2.21083 20.6203 1.40303 16.8363 1.40303H14.6042V21.1092H16.7725C18.7708 21.1092 20.4501 20.3652 21.8107 18.8771C23.1712 17.3465 24.1278 15.3058 24.6805 12.7548H25.6371V31.6319H24.553C23.7877 28.4432 22.746 26.1686 21.428 24.8081C20.1526 23.4475 18.3882 22.7673 16.1348 22.7673H14.6042V43.2387H17.0276C20.9391 43.2387 24.2554 42.0695 26.9764 39.7312C29.7399 37.3928 31.6319 34.3954 32.6523 30.739H33.9277L33.4175 44.6418H0V43.2387H3.58728V1.40303H0V0Z"/><path transform="translate(291.515 0.106)" d="M15.3596 2.32247C15.8358 1.61254 16.8895 1.25758 18.5207 1.25758C21.3575 1.25758 23.3535 2.17034 24.5186 3.98572C25.6837 5.80109 26.2714 8.35682 26.2714 11.6529C26.2714 13.5697 26.0282 15.3141 25.552 16.8759C25.0758 18.4377 24.1944 19.6953 22.9279 20.6284C21.6615 21.5614 19.7871 22.0381 17.3251 22.0381H14.6402V6.64286C14.6402 4.47252 14.8834 3.03239 15.3596 2.32247ZM41.5296 40.8206C41.1142 41.277 40.7292 41.6218 40.3746 41.8551C40.02 42.0883 39.5742 42.2202 39.0271 42.2608C38.2368 42.2608 37.629 41.9261 37.2135 41.2567C36.7982 40.5874 36.403 39.4211 36.0281 37.7477L34.5894 31.2975C34.0423 28.7114 32.8671 26.7743 31.0535 25.4761C29.2399 24.178 26.4639 23.3768 22.705 23.0421C24.3362 22.8596 25.8053 22.5756 27.0819 22.1902C29.5034 21.46 31.4081 20.4762 32.8063 19.2491C34.2045 18.0219 35.1872 16.6832 35.7749 15.2431C36.3625 13.8029 36.6563 12.373 36.6563 10.9531C36.6563 7.48463 35.2176 4.8072 32.3402 2.91069C29.4629 1.01418 25.1265 0.0608505 19.3312 0.0608505C18.5409 0.0608505 17.2035 0.0811341 15.3292 0.121701C13.4548 0.162268 11.5096 0.182552 9.51363 0.182552C7.76084 0.182552 5.99795 0.162268 4.22489 0.121701C2.45186 0.0811341 1.04357 0.0405669 0 0V1.25758C1.29686 1.29815 2.27962 1.46042 2.96857 1.7241C3.65753 1.98779 4.11345 2.49488 4.34648 3.22508C4.57949 3.95529 4.69095 5.09117 4.69095 6.63272V37.6868C4.69095 39.1878 4.57949 40.3135 4.34648 41.064C4.11345 41.8145 3.66766 42.3216 3.00909 42.565C2.35056 42.8084 1.33738 42.9808 0 43.062V44.3094C1.04357 44.2283 2.45186 44.1776 4.22489 44.1573C5.99795 44.137 7.88241 44.1268 9.88849 44.1268C11.6413 44.1268 13.3637 44.137 15.0759 44.1573C16.7881 44.1776 18.2066 44.2283 19.3312 44.3094V43.0721C17.9938 42.991 17.0009 42.8186 16.3322 42.5752C15.6635 42.3318 15.2177 41.8247 14.9847 41.0742C14.7517 40.3237 14.6402 39.1979 14.6402 37.697V23.2956H17.9533H18.703C19.9999 23.2956 21.0029 23.681 21.7324 24.4518C22.4619 25.2226 23.0292 26.2672 23.4548 27.5856C23.8803 28.904 24.2248 30.4355 24.5186 32.19L25.6432 38.4475C26.0991 41.0336 27.0616 42.8084 28.5206 43.7617C29.9796 44.7151 31.8336 45.2019 34.093 45.2019C35.9268 45.2019 37.4871 44.9179 38.784 44.3601C40.0808 43.8023 41.2865 42.8693 42.4111 41.5711L41.5296 40.8206Z"/></g></svg>
<svg width="112" height="46" viewBox="0 0 112 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_654_4402" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="68" y="0" width="44" height="46">
<path d="M68.917 0H111.588V45.3429H68.917V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_654_4402)">
<mask id="mask1_654_4402" 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.4712 1.36344 92.4671 2.2762 93.6322 4.09157C94.7974 5.90695 95.385 8.46268 95.385 11.7588C95.385 13.6755 95.1418 15.4199 94.6657 16.9818C94.1895 18.5436 93.308 19.8012 92.0416 20.7342C90.7751 21.6673 88.9008 22.1439 86.4388 22.1439H83.7539V6.74872C83.7539 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.8187 23.148C93.4499 22.9654 94.919 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.889 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.6546 0.166708 86.3172 0.186992 84.4428 0.227559C82.5685 0.268126 80.6232 0.28841 78.6273 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.3933 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.9961 44.2327 79.0021 44.2327C80.7549 44.2327 82.4773 44.2428 84.1896 44.2631C85.9018 44.2834 87.3202 44.3341 88.4448 44.4152V43.178C87.1075 43.0968 86.1146 42.9244 85.4459 42.681C84.7772 42.4376 84.3314 41.9305 84.0984 41.18C83.8653 40.4295 83.7539 39.3038 83.7539 37.8028V23.4015H87.0669H87.8167C89.1135 23.4015 90.1166 23.7869 90.846 24.5577C91.5755 25.3284 92.1429 26.373 92.5684 27.6915C92.994 29.0099 93.3384 30.5413 93.6322 32.2958L94.7569 38.5533C95.2128 41.1395 96.1753 42.9143 97.6343 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_654_4402)">
<path d="M-71.3516 -5.69522H156.01V50.381H-71.3516V-5.69522Z" fill="white"/>
</g>
</g>
<g clip-path="url(#clip0_654_4402)">
<path d="M31.887 0.679123H63.4551L64.0929 13.3064H62.9449C61.1593 9.01223 59.2885 6.07865 57.3328 4.50556C55.3771 2.88995 52.5073 2.08215 48.7233 2.08215H46.4913V21.7883H48.6596C50.6578 21.7883 52.3372 21.0443 53.6977 19.5562C55.0582 18.0256 56.0149 15.9849 56.5675 13.4339H57.5241V32.311H56.44C55.6747 29.1223 54.633 26.8477 53.3151 25.4872C52.0396 24.1267 50.2752 23.4464 48.0218 23.4464H46.4913V43.9179H48.9147C52.8262 43.9179 56.1424 42.7486 58.8634 40.4103C61.627 38.0719 63.5189 35.0746 64.5393 31.4182H65.8148L65.3046 45.3209H31.887V43.9179H35.4743V2.08215H31.887V0.679123Z" fill="white"/>
</g>
<rect y="18.6099" width="25.5096" height="7.18178" fill="white"/>
<defs>
<clipPath id="clip0_654_4402">
<rect width="35.8728" height="44.6418" fill="white" transform="translate(30.2927 0.679123)"/>
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB