react-svg-path-shapes

Install

npm install --save react-svg-path-shapes

demos

Getting started

import Path from 'react-svg-path-shapes'

react-svg-path-shapes extends react-svg-path by adding common macros for common shapes. All of these shapes are created in a single "d" attribute of an svg path.

Example

import Path from 'react-svg-path-shapes

const App = () => {
  const width = 800;
  const height = 800;
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      preserveAspectRatio='none'
    >
      <path d={new Path().ellipse(150, 75, 80, 50).toString()} />
    </svg>
  );
};

This will produce a path with the following composition:

<path d="M155 50 A75 37.5 0 0 1 5 50 A75 37.5 0 0 1 155 50 z M80 50"></path>

Commands

• .rect(width, height, cx, cy)
  • .rect is drawn from center point (cx & cy). The cursor is then moved to the center point.
• .square(size, cx, cy)
  • .square is drawn from center point (cx & cy). The cursor is then moved to the center point.
• .triangle(size, cx, cy)
  • .triangle draws an equilateral triangle from center point (cx & cy). The cursor is then moved to the center point.
• .regPolygon(size, sides, cx, cy)
  • .regPolygon is drawn from center point (cx & cy). The cursor is then moved to the center point.
• .ellipse(width, height, cx, cy)
  • .ellipse is drawn from center point (cx & cy). The cursor is then moved to the center point.
• .circle(size, cx, cy)
  • .circle is drawn from center points (cx & cy). The cursor is then moved to the center points.
• .sector(cx, cy, radius, startAngle, endAngle)
  • .sector is drawn from center point (cx & cy). The cursor is then moved to the center point.
• .segment(cx, cy, radius, startAngle, endAngle)
  • .segment is drawn from center point (cx & cy). The cursor is then moved to the center point.
• .polyline([points], relative = false)
  • .polyline accepts an array of [x, y] coordinates and then draws lines connecting those points. The path will start from the first point and end on the last. points can be absolute or relative.
• .polygon([points])
  • .polygon accepts an array of [x, y] coordinates and then draws lines connecting those points. The path will start from the first point and end on the first point - closing the shape.

demos

License

MIT © joemaddalone