Shape / SDF Effects
Several components — such as Glass, Neon, and Emboss — are driven by a shape. These effects accept a shape prop that describes which shape to use and how it should be configured. They use what is called an "SDF" (or "signed distance field") texture to render the shape. An SDF is a mathematical representation of a shape that determines the distance from any pixel to the shape's boundary.
The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.
Configuration
The shape prop accepts a configuration object. The only required key is type, which selects one of the built-in analytical shapes, like circleSDF or starSDF. Everything else is shape-specific and optional (sensible defaults apply).
Built-in shapes
Circle — circleSDF
A perfect circle. The default shape for all shape effects.
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 0.35 | Circle radius in UV space |
{ "type": "circleSDF", "radius": 0.35 }
Ellipse — ellipseSDF
A stretched circle with independent horizontal and vertical radii.
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 0.4 | Horizontal radius (semi-major axis) |
height | number | 0.25 | Vertical radius (semi-minor axis) |
rotation | number | 0 | Rotation in degrees |
{ "type": "ellipseSDF", "width": 0.4, "height": 0.25, "rotation": 0 }
Polygon — polygonSDF
A regular N-sided polygon (triangle, square, hexagon, etc.).
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 0.35 | Distance from center to nearest edge midpoint |
sides | number | 6 | Number of sides |
rounding | number | 0 | Corner rounding amount |
rotation | number | 0 | Rotation in degrees |
{ "type": "polygonSDF", "radius": 0.3, "sides": 6, "rounding": 0.05, "rotation": 0 }
Star — starSDF
An N-pointed star with configurable inner/outer radius ratio.
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 0.35 | Outer tip radius |
sides | number | 5 | Number of points |
innerRatio | number | 0.382 | Inner vertex radius as a fraction of outer radius — 0.382 gives the classic golden-ratio 5-star |
rotation | number | 0 | Rotation in degrees |
{ "type": "starSDF", "radius": 0.35, "sides": 5, "innerRatio": 0.382, "rotation": 0 }
Flower — flowerSDF
An N-petalled flower with smooth concave valleys between petals.
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 0.35 | Outer petal tip radius |
sides | number | 6 | Number of petals |
innerRatio | number | 0.5 | Valley depth — 0.2 = deep narrow valleys, 0.8 = subtle scalloped edge |
rotation | number | 0 | Rotation in degrees |
{ "type": "flowerSDF", "radius": 0.35, "sides": 6, "innerRatio": 0.5, "rotation": 0 }
Ring — ringSDF
A hollow ring / annulus. The effect applies to the ring material itself, not the interior hole.
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 0.3 | Distance from center to the ring centerline |
thickness | number | 0.08 | Half-width of the ring on each side of the centerline |
{ "type": "ringSDF", "radius": 0.3, "thickness": 0.08 }
Cross — crossSDF
A plus-sign cross with configurable arm length, thickness, and corner rounding.
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 0.25 | Arm half-length |
thickness | number | 0.08 | Arm half-width |
rounding | number | 0.02 | Corner rounding at arm ends and intersections |
rotation | number | 0 | Rotation in degrees — use 45 for an X shape |
{ "type": "crossSDF", "size": 0.25, "thickness": 0.08, "rounding": 0.02, "rotation": 0 }
Rounded Rectangle — roundedRectSDF
A rectangle with uniformly rounded corners.
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 0.35 | Half-width |
height | number | 0.25 | Half-height |
rounding | number | 0.05 | Corner rounding radius |
rotation | number | 0 | Rotation in degrees |
{ "type": "roundedRectSDF", "width": 0.35, "height": 0.25, "rounding": 0.05, "rotation": 0 }
Vesica — vesicaSDF
A lens / eye shape formed by the intersection of two overlapping circles.
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 0.35 | Radius of each circle |
spread | number | 0.5 | Half-distance between circle centers as a fraction of radius — 0 = a single circle, 1 = an infinitely thin lens |
rotation | number | 0 | Rotation in degrees |
{ "type": "vesicaSDF", "radius": 0.35, "spread": 0.5, "rotation": 0 }
Crescent — crescentSDF
A crescent / moon shape formed by subtracting a smaller offset circle from a larger one.
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 0.35 | Outer circle radius |
innerRatio | number | 0.75 | Inner circle radius as a fraction of outer — larger values produce a thinner crescent |
offset | number | 0.15 | Horizontal distance between the two circle centers — controls how much the inner circle overlaps |
rotation | number | 0 | Rotation in degrees |
{ "type": "crescentSDF", "radius": 0.35, "innerRatio": 0.75, "offset": 0.15, "rotation": 0 }
Trapezoid — trapezoidSDF
A quadrilateral with parallel top and bottom edges of different widths.
| Prop | Type | Default | Description |
|---|---|---|---|
bottomWidth | number | 0.35 | Bottom edge half-width |
topWidth | number | 0.2 | Top edge half-width |
height | number | 0.25 | Half-height |
rotation | number | 0 | Rotation in degrees |
{ "type": "trapezoidSDF", "bottomWidth": 0.35, "topWidth": 0.2, "height": 0.25, "rotation": 0 }
Custom shapes
For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.
To use an SVG shape, simply set :shapeSdfUrl to the URL of the SDF .bin file. Note that at the moment the SDF conversion occurs within the design editor, so it's recommended to use the .bin file provided in the code export from the editor. In the near future we'll release a standalone SVG -> SDF conversion tool here for non-Pro users.