Hyper Elementsv0.3
Get started

Blocks

Svg

Shapes (Rect, Circle, Ellipse, Line, Polygon, Path) drawn in a box of its own: its width and height, and the coordinates its viewBox gives them.

import { Svg } from "@hyper-elements/react";

Example

Show the code
svg.tsx
import { Circle, Column, Page, Path, Rect, Svg } from "@hyper-elements/react";

export default function Example() {
  return (
    <Page width={520} style={{ backgroundColor: "#ffffff", fontFamily: "Inter, Helvetica, Arial, sans-serif", color: "#0f172a", gap: 16 }}>
      <Column style={{ padding: 24, gap: 16 }}>
        <Svg width={240} height={120} viewBox="0 0 240 120" style={{ backgroundColor: "#0f172a", borderRadius: 12 }}>
          <Rect x={24} y={70} width={28} height={30} rx={4} style={{ fill: "#334155" }} />
          <Rect x={64} y={50} width={28} height={50} rx={4} style={{ fill: "#475569" }} />
          <Rect x={104} y={30} width={28} height={70} rx={4} style={{ fill: "#64748b" }} />
          <Rect x={144} y={16} width={28} height={84} rx={4} style={{ fill: "#ef4638" }} />
          <Circle cx={204} cy={40} r={14} style={{ fill: "#e2e8f0" }} />
          <Path d="M196 40 l6 6 l10 -12" style={{ stroke: "#0f172a", strokeWidth: 3, fill: "transparent" }} />
        </Svg>
      </Column>
    </Page>
  );
}

Reference

Shapes (Rect, Circle, Ellipse, Line, Polygon, Path) drawn in a box of its own: its width and height, and the coordinates its viewBox gives them.

Holds: Rect, Circle, Ellipse, Line, Polygon, Path. Drawn in: page.

Props:

  • width: a number from 0 (required)
  • height: a number from 0 (required)
  • viewBox: text. The shapes’ coordinates in it, as “x y width height” (its width and height by default).
  • title: text. What it shows, read out by screen readers.

style:

  • padding: insets
  • backgroundColor: color
  • border: border
  • borderRadius: radius
  • flex: flex. In a Row: its share of the width left after children with a width (default 1); “none” takes its own size.

mobile (on phones): padding, border.