Shape effects

Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.

Glass, Neon, Emboss and a few others are shape effects: they draw inside a shape you pick with the shape prop.

Each shape is stored as a signed distance field (SDF): for every pixel, how far it is from the shape's edge. Picture a contour map of the shape. The edge sits at zero, and the numbers grow as you move away. That distance is what lets Glass bend light at the edge and Neon glow at a fixed width.

Shapes come in two kinds:

• 2D: flat outlines such as circles, stars, rounded rectangles, or your own SVG.
• 3D: solids such as spheres, cubes and toruses. Glass refracts through their volume.

You can also extrude your own SVG into a solid 3D slab.

Setting the shape

Pass a config object to shape. The type key picks the shape, such as circleSDF or sphere3D. Every other key is specific to that shape and optional. A missing key falls back to its default.

Each of these effects draws in a different 2D shape:

<Shader>
  <!-- Circle -->
  <Glass :shape="{ type: 'circleSDF', radius: 0.35 }" />

  <!-- Six-pointed star -->
  <Neon :shape="{ type: 'starSDF', radius: 0.35, sides: 6, innerRatio: 0.45 }" />

  <!-- Rounded rectangle -->
  <Emboss :shape="{ type: 'roundedRectSDF', width: 0.4, height: 0.25, rounding: 0.06 }" />
</Shader>

<Shader>
  {/* Circle */}
  <Glass shape={{ type: 'circleSDF', radius: 0.35 }} />

  {/* Six-pointed star */}
  <Neon shape={{ type: 'starSDF', radius: 0.35, sides: 6, innerRatio: 0.45 }} />

  {/* Rounded rectangle */}
  <Emboss shape={{ type: 'roundedRectSDF', width: 0.4, height: 0.25, rounding: 0.06 }} />
</Shader>

<Shader>
  <!-- Circle -->
  <Glass shape={{ type: 'circleSDF', radius: 0.35 }} />

  <!-- Six-pointed star -->
  <Neon shape={{ type: 'starSDF', radius: 0.35, sides: 6, innerRatio: 0.45 }} />

  <!-- Rounded rectangle -->
  <Emboss shape={{ type: 'roundedRectSDF', width: 0.4, height: 0.25, rounding: 0.06 }} />
</Shader>

<Shader>
  {/* Circle */}
  <Glass shape={{ type: 'circleSDF', radius: 0.35 }} />

  {/* Six-pointed star */}
  <Neon shape={{ type: 'starSDF', radius: 0.35, sides: 6, innerRatio: 0.45 }} />

  {/* Rounded rectangle */}
  <Emboss shape={{ type: 'roundedRectSDF', width: 0.4, height: 0.25, rounding: 0.06 }} />
</Shader>

const shader = await createShader(canvas, {
  components: [
    // Circle
    { type: 'Glass', props: { shape: { type: 'circleSDF', radius: 0.35 } } },
    // Six-pointed star
    { type: 'Neon', props: { shape: { type: 'starSDF', radius: 0.35, sides: 6, innerRatio: 0.45 } } },
    // Rounded rectangle
    { type: 'Emboss', props: { shape: { type: 'roundedRectSDF', width: 0.4, height: 0.25, rounding: 0.06 } } },
  ],
})

Without a shape prop, every shape effect uses a sphere: { type: 'sphere3D', radius: 0.35 }. A JSON string of the same config also works.

Using a 2D shape

2D shapes are flat outlines. Sizes are in UV units, where 0.5 is roughly the distance from the center to the edge of the effect's area. Rotations are in degrees.

2D sub-props take plain numbers only. Anything else falls back to the default, so animate sub-props on 3D shapes instead.

Circle (circleSDF)

A circle. Shaders also draws a circle when the config has no type.

A circle at the default size:

{ "type": "circleSDF", "radius": 0.35 }

Ellipse (ellipseSDF)

A stretched circle with separate horizontal and vertical radii.

A wide, flat ellipse:

{ "type": "ellipseSDF", "width": 0.4, "height": 0.25, "rotation": 0 }

