Shapes & Paths

SVG shapes and paths using inline <svg>. Themed via currentColor — automatically adapts to dark mode and colour tokens.

Basic Shapes

<!-- SVG fills use CSS tokens — auto dark mode -->
<svg viewBox="0 0 200 100">
  <rect x="10" y="10" width="60" height="60" rx="8"
        fill="var(--a-color-primary)"/>
  <circle cx="130" cy="40" r="35"
          fill="var(--a-color-secondary)"/>
</svg>

Paths and Lines

<svg viewBox="0 0 200 100">
  <path d="M 10 80 Q 60 10 110 80 T 190 80"
        fill="none"
        stroke="var(--a-color-primary)"
        stroke-width="3"
        stroke-linecap="round"/>
</svg>

Accessibility

  • Decorative SVGs: add aria-hidden="true"
  • Meaningful SVGs: add aria-label or <title> inside the SVG
  • Always use CSS token values for fills and strokes — they adapt to themes and dark mode
  • Use currentColor for stroke/fill to inherit from the CSS color property

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Shapes Paths component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.