SVG Components: Moon, Sigil, and Candle

Full Moon’s visual identity is built around three handcrafted SVG components, each reinforcing the witch/dark-fantasy aesthetic. MoonSVG renders a glowing celestial orb in full, waxing, or waning form. SigilSVG draws a pentagram-style sigil onto the screen over two seconds. CandleSVG flickers with an infinite Framer Motion flame animation. All three components accept a className prop for Tailwind sizing and colouring, and use fill="currentColor" (or stroke="currentColor") so they inherit your text colour directly.

MoonSVG

MoonSVG is exported as M from SVGs.js. It renders a 100×100 viewBox SVG with a built-in SVG glow filter — a feGaussianBlur (stdDeviation 4) merged back with SourceGraphic to produce a soft bloom around the moon shape. The phase prop controls which geometry is drawn: a full circle, or one of two crescent paths built from overlapping arcs.

Props

Prop	Type	Default	Description
`className`	`string`	`""`	CSS classes passed to the `<svg>` element
`phase`	`"full" \| "waxing" \| "waning"`	`"full"`	Which moon phase to render

Phase Geometry

Each phase is drawn with fill="currentColor" and the filter="url(#glow)" glow effect applied directly on the shape element.

Phase	Element	Description
`"full"`	`<circle cx="50" cy="50" r="40" />`	A perfect circle — the full moon
`"waxing"`	`<path d="M50,10 A40,40 0 1,1 50,90 A20,40 0 1,0 50,10 Z" />`	Large outer arc swept clockwise, inner arc swept counter-clockwise — crescent opening to the right
`"waning"`	`<path d="M50,10 A40,40 0 1,0 50,90 A20,40 0 1,1 50,10 Z" />`	Mirror of waxing — crescent opening to the left

Glow Filter

The glow is defined once in a <defs> block and referenced by every shape element:

<defs>
  <filter id="glow">
    <feGaussianBlur stdDeviation="4" result="coloredBlur" />
    <feMerge>
      <feMergeNode in="coloredBlur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</defs>

The feGaussianBlur spreads the shape’s colour outward with a radius of 4 units. The feMerge then composites the blurred layer under the original SourceGraphic, so the sharp shape sits on top of its own halo.

Because the glow filter uses a fixed id="glow", avoid rendering multiple MoonSVG instances inside the same SVG context without scoping. In practice, since each instance is its own <svg> element, the IDs are naturally scoped and do not conflict.

Usage

import { M as MoonSVG } from "./components/SVGs.js";

// Full moon — large hero treatment
<MoonSVG phase="full" className="w-64 h-64 text-witch-teal-dark" />

// Waxing crescent — smaller decorative element
<MoonSVG phase="waxing" className="w-32 h-32" />

// Waning crescent — mirror of waxing
<MoonSVG phase="waning" className="w-32 h-32" />

SigilSVG

SigilSVG is exported as S from SVGs.js. It renders a pentagram-style sigil on a 100×100 viewBox using stroke="currentColor" with no fill. The component integrates Framer Motion motion.circle and motion.path elements, so the entire sigil can be drawn onto the screen when the draw prop is true.

Props

Prop	Type	Default	Description
`className`	`string`	`""`	CSS classes passed to the `<svg>` element
`draw`	`boolean`	`false`	When `true`, animates a draw-on effect over 2 seconds

Sigil Geometry

The sigil is composed of three layered elements:

Element	Description
`<circle cx="50" cy="50" r="45" />`	Outer bounding circle
`<path d="M50,5 L50,95 M5,50 L95,50 M18,18 L82,82 M18,82 L82,18" />`	Vertical, horizontal, and both diagonal cross lines through the centre
`<circle cx="50" cy="50" r="20" />`	Inner circle at the centre of the sigil

All three elements share strokeWidth="2" and fill="none" set on the parent <svg>.

Draw-On Animation

When draw={true}, each element receives the following Framer Motion variant set:

const variants = {
  hidden:  { pathLength: 0, opacity: 0 },
  visible: {
    pathLength: 1,
    opacity: 1,
    transition: { duration: 2, ease: "easeInOut" }
  }
};

// Applied to each motion element:
<motion.circle
  cx="50" cy="50" r="45"
  variants={variants}
  initial="hidden"
  animate="visible"