Polygon (polygonSDF)

A regular polygon with any number of sides: triangle, square, hexagon and so on.

A hexagon with slightly softened corners:

{ "type": "polygonSDF", "radius": 0.3, "sides": 6, "rounding": 0.05, "rotation": 0 }

Star (starSDF)

A star with any number of points.

A classic five-point star:

{ "type": "starSDF", "radius": 0.35, "sides": 5, "innerRatio": 0.382, "rotation": 0 }

Flower (flowerSDF)

A flower with any number of petals and V-shaped valleys between them.

A six-petal flower with medium valleys:

{ "type": "flowerSDF", "radius": 0.35, "sides": 6, "innerRatio": 0.5, "rotation": 0 }

Ring (ringSDF)

A hollow ring. The effect draws on the band itself, not the hole in the middle.

The default thickness is wider than the default radius, so the hole closes. Set both:

{ "type": "ringSDF", "radius": 0.3, "thickness": 0.08 }

Cross (crossSDF)

A plus sign with adjustable arm length, thickness and corner rounding.

A slim plus sign:

{ "type": "crossSDF", "radius": 0.25, "thickness": 0.08, "rounding": 0.02, "rotation": 0 }

Rounded rectangle (roundedRectSDF)

A rectangle with evenly rounded corners.

A card-shaped rectangle:

{ "type": "roundedRectSDF", "width": 0.35, "height": 0.25, "rounding": 0.05, "rotation": 0 }

Vesica (vesicaSDF)

A lens or eye shape: the overlap of two circles.

An eye shape:

{ "type": "vesicaSDF", "radius": 0.35, "spread": 0.5, "rotation": 0 }

Crescent (crescentSDF)

A moon shape: a large circle with a smaller, offset circle cut out of it.

A thin crescent moon:

{ "type": "crescentSDF", "radius": 0.35, "innerRatio": 0.75, "offset": 0.15, "rotation": 0 }

Trapezoid (trapezoidSDF)

A four-sided shape with parallel top and bottom edges of different widths.

A trapezoid that narrows toward the top:

{ "type": "trapezoidSDF", "bottomWidth": 0.35, "topWidth": 0.2, "height": 0.25, "rotation": 0 }

Heart (heartSDF)

A heart, point down.

A heart:

{ "type": "heartSDF", "radius": 0.32, "rotation": 0 }

Arc (arcSDF)

A filled pie wedge. At 360 it closes into a full circle.

A three-quarter wedge:

{ "type": "arcSDF", "radius": 0.38, "aperture": 270, "rotation": 0 }

Teardrop (teardropSDF)

A round bulb that tapers to a point. Keep height larger than radius, or the point sits inside the bulb and the shape reads as a circle.

A teardrop:

{ "type": "teardropSDF", "radius": 0.22, "height": 0.4, "rotation": 0 }

Parallelogram (parallelogramSDF)

A rectangle with its top edge slid sideways.

A parallelogram:

{ "type": "parallelogramSDF", "width": 0.32, "height": 0.22, "skew": 0.15, "rotation": 0 }

Using a 3D shape

3D shapes are solids. Shaders raymarches them: for each pixel, it steps a ray through the scene until it hits the surface. Shape effects that support volume, including Glass, Crystal and Emboss, then refract, shade and crease along that real surface instead of a flat outline.

Sizes are in UV units, the same as 2D shapes. Each 3D shape also takes three rotations in degrees: rotX, rotY and rotZ.

Rotating a 3D shape

Picture the shape on a table in front of you:

• rotY: spins it like a turntable, left and right.
• rotX: tips it toward or away from you.
• rotZ: rolls it in the plane of the screen.

Shaders always applies them in the same order: Y first, then X, then Z. Rotations in 3D don't commute, so the order changes the result. The order you write the keys in has no effect. If a combination of angles doesn't land where you expect, change the values.

Animating a 3D shape

Each size and rotation sub-prop of a 3D shape can be a dynamic prop instead of a number. This torus spins continuously, with rotY looping from -180 to 180:

