veltman/flubber
Flubber
Flubber is an SVG path morphing library and shape transition engine designed to calculate smooth interpolations between complex vector shapes. It functions as a vector shape interpolator that generates intermediate path states between two sets of coordinates based on a progress value.
The toolkit provides specialized capabilities for managing transitions between different shape quantities, including the ability to split a single shape into multiple pieces or merge multiple shapes into one. It also enables morphing between custom paths and geometric primitives, such as circles and rectangles, using specific dimensions and center points.
The library covers a broad surface of SVG path manipulation, including the decomposition of composite path strings, coordinate-to-string serialization, and point-distribution matching to ensure smooth transitions.
Features
- Shape Transition Engines - Implements a system for matching and transitioning between vector objects of different quantities for fluid morphing effects.
- Path Morphing - Implements fluid interpolation of point arrays to morph complex SVG paths into circles.
- Vector Animation Libraries - Provides a library for animating SVG paths and coordinate systems to create fluid vector transitions.
- Geometric Path Splitting - Divides a single geometric path into multiple pieces to enable transitions between different object counts.
- Geometry Primitive Morphing - Transform a path or coordinate set into a rectangle defined by a starting position and dimensions.
- Animation Shape Splitters - Enables smooth transitions from a single object to a group of objects by splitting shapes.
- Coordinate-Based Shape Manipulation - Programmatically alters geometric vertex coordinates to calculate intermediate states for shape morphing.
- Shape Quantity Transitions - Provides the ability to split or merge shapes to create fluid transitions between sets of different sizes.
- Point Distribution Matching - Aligns sets of shapes by index to prevent erratic movement during vector transitions.
- Shape Pair Matching - Matches lists of shapes by index to generate corresponding transitions for every pair in a set.
- SVG Path Manipulation Toolkits - Provides functions for splitting, merging, and converting coordinate arrays into standardized SVG path strings.
- Vector Distribution Workflows - Facilitates animations that transition from a single vector object to a group of multiple objects.
- Path Coordinate Interpolators - Calculates the intermediate coordinate states required to smoothly transition one vector shape into another.
- Data-to-String Converters - Transforms arrays of coordinate points into formatted strings for SVG rendering.
- SVG Path Calculations - Calculates and generates valid SVG path strings from coordinate point arrays.
- Geometric Primitive Converters - Morphs custom complex shapes into basic circles or rectangles using specific dimensions.
- Primitive Normalizers - Converts circles and rectangles into standardized coordinate arrays to allow them to morph with custom paths.
- Primitive Morphing Targets - Transforms custom shapes into circles or rectangles using specific dimensions and center points.
- SVG Path Parsers - Provides logic to parse composite SVG path strings into individual shape arrays for independent animation.
- SVG Path Serializers - Converts geometric coordinate data into standardized SVG path data strings.
- SVG Path String Splitters - Breaks single path strings containing multiple shapes into arrays of individual single-shape strings.
- Shape Interpolators - Generates intermediate path states between two sets of coordinates based on a progress value for smooth transitions.
- Structure-to-String Rendering - Transforms calculated coordinate arrays into standardized SVG path strings for rendering.
