Single Path Fills and Strokes

[emeeks]

It would be nice to have an option to have all the drawing instructions in a single svg:path element rather than multiple path elements in each g. The latter produces an enormous number of dom elements and the former should have better performance, especially for animating things.

[emeeks]

So I tested this out with something like the following:

    sketchy.circleStroke = function(opts){
        var merged_opts = extend(defaults, opts);

        var svg =  merged_opts.svg.append("g").attr('transform', function() { return "translate("+merged_opts.x+" "+merged_opts.y+") "+circleTransform(1,1, 0,360); });

        var drawCode = "";

        for(var i = 0; i<merged_opts.count; i++){
                drawCode += " " + circlePath(merged_opts.r, merged_opts.sketch/-50/(i+1),merged_opts.sketch/10/(i+1), 200,240, 0,merged_opts.sketch/5/(i+1));
        }

        svg.append('path')
            .attr('d', drawCode);

        return svg;
    };

And it seems like the multiple path elements, even up to 5000, can be transitioned around the screen pretty smoothly. But other animation is slower. Here's both methods animated using the (dasharray line drawing)[http://bl.ocks.org/mbostock/5649592].

Multiple path elements

Single path elements