Initial commit

assets/shatter.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
+<style>
+.c{fill:none;stroke:#9fd8ff;stroke-width:1;stroke-linejoin:bevel;stroke-dasharray:1400;stroke-dashoffset:1400;animation:d 1.6s cubic-bezier(.2,.7,.2,1) forwards}
+.t{stroke-width:.6;opacity:.6;animation-delay:.35s}
+@keyframes d{to{stroke-dashoffset:0}}
+@media (prefers-reduced-motion:reduce){.c{animation:none;stroke-dashoffset:0}}
+</style>
+<g opacity=".16">
+<polygon points="1160,290 1600,0 1600,180 1380,330" fill="#8fd3ff" opacity=".35"/>
+<polygon points="1160,290 1380,330 1520,640 1210,560" fill="#ff4f8b" opacity=".18"/>
+<polygon points="1160,290 960,520 700,900 1210,900 1210,560" fill="#8fd3ff" opacity=".15"/>
+<polygon points="1160,290 760,60 900,0 1190,0" fill="#ff4f8b" opacity=".14"/>
+</g>
+<g opacity=".34">
+<polyline class="c" points="1160,290 1010,180 880,150 700,0"/>
+<polyline class="c" points="1160,290 1290,190 1370,90 1450,0"/>
+<polyline class="c" points="1160,290 1380,330 1500,300 1600,340"/>
+<polyline class="c" points="1160,290 1210,560 1190,700 1260,900"/>
+<polyline class="c" points="1160,290 960,520 820,560 520,900"/>
+<polyline class="c" points="1160,290 1100,380 900,350 640,420 0,380"/>
+<polyline class="c" points="1380,330 1520,640 1600,700"/>
+<polyline class="c t" points="1010,180 1100,380 1210,560"/>
+<polyline class="c t" points="1290,190 1380,330 1210,560"/>
+<polyline class="c t" points="880,150 900,350 960,520"/>
+<polyline class="c t" points="1160,290 1245,235 1290,190"/>
+</g>
+</svg>