first

style/cross.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 100 100" width="50" height="50">
+
+<style><![CDATA[
+  :root {
+    opacity: 0.75;
+    --light: hsl(215deg, 14%, 62%);
+    --dark:  hsl(236deg, 10%, 33%);
+  }
+  * {
+    transform-box: border-box;
+    transform-origin: 50% 50%;
+  }
+  #outline, #shadow {
+    stroke: var(--dark);
+    stroke-width: 12px;
+  }
+  #fill { fill: var(--light); }
+  #shadow {
+    opacity: 0.3;
+    transform: translate(5px, 5px);
+  }
+]]></style>
+
+<defs>
+  <g id="plus">
+    <rect x="10" y="40" width="80" height="20" />
+    <rect x="40" y="10" width="20" height="80" />
+  </g>
+</defs>
+
+<g transform="rotate(-45)">
+  <use href="#plus" id="shadow"  />
+  <use href="#plus" id="outline" />
+  <use href="#plus" id="fill"    />
+</g>
+
+</svg>