SPB Git

spb/svgarden Public

SVGarden — searchable bank of 74 self-contained SVG+CSS animation snippets (svgarden.dev)

HTML 79.2% Astro 10.3% JavaScript 6% CSS 3.7% Shell 0.8%
1.4 KB · 38 lines astro
Raw Blame History
1---2/**3 * ============================================================4 * SVGarden — https://www.svgarden.dev5 * Author : Simon-Pierre Boucher6 * Contact: contact@spboucher.ai7 * File   : src/pages/404.astro8 * Desc   : 404 page — a wilted-flower stroke animation, of course9 * ============================================================10 */11import Base from '../layouts/Base.astro';12---1314<Base title="404 — SVGarden" description="Page not found.">15  <section class="sg-hero" style="text-align: center; padding: 4rem 0;">16    <svg width="120" height="120" viewBox="0 0 64 64" aria-hidden="true" style="margin: 0 auto; display: block;">17      <path18        d="M32 56 C 32 44, 32 36, 32 30 C 32 22, 26 18, 20 20 C 22 26, 27 28, 32 30 M 32 26 C 34 18, 42 16, 46 18 C 44 24, 38 26, 32 26"19        fill="none"20        stroke="var(--sg-accent)"21        stroke-width="2.5"22        stroke-linecap="round"23        stroke-dasharray="140"24        stroke-dashoffset="140"25        style="animation: sg-404-draw 2s ease forwards;"26      />27    </svg>28    <h1>404 — nothing planted here</h1>29    <p style="color: var(--sg-text-soft);">This page doesn't exist (yet). The garden is back at the gallery.</p>30    <p><a class="sg-btn sg-btn-primary" href="/">Back to the gallery</a></p>31  </section>32  <style>33    @keyframes sg-404-draw {34      to { stroke-dashoffset: 0; }35    }36  </style>37</Base>38