Add advanced SVG filter effects and glass/neumorphic/neon themes by jongalloway · Pull Request #156 · jongalloway/DiagramForge

jongalloway · 2026-03-31T05:27:54Z

Summary

Adds five new SVG filter effects to the rendering pipeline and three new built-in theme presets that showcase them.

New SVG Filter Effects

Filter	Technique	Use Case
`frosted-glass`	Ambient shadow + inner top-edge highlight	Translucent glass depth
`neumorphic`	Dual light/dark offset shadows	Embossed/extruded appearance
`glass-glow`	Blurred color-boosted screen blend	Neon glow on dark backgrounds
`inner-glass`	Inset composite shadow	Recessed panel look
`ambient-shadow`	Soft omnidirectional blur	Subtle floating elevation

New Built-in Themes

glass — Translucent tinted nodes with frosted-glass filter, semi-transparent palette, stronger borders
neumorphic — Uniform surface with dual-shadow embossing, subtle stroke, no gradients
neon — Dark background with multi-stop gradient borders and glass-glow filter

Changes

SvgRenderSupport.cs — Refactored AppendShadowFilterDefs from if-chain to switch; added 5 new filter cases
SvgNodeWriter.cs — Generalized shadow filter application to work with any non-none ShadowStyle
DiagramRenderer.cs — Extended ApplyShadowStyle with parameter clamping for all new filter types
Theme.cs — Added 3 new preset themes with GetByName/BuiltInThemeNames registration (25 → 28 themes)
README.md — Updated theme count and gallery with glass, neumorphic, and neon entries

Testing

All 1,117 tests pass (1,016 unit + 101 E2E)
9 new unit tests covering filter output and frontmatter integration
3 new E2E snapshot fixtures with baselines

Add five new SVG filter effects to the rendering pipeline: - frosted-glass: ambient shadow + inner top-edge highlight for glass depth - neumorphic: dual light/dark offset shadows for embossed appearance - glass-glow: blurred color-boosted screen blend for neon glow - inner-glass: inset shadow for recessed panel look - ambient-shadow: soft omnidirectional shadow Add three new built-in theme presets that showcase these filters: - glass: translucent tinted nodes with frosted-glass filter - neumorphic: uniform surface with dual-shadow embossing - neon: dark background with gradient borders and glass-glow Generalize SvgNodeWriter to apply filters for any non-none ShadowStyle. Extend DiagramRenderer.ApplyShadowStyle with parameter clamping for all new filter types. Update README theme gallery with the three new themes. All 1117 tests pass (1016 unit + 101 E2E).

Copilot

Pull request overview

Adds advanced SVG filter-based shadow/effect styles to the rendering pipeline and introduces three new built-in themes (glass, neumorphic, neon) that showcase those effects.

Changes:

Refactors SVG shadow filter emission to a switch-based implementation and adds new filter definitions (frosted-glass, neumorphic, glass-glow, inner-glass, ambient-shadow).
Generalizes node shadow application so any non-none shadow style can be applied.
Adds built-in themes + unit/E2E fixture coverage for the new styles and updates README theme gallery/count.

Reviewed changes

