Skip to content
This is the alpha v4 version website. Looking for the v3 documentation?

sdfRectangle

sdfRectangle(options?): SDFShape

Defined in: packages/sigma/src/rendering/nodes/shapes/rectangle.ts:45

Creates a rectangle SDF shape. Its long side spans the node’s full size.

Parameters

options?

RectangleOptions

Configuration options for the rectangle

Returns

SDFShape

Rectangle SDF shape definition

Example

// Same aspect ratio (2:1) for every node:
const wide = sdfRectangle({ aspectRatio: 2 });
// Aspect ratio read from each node's "aspectRatio" attribute (1 when missing):
const perNode = sdfRectangle();
// Same, from another attribute:
const fromImageRatio = sdfRectangle({ aspectRatio: { attribute: "imageRatio", default: 1 } });
// Rounded, rotated rectangle:
const styled = sdfRectangle({ cornerRadius: 0.1, rotation: Math.PI / 6 });