Skip to main content
The Shape component defines the visual appearance (fill, stroke, opacity) of 2D vector graphics. It must contain geometry children (Rect, Circle, or Path) that define the actual shape to be drawn.

​
Props

​
Visual Properties

​
fill
Color
Fill color as RGBA tuple [R, G, B, A], where each component ranges from 0-255.Example: [255, 0, 0, 255] for opaque red
​
stroke
Color
Stroke (outline) color as RGBA tuple [R, G, B, A], where each component ranges from 0-255.Example: [0, 0, 0, 255] for opaque black
​
strokeWidth
number
Width of the stroke in pixels.
​
strokeDash
number[]
Stroke dash pattern as an array of lengths in pixels.Example: [5, 10] creates a 5px dash followed by 10px gap
​
strokeDashOffset
number
Offset for the stroke dash pattern in pixels.
​
strokeCap
StrokeCapType
Cap style for stroke endpoints. Valid values:
  • "square" - Square cap
  • "round" - Rounded cap
  • "butt" - Flat cap (default)
​
strokeJoin
StrokeJoinType
Join style for stroke corners. Valid values:
  • "miter" - Sharp corner (default)
  • "round" - Rounded corner
  • "bevel" - Beveled corner
​
strokeMiterlimit
number
default:"4"
Miter limit for stroke joins. Controls how sharp miter joins can be before being beveled.
​
opacity
number
default:"255"
Opacity value from 0 (fully transparent) to 255 (fully opaque).
​
fillRule
FillRuleType
Fill rule for determining the shape interior. Valid values:
  • "nonzero" - Non-zero winding rule (default)
  • "evenodd" - Even-odd rule

​
Transform Properties

​
x
number
X-axis translation in pixels.
​
y
number
Y-axis translation in pixels.
​
rotation
number
Rotation angle in degrees.
​
scaleX
number
default:"1"
Horizontal scale factor.
​
scaleY
number
default:"1"
Vertical scale factor.

​
Usage

​
Basic Shape with Rectangle

import { Shape, Rect } from 'react-thorvg-fiber';

<Shape fill={[255, 0, 0, 255]}>
  <Rect x={50} y={50} width={100} height={100} />
</Shape>

​
Shape with Stroke

import { Shape, Circle } from 'react-thorvg-fiber';

<Shape
  fill={[255, 255, 255, 255]}
  stroke={[0, 0, 0, 255]}
  strokeWidth={2}
>
  <Circle x={100} y={100} radius={50} />
</Shape>

​
Dashed Stroke

import { Shape, Rect } from 'react-thorvg-fiber';

<Shape
  stroke={[0, 0, 255, 255]}
  strokeWidth={3}
  strokeDash={[10, 5]}
  strokeCap="round"
>
  <Rect x={0} y={0} width={200} height={100} />
</Shape>

​
Transformed Shape

import { Shape, Rect } from 'react-thorvg-fiber';

<Shape
  fill={[255, 128, 0, 255]}
  x={100}
  y={100}
  rotation={45}
  scaleX={1.5}
  scaleY={0.5}
>
  <Rect x={0} y={0} width={100} height={100} />
</Shape>

​
Parent-Child Relationships

  • Parent: Must be a child of Scene or SwCanvas/GlCanvas root
  • Children: Must contain at least one geometry child:
    • Rect - Rectangle geometry
    • Circle - Circle/ellipse geometry
    • Path - Custom path geometry
A Shape component without geometry children will not render anything visible.

​
TypeScript Interface

interface ShapeProps extends TransformProps {
  fill?: Color;
  stroke?: Color;
  strokeWidth?: number;
  strokeDash?: number[];
  strokeDashOffset?: number;
  strokeCap?: StrokeCapType;
  strokeJoin?: StrokeJoinType;
  strokeMiterlimit?: number;
  opacity?: number;
  fillRule?: FillRuleType;
}

type Color = [number, number, number, number];
Source: packages/fiber/src/types.ts:78-131

Build docs developers (and LLMs) love

Get started for freeTalk to us