Skip to content

3.0.0

Latest

Choose a tag to compare

@sohandotgit sohandotgit released this 14 Jul 04:27

Added: mix-blend-mode compositing and isolation: isolate

ThinPath now renders SVG blend modes. An element (or group) with a mix-blend-mode composites against its backdrop using the corresponding blend equation instead of plain source-over.

  • All 16 CSS blend modes are supported: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity.
  • isolation: isolate is honored, so a group's descendant blends compose only against content inside the group.
  • Works through all the usual paths: presentation attribute (mix-blend-mode="multiply"), inline style, and <style> sheet rules. An unrecognized keyword falls back to normal (never a parse error).
  • Correctly combines with opacity and on the same element — all three share a single compositing layer.

Performance / memory: a blended element reuses the exact same single transparency layer that group opacity already allocates — no extra offscreen surface. Memory profiling confirms peak usage scales with visible area × nesting depth (not element count), frees each layer at composite, and leaks nothing across repeated renders.

Known limitation: soft-light follows Core Graphics' implementation, which differs from the W3C CSS Compositing formula by up to ~4% per channel on mid-tone backdrops. The other 15 modes match the CSS specification exactly.