Raphael vs SnapSVG vs SVG.js getPointAtLength() (v3)

Revision 3 of this benchmark created on

Description

Benchmarking the performance of getPointAtLength()

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://rawgithub.com/adobe-webplatform/Snap.svg/master/dist/snap.svg.js"></script>
<script src="https://rawgithub.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
<script src="https://rawgithub.com/wout/svg.js/master/dist/svg.min.js"></script>
<script src="https://rawgithub.com/wout/svg.topath.js/master/svg.topath.min.js"></script>

<div id="raphael"></div>
<svg id="snap"></svg>
<div id="svgjs"></div>

<script>
var r = Raphael('raphael', 800, 600);
var raphaelCircle = r.circle(400, 300, 150);

var s = Snap('#snap');
s.width=800;
s.height=600;
var snapCircle = s.circle(400, 300, 150);
var m = new Snap.Matrix();
m.scale(1);
snapCircle.transform(m);
var circlePath = snapCircle.realPath;

var svgjs = SVG('svgjs').size(800, 600)
var svgCircle = svgjs.circle(300).attr({ cx: 400, cy:300 });
var svgCirclePath = svgCircle.toPath();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Raphael
raphaelCircle.getPointAtLength(Math.random() * 400);
ready
SnapSVG
Snap.path.getPointAtLength(circlePath, Math.random() * 400);
ready
SVGjs
svgCirclePath.pointAt(Math.random() * 400);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.