SunBurst

Radial sunburst rays emanating from a center point

Props

colorstring

Default:#ffdd88

Ray color

color

stringDefault: #ffdd88

Ray color

backgroundstring

Default:#000000

Background color

background

stringDefault: #000000

Background color

center{x: number, y: number}

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

Center point of the sunburst

center

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

Center point of the sunburst

rayCountnumber

Default:12

Number of rays

rayCount

numberDefault: 12

Number of rays

softnessnumber

Default:0.3

Softness of ray edges

softness

numberDefault: 0.3

Softness of ray edges

radiusnumber

Default:0.8

How far the rays extend from the center

radius

numberDefault: 0.8

How far the rays extend from the center

feathernumber

Default:0.5

How gradually the rays fade at their outer edge

feather

numberDefault: 0.5

How gradually the rays fade at their outer edge

speednumber

Default:0.2

Rotation speed — positive values rotate clockwise

speed

numberDefault: 0.2

Rotation speed — positive values rotate clockwise

Usage

<Shader>
  <SunBurst
    color="#ffdd88"
    :radius="0.8"
  />
</Shader>

<Shader>
  <SunBurst
    color="#ffdd88"
    radius={0.8}
  />
</Shader>

<Shader>
  <SunBurst
    color="#ffdd88"
    radius={0.8}
  />
</Shader>

<Shader>
  <SunBurst
    color="#ffdd88"
    radius={0.8}
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'SunBurst', props: { color: '#ffdd88', radius: 0.8 } }
  ]
})

StudioBackground

Swirl

Documentation

SunBurst

Props

Usage