fancier back button

rainbow-quox/back.svg

@@ -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>