Corner Rounder

Corner rounder with SVG integration

Overview

Corner Rounder rounds the corners of a path (or "route") of points. It provides the option to convert the result to SVG elements or SVG path commands.

Usage Overview

npm i -S corner-rounder

import roundCorners from 'corner-rounder'

const result = roundCorners({
  // Simple "L"-shape route
  route: [
    [0, 0],
    [0, 50],
    [50, 50]
  ],
  r: 10,
})

// E.g. "M 0 0 L 0 40 A 10 10 0 0 0 10 50 L 50 50"
const d = result.toSvgPathDParameter()
// E.g. (SVGLineElement | SVGPathElement)[]
const svgLineAndArcElements = result.toSvgLinesAndArcs({ color: 'orange', ... })

Preview (SVG)

The result of this looks as follows (r = 10):

Examples

Corner Rounder uses Exhibitor to demo itself with some example routes, modifiable stroke widths, colors, radii, etc.. To view these, clone the repository, run npm i && npm run exh, then navigate to http://localhost:4001.

The examples are within /src/test/, which provide a comprehensive look into how Corner Rounder can be used.

Development

See ./contributing/development.md

If you would like to support my open-source development, feel free to sponsor me on GitHub or buy me a coffee ✨