Exploring shape effects

Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.

What's covered

  • The shape effects library
  • Creating liquid glass and liquid metal effects
  • Adjusting refraction, blur, thickness, and edge detail
  • Using built-in 2D and 3D shapes
  • Importing a custom SVG logo
  • Turning flat artwork into 3D geometry
  • Adding glowing edges to logos and icons
  • Tuning materials for different styles

Key concept

Shape effects draw inside a shape stored as a signed distance field (SDF): for every pixel, how far it is from the shape's edge. Built-in shapes and your SVG both become an SDF, so glass, metal, and glow work the same way on either.