Neutrino Packing Machine

    gradient2svg
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    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.

    Install

    npm i gradient2svg

    DownloadsWeekly Downloads

    57

    Version

    0.0.4

    License

    ISC

    Unpacked Size

    19.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • mauriceconrad