Copilot reviewed 10 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`src/DiagramForge/Rendering/SvgRenderSupport.cs`	Adds/implements new SVG `<filter>` definitions and refactors style dispatch to a `switch`.
`src/DiagramForge/Rendering/SvgNodeWriter.cs`	Broadens node shadow applicability beyond just `soft`/`glow`.
`src/DiagramForge/DiagramRenderer.cs`	Extends frontmatter `shadowStyle` handling with new styles and parameter clamping.
`src/DiagramForge/Models/Theme.cs`	Registers new built-in theme names and adds `Glass`, `Neumorphic`, and `Neon` presets.
`tests/DiagramForge.Tests/Rendering/SvgRendererPaletteTests.cs`	Adds unit tests asserting new filters are emitted for new themes/styles.
`tests/DiagramForge.Tests/DiagramRendererTests.cs`	Adds a frontmatter-driven test for advanced `shadowStyle` filter emission.
`tests/DiagramForge.E2ETests/Fixtures/mermaid-xychart-prism.expected.svg`	Updates snapshot baseline (formatting/output change).
`tests/DiagramForge.E2ETests/Fixtures/mermaid-theme-glass.input`	Adds E2E fixture input for the new glass theme.
`tests/DiagramForge.E2ETests/Fixtures/mermaid-theme-glass.expected.svg`	Adds E2E expected SVG baseline for glass theme rendering.
`tests/DiagramForge.E2ETests/Fixtures/mermaid-theme-neumorphic.input`	Adds E2E fixture input for the new neumorphic theme.
`tests/DiagramForge.E2ETests/Fixtures/mermaid-theme-neumorphic.expected.svg`	Adds E2E expected SVG baseline for neumorphic theme rendering.
`tests/DiagramForge.E2ETests/Fixtures/mermaid-theme-neon.input`	Adds E2E fixture input for the new neon theme.
`tests/DiagramForge.E2ETests/Fixtures/mermaid-theme-neon.expected.svg`	Adds E2E expected SVG baseline for neon theme rendering.
`README.md`	Updates theme count and gallery to include glass/neumorphic/neon.

Copilot · 2026-03-31T05:33:26Z

+                sb.AppendLine($"{indent}  <filter id=\"{shadowFilterId}\" x=\"-16%\" y=\"-12%\" width=\"140%\" height=\"148%\" color-interpolation-filters=\"sRGB\">");
+                sb.AppendLine($"{indent}    <feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"{F(theme.ShadowBlur * 2.5)}\" result=\"blur\"/>");
+                sb.AppendLine($"{indent}    <feOffset in=\"blur\" dx=\"0\" dy=\"{F(Math.Max(theme.ShadowOffsetY, 3))}\" result=\"offset\"/>");
+                sb.AppendLine($"{indent}    <feFlood flood-color=\"{Escape(theme.ShadowColor)}\" flood-opacity=\"{F(theme.ShadowOpacity * 0.7)}\" result=\"shadow-color\"/>");


In the ambient-shadow filter, flood-opacity is computed as theme.ShadowOpacity * 0.7 without clamping. If ShadowOpacity is set > ~1.43 (or negative) via JSON/custom theme, this can emit an invalid SVG opacity value outside [0,1]. Consider clamping the computed opacity to [0,1] (or at least Math.Min(…, 1.0) / Math.Clamp).

Suggested change

sb.AppendLine($"{indent} <feFlood flood-color=\"{Escape(theme.ShadowColor)}\" flood-opacity=\"{F(theme.ShadowOpacity * 0.7)}\" result=\"shadow-color\"/>");

sb.AppendLine($"{indent} <feFlood flood-color=\"{Escape(theme.ShadowColor)}\" flood-opacity=\"{F(Math.Max(0.0, Math.Min(theme.ShadowOpacity * 0.7, 1.0)))}\" result=\"shadow-color\"/>");

Copilot · 2026-03-31T05:33:26Z

+                theme.ShadowStyle = "neumorphic";
+                theme.UseNodeShadows = true;
+                theme.ShadowOpacity = Math.Clamp(theme.ShadowOpacity <= 0 ? 0.50 : theme.ShadowOpacity, 0.30, 0.70);
+                theme.ShadowBlur = Math.Clamp(theme.ShadowBlur <= 0 ? 4.00 : theme.ShadowBlur, 2.00, 6.00);


shadowStyle: neumorphic does not reset ShadowOffsetX/ShadowOffsetY, but the neumorphic filter definition adds/subtracts fixed offsets (+/-5). If the base theme already has offsets (e.g., a theme with ShadowOffsetY=1.4), the resulting dark/light shadows become asymmetric and shifted. Consider explicitly setting ShadowOffsetX = 0 and ShadowOffsetY = 0 for the neumorphic frontmatter style to make it deterministic and consistent with the built-in Neumorphic preset.

Suggested change

theme.ShadowBlur = Math.Clamp(theme.ShadowBlur <= 0 ? 4.00 : theme.ShadowBlur, 2.00, 6.00);

theme.ShadowBlur = Math.Clamp(theme.ShadowBlur <= 0 ? 4.00 : theme.ShadowBlur, 2.00, 6.00);

