Teardrop

Teardrop — a rounded bulb tapering to a sharp point

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.

colorstring

Default:#ffffff

Fill color of the teardrop

color

stringDefault: #ffffff

Fill color of the teardrop

center{x: number, y: number}

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

Center position of the teardrop

center

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

Center position of the teardrop

radiusnumber

Default:0.22

Radius of the rounded bulb

radius

numberDefault: 0.22

Radius of the rounded bulb

heightnumber

Default:0.4

Length from the bulb to the point

height

numberDefault: 0.4

Length from the bulb to the point

rotationnumber

Default:0

Rotation in degrees

rotation

numberDefault: 0

Rotation in degrees

softnessnumber

Default:0

Edge softness for antialiasing

softness

numberDefault: 0

Edge softness for antialiasing

strokeThicknessnumber

Default:0

Stroke thickness. Zero means no stroke.

strokeThickness

numberDefault: 0

Stroke thickness. Zero means no stroke.

strokeColorstring

Default:#000000

Color of the stroke outline

strokeColor

stringDefault: #000000

Color of the stroke outline

strokePosition"outside" | "center" | "inside"

Default:center

Position of the stroke relative to the shape edge

strokePosition

"outside" | "center" | "inside"Default: center

Position of the stroke relative to the shape edge

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for blending fill and stroke colors

colorSpace

Color space for blending fill and stroke colors

Usage

<Shader>
  <Teardrop
    color="#ffffff"
    :radius="0.22"
  />
</Shader>

<Shader>
  <Teardrop
    color="#ffffff"
    radius={0.22}
  />
</Shader>

<Shader>
  <Teardrop
    color="#ffffff"
    radius={0.22}
  />
</Shader>

<Shader>
  <Teardrop
    color="#ffffff"
    radius={0.22}
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Teardrop', props: { color: '#ffffff', radius: 0.22 } }
  ]
})

Swirl

Text