Gradients

Ripl supports CSS gradient strings directly in fill and stroke properties. The gradient syntax is parsed at render time and converted to the appropriate native gradient for the current context (Canvas or SVG).

Demo

Angle135

NOTE

For the full API, see the Core API Reference.

Supported Gradient Types

Linear Gradient

const rect = createRect({
    fill: 'linear-gradient(90deg, #3a86ff, #ff006e)',
    x: 0,
    y: 0,
    width: 200,
    height: 100,
});

The angle specifies the direction of the gradient. Common values:

Angle	Direction
0deg	Bottom to top
90deg	Left to right
180deg	Top to bottom
270deg	Right to left

Radial Gradient

const circle = createCircle({
    fill: 'radial-gradient(circle, #3a86ff, #ff006e)',
    cx: 100,
    cy: 100,
    radius: 80,
});

Conic Gradient

const circle = createCircle({
    fill: 'conic-gradient(from 0deg, #3a86ff, #ff006e, #3a86ff)',
    cx: 100,
    cy: 100,
    radius: 80,
});

Color Stops

Color stops define the colors and their positions along the gradient. You can use any CSS color format:

// Implicit positions (evenly distributed)
'linear-gradient(90deg, red, green, blue)';

// Explicit positions
'linear-gradient(90deg, red 0%, green 30%, blue 100%)';

// Pixel positions
'linear-gradient(90deg, red 0px, blue 200px)';

// Multiple colors at the same position (hard stop)
'linear-gradient(90deg, red 50%, blue 50%)';

Supported Color Formats

Gradient color stops accept:

• Named colors: red, blue, transparent, etc.
• Hex: #ff0000, #f00
• RGB: rgb(255, 0, 0)
• RGBA: rgba(255, 0, 0, 0.5)
• HSL: hsl(0, 100%, 50%)
• HSLA: hsla(0, 100%, 50%, 0.5)

Repeating Gradients

Add the repeating- prefix to create repeating gradients:

'repeating-linear-gradient(45deg, #3a86ff 0px, #3a86ff 10px, #ff006e 10px, #ff006e 20px)';

Using Gradients

Gradients work in both fill and stroke:

const rect = createRect({
    fill: 'linear-gradient(135deg, #3a86ff, #8338ec)',
    stroke: 'linear-gradient(135deg, #1a56db, #5b21b6)',
    lineWidth: 4,
    x: 50,
    y: 50,
    width: 200,
    height: 120,
});

How It Works

When Ripl encounters a gradient string in a style property:

1. The string is parsed into a structured gradient object (type, angle, color stops, etc.)
2. The context converts it to a native gradient:
   • Canvas: Creates a CanvasGradient via createLinearGradient or createRadialGradient
   • SVG: Creates <linearGradient> or <radialGradient> elements in a <defs> block
3. The native gradient is applied as the fill or stroke style

Gradient parsing happens automatically: you just write CSS gradient strings and Ripl handles the rest.

Gradient Interpolation

When animating between two gradient values using renderer.transition(), Ripl automatically interpolates between the gradient color stops:

await renderer.transition(rect, {
    duration: 1000,
    state: {
        fill: 'linear-gradient(90deg, #ff006e, #fb5607)',
    },
});