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