Examples
Comprehensive examples of ThorVG graphics
Basic Shapes
Simple Rectangle
A basic rectangle with solid fill color.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[59, 130, 246, 255]}> <Rect x={150} y={150} width={100} height={100} /> </Shape></SwCanvas>Simple Circle
A perfect circle using the radius prop.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[234, 88, 12, 255]}> <Circle x={200} y={200} radius={50} /> </Shape></SwCanvas>Ellipse
A circle with different horizontal and vertical radii to create an ellipse.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[34, 197, 94, 255]}> <Circle x={200} y={200} rx={70} ry={40} /> </Shape></SwCanvas>Rounded Rectangle
A rectangle with rounded corners using equal rx and ry values.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[59, 130, 246, 255]}> <Rect x={150} y={150} width={100} height={100} rx={20} ry={20} /> </Shape></SwCanvas>Asymmetric Rounded Rectangle
A rectangle with different horizontal and vertical corner radii.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[234, 88, 12, 255]}> <Rect x={150} y={150} width={100} height={100} rx={40} ry={10} /> </Shape></SwCanvas>Fill & Stroke
Stroke Only
A shape with stroke color but no fill.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape stroke={[234, 88, 12, 255]} strokeWidth={8}> <Circle x={200} y={200} radius={50} /> </Shape></SwCanvas>Fill and Stroke
A shape with both fill and stroke colors.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[59, 130, 246, 255]} stroke={[234, 88, 12, 255]} strokeWidth={8} > <Rect x={150} y={150} width={100} height={100} /> </Shape></SwCanvas>Stroke Width
Shapes with different stroke widths.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape stroke={[234, 88, 12, 255]} strokeWidth={4}> <Circle x={120} y={200} radius={25} /> </Shape> <Shape stroke={[234, 88, 12, 255]} strokeWidth={12}> <Circle x={280} y={200} radius={25} /> </Shape></SwCanvas>Stroke Dash
A dashed stroke pattern using strokeDash prop.
<SwCanvas width={200} height={200} devicePixelRatio={2}> {/* Solid rectangle for comparison */} <Shape stroke={[200, 200, 200, 255]} strokeWidth={4}> <Rect x={100} y={80} width={100} height={100} /> </Shape> {/* Dashed rectangle */} <Shape stroke={[234, 88, 12, 255]} strokeWidth={4} strokeDash={[20, 10]} > <Rect x={100} y={200} width={100} height={100} /> </Shape> {/* Solid line */} <Shape stroke={[200, 200, 200, 255]} strokeWidth={4}> <Path commands={[PathCommand.MoveTo, PathCommand.LineTo]} points={[{x: 50, y: 320}, {x: 350, y: 320}]} /> </Shape> {/* Dashed line */} <Shape stroke={[234, 88, 12, 255]} strokeWidth={8} strokeDash={[30, 15]} > <Path commands={[PathCommand.MoveTo, PathCommand.LineTo]} points={[{x: 50, y: 360}, {x: 350, y: 360}]} /> </Shape></SwCanvas>Stroke Dash Offset
Adjusting the starting point of the dash pattern with strokeDashOffset.
<SwCanvas width={200} height={200} devicePixelRatio={2}> {/* Offset 0 */} <Shape stroke={[234, 88, 12, 255]} strokeWidth={12} strokeDash={[30, 15]} strokeDashOffset={0} > <Path commands={[PathCommand.MoveTo, PathCommand.LineTo]} points={[{x: 50, y: 100}, {x: 350, y: 100}]} /> </Shape> {/* Offset 20 - dash pattern starts at different point */} <Shape stroke={[59, 130, 246, 255]} strokeWidth={12} strokeDash={[30, 15]} strokeDashOffset={20} > <Path commands={[PathCommand.MoveTo, PathCommand.LineTo]} points={[{x: 50, y: 200}, {x: 350, y: 200}]} /> </Shape></SwCanvas>Stroke Cap
Different stroke cap styles: Butt, Round, and Square.
<SwCanvas width={200} height={200} devicePixelRatio={2}> {/* Butt - ends exactly at line endpoints */} <Shape stroke={[234, 88, 12, 255]} strokeWidth={30} strokeCap={StrokeCap.Butt}> <Path commands={[PathCommand.MoveTo, PathCommand.LineTo]} points={[{x: 100, y: 100}, {x: 300, y: 100}]} /> </Shape> {/* Round - rounded ends extending beyond endpoints */} <Shape stroke={[59, 130, 246, 255]} strokeWidth={30} strokeCap={StrokeCap.Round}> <Path commands={[PathCommand.MoveTo, PathCommand.LineTo]} points={[{x: 100, y: 200}, {x: 300, y: 200}]} /> </Shape> {/* Square - square ends extending beyond endpoints */} <Shape stroke={[34, 197, 94, 255]} strokeWidth={30} strokeCap={StrokeCap.Square}> <Path commands={[PathCommand.MoveTo, PathCommand.LineTo]} points={[{x: 100, y: 300}, {x: 300, y: 300}]} /> </Shape> {/* Reference markers at line endpoints */} <Shape stroke={[150, 150, 150, 255]} strokeWidth={4}> <Path commands={[PathCommand.MoveTo, PathCommand.LineTo]} points={[{x: 100, y: 60}, {x: 100, y: 340}]} /> </Shape> <Shape stroke={[150, 150, 150, 255]} strokeWidth={4}> <Path commands={[PathCommand.MoveTo, PathCommand.LineTo]} points={[{x: 300, y: 60}, {x: 300, y: 340}]} /> </Shape></SwCanvas>Stroke Join
Different stroke join styles for corners: Miter, Round, and Bevel.
<SwCanvas width={200} height={200} devicePixelRatio={2}> {/* Miter - sharp pointed corner */} <Shape stroke={[234, 88, 12, 255]} strokeWidth={24} strokeJoin={StrokeJoin.Miter}> <Path commands={[PathCommand.MoveTo, PathCommand.LineTo, PathCommand.LineTo]} points={[{x: 40, y: 140}, {x: 200, y: 40}, {x: 360, y: 140}]} /> </Shape> {/* Round - rounded corner */} <Shape stroke={[59, 130, 246, 255]} strokeWidth={24} strokeJoin={StrokeJoin.Round}> <Path commands={[PathCommand.MoveTo, PathCommand.LineTo, PathCommand.LineTo]} points={[{x: 40, y: 260}, {x: 200, y: 160}, {x: 360, y: 260}]} /> </Shape> {/* Bevel - flat beveled corner */} <Shape stroke={[34, 197, 94, 255]} strokeWidth={24} strokeJoin={StrokeJoin.Bevel}> <Path commands={[PathCommand.MoveTo, PathCommand.LineTo, PathCommand.LineTo]} points={[{x: 40, y: 380}, {x: 200, y: 280}, {x: 360, y: 380}]} /> </Shape></SwCanvas>Stroke Miter Limit
Controlling the miter join limit with strokeMiterlimit prop.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape stroke={[234, 88, 12, 255]} strokeWidth={20} strokeJoin={StrokeJoin.Miter} strokeMiterlimit={2} > <Path commands={[PathCommand.MoveTo, PathCommand.LineTo, PathCommand.LineTo]} points={[{x: 60, y: 160}, {x: 200, y: 40}, {x: 340, y: 160}]} /> </Shape> <Shape stroke={[59, 130, 246, 255]} strokeWidth={20} strokeJoin={StrokeJoin.Miter} strokeMiterlimit={10} > <Path commands={[PathCommand.MoveTo, PathCommand.LineTo, PathCommand.LineTo]} points={[{x: 60, y: 360}, {x: 200, y: 240}, {x: 340, y: 360}]} /> </Shape></SwCanvas>Opacity & Fill Rules
Opacity
Shapes with different opacity values (0-255).
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[234, 88, 12, 255]} opacity={255}> <Circle x={140} y={200} radius={40} /> </Shape> <Shape fill={[59, 130, 246, 255]} opacity={128}> <Circle x={260} y={200} radius={40} /> </Shape></SwCanvas>Fill Rule
Using EvenOdd fill rule for self-intersecting paths.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[59, 130, 246, 255]} fillRule={FillRule.EvenOdd}> <Path commands={[ PathCommand.MoveTo, PathCommand.LineTo, PathCommand.LineTo, PathCommand.LineTo, PathCommand.LineTo, PathCommand.Close ]} points={[ {x: 200, y: 40}, {x: 360, y: 360}, {x: 40, y: 140}, {x: 360, y: 140}, {x: 40, y: 360} ]} /> </Shape></SwCanvas>Paths
Simple Line
A basic line using MoveTo and LineTo path commands.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape stroke={[234, 88, 12, 255]} strokeWidth={8}> <Path commands={[PathCommand.MoveTo, PathCommand.LineTo]} points={[{x: 100, y: 100}, {x: 300, y: 300}]} /> </Shape></SwCanvas>Polyline
Connected lines forming a closed shape.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape stroke={[59, 130, 246, 255]} strokeWidth={8} fill={[59, 130, 246, 100]}> <Path commands={[ PathCommand.MoveTo, PathCommand.LineTo, PathCommand.LineTo, PathCommand.LineTo, PathCommand.Close ]} points={[ {x: 200, y: 60}, {x: 340, y: 200}, {x: 200, y: 340}, {x: 60, y: 200} ]} /> </Shape></SwCanvas>Cubic Bezier Curve
Smooth curves using the CubicTo path command.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape stroke={[234, 88, 12, 255]} strokeWidth={8}> <Path commands={[PathCommand.MoveTo, PathCommand.CubicTo]} points={[ {x: 60, y: 200}, {x: 140, y: 60}, {x: 260, y: 340}, {x: 340, y: 200} ]} /> </Shape></SwCanvas>Complex Path
Combining multiple path commands to create complex shapes.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[34, 197, 94, 255]} stroke={[234, 88, 12, 255]} strokeWidth={6}> <Path commands={[ PathCommand.MoveTo, PathCommand.LineTo, PathCommand.CubicTo, PathCommand.LineTo, PathCommand.Close ]} points={[ {x: 200, y: 60}, {x: 340, y: 160}, {x: 360, y: 240}, {x: 280, y: 320}, {x: 200, y: 340}, {x: 60, y: 200} ]} /> </Shape></SwCanvas>Transforms
Translation
Moving shapes using x and y props.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[59, 130, 246, 255]} x={40} y={40}> <Rect x={0} y={0} width={60} height={60} /> </Shape> <Shape fill={[234, 88, 12, 255]} x={240} y={240}> <Rect x={0} y={0} width={60} height={60} /> </Shape></SwCanvas>Rotation
Rotating a shape around its center.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[234, 88, 12, 255]} x={200} y={200} rotation={45}> <Rect x={-40} y={-40} width={80} height={80} /> </Shape></SwCanvas>Scale
Scaling shapes with scaleX and scaleY props.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[59, 130, 246, 255]} scaleX={1.5} scaleY={0.8}> <Rect x={120} y={150} width={80} height={50} /> </Shape></SwCanvas>Combined Transform
Combining multiple transformations: translation, rotation, and scale.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Shape fill={[34, 197, 94, 255]} x={200} y={200} rotation={30} scaleX={1.2} scaleY={1.2} > <Rect x={-40} y={-40} width={80} height={80} /> </Shape></SwCanvas>Scenes
Basic Scene
A scene containing multiple shapes.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Scene> <Shape fill={[59, 130, 246, 255]}> <Rect x={80} y={80} width={50} height={50} /> </Shape> <Shape fill={[234, 88, 12, 255]}> <Circle x={260} y={260} radius={30} /> </Shape> </Scene></SwCanvas>Nested Scenes
Scenes within scenes for hierarchical composition.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Scene x={100} y={100}> <Shape fill={[59, 130, 246, 255]}> <Rect x={0} y={0} width={40} height={40} /> </Shape> <Scene x={20} y={20}> <Shape fill={[234, 88, 12, 255]}> <Circle x={20} y={20} radius={15} /> </Shape> </Scene> </Scene></SwCanvas>Scene Opacity
Applying opacity to an entire scene.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Scene opacity={128}> <Shape fill={[234, 88, 12, 255]}> <Circle x={140} y={200} radius={40} /> </Shape> <Shape fill={[59, 130, 246, 255]}> <Circle x={260} y={200} radius={40} /> </Shape> </Scene></SwCanvas>Scene Transform
Transforming an entire scene with translation, rotation, and scale.
<SwCanvas width={200} height={200} devicePixelRatio={2}> <Scene x={200} y={200} rotation={30} scaleX={1.2} scaleY={1.2}> <Shape fill={[34, 197, 94, 255]}> <Rect x={-30} y={-30} width={60} height={60} /> </Shape> </Scene></SwCanvas>