fancier back button

This commit is contained in:
Rhiannon Morris 2024-12-10 02:51:53 +01:00
parent b3e45e855a
commit 303fd65bab

View file

@ -1,7 +1,52 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="70" height="70" viewBox="0 15 70 85">
<path stroke="white" stroke-width="10" fill="transparent"
stroke-linecap="round" stroke-linejoin="round"
d="M 35,20 L 5,50 L 35,80 M 5,50 H 65" />
width="65" height="65" viewBox="-5 -2.5 65 65"
stroke="#123" stroke-width="2">
<defs>
<linearGradient id="g-arrow-mask">
<stop offset="65%" stop-color="white" />
<stop offset="90%" stop-color="black" />
</linearGradient>
<linearGradient id="g-arrow">
<stop offset="25%" stop-color="hsl(60 90% 95%)" />
<stop offset="75%" stop-color="hsl(60 80% 90%)" />
</linearGradient>
<linearGradient id="g-hello" x1="25%" y1="25%" x2="75%" y2="75%">
<stop offset="0%" stop-color="hsl(310 86% 92%)" />
<stop offset="100%" stop-color="hsl(310 90% 80%)" />
</linearGradient>
<linearGradient id="g-id" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0%" stop-color="hsl(10 87% 92%)" />
<stop offset="100%" stop-color="hsl(10 87% 86%)" />
</linearGradient>
<linearGradient id="g-friends" x1="25%" y1="0" x2="75%" y2="100%">
<stop offset="0%" stop-color="hsl(190 87% 92%)" />
<stop offset="100%" stop-color="hsl(190 77% 78%)" />
</linearGradient>
<mask id="arrow-mask">
<rect height="100%" width="100%" stroke="none" fill="url(#g-arrow-mask)" />
</mask>
</defs>
<path id="arrow" fill="url(#g-arrow)" mask="url(#arrow-mask)"
d="M30,5 l-30,25 30,25 7.07,-7.07 -17.93,-12.93 40,0 0,-10 -40,0 17.93,-12.93 z" />
<!-- (7.07 ≈ 10√2)-->
<g id="cube" transform="translate(47 5)">
<g stroke="none">
<!-- top -->
<path id="hello" fill="url(#g-hello)" d="M0,0 l-12,5 l12,5 l12,-5 z" />
<!-- left -->
<path id="id" fill="url(#g-id)" d="M-12,5 v15 l12,5 v-15 z" />
<!-- right -->
<path id="friends" fill="url(#g-friends)" d="M12,5 v15 l-12,5 v-15 z" />
</g>
<!-- outline -->
<path id="cube-outline" fill="none"
d="M0,0 l-12,5 v15 l12,5 12,-5 v-15 z
m-12,5 l12,5 12,-5 m-12,5 v15" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 295 B

After

Width:  |  Height:  |  Size: 1.9 KiB