Transforms

Translation

Move shapes using the x and y props on the Shape component.

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

<SwCanvas width={200} height={200}>
  <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={120} y={120}>
    <Rect x={0} y={0} width={60} height={60} />
  </Shape>
</SwCanvas>

The x and y props translate the entire shape. The first square appears at (40, 40) and the second at (120, 120).

Rotation

Rotate shapes around their origin using the rotation prop (in degrees).

Tab Title
Tab Title

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

<SwCanvas width={200} height={200}>
  <Shape fill={[234, 88, 12, 255]} rotation={45}>
    <Rect x={50} y={50} width={80} height={80} />
  </Shape>
</SwCanvas>

Rotates the rectangle 45 degrees around the top-left corner of the canvas (0, 0).

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

<SwCanvas width={200} height={200}>
  <Shape fill={[234, 88, 12, 255]} x={100} y={100} rotation={45}>
    <Rect x={-40} y={-40} width={80} height={80} />
  </Shape>
</SwCanvas>

Centers the rectangle at (100, 100) and rotates it 45 degrees around that point. By using negative offsets in the Rect, the shape rotates around its visual center.

Scale

Scale shapes using the scaleX and scaleY props.

Tab Title
Tab Title
Tab Title

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

<SwCanvas width={200} height={200}>
  <Shape fill={[59, 130, 246, 255]} scaleX={1.5} scaleY={1.5}>
    <Circle x={100} y={100} radius={40} />
  </Shape>
</SwCanvas>

Scales the circle uniformly by 1.5x in both directions.

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

<SwCanvas width={200} height={200}>
  <Shape fill={[59, 130, 246, 255]} scaleX={1.5} scaleY={0.8}>
    <Rect x={60} y={75} width={80} height={50} />
  </Shape>
</SwCanvas>

Stretches the rectangle horizontally (1.5x) and compresses it vertically (0.8x).

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

<SwCanvas width={200} height={200}>
  <Shape fill={[34, 197, 94, 255]} x={100} y={100} scaleX={2} scaleY={2}>
    <Rect x={-25} y={-25} width={50} height={50} />
  </Shape>
</SwCanvas>

Scales from the center point (100, 100) by positioning the shape there and centering the geometry.

Combined Transforms

Combine translation, rotation, and scaling for complex transformations.

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

<SwCanvas width={200} height={200}>
  <Shape
    fill={[34, 197, 94, 255]}
    x={100}
    y={100}
    rotation={30}
    scaleX={1.2}
    scaleY={1.2}
  >
    <Rect x={-40} y={-40} width={80} height={80} />
  </Shape>
</SwCanvas>

This example:

Translates the shape to (100, 100)
Scales it by 1.2x
Rotates it 30 degrees

Transforms are applied in this order: scale, rotation, then translation.

Transform Origin

Control the transform origin point by carefully positioning your geometry.

Tab Title
Tab Title
Tab Title

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

<SwCanvas width={200} height={200}>
  <Shape fill={[234, 88, 12, 255]} rotation={45}>
    <Rect x={80} y={80} width={60} height={60} />
  </Shape>
</SwCanvas>

Rotates around the top-left corner of the canvas (0, 0).

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

<SwCanvas width={200} height={200}>
  <Shape fill={[234, 88, 12, 255]} x={100} y={100} rotation={45}>
    <Rect x={-30} y={-30} width={60} height={60} />
  </Shape>
</SwCanvas>

Rotates around the center of the shape by translating to (100, 100) and using negative offsets.

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

<SwCanvas width={200} height={200}>
  <Shape fill={[234, 88, 12, 255]} x={80} y={110} rotation={45}>
    <Rect x={0} y={-30} width={60} height={60} />
  </Shape>
</SwCanvas>

Rotates around a custom point (80, 110) - the left edge, vertically centered.

Animated Transforms

Transforms can be animated using React state or animation libraries.

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

function RotatingSquare() {
  const [rotation, setRotation] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setRotation(r => (r + 1) % 360);
    }, 16);
    return () => clearInterval(interval);
  }, []);
  
  return (
    <SwCanvas width={200} height={200}>
      <Shape fill={[59, 130, 246, 255]} x={100} y={100} rotation={rotation}>
        <Rect x={-40} y={-40} width={80} height={80} />
      </Shape>
    </SwCanvas>
  );
}

This creates a continuously rotating square by updating the rotation prop every frame.

Negative Scales

Use negative scale values to flip shapes.

Tab Title
Tab Title
Tab Title

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

<SwCanvas width={200} height={200}>
  <Shape fill={[234, 88, 12, 255]} x={100} scaleX={-1}>
    <Rect x={0} y={50} width={80} height={60} />
  </Shape>
</SwCanvas>

Flips the rectangle horizontally.

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

<SwCanvas width={200} height={200}>
  <Shape fill={[234, 88, 12, 255]} y={100} scaleY={-1}>
    <Rect x={60} y={0} width={80} height={60} />
  </Shape>
</SwCanvas>

Flips the rectangle vertically.

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

<SwCanvas width={200} height={200}>
  <Shape fill={[234, 88, 12, 255]} x={100} y={100} scaleX={-1} scaleY={-1}>
    <Rect x={0} y={0} width={80} height={60} />
  </Shape>
</SwCanvas>

Flips both horizontally and vertically (180-degree rotation equivalent).

Get Started

Core Concepts

Guides

Examples

Translation

Rotation

Scale

Combined Transforms

Transform Origin

Animated Transforms

Negative Scales

Build docs developers (and LLMs) love

Get Started

Core Concepts

Guides

Examples

​Translation

​Rotation

​Scale

​Combined Transforms

​Transform Origin

​Animated Transforms

​Negative Scales

Build docs developers (and LLMs) love

Translation

Rotation

Scale

Combined Transforms

Transform Origin

Animated Transforms

Negative Scales