Emboss

Embossed / debossed relief shading on top of child content, driven by a custom shape

Props

originstring

Default:center

Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

origin

stringDefault: center

Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

center{x: number, y: number}

Default:{"x":0.5,"y":0.5}

Center position of the embossed shape

center

{x: number, y: number}Default: {"x":0.5,"y":0.5}

Center position of the embossed shape

scalenumber

Default:1

Scale of the embossed shape (1 = default size)

scale

numberDefault: 1

Scale of the embossed shape (1 = default size)

rotationnumber

Default:0

Rotation of the embossed shape in degrees

rotation

numberDefault: 0

Rotation of the embossed shape in degrees

depthnumber

Default:-0.5

Relief depth — negative = inset (debossed), positive = raised (embossed)

depth

numberDefault: -0.5

Relief depth — negative = inset (debossed), positive = raised (embossed)

lightAnglenumber

Default:260

Directional light angle in degrees — controls highlight and shadow direction

lightAngle

numberDefault: 260

Directional light angle in degrees — controls highlight and shadow direction

lightIntensitynumber

Default:0.6

Strength of the directional edge highlights and shadows

lightIntensity

numberDefault: 0.6

Strength of the directional edge highlights and shadows

shadowIntensitynumber

Default:0.3

Darkness of the relief shadow

shadowIntensity

numberDefault: 0.3

Darkness of the relief shadow

shapeShapeConfig

Default:circleSDF

Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

shape

ShapeConfigDefault: circleSDF

Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

shapeSdfUrlstring

Default:""

URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

shapeSdfUrl

stringDefault: ""

URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

Usage

<Shader>
  <Emboss>
    <Circle />
  </Emboss>
</Shader>

<Shader>
  <Emboss>
    <Circle />
  </Emboss>
</Shader>

<Shader>
  <Emboss>
    <Circle />
  </Emboss>
</Shader>

<Shader>
  <Emboss>
    <Circle />
  </Emboss>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Emboss', props: {}, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

Ellipse

Engraving