{ "type": "torus3D", "radius": 0.3, "tube": 0.12,
  "rotY": { "type": "auto-animate", "mode": "loop", "outputMin": -180, "outputMax": 180, "speed": 0.5 } }

Sphere (sphere3D)

A sphere. It's the default shape for every shape effect.

The default sphere:

{ "type": "sphere3D", "radius": 0.35, "rotX": 0, "rotY": 0, "rotZ": 0 }

Cube (cube3D)

A box with separate dimensions on each axis and rounded edges.

The default cube:

{ "type": "cube3D", "sizeX": 0.27, "sizeY": 0.27, "sizeZ": 0.27, "rounding": 0.02, "rotX": 25, "rotY": 35, "rotZ": 0 }

Torus (torus3D)

A doughnut.

The default torus:

{ "type": "torus3D", "radius": 0.3, "tube": 0.12, "rotX": 55, "rotY": 0, "rotZ": 0 }

Octahedron (octahedron3D)

An eight-faced diamond: two pyramids joined at the base.

The default octahedron:

{ "type": "octahedron3D", "radius": 0.42, "rotX": 10, "rotY": 25, "rotZ": 0 }

Cylinder (cylinder3D)

A capped cylinder with rounded edges.

The default cylinder:

{ "type": "cylinder3D", "radius": 0.22, "height": 0.26, "rounding": 0.02, "rotX": 60, "rotY": 0, "rotZ": 30 }

Capsule (capsule3D)

A pill: a cylinder with rounded caps.

The default capsule:

{ "type": "capsule3D", "radius": 0.16, "height": 0.2, "rotX": 0, "rotY": 0, "rotZ": 35 }

Cone (cone3D)

A cone, or a cone with its tip cut flat. Raise topRadius above 0 to flatten the tip.

The default cone:

{ "type": "cone3D", "radius": 0.3, "topRadius": 0.02, "height": 0.3, "rotX": 25, "rotY": 0, "rotZ": 15 }

Pyramid (pyramid3D)

A pyramid with a square base.

The default pyramid:

{ "type": "pyramid3D", "size": 0.3, "height": 0.45, "rotX": -10, "rotY": 30, "rotZ": 0 }

Prism (prism3D)

A hexagonal prism.

The default prism:

{ "type": "prism3D", "radius": 0.28, "height": 0.14, "rotX": 25, "rotY": 30, "rotZ": 0 }

Ellipsoid (ellipsoid3D)

A sphere with a separate radius on each axis.

The default ellipsoid:

{ "type": "ellipsoid3D", "radiusX": 0.38, "radiusY": 0.22, "radiusZ": 0.3, "rotX": 0, "rotY": 0, "rotZ": 20 }

Diamond (diamond3D)

A faceted gemstone with a crown on top and a pavilion below. It pairs with the Crystal effect.

The default diamond:

{ "type": "diamond3D", "radius": 0.3, "height": 0.42, "rotX": 15, "rotY": 0, "rotZ": 0 }

Link (link3D)

A rounded chain link.

The default link:

{ "type": "link3D", "radius": 0.18, "length": 0.15, "tube": 0.08, "rotX": 20, "rotY": 30, "rotZ": 0 }

Gem (gem3D)

A cut gemstone with a flat top and faceted sides.

The default gem:

{ "type": "gem3D", "radius": 0.3, "height": 0.32, "facets": 8, "rotX": 15, "rotY": 0, "rotZ": 0 }

Helix (helix3D)

A coiled tube with three turns.

The default helix:

{ "type": "helix3D", "radius": 0.22, "tube": 0.06, "pitch": 0.16, "rotX": 20, "rotY": 0, "rotZ": 0 }

Metaballs (metaballs3D)

Spheres that drift around and melt into each other where they meet. It animates on its own; set speed to 0 to hold it still.

The default metaballs:

{ "type": "metaballs3D", "balls": 4, "ballRadius": 0.16, "spread": 0.2, "blend": 0.12, "speed": 1, "rotX": 0, "rotY": 0, "rotZ": 0 }

