Skip to content

v2.5.0

Choose a tag to compare

@NiceArti NiceArti released this 24 May 19:00
· 12 commits to main since this release

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-gradient as native <linearGradient>
  • radial-gradient as native <radialGradient>
  • conic-gradient as SVG pattern fallback
  • diamond-gradient as SVG pattern fallback
  • mesh-gradient as 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.