{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "svg-shapes", "type": "registry:ui", "description": "Wide-aspect SVG shape and panel components for backgrounds and hero decorations", "files": [ { "path": "registry/default/ui/svg-shapes.tsx", "content": "import { cn } from \"@/lib/utils\"\n\nconst shapeSvgClass = \"w-full text-foreground stroke-2\"\n\nconst flipClasses = {\n none: \"\",\n /** Center origin keeps flips inside the viewBox; edge origins mirror the path out of shape. */\n vertical: \"origin-center -scale-y-100\",\n horizontal: \"origin-center -scale-x-100\",\n both: \"origin-center -scale-x-100 -scale-y-100\",\n} as const\n\nexport type ShapeShapeFlip = keyof typeof flipClasses\n\nexport interface ShapeSvgProps {\n className?: string\n flip?: ShapeShapeFlip\n}\n\nfunction shapeSvgClassName(\n flip: ShapeShapeFlip | undefined,\n className: string | undefined\n) {\n return cn(shapeSvgClass, flip ? flipClasses[flip] : null, className)\n}\n\n/** Line-art shapes: no fill tint (stroke-only reads correctly). */\nfunction lineArtShapeSvgClassName(\n flip: ShapeShapeFlip | undefined,\n className: string | undefined\n) {\n return cn(\n \"w-full fill-none stroke-2\",\n flip ? flipClasses[flip] : null,\n className\n )\n}\n\nexport interface CrosshairReticleSvgProps extends ShapeSvgProps {\n /** When true, draws the 50px-radius center ring. Default true. */\n showCenterCircle?: boolean\n}\n\n/* ------------------------------------------------------------------ */\n/* FUNDAMENTAL POLYGONS */\n/* ------------------------------------------------------------------ */\n\n/**\n * Shape: equilateral triangle — point at top center, flat base.\n */\nexport function TriangleShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n return (\n \n Equilateral triangle shape\n \n \n )\n}\n\n/**\n * Shape: circle.\n */\nexport function CircleShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n return (\n \n Circular shape\n \n \n )\n}\n\n/**\n * Shape: horizontal ellipse / oval.\n */\nexport function EllipseShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n return (\n \n Horizontal ellipse shape\n \n \n )\n}\n\n/**\n * Panel: semicircle / D-shape — flat left side, arc on the right. Flip horizontally for the opposite.\n */\nexport function SemicircleShapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n return (\n \n Semicircle D-shape with flat left edge\n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* TRIANGLE VARIANTS */\n/* ------------------------------------------------------------------ */\n\n/**\n * Shape: right triangle — right angle at bottom-left, hypotenuse from top-left to bottom-right.\n */\nexport function RightTriangleShapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n return (\n \n Right triangle shape\n \n \n )\n}\n\n/**\n * Shape: kite — diamond variant, taller above center than below.\n * Top vertex at y=2, bottom at y=750, left/right at y=350.\n */\nexport function KiteShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n return (\n \n Kite shape\n \n \n )\n}\n\n/**\n * Shape: pennant / tapered flag — rectangle on the left that tapers to a point on the right.\n */\nexport function PennantShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n return (\n \n Pennant flag shape tapering to a point\n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* ROUNDED VARIANTS */\n/* ------------------------------------------------------------------ */\n\n/**\n * Shape: rounded square — uniform large corner radius (rx=80).\n */\nexport function RoundedSquareShapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n return (\n \n Rounded square shape\n \n \n )\n}\n\n/**\n * Shape: rounded triangle — equilateral triangle with heavily rounded corners (~60px radius beziers).\n */\nexport function RoundedTriangleShapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n // Equilateral triangle vertices: top center, bottom-left, bottom-right\n // With corner softening via cubic beziers (radius ~80px)\n return (\n \n Rounded triangle shape\n \n \n )\n}\n\n/**\n * Shape: squircle / superellipse — the iOS icon shape, between a circle and a rounded square.\n * Uses cubic beziers to approximate a superellipse (n≈4).\n */\nexport function SquircleShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n // Centered at 1200,450 with ~440px half-width and ~440px half-height\n // Superellipse approximation: control points at ~85% of the half-dimension\n const cx = 1200\n const cy = 450\n const hw = 440 // half width\n const hh = 440 // half height\n const k = 0.85 // control point ratio (higher = more square)\n\n const t = cy - hh\n const b = cy + hh\n const l = cx - hw\n const r = cx + hw\n const kw = hw * k\n const kh = hh * k\n\n return (\n \n Squircle superellipse shape\n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* ARCHITECTURAL */\n/* ------------------------------------------------------------------ */\n\n/**\n * Panel: gothic / pointed arch — rectangular body with a pointed arch top (two curved sides meeting at a peak).\n */\nexport function GothicArchPanelSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n return (\n \n Gothic pointed arch panel\n \n \n )\n}\n\n/**\n * Shape: quarter circle / fan — a 90° wedge anchored at bottom-left corner.\n */\nexport function QuarterCircleShapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n return (\n \n Quarter circle fan wedge\n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* COMPOUND */\n/* ------------------------------------------------------------------ */\n\n/**\n * Shape: single bracket — a rectangular C-shaped bracket open on the right, used as a side accent.\n * Bracket arms are 400px long, spine is full height.\n */\nexport function SingleBracketShapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n return (\n \n Single square bracket shape\n \n \n )\n}\n\n/**\n * Shape: arrow / pentagon — flat left edge, pointed right edge. Like a flowchart arrow block.\n */\nexport function ArrowPentagonShapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n return (\n \n Arrow pentagon shape\n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* SACRED GEOMETRY */\n/* ------------------------------------------------------------------ */\n\n/* ------------------------------------------------------------------ */\n/* 1. Vesica Piscis */\n/* Two overlapping circles whose intersection forms an almond shape. */\n/* ------------------------------------------------------------------ */\n\nexport function VesicaPiscisSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n const r = 300\n const offset = r / 2 // circles overlap by one radius\n\n return (\n \n Vesica Piscis — two overlapping circles\n \n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* 2. Seed of Life */\n/* Seven circles: one center + six surrounding at 60° intervals. */\n/* ------------------------------------------------------------------ */\n\nexport function SeedOfLifeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n const r = 200\n\n const petals = Array.from({ length: 6 }, (_, i) => {\n const angle = (i * 60 * Math.PI) / 180\n return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }\n })\n\n return (\n \n Seed of Life — seven overlapping circles\n \n {petals.map((p) => (\n \n ))}\n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* 3. Flower of Life */\n/* 19 circles: Seed of Life + 12 outer petals on second ring. */\n/* ------------------------------------------------------------------ */\n\nexport function FlowerOfLifeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n const r = 150\n\n // Ring 1: 6 circles at distance r\n const ring1 = Array.from({ length: 6 }, (_, i) => {\n const angle = (i * 60 * Math.PI) / 180\n return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }\n })\n\n // Ring 2: 6 circles at distance 2r (aligned) + 6 at distance r√3 (offset 30°)\n const ring2a = Array.from({ length: 6 }, (_, i) => {\n const angle = (i * 60 * Math.PI) / 180\n return { x: cx + 2 * r * Math.cos(angle), y: cy + 2 * r * Math.sin(angle) }\n })\n const ring2b = Array.from({ length: 6 }, (_, i) => {\n const angle = ((i * 60 + 30) * Math.PI) / 180\n const d = r * Math.sqrt(3)\n return { x: cx + d * Math.cos(angle), y: cy + d * Math.sin(angle) }\n })\n\n const allCircles = [{ x: cx, y: cy }, ...ring1, ...ring2a, ...ring2b]\n\n // Bounding circle\n const outerR = 2 * r + r * 0.15\n\n return (\n \n Flower of Life — 19 overlapping circles\n \n {allCircles.map((p) => (\n \n ))}\n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* 4. Metatron's Cube */\n/* 13 circles (Fruit of Life) connected by straight lines. */\n/* ------------------------------------------------------------------ */\n\nexport function MetatronsCubeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n const r = 60\n const ringR = 200\n\n // Center + ring 1 (6) + ring 2 (6)\n const center = { x: cx, y: cy }\n const ring1 = Array.from({ length: 6 }, (_, i) => {\n const angle = (i * 60 * Math.PI) / 180 - Math.PI / 2\n return { x: cx + ringR * Math.cos(angle), y: cy + ringR * Math.sin(angle) }\n })\n const ring2 = Array.from({ length: 6 }, (_, i) => {\n const angle = (i * 60 * Math.PI) / 180 - Math.PI / 2\n return {\n x: cx + 2 * ringR * Math.cos(angle),\n y: cy + 2 * ringR * Math.sin(angle),\n }\n })\n\n const nodes = [center, ...ring1, ...ring2]\n\n // Connect every node to every other node\n const lines: { x1: number; y1: number; x2: number; y2: number }[] = []\n for (let i = 0; i < nodes.length; i++) {\n for (let j = i + 1; j < nodes.length; j++) {\n lines.push({\n x1: nodes[i].x,\n y1: nodes[i].y,\n x2: nodes[j].x,\n y2: nodes[j].y,\n })\n }\n }\n\n return (\n \n Metatron's Cube — 13 circles connected by lines\n {lines.map((l) => (\n \n ))}\n {nodes.map((n) => (\n \n ))}\n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* 5. Sri Yantra */\n/* 9 interlocking triangles (4 up, 5 down) inside concentric rings. */\n/* ------------------------------------------------------------------ */\n\nexport function SriYantraSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n\n // Simplified Sri Yantra: 4 upward triangles + 5 downward triangles\n // Heights are canonical proportions (normalized to outer radius 320)\n const outerR = 320\n\n // Upward-pointing triangles (apex at top): base y, apex y\n const upTriangles = [\n { baseY: cy + 280, apexY: cy - 310, halfW: 310 },\n { baseY: cy + 220, apexY: cy - 240, halfW: 250 },\n { baseY: cy + 140, apexY: cy - 160, halfW: 175 },\n { baseY: cy + 70, apexY: cy - 80, halfW: 100 },\n ]\n\n // Downward-pointing triangles (apex at bottom)\n const downTriangles = [\n { baseY: cy - 280, apexY: cy + 310, halfW: 310 },\n { baseY: cy - 230, apexY: cy + 250, halfW: 260 },\n { baseY: cy - 170, apexY: cy + 180, halfW: 195 },\n { baseY: cy - 110, apexY: cy + 110, halfW: 135 },\n { baseY: cy - 50, apexY: cy + 50, halfW: 70 },\n ]\n\n return (\n \n Sri Yantra — nine interlocking triangles\n {/* Outer circles */}\n \n \n\n {/* Upward triangles */}\n {upTriangles.map((t) => (\n \n ))}\n\n {/* Downward triangles */}\n {downTriangles.map((t) => (\n \n ))}\n\n {/* Bindu (center dot) */}\n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* 6. Platonic Solids — Wireshape 2D Projections */\n/* All five solids as flat orthographic projections. */\n/* ------------------------------------------------------------------ */\n\n/** Tetrahedron — 4 vertices, 6 edges. Projected as triangle with center. */\nexport function TetrahedronWireshapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n const r = 280\n\n // 3 outer vertices (equilateral triangle) + 1 center\n const verts = Array.from({ length: 3 }, (_, i) => {\n const angle = (i * 120 * Math.PI) / 180 - Math.PI / 2\n return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }\n })\n const center = { x: cx, y: cy }\n\n return (\n \n Tetrahedron wireshape projection\n {/* Outer triangle */}\n `${v.x},${v.y}`).join(\" \")}\n stroke=\"currentColor\"\n />\n {/* Lines from center to each vertex */}\n {verts.map((v) => (\n \n ))}\n \n )\n}\n\n/** Cube (Hexahedron) — projected as nested squares rotated 45°. */\nexport function CubeWireshapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n const outer = 260\n const inner = 150\n\n const outerVerts = Array.from({ length: 4 }, (_, i) => {\n const angle = (i * 90 * Math.PI) / 180 - Math.PI / 4\n return { x: cx + outer * Math.cos(angle), y: cy + outer * Math.sin(angle) }\n })\n const innerVerts = Array.from({ length: 4 }, (_, i) => {\n const angle = (i * 90 * Math.PI) / 180\n return { x: cx + inner * Math.cos(angle), y: cy + inner * Math.sin(angle) }\n })\n\n return (\n \n Cube wireshape projection\n `${v.x},${v.y}`).join(\" \")}\n stroke=\"currentColor\"\n />\n `${v.x},${v.y}`).join(\" \")}\n stroke=\"currentColor\"\n />\n {outerVerts.map((v, i) => (\n \n ))}\n \n )\n}\n\n/** Octahedron — 6 vertices, projected as a square with both diagonals and a center diamond. */\nexport function OctahedronWireshapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n const r = 280\n\n // 4 equatorial vertices (square) + top + bottom\n const eq = Array.from({ length: 4 }, (_, i) => {\n const angle = (i * 90 * Math.PI) / 180\n return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }\n })\n const top = { x: cx, y: cy - r }\n const bottom = { x: cx, y: cy + r }\n\n return (\n \n Octahedron wireshape projection\n {/* Equatorial square */}\n `${v.x},${v.y}`).join(\" \")}\n stroke=\"currentColor\"\n />\n {/* Edges from top and bottom to each equatorial vertex */}\n {eq.map((v) => (\n \n \n \n \n ))}\n \n )\n}\n\n/** Icosahedron — 12 vertices, 30 edges. Simplified front-face projection. */\nexport function IcosahedronWireshapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n const outerR = 280\n const innerR = 130\n\n // Outer ring of 5 vertices + inner ring of 5 (rotated 36°) + top + bottom\n const outer = Array.from({ length: 5 }, (_, i) => {\n const angle = (i * 72 * Math.PI) / 180 - Math.PI / 2\n return {\n x: cx + outerR * Math.cos(angle),\n y: cy + outerR * Math.sin(angle),\n }\n })\n const inner = Array.from({ length: 5 }, (_, i) => {\n const angle = ((i * 72 + 36) * Math.PI) / 180 - Math.PI / 2\n return {\n x: cx + innerR * Math.cos(angle),\n y: cy + innerR * Math.sin(angle),\n }\n })\n const top = { x: cx, y: cy - outerR - 20 }\n const bottom = { x: cx, y: cy + outerR + 20 }\n\n return (\n \n Icosahedron wireshape projection\n {/* Outer pentagon */}\n `${v.x},${v.y}`).join(\" \")}\n stroke=\"currentColor\"\n />\n {/* Inner pentagon */}\n `${v.x},${v.y}`).join(\" \")}\n stroke=\"currentColor\"\n />\n {/* Connections outer ↔ inner */}\n {outer.map((v, i) => (\n \n \n \n \n ))}\n {/* Top/bottom poles to outer ring */}\n {outer.map((v, i) =>\n i < 3 ? (\n \n ) : (\n \n )\n )}\n \n )\n}\n\n/** Dodecahedron — 20 vertices, 30 edges. Projected as nested pentagons. */\nexport function DodecahedronWireshapeSvg({\n className,\n flip = \"none\",\n}: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n const r1 = 280\n const r2 = 180\n const r3 = 110\n\n const ring = (r: number, offsetDeg = 0) =>\n Array.from({ length: 5 }, (_, i) => {\n const angle = ((i * 72 + offsetDeg) * Math.PI) / 180 - Math.PI / 2\n return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }\n })\n\n const outerRing = ring(r1, 0)\n const midRing = ring(r2, 36)\n const innerRing = ring(r3, 0)\n\n return (\n \n Dodecahedron wireshape projection\n {/* Three concentric pentagons */}\n `${v.x},${v.y}`).join(\" \")}\n stroke=\"currentColor\"\n />\n `${v.x},${v.y}`).join(\" \")}\n stroke=\"currentColor\"\n />\n `${v.x},${v.y}`).join(\" \")}\n stroke=\"currentColor\"\n />\n {/* Connections between rings */}\n {outerRing.map((v, i) => (\n \n \n \n \n \n ))}\n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* 7. Golden Spiral / Golden Rectangle */\n/* Nested golden rectangles with quarter-circle arcs. */\n/* ------------------------------------------------------------------ */\n\nexport function GoldenSpiralSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n const phi = (1 + Math.sqrt(5)) / 2\n\n // Build rectangles from largest to smallest, 8 subdivisions\n // Start: full rectangle 800×494 centered at (1200,500)\n const totalW = 800\n const totalH = totalW / phi\n const startX = 1200 - totalW / 2\n const startY = 500 - totalH / 2\n\n // Iteratively subdivide; each step cuts a square off and the remainder is a new golden rect\n const rects: { x: number; y: number; w: number; h: number }[] = []\n const arcs: string[] = []\n\n let rx = startX\n let ry = startY\n let rw = totalW\n let rh = totalH\n\n for (let i = 0; i < 9; i++) {\n rects.push({ x: rx, y: ry, w: rw, h: rh })\n const side = Math.min(rw, rh)\n const dir = i % 4\n\n // Arc goes from one corner of the square to the opposite via quarter circle\n switch (dir) {\n case 0: // cut square from right\n arcs.push(\n `M${rx + rw},${ry} A${side},${side} 0 0,1 ${rx + rw - side},${ry + side}`\n )\n rw -= side\n break\n case 1: // cut from bottom\n arcs.push(\n `M${rx + rw},${ry + rh} A${side},${side} 0 0,1 ${rx},${ry + rh - side}`\n )\n rh -= side\n break\n case 2: // cut from left\n arcs.push(`M${rx},${ry + rh} A${side},${side} 0 0,1 ${rx + side},${ry}`)\n rx += side\n rw -= side\n break\n case 3: // cut from top\n arcs.push(`M${rx},${ry} A${side},${side} 0 0,1 ${rx + rw},${ry + side}`)\n ry += side\n rh -= side\n break\n default: {\n break\n }\n }\n }\n\n return (\n \n Golden spiral within nested golden rectangles\n {/* Subdivision lines */}\n {rects.map((r) => (\n \n ))}\n {/* Spiral arcs */}\n \n \n )\n}\n\n/* ------------------------------------------------------------------ */\n/* 8. Torus / Tube Torus */\n/* Concentric elliptical rings creating a donut cross-section feel. */\n/* ------------------------------------------------------------------ */\n\nexport function TorusTubeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n const cx = 1200\n const cy = 500\n const majorR = 280 // distance from center to tube center\n const tubeR = 100 // radius of the tube\n const ringCount = 24\n\n // Draw circles along the major ring, creating a tube torus effect\n const circles = Array.from({ length: ringCount }, (_, i) => {\n const angle = (i * 360 * Math.PI) / (180 * ringCount)\n const x = cx + majorR * Math.cos(angle)\n const y = cy + majorR * 0.35 * Math.sin(angle) // foreshortened for 3/4 view\n // Scale radius for depth\n const scale = 0.6 + 0.4 * Math.sin(angle)\n return { x, y, r: tubeR * scale, opacity: 0.3 + 0.7 * scale }\n })\n\n return (\n \n Tube torus — overlapping rings\n {/* Outer boundary ellipse */}\n \n {/* Inner hole ellipse */}\n \n {/* Tube section circles */}\n {circles.map((c) => (\n \n ))}\n \n )\n}\n", "type": "registry:ui" } ] }