css-gradient-2-svg's Introduction

Usage

$ npm install gradient2svg

Convert `linear-gradient()` and `radial-gradient()`

import cssGradient2SVG from 'gradient2svg'

// Linear gradient
const svgGradient1 = cssGradient2SVG('linear-gradient(55deg, #f00, #000)');
/*
  <linearGradient data-gradient-angle="55" x1="9.04%" y1="78.68%" x2="90.96%" y2="21.32%">
    <stop offset="0%" style="stop-color: #f00;" /
    <stop offset="100%" style="stop-color: #000;" />
  </linearGradient>
*/

// Radial gradient
const svgGradient2 = cssGradient2SVG('radial-gradient(circle at 10% center, #f00 10%, #00f 95%)');

/*
  <radialGradient cx="0.1" cy="0.5" r="50%">
    <stop offset="10%" style="stop-color: #f00;" />
    <stop offset="95%" style="stop-color: #00f;" />
  </linearGradient>
*/

Imporrtant

Currently, the <size> keywords such as closest-side, closest-corner, farthest-side, farthest-corner, cover and contain that are describing a responsive size of a radial-gradient in CSS are NOT supported because there is no way to describe this in plain SVG.

css-gradient-2-svg's People

Contributors

Stargazers

Watchers

css-gradient-2-svg's Issues

Radial gradient positional values are not converting correctly

the positional values from radial-gradient css are not converting correctly ->

circle at left top
circle at center top
circle at right top
circle at left
circle at center
circle at right
circle at left bottom
circle at center bottom
circle at right bottom

Screen.Recording.2022-04-24.at.9.39.37.PM.mov

index.js?44d8:61  🎨  Input Color:  radial-gradient(circle at left top, #ffb199 0.00%,#ff0844 100.00%)
index.js?44d8:74  🧬  Generated Gradient:  undefined
index.js?44d8:61  🎨  Input Color:  radial-gradient(circle at center top, #ffb199 0.00%,#ff0844 100.00%)
index.js?44d8:74  🧬  Generated Gradient:  <radialGradient id="gradient" cx="0.5" cy="0.5" r="50%"><stop offset="0.00%" style="stop-color: #ffb199;" /><stop offset="100.00%" style="stop-color: #ff0844;" /></radialGradient>
index.js?44d8:61  🎨  Input Color:  radial-gradient(circle at right top, #ffb199 0.00%,#ff0844 100.00%)
index.js?44d8:74  🧬  Generated Gradient:  <radialGradient id="gradient" cx="1" cy="1" r="50%"><stop offset="0.00%" style="stop-color: #ffb199;" /><stop offset="100.00%" style="stop-color: #ff0844;" /></radialGradient>
index.js?44d8:61  🎨  Input Color:  radial-gradient(circle at left, #ffb199 0.00%,#ff0844 100.00%)
index.js?44d8:74  🧬  Generated Gradient:  undefined
index.js?44d8:61  🎨  Input Color:  radial-gradient(circle at center, #ffb199 0.00%,#ff0844 100.00%)
index.js?44d8:74  🧬  Generated Gradient:  <radialGradient id="gradient" cx="0.5" cy="0.5" r="50%"><stop offset="0.00%" style="stop-color: #ffb199;" /><stop offset="100.00%" style="stop-color: #ff0844;" /></radialGradient>
index.js?44d8:61  🎨  Input Color:  radial-gradient(circle at right, #ffb199 0.00%,#ff0844 100.00%)
index.js?44d8:74  🧬  Generated Gradient:  <radialGradient id="gradient" cx="1" cy="1" r="50%"><stop offset="0.00%" style="stop-color: #ffb199;" /><stop offset="100.00%" style="stop-color: #ff0844;" /></radialGradient>
index.js?44d8:61  🎨  Input Color:  radial-gradient(circle at left bottom, #ffb199 0.00%,#ff0844 100.00%)
index.js?44d8:74  🧬  Generated Gradient:  undefined
index.js?44d8:61  🎨  Input Color:  radial-gradient(circle at center bottom, #ffb199 0.00%,#ff0844 100.00%)
index.js?44d8:74  🧬  Generated Gradient:  <radialGradient id="gradient" cx="0.5" cy="1" r="50%"><stop offset="0.00%" style="stop-color: #ffb199;" /><stop offset="100.00%" style="stop-color: #ff0844;" /></radialGradient>
index.js?44d8:61  🎨  Input Color:  radial-gradient(circle at right bottom, #ffb199 0.00%,#ff0844 100.00%)
index.js?44d8:74  🧬  Generated Gradient:  <radialGradient id="gradient" cx="1" cy="1" r="50%"><stop offset="0.00%" style="stop-color: #ffb199;" /><stop offset="100.00%" style="stop-color: #ff0844;" /></radialGradient>

Recommend Projects