theme.ShadowOffsetX = 0;

theme.ShadowOffsetY = 0;

Copilot · 2026-03-31T05:33:27Z

+            && !string.IsNullOrEmpty(theme.ShadowStyle)
+            && !string.Equals(theme.ShadowStyle, "none", StringComparison.OrdinalIgnoreCase)


applyNodeShadow treats whitespace-only ShadowStyle values as enabled (IsNullOrEmpty returns false) which triggers a shadow filter lookup even though AppendShadowFilterDefs will trim it to empty and emit nothing. Using string.IsNullOrWhiteSpace(theme.ShadowStyle) (and/or comparing against theme.ShadowStyle.Trim()) would avoid this wasted work and keep the logic aligned with the trimming done in AppendShadowFilterDefs.

Suggested change

&& !string.IsNullOrEmpty(theme.ShadowStyle)

&& !string.Equals(theme.ShadowStyle, "none", StringComparison.OrdinalIgnoreCase)

&& !string.IsNullOrWhiteSpace(theme.ShadowStyle)

&& !string.Equals(theme.ShadowStyle.Trim(), "none", StringComparison.OrdinalIgnoreCase)

jongalloway · 2026-03-31T20:02:54Z

@copilot apply changes based on the comments in this thread

…ffsets, use IsNullOrWhiteSpace for shadow style Agent-Logs-Url: https://github.com/jongalloway/DiagramForge/sessions/e947f672-253e-4984-bccb-969bbe3c7eca Co-authored-by: jongalloway <68539+jongalloway@users.noreply.github.com>

Copilot · 2026-03-31T20:07:06Z

@copilot apply changes based on the comments in this thread

Applied all three fixes in commit 01506c5:

SvgRenderSupport.cs — flood-opacity in the ambient-shadow filter is now clamped to [0,1] via Math.Clamp(theme.ShadowOpacity * 0.7, 0.0, 1.0).
DiagramRenderer.cs — The neumorphic frontmatter case now explicitly sets ShadowOffsetX = 0 and ShadowOffsetY = 0, making the dual-shadow effect deterministic regardless of the base theme's offsets.
SvgNodeWriter.cs — applyNodeShadow guard now uses string.IsNullOrWhiteSpace and compares against theme.ShadowStyle.Trim(), preventing a spurious filter lookup on whitespace-only values.

jongalloway requested a review from Copilot March 31, 2026 05:29

Copilot started reviewing on behalf of jongalloway March 31, 2026 05:30 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

Copilot started work on behalf of jongalloway March 31, 2026 20:03 View session

Copilot finished work on behalf of jongalloway March 31, 2026 20:07

jongalloway merged commit 12dde0b into main Mar 31, 2026
5 checks passed

jongalloway deleted the advanced-svg-filter-themes branch March 31, 2026 20:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add advanced SVG filter effects and glass/neumorphic/neon themes#156

Add advanced SVG filter effects and glass/neumorphic/neon themes#156
jongalloway merged 2 commits intomainfrom
advanced-svg-filter-themes

jongalloway commented Mar 31, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

Copilot AI Mar 31, 2026

Uh oh!

jongalloway commented Mar 31, 2026

Uh oh!

Copilot AI commented Mar 31, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	sb.AppendLine($"{indent} <feFlood flood-color=\"{Escape(theme.ShadowColor)}\" flood-opacity=\"{F(theme.ShadowOpacity * 0.7)}\" result=\"shadow-color\"/>");
	sb.AppendLine($"{indent} <feFlood flood-color=\"{Escape(theme.ShadowColor)}\" flood-opacity=\"{F(Math.Max(0.0, Math.Min(theme.ShadowOpacity * 0.7, 1.0)))}\" result=\"shadow-color\"/>");

		&& !string.IsNullOrEmpty(theme.ShadowStyle)
		&& !string.Equals(theme.ShadowStyle, "none", StringComparison.OrdinalIgnoreCase)

Conversation

jongalloway commented Mar 31, 2026

Summary

New SVG Filter Effects

New Built-in Themes

Changes

Testing

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

jongalloway commented Mar 31, 2026

Uh oh!

Copilot AI commented Mar 31, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants