All examples By author By category About

john-clarke

Lifespan events using segmented bézier curves

This block demonstrates an alternative styling approach to gradient stops and clipping-paths for parametric bézier curves. Given an initial bézier curve, we splice it into segments rather than generating gradient stops or clipping-paths to style the segments differently. The main advantage of this approach is that it reduces the number of elements required for each conceptual curve and simplify the representation in the DOM -- especially when anticipating large numbers of curves and a non-uniform segmentation. Thanks to Tim Hall for code review, and to Jason Davies for his work on animated béziers. Lifespan design concept inspired by Periscopic's work on U.S. gun deaths. Related: Aaron Bycoffe's block on how to Split an SVG path into pieces.