Using Hardcoded Values

Control line positions and colors deterministically via HTML attributes.

Setup

Add color-values and step-values attributes to the lines-canvas element:

<lines-canvas
  color-values="#aabbcc,#bada55,green"
  step-values="0.0,0.1,-0.1,0.3,-0.3,0.5,-0.5,0.7,-0.7,0.9,-0.9,0.0"
  perspective="0.03"
  autoplay="loop"
/>

Attributes

Attribute	Description	Format
color-values	Override generated colors with fixed values	Comma-separated CSSColor: "lightblue,blue,darkblue"
step-values	Override generated step positions with fixed values	Comma-separated floats [-1.0, 1.0]: "-0.5,0.1,0.3,0.5"

Dynamic Updates

Change values after mounting by modifying attributes:

const canvas = document.querySelector('lines-canvas')

// Update colors
canvas.setAttribute('color-values', 'lightblue,blue,darkblue')

// Update step positions
canvas.setAttribute('step-values', '0.2,0.4,0.6,0.8')
canvas.setAttribute('step-values', [0.2, 0.4, 0.6, 0.8].join(','))

// Or access the renderer:
canvas.renderer.mergeState({
  colors: ['lightblue', 'blue', 'darkblue']
})

The renderer detects attribute changes and rebuilds the lines with the new values.

Programmatic Control

Access the renderer via the custom element and update configuration or state:

const canvas = document.querySelector('lines-canvas')

// Update configuration
canvas.renderer.mergeConfig({
  colors: 5,
  steps: 20
})

// Update state (colors and steps only)
canvas.renderer.mergeState({
  colors: ['#ff0000', '#00ff00', '#0000ff'],
  steps: [0.2, 0.4, 0.6, 0.8]
})