Equilateral triangle shape

"use client" import { motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" // const shapeSvgClass = "w-full fill-background/35 text-foreground/15"; const shapeSvgClass = "w-full text-foreground/70 stroke-2" const flipClasses = { none: "", /** Center origin keeps flips inside the viewBox; edge origins mirror the path out of shape. */ vertical: "origin-center -scale-y-100", horizontal: "origin-center -scale-x-100", both: "origin-center -scale-x-100 -scale-y-100", } as const export type ShapeShapeFlip = keyof typeof flipClasses export interface ShapeSvgProps { className?: string flip?: ShapeShapeFlip } function frameSvgClassName( flip: ShapeShapeFlip | undefined, className: string | undefined ) { return cn(shapeSvgClass, flip ? flipClasses[flip] : null, className) } /** Line-art frames: no fill tint (stroke-only reads correctly). */ function lineArtShapeSvgClassName( flip: ShapeShapeFlip | undefined, className: string | undefined ) { return cn( "w-full fill-none text-foreground/70 stroke-2", flip ? flipClasses[flip] : null, className ) } const SACRED_DRAW_EASE = [0.22, 1, 0.36, 1] as const /** When ~25% of each stroked shape intersects the viewport, draw runs once (re-run if remounted). */ const SACRED_IN_VIEW = { amount: 0.25, once: true } as const function sacredStrokeTransition( reduceMotion: boolean | null, staggerIndex: number, duration = 0.72 ) { if (reduceMotion) { return { pathLength: { duration: 0 } as const } } return { pathLength: { duration, delay: staggerIndex * 0.009, ease: SACRED_DRAW_EASE, }, } } function strokeDrawProps( reduceMotion: boolean | null, staggerIndex: number, duration = 0.72 ) { return { initial: { pathLength: reduceMotion ? 1 : 0 } as const, transition: sacredStrokeTransition(reduceMotion, staggerIndex, duration), viewport: SACRED_IN_VIEW, whileInView: { pathLength: 1 } as const, } } export interface CrosshairReticleSvgProps extends ShapeSvgProps { /** When true, draws the 50px-radius center ring. Default true. */ showCenterCircle?: boolean } /* ------------------------------------------------------------------ */ /* BASIC GEOMETRY */ /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* FUNDAMENTAL POLYGONS */ /* ------------------------------------------------------------------ */ /** * Shape: equilateral triangle — point at top center, flat base. */ export function TriangleShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: circle. */ export function CircleShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: horizontal ellipse / oval. */ export function EllipseShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Panel: semicircle / D-shape — flat left side, arc on the right. Flip horizontally for the opposite. */ export function SemicircleShapeSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /* ------------------------------------------------------------------ */ /* TRIANGLE VARIANTS */ /* ------------------------------------------------------------------ */ /** * Shape: right triangle — right angle at bottom-left, hypotenuse from top-left to bottom-right. */ export function RightTriangleShapeSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: kite — diamond variant, taller above center than below. * Top vertex at y=2, bottom at y=750, left/right at y=350. */ export function KiteShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: pennant / tapered flag — rectangle on the left that tapers to a point on the right. */ export function PennantShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /* ------------------------------------------------------------------ */ /* ROUNDED VARIANTS */ /* ------------------------------------------------------------------ */ /** * Shape: rounded square — uniform large corner radius (rx=80). */ export function RoundedSquareShapeSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: rounded triangle — equilateral triangle with heavily rounded corners (~60px radius beziers). */ export function RoundedTriangleShapeSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() // Equilateral triangle vertices: top center, bottom-left, bottom-right // With corner softening via cubic beziers (radius ~80px) return ( ) } /** * Shape: squircle / superellipse — the iOS icon shape, between a circle and a rounded square. * Uses cubic beziers to approximate a superellipse (n≈4). */ export function SquircleShapeSvg({ className, flip = "none" }: ShapeSvgProps) { // Centered at 1200,450 with ~440px half-width and ~440px half-height // Superellipse approximation: control points at ~85% of the half-dimension const cx = 1200 const cy = 450 const hw = 440 // half width const hh = 440 // half height const k = 0.85 // control point ratio (higher = more square) const t = cy - hh const b = cy + hh const l = cx - hw const r = cx + hw const kw = hw * k const kh = hh * k const reduceMotion = useReducedMotion() return ( ) } /* ------------------------------------------------------------------ */ /* ARCHITECTURAL */ /* ------------------------------------------------------------------ */ /** * Panel: gothic / pointed arch — rectangular body with a pointed arch top (two curved sides meeting at a peak). */ export function GothicArchPanelSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: quarter circle / fan — a 90° wedge anchored at bottom-left corner. */ export function QuarterCircleShapeSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /* ------------------------------------------------------------------ */ /* COMPOUND */ /* ------------------------------------------------------------------ */ /** * Shape: arrow / pentagon — flat left edge, pointed right edge. Like a flowchart arrow block. */ export function ArrowPentagonShapeSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: diamond / rhombus — all four sides diagonal, vertices at edge midpoints. */ export function DiamondShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: trapezoid — wider at base, narrower at top. Symmetric inset of 300px per side. */ export function TrapezoidShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: regular octagon — all eight corners clipped equally (200px legs). */ export function OctagonShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: parallelogram — sheared rectangle, offset 200px at top. */ export function ParallelogramShapeSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Panel: ribbon / banner — flat top and bottom with inward V-notches on both short ends (100px depth). */ export function RibbonBannerShapeSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Panel: hourglass / bowtie — full width at top and bottom, pinched waist at center (800px wide). */ export function HourglassBowtiePanelSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Panel: scalloped top — twelve semicircular bumps along the top edge (r=100), flat bottom. */ export function ScallopedTopPanelSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: rounded rectangle with a large concave quarter-circle bite at the bottom-right (badge cutout). */ export function RoundedRectCornerBiteShapeSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: HUD-style outer rectangle with twin softened V-notches on the top and stepped side walls. */ export function DoubleNotchTechShapeSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Panel: ogee / onion dome — rectangular body plus mirrored S-curved arch to a top peak. */ export function OgeeOnionDomePanelSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: chevron / arrow — horizontal band with pointed right end and notched left end. */ export function ChevronShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Shape: cross / plus — equal-armed cross shape, arms 33% of total width/height. */ export function CrossShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Panel: pill / stadium — fully rounded rectangle with semicircular ends on left and right. */ export function PillShapeSvg({ className, flip = "none" }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /** * Panel: inverted arch — flat top, concave arc on bottom edge. */ export function InvertedArchPanelSvg({ className, flip = "none", }: ShapeSvgProps) { const reduceMotion = useReducedMotion() return ( ) } /* ------------------------------------------------------------------ */ /* SACRED GEOMETRY */ /* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */ /* 1. Vesica Piscis */ /* Two overlapping circles whose intersection forms an almond shape. */ /* ------------------------------------------------------------------ */ export function VesicaPiscisSvg({ className, flip = "none" }: ShapeSvgProps) { const cx = 1200 const cy = 500 const r = 300 const offset = r / 2 // circles overlap by one radius const reduceMotion = useReducedMotion() return ( ) } /* ------------------------------------------------------------------ */ /* 2. Seed of Life */ /* Seven circles: one center + six surrounding at 60° intervals. */ /* ------------------------------------------------------------------ */ export function SeedOfLifeSvg({ className, flip = "none" }: ShapeSvgProps) { const cx = 1200 const cy = 500 const r = 200 const reduceMotion = useReducedMotion() const petals = Array.from({ length: 6 }, (_, i) => { const angle = (i * 60 * Math.PI) / 180 return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) } }) return ( ) } /* ------------------------------------------------------------------ */ /* 3. Flower of Life */ /* 19 circles: Seed of Life + 12 outer petals on second ring. */ /* ------------------------------------------------------------------ */ export function FlowerOfLifeSvg({ className, flip = "none" }: ShapeSvgProps) { const cx = 1200 const cy = 500 const r = 150 // Ring 1: 6 circles at distance r const ring1 = Array.from({ length: 6 }, (_, i) => { const angle = (i * 60 * Math.PI) / 180 return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) } }) // Ring 2: 6 circles at distance 2r (aligned) + 6 at distance r√3 (offset 30°) const ring2a = Array.from({ length: 6 }, (_, i) => { const angle = (i * 60 * Math.PI) / 180 return { x: cx + 2 * r * Math.cos(angle), y: cy + 2 * r * Math.sin(angle) } }) const ring2b = Array.from({ length: 6 }, (_, i) => { const angle = ((i * 60 + 30) * Math.PI) / 180 const d = r * Math.sqrt(3) return { x: cx + d * Math.cos(angle), y: cy + d * Math.sin(angle) } }) const allCircles = [{ x: cx, y: cy }, ...ring1, ...ring2a, ...ring2b] // Bounding circle const outerR = 2 * r + r * 0.15 const reduceMotion = useReducedMotion() return ( ) } /* ------------------------------------------------------------------ */ /* 4. Metatron's Cube */ /* 13 circles (Fruit of Life) connected by straight lines. */ /* ------------------------------------------------------------------ */ export function MetatronsCubeSvg({ className, flip = "none" }: ShapeSvgProps) { const cx = 1200 const cy = 500 const r = 60 const ringR = 200 // Center + ring 1 (6) + ring 2 (6) const center = { x: cx, y: cy } const ring1 = Array.from({ length: 6 }, (_, i) => { const angle = (i * 60 * Math.PI) / 180 - Math.PI / 2 return { x: cx + ringR * Math.cos(angle), y: cy + ringR * Math.sin(angle) } }) const ring2 = Array.from({ length: 6 }, (_, i) => { const angle = (i * 60 * Math.PI) / 180 - Math.PI / 2 return { x: cx + 2 * ringR * Math.cos(angle), y: cy + 2 * ringR * Math.sin(angle), } }) const nodes = [center, ...ring1, ...ring2] // Connect every node to every other node const lines: { x1: number; y1: number; x2: number; y2: number }[] = [] for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { lines.push({ x1: nodes[i].x, y1: nodes[i].y, x2: nodes[j].x, y2: nodes[j].y, }) } } const reduceMotion = useReducedMotion() return ( ) } /* ------------------------------------------------------------------ */ /* 5. Sri Yantra */ /* 9 interlocking triangles (4 up, 5 down) inside concentric rings. */ /* ------------------------------------------------------------------ */ export function SriYantraSvg({ className, flip = "none" }: ShapeSvgProps) { const cx = 1200 const cy = 500 // Simplified Sri Yantra: 4 upward triangles + 5 downward triangles // Heights are canonical proportions (normalized to outer radius 320) const outerR = 320 // Upward-pointing triangles (apex at top): base y, apex y const upTriangles = [ { baseY: cy + 280, apexY: cy - 310, halfW: 310 }, { baseY: cy + 220, apexY: cy - 240, halfW: 250 }, { baseY: cy + 140, apexY: cy - 160, halfW: 175 }, { baseY: cy + 70, apexY: cy - 80, halfW: 100 }, ] // Downward-pointing triangles (apex at bottom) const downTriangles = [ { baseY: cy - 280, apexY: cy + 310, halfW: 310 }, { baseY: cy - 230, apexY: cy + 250, halfW: 260 }, { baseY: cy - 170, apexY: cy + 180, halfW: 195 }, { baseY: cy - 110, apexY: cy + 110, halfW: 135 }, { baseY: cy - 50, apexY: cy + 50, halfW: 70 }, ] const reduceMotion = useReducedMotion() let sriStagger = 0 return ( ) } /* ------------------------------------------------------------------ */ /* 6. Platonic Solids — Wireframe 2D Projections */ /* All five solids as flat orthographic projections. */ /* ------------------------------------------------------------------ */ /** Tetrahedron — 4 vertices, 6 edges. Projected as triangle with center. */ export function TetrahedronWireframeSvg({ className, flip = "none", }: ShapeSvgProps) { const cx = 1200 const cy = 500 const r = 280 // 3 outer vertices (equilateral triangle) + 1 center const verts = Array.from({ length: 3 }, (_, i) => { const angle = (i * 120 * Math.PI) / 180 - Math.PI / 2 return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) } }) const center = { x: cx, y: cy } const reduceMotion = useReducedMotion() return ( ) } /** Cube (Hexahedron) — projected as nested squares rotated 45°. */ export function CubeWireframeSvg({ className, flip = "none" }: ShapeSvgProps) { const cx = 1200 const cy = 500 const outer = 260 const inner = 150 const outerVerts = Array.from({ length: 4 }, (_, i) => { const angle = (i * 90 * Math.PI) / 180 - Math.PI / 4 return { x: cx + outer * Math.cos(angle), y: cy + outer * Math.sin(angle) } }) const innerVerts = Array.from({ length: 4 }, (_, i) => { const angle = (i * 90 * Math.PI) / 180 return { x: cx + inner * Math.cos(angle), y: cy + inner * Math.sin(angle) } }) const reduceMotion = useReducedMotion() return ( ) } /** Octahedron — 6 vertices, projected as a square with both diagonals and a center diamond. */ export function OctahedronWireframeSvg({ className, flip = "none", }: ShapeSvgProps) { const cx = 1200 const cy = 500 const r = 280 // 4 equatorial vertices (square) + top + bottom const eq = Array.from({ length: 4 }, (_, i) => { const angle = (i * 90 * Math.PI) / 180 return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) } }) const top = { x: cx, y: cy - r } const bottom = { x: cx, y: cy + r } const reduceMotion = useReducedMotion() return ( ) } /** Icosahedron — 12 vertices, 30 edges. Simplified front-face projection. */ export function IcosahedronWireframeSvg({ className, flip = "none", }: ShapeSvgProps) { const cx = 1200 const cy = 500 const outerR = 280 const innerR = 130 // Outer ring of 5 vertices + inner ring of 5 (rotated 36°) + top + bottom const outer = Array.from({ length: 5 }, (_, i) => { const angle = (i * 72 * Math.PI) / 180 - Math.PI / 2 return { x: cx + outerR * Math.cos(angle), y: cy + outerR * Math.sin(angle), } }) const inner = Array.from({ length: 5 }, (_, i) => { const angle = ((i * 72 + 36) * Math.PI) / 180 - Math.PI / 2 return { x: cx + innerR * Math.cos(angle), y: cy + innerR * Math.sin(angle), } }) const top = { x: cx, y: cy - outerR - 20 } const bottom = { x: cx, y: cy + outerR + 20 } const reduceMotion = useReducedMotion() let icoStagger = 0 return ( ) } /** Dodecahedron — 20 vertices, 30 edges. Projected as nested pentagons. */ export function DodecahedronWireframeSvg({ className, flip = "none", }: ShapeSvgProps) { const cx = 1200 const cy = 500 const r1 = 280 const r2 = 180 const r3 = 110 const ring = (r: number, offsetDeg = 0) => Array.from({ length: 5 }, (_, i) => { const angle = ((i * 72 + offsetDeg) * Math.PI) / 180 - Math.PI / 2 return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) } }) const outerRing = ring(r1, 0) const midRing = ring(r2, 36) const innerRing = ring(r3, 0) const reduceMotion = useReducedMotion() let dodeStagger = 0 return ( ) } /* ------------------------------------------------------------------ */ /* 7. Golden Spiral / Golden Rectangle */ /* Nested golden rectangles with quarter-circle arcs. */ /* ------------------------------------------------------------------ */ export function GoldenSpiralSvg({ className, flip = "none" }: ShapeSvgProps) { const phi = (1 + Math.sqrt(5)) / 2 // Build rectangles from largest to smallest, 8 subdivisions // Start: full rectangle 800×494 centered at (1200,500) const totalW = 800 const totalH = totalW / phi const startX = 1200 - totalW / 2 const startY = 500 - totalH / 2 // Iteratively subdivide; each step cuts a square off and the remainder is a new golden rect const rects: { x: number; y: number; w: number; h: number }[] = [] const arcs: string[] = [] let rx = startX let ry = startY let rw = totalW let rh = totalH for (let i = 0; i < 9; i++) { rects.push({ x: rx, y: ry, w: rw, h: rh }) const side = Math.min(rw, rh) const dir = i % 4 // Arc goes from one corner of the square to the opposite via quarter circle switch (dir) { case 0: // cut square from right arcs.push( `M${rx + rw},${ry} A${side},${side} 0 0,1 ${rx + rw - side},${ry + side}` ) rw -= side break case 1: // cut from bottom arcs.push( `M${rx + rw},${ry + rh} A${side},${side} 0 0,1 ${rx},${ry + rh - side}` ) rh -= side break case 2: // cut from left arcs.push(`M${rx},${ry + rh} A${side},${side} 0 0,1 ${rx + side},${ry}`) rx += side rw -= side break case 3: // cut from top arcs.push(`M${rx},${ry} A${side},${side} 0 0,1 ${rx + rw},${ry + side}`) ry += side rh -= side break default: { break } } } const reduceMotion = useReducedMotion() const spiralPathD = arcs.join(" ") return ( ) } /* ------------------------------------------------------------------ */ /* 8. Torus / Tube Torus */ /* Concentric elliptical rings creating a donut cross-section feel. */ /* ------------------------------------------------------------------ */ export function TorusTubeSvg({ className, flip = "none" }: ShapeSvgProps) { const cx = 1200 const cy = 500 const majorR = 280 // distance from center to tube center const tubeR = 100 // radius of the tube const ringCount = 24 // Draw circles along the major ring, creating a tube torus effect const circles = Array.from({ length: ringCount }, (_, i) => { const angle = (i * 360 * Math.PI) / (180 * ringCount) const x = cx + majorR * Math.cos(angle) const y = cy + majorR * 0.35 * Math.sin(angle) // foreshortened for 3/4 view // Scale radius for depth const scale = 0.6 + 0.4 * Math.sin(angle) return { x, y, r: tubeR * scale, opacity: 0.3 + 0.7 * scale } }) const reduceMotion = useReducedMotion() let torusStagger = 0 return ( ) }

Svg Shapes Animated

Instalação

Dependências