/>

The pathLength property animates from 0 to 1, causing the stroke to progressively trace the shape’s path from start to finish over two seconds with an easeInOut curve. When draw={false}, no variants are applied and all elements render at full opacity immediately.

Pair SigilSVG with a scroll- or intersection-based trigger (e.g. Framer Motion’s whileInView) to fire the draw-on animation as the sigil scrolls into the viewport, rather than immediately on mount.

Usage

import { S as SigilSVG } from "./components/SVGs.js";

// Animated draw-on — sigil strokes in over 2 seconds
<SigilSVG draw={true} className="w-48 h-48 text-witch-teal-bright" />

// Static sigil — fully visible immediately
<SigilSVG draw={false} className="w-24 h-24 text-white/40" />

CandleSVG

CandleSVG is exported as C from SVGs.js. It renders a stubby candle with a wax body, a wick, and an optional animated flame. The flame is driven by a Framer Motion keyframe animation that loops infinitely, simulating the organic flicker of a real candle.

Props

Prop	Type	Default	Description
`className`	`string`	`""`	CSS classes passed to the `<svg>` element
`lit`	`boolean`	`true`	When `true`, renders the animated flame; when `false`, shows an unlit candle

Candle Structure

The candle body uses a fixed viewBox="0 40 100" (note: non-standard; width and height are inferred from the outer element’s CSS dimensions):

Element	Fill	Description
`<rect x="10" y="40" width="20" height="60" rx="2" />`	`#134e4a`	Wax body — dark teal, slightly rounded corners
`<path d="M10,40 Q15,50 12,60 Q18,55 20,40 Q25,65 28,50 Q30,45 30,40" />`	`#134e4a`	Melted wax drips over the top of the body
`<path d="M20,40 Q22,35 20,30" />`	`#0e3a3a`	The wick — a short curved stroke above the wax body

Flame Animation

When lit={true}, a motion.path is rendered for the flame shape:

<motion.path
  d="M20,30 Q15,20 20,5 Q25,20 20,30"
  fill="#fbbf24"
  animate={{
    scale:   [1, 1.1, 0.9, 1.05, 1],
    rotate:  [0, -2, 3, -1, 0],
    opacity: [0.8, 1, 0.7, 0.9, 0.8]
  }}
  transition={{ duration: 0.5, repeat: Infinity, ease: "easeInOut" }}
  style={{ transformOrigin: "20px 30px" }}
/>

The flame is amber (#fbbf24), shaped as a teardrop bezier path that rises from the wick tip at y=30 to its peak at y=5. The keyframe arrays drive three simultaneous properties across five evenly-spaced keyframes at 0.5-second intervals, repeating forever. The transformOrigin is pinned to the base of the flame so scale and rotation pivot from the wick connection point rather than the SVG origin.

The lit={false} state omits the motion.path entirely — the wick is still rendered, but no flame element is mounted. This means toggling lit from true to false will cause the flame to disappear instantly rather than fade. Add an AnimatePresence wrapper with an exit prop on the flame if a fade-out on extinguishing is desired.

Usage

import { C as CandleSVG } from "./components/SVGs.js";

// Lit candle — flame flickers indefinitely
<CandleSVG lit={true} className="w-16 h-16" />

// Unlit candle — wax and wick only, no flame
<CandleSVG lit={false} className="w-16 h-16" />

Core Components

SVG & Visual

SVG Components: Moon, Sigil, and Candle

MoonSVG

Props

Phase Geometry

Glow Filter

Usage

SigilSVG

Props

Sigil Geometry

Draw-On Animation

Usage

CandleSVG

Props

Candle Structure

Flame Animation

Usage

Build docs developers (and LLMs) love

Core Components

SVG & Visual

Documentation Index

​MoonSVG

​Props

​Phase Geometry

​Glow Filter

​Usage

​SigilSVG

​Props

​Sigil Geometry

​Draw-On Animation

​Usage

​CandleSVG

​Props

​Candle Structure

​Flame Animation

​Usage

Build docs developers (and LLMs) love

MoonSVG

Props

Phase Geometry

Glow Filter

Usage

SigilSVG

Props

Sigil Geometry

Draw-On Animation

Usage

CandleSVG

Props

Candle Structure

Flame Animation

Usage