Dodecahedron (dodecahedron3D)

A solid with twelve pentagon faces.

The default dodecahedron:

{ "type": "dodecahedron3D", "radius": 0.34, "rotX": 20, "rotY": 10, "rotZ": 0 }

Hemisphere (hemisphere3D)

A sphere sliced flat by a plane.

The default hemisphere:

{ "type": "hemisphere3D", "radius": 0.4, "cut": 0, "rotX": 30, "rotY": 0, "rotZ": 0 }

Ribbon (ribbon3D)

A flat strip that waves and twists along its length. It animates on its own; set speed to 0 to hold it still.

The default ribbon:

{ "type": "ribbon3D", "width": 0.15, "thickness": 0.03, "length": 0.38, "wave": 0.1, "waveFrequency": 7, "twist": 140, "speed": 1, "rotX": 12, "rotY": 18, "rotZ": 0 }

Blob (blob3D)

A sphere whose surface wobbles. It animates on its own; set speed to 0 to hold it still.

The default blob:

{ "type": "blob3D", "radius": 0.3, "wobble": 0.07, "wobbliness": 5, "speed": 1, "rotX": 0, "rotY": 0, "rotZ": 0 }

Gyroscope (gyroscope3D)

Three nested flat rings that spin on different axes around a small sphere. It animates on its own; set speed to 0 to hold it still.

The default gyroscope:

{ "type": "gyroscope3D", "radius": 0.34, "width": 0.1, "thickness": 0.028, "rounding": 0.006, "core": 0.14, "speed": 1, "rotX": 15, "rotY": 0, "rotZ": 0 }

Using your own SVG

To draw inside your logo or icon, give the effect a pre-built SDF file. Set shapeSdfUrl to the URL of an SDF .bin file.

To get one, upload your SVG in the design editor: the code export includes a hosted .bin URL. With the Shaders MCP, your agent can also generate an SDF from any SVG in your project.

Point shapeSdfUrl at the file:

<Glass :shape-sdf-url="logoSdfUrl" />

<Glass shapeSdfUrl={logoSdfUrl} />

<Glass shapeSdfUrl={logoSdfUrl} />

<Glass shapeSdfUrl={logoSdfUrl} />

const shader = await createShader(canvas, {
  components: [
    { type: 'Glass', props: { shapeSdfUrl: 'https://example.com/logo.bin' } },
  ],
})

Extruding an SVG into 3D

An SVG can also become a solid slab with rounded bevels, so shape effects that support volume treat your logo as a 3D object. Keep shapeSdfUrl, and set the shape type to svgExtrude3D:

These sub-props also accept dynamic prop configs, such as an auto-animate rotation for a spinning logo.

Set the extrusion alongside the SDF file:

<Glass
  :shape-sdf-url="logoSdfUrl"
  :shape="{ type: 'svgExtrude3D', depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }"
/>

<Glass
  shapeSdfUrl={logoSdfUrl}
  shape={{ type: 'svgExtrude3D', depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }}
/>

<Glass
  shapeSdfUrl={logoSdfUrl}
  shape={{ type: 'svgExtrude3D', depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }}
/>

<Glass
  shapeSdfUrl={logoSdfUrl}
  shape={{ type: 'svgExtrude3D', depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 }}
/>

const shader = await createShader(canvas, {
  components: [
    {
      type: 'Glass',
      props: {
        shapeSdfUrl: 'https://example.com/logo.bin',
        shape: { type: 'svgExtrude3D', depth: 0.12, bevel: 0.02, rotX: 15, rotY: 30, rotZ: 0 },
      },
    },
  ],
})

To get the .bin file and a matching shape config together, set up the extrusion in the design editor and use the code export.

Next steps

• Dynamic props: animate shape rotations and sizes, or drive them from the mouse.
• Blending and masking: control how a shape effect mixes with the layers behind it.
• Color space: match colors to your design tool and tame bright glows with tone mapping.
• MCP: connect an agent that can generate SDFs from your SVGs.