Package Exports

svg-arc-to-cubic-bezier

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svg-arc-to-cubic-bezier) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

SVG arc to cubic bezier

A function that takes an SVG arc curve as input, and maps it to one or more cubic bezier curves.

I extracted the a2c function from SVG path, as I wanted to use it on its own.

All credit, thanks and respect goes to:

Sergey Batishchev – @snb2013
Vitaly Puzrin – @puzrin
Alex Kocharin – @rlidwka

It blew my mind. Thank you!

Installation

npm install svg-arc-to-cubic-bezier

Usage

import arcToBezier from 'svg-arc-to-cubic-bezier';

const previousPoint = { x: 100, y: 100 }

const currentPoint = {
  x: 700,
  y: 100,
  curve: {
    type: 'arc',
    rx: 300,
    ry: 200,
    largeArcFlag: 30,
    sweepFlag: 0,
    xAxisRotation: 0,
  },
};

const curves = arcToBezier({
  px: previousPoint.x,
  py: previousPoint.y,
  cx: currentPoint.x,
  cy: currentPoint.y,
  rx: currentPoint.curve.rx,
  ry: currentPoint.curve.ry,
  xAxisRotation: currentPoint.curve.xAxisRotation,
  largeArcFlag: currentPoint.curve.largeArcFlag,
  sweepFlag: currentPoint.curve.sweepFlag,
});

curves.forEach( c => console.log( c ));

// [
//   {
//     x1: 159.7865795437111,
//     y1: 244.97474575043722,
//     x2: 342.5677510865157,
//     y2: 362.49999701503634,
//     x: 508.253174689854,
//     y: 362.4999967447917,
//   },
//   {
//     x1: 673.9385982931924,
//     y1: 362.49999647454695,
//     x2: 759.7865756485664,
//     y2: 244.97474477179443,
//     x: 699.9999995964145,
//     y: 99.99999902135724,
//   },
// ]