svg-arc-to-cubic-bezier

What is svg-arc-to-cubic-bezier?

The svg-arc-to-cubic-bezier npm package is a utility that converts SVG arc commands into cubic Bezier curves. This is useful for rendering SVG paths in environments that do not support arc commands or for simplifying path data.

What are svg-arc-to-cubic-bezier's main functionalities?

Convert SVG Arc to Cubic Bezier

This feature allows you to convert an SVG arc command into a series of cubic Bezier curves. The input is an object containing the parameters of the arc, and the output is an array of cubic Bezier curve commands.

const arcToCubicBezier = require('svg-arc-to-cubic-bezier');

const arcParams = {
  px: 100, // start point x
  py: 100, // start point y
  cx: 200, // end point x
  cy: 200, // end point y
  rx: 50,  // x radius
  ry: 50,  // y radius
  xAxisRotation: 0, // x-axis rotation
  largeArcFlag: 0, // large arc flag
  sweepFlag: 1  // sweep flag
};

const cubicBezierCurves = arcToCubicBezier(arcParams);
console.log(cubicBezierCurves);

Other packages similar to svg-arc-to-cubic-bezier

svg-pathdata

The svg-pathdata package provides a comprehensive set of tools for parsing, encoding, and transforming SVG path data. It includes functionality for converting arc commands to cubic Bezier curves, similar to svg-arc-to-cubic-bezier, but also offers additional features for manipulating other types of path commands.

path-data-polyfill

The path-data-polyfill package is a polyfill for the SVGPathElement API, which includes methods for converting arc commands to cubic Bezier curves. It is useful for ensuring compatibility with older browsers that do not support the full SVGPathElement API.

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,
//   },
// ]