Parallelogram

Parallelogram with adjustable width, height and skew

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 parallelogram

color

stringDefault: #ffffff

Fill color of the parallelogram

center{x: number, y: number}

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

Center position of the parallelogram

center

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

Center position of the parallelogram

widthnumber

Default:0.32

Half-width of the parallelogram

width

numberDefault: 0.32

Half-width of the parallelogram

heightnumber

Default:0.22

Half-height of the parallelogram

height

numberDefault: 0.22

Half-height of the parallelogram

skewnumber

Default:0.15

Horizontal skew of the top edge

skew

numberDefault: 0.15

Horizontal skew of the top edge

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>
  <Parallelogram
    color="#ffffff"
  />
</Shader>

<Shader>
  <Parallelogram
    color="#ffffff"
  />
</Shader>

<Shader>
  <Parallelogram
    color="#ffffff"
  />
</Shader>

<Shader>
  <Parallelogram
    color="#ffffff"
  />
</Shader>

import { createShader } from 'shaders/js'

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

Paper

Particles