Socket
Socket
Sign inDemoInstall

linear-gradient-parser

Package Overview
Dependencies
0
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

linear-gradient-parser

Parses a SVG linear gradient string / parsed JSON into css background image property


Version published
Maintainers
1
Weekly downloads
1,442
decreased by-7.45%

Weekly downloads

Readme

Source

linear-gradient-parser

Converts a linear gradient SVG String / Json rep into CSS background property

Installation

npm i linear-gradient-parser

Live Demo

Usage

Linear gradient parser comes in handy when you need get a svg linear gradient as background. It can accepts both SVG linearGradient string / Json as input in order to produce it's background.

import parser from 'linear-gradient-parser';

// SVG String input
const linearGradientString = `
<linearGradient xmlns="http://www.w3.org/2000/svg" gradientUnits="userSpaceOnUse" x1="17.5001" y1="32" x2="17.5001" y2="2.9711">
    <stop offset="0" style="stop-color:#FCB3A4"/>
    <stop offset="1" style="stop-color:#DA5899"/>
</linearGradient>
`

const stringResult = parser.getBackground(linearGradientString);

console.log(stringResult) 
//outputs : {background: "linear-gradient(0deg, rgb(252, 179, 164) 0%, rgb(218, 88, 153) 100%)", angle: 0}

// JSON input
const linearGradient = {
    x1: '17.5001',
    y1: '32',
    x2: '17.5001',
    y2: '2.9711',
    stops: [
        { color: '#FCC3A4', offset: '0', opacity: 0.5 },
        { color: '#AAA899', offset: '1' }
    ]
};

const jsonResult = parser.getBackground(linearGradient);

console.log(jsonResult) 
//outputs : {background: "linear-gradient(0deg, rgb(252, 179, 164) 0%, rgb(218, 88, 153) 100%)", angle: 0}

// Using angle generator
const gradientCords = parser.getGradientCords(90);

//outputs : { x1: 0, x2: 1, y1: 0, y2: 0 }

Methods

getBackground

Converts a linear gradient into a background representation.

NameTypeDefault ValueRequired?Description
linearGradient`StringLinearGradient`undefinedYes

Returns: { angle: Number , background: String }

getGradientCords

Builds a linear gradient position attributes for a given angle.

NameTypeDefault ValueRequired?Description
angleNumber0YesThe angle to create the x1 / x2 / y1 / y2 cords from.

Returns: { x1: Number, x2: Number, y1: Number, y2: Number }

Keywords

FAQs

Last updated on 23 Jul 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc