react-svg-curved-path

    1.0.2 • Public • Published

    A component that generates curved cornered SVG path from a points array. See bellow and check out the small app) I extracted it from. I also put out a small demo)

    Example code to draw a rounded corner square:

      <SVG width={100} height={100}>
        <SVGCachedPath
          style={{
            stroke: 'none',
            fill: 'black',
            strokeWidth: '0px'
          }}
          points={[
            { x: 0, y: 0, r: .2 },
            { x: 1, y: 0, r: .2 },
            { x: 1, y: 1, r: .2 },
            { x: 0, y: 1, r: .2 }
          ]}
          scaleX={'100'} scaleY={'100'}
        />
      </SVG>
    

    You can also precashe/precalculate your paths and give them ids for later use:

      preCalculatePath('sexy-btn', [
        { x: 0, y: 0, r: .2 },
        { x: 1, y: 0, r: .2 },
        { x: .9, y: 1, r: .4 },
        { x: .1, y: 1, r: .4 },
      ], true, 200, 100, true);
      // ... then later ...
      <SVG width={200} height={100}>
        <SVGCachedPath
          pathId={'sexy-btn'} 
          style={{
            stroke: 'none',
            fill: 'black',
            strokeWidth: '0px'
          }}
        />
      </SVG>
    

    Install

    npm i react-svg-curved-path

    DownloadsWeekly Downloads

    6

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    13.4 kB

    Total Files

    3

    Last publish

    Collaborators

    • maa105