File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
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:
It blew my mind. Thank you!
Installation#
npm install svg-arc-to-cubic-bezierUsage#
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,
// },
// ]