SunBurst

Radial sunburst rays emanating from a center point

Props

color
Ray color
Type
string
Default
#ffdd88
background
Background color
Type
string
Default
#000000
center
Center point of the sunburst
Type
{x: number, y: number}
Default
{"x":0.5,"y":0.5}
rayCount
Number of rays
Type
number
Default
12
softness
Softness of ray edges
Type
number
Default
0.3
radius
How far the rays extend from the center
Type
number
Default
0.8
feather
How gradually the rays fade at their outer edge
Type
number
Default
0.5
speed
Rotation speed — positive values rotate clockwise
Type
number
Default
0.2

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 } }
  ]
})