v2.5.0
Update v2.5.0
This release expands gradiente with new advanced gradient types and renderer support across CSS, Canvas 2D, WebGL, and SVG.
Highlights
- Added SVG transformer target
Supported SVG outputs:
linear-gradientas native<linearGradient>radial-gradientas native<radialGradient>conic-gradientas SVG pattern fallbackdiamond-gradientas SVG pattern fallbackmesh-gradientas SVG pattern fallback
The SVG transformer returns reusable SVG defs data:
{
id,
href,
url,
type,
gradient,
defs,
svg
}This can be applied to SVG fill or stroke using url(#id).
Rendering Improvements
- Added proper Canvas 2D rendering for diamond gradients
- Added WebGL rendering for diamond gradients
- Added Canvas 2D and WebGL mesh rendering
- Added bicubic mesh interpolation
- Improved mesh edge handling to avoid broken borders
- Added SVG fallbacks for gradients without native SVG equivalents
- Improved playground comparison between CSS, Canvas 2D, WebGL, and SVG
Playground
The playground now includes SVG preview targets:
- SVG text
- SVG square
- SVG path/string stroke
This makes it easier to compare how each gradient behaves across renderers.
Notes
Some SVG outputs use fallback patterns because SVG does not provide native equivalents for conic, diamond, or mesh gradients. These fallbacks are designed to be reusable through standard SVG url(#id) references.