gradient-svg

gradient-svg.js

This module creates svg gradient output for gradient.js modules.

     

Table of contents

• gradient.js
• Usage
• Options

gradient.js

Gradient creation library running in the browser 🖌🌈

gradient.js is a javascript module that takes your source colors array and configuration object, and returns a gradient suitable for your needs.

Usage

const svg = new Svg()

const gradient = svg.get([
    [100, 34, 230, 0.5],
    [10, 33, 20, 0.6],
    [1, 12, 12, 0.3]
],{
    base: {
        interpolation: 'linear',
        mode: 'rgb',
        samples: 40,
        lightnessCorrection: true
    },
    svg: {
        type: 'radial',
        cx: 0.5,
        cy: 0.5,
        r: 0.3,
        spreadMethod: 'reflect'
    }
}, 
/* third parameter - raw - is by default set to false, so it returns the svg gradient element. 
Set to true if you want to get an object. */
)

Options

{
    type: 'linear' | 'radial'
    id: sting // gradient's unique identifier
    angle?: number // between 0 and 359
    x1?: number // linear gradient's first point's position on the x axis
    y1?: number // linear gradient's first point's position on the y axis
    x2? number // linear gradient's second point's position on the x axis
    y2?: number // linear gradient's second point's position on the y axis
    cx?: number // radial gradient's center point position on the x axis
    cy?: number // radial gradient's center point position on the y axis
    r?: number // radial gradient's radius
    fx?: number // radial gradient's focal point position on the x axis
    fy?: number // radial gradient's focal point position on the y axis
    spreadMethod?: 'pad' | 'repeat' | 'reflect'
    gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse'
}