fix(notes): use SVG filters for soft shadow in SVG export by steveruizok · Pull Request #7934 · tldraw/tldraw

steveruizok · 2026-02-14T22:28:56Z

When exporting sticky notes as SVG, the shadow was rendered as a simple semi-transparent offset rectangle, producing a hard shadow that looked different from the soft CSS box-shadow seen in-app. This PR replaces that with a proper SVG filter using feGaussianBlur and feOffset to create a two-layer soft drop shadow that closely matches the in-app appearance. The shadow is skipped in dark mode, matching the in-app behavior.

Change type

bugfix

Test plan

Create a file with one or more sticky notes
Select a sticky note and export as SVG (right-click → export as SVG)
Open the exported SVG in a browser — verify it has a soft drop shadow instead of a hard rectangle shadow
Export in dark mode — verify no shadow is rendered (matches in-app behavior)
Export multiple sticky notes — verify each has its own shadow filter

Release notes

Fix sticky notes having a hard shadow instead of a soft drop shadow when exported as SVG.

Note

Medium Risk
Touches SVG export rendering and introduces per-shape SVG defs/filters, which can affect exported output and snapshot stability across viewers. CI workflow change is low risk but may lengthen runs or fail if build prerequisites change.

Overview
Sticky note SVG export now uses a per-note filter definition (registered via ctx.addExportDef) to render a soft, multi-pass drop shadow instead of the previous hard shadow rectangle, and the shadow is omitted in dark mode.

The Playwright snapshot update workflow now builds apps/examples (including asset refresh + prebuild) before running yarn e2e --update-snapshots, reducing snapshot churn from stale builds.

^{Written by Cursor Bugbot for commit c8277fd. This will update automatically on new commits. Configure here.}

Replace the hard offset rectangle shadow with a proper SVG filter using feGaussianBlur and feOffset to create a soft drop shadow that closely matches the in-app CSS box-shadow appearance. The shadow filter is skipped in dark mode, matching the in-app behavior.

vercel · 2026-02-14T22:28:58Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
examples	Ready	Preview	Feb 25, 2026 6:16pm

5 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
analytics	Ignored	Preview	Feb 25, 2026 6:16pm
tldraw-docs	Ignored	Preview	Feb 25, 2026 6:16pm
chat-template	Skipped		Feb 25, 2026 6:16pm
tldraw-shader	Skipped		Feb 25, 2026 6:16pm
workflow-template	Skipped		Feb 25, 2026 6:16pm

Co-Authored-By: Claude Opus 4.6 <[email protected]>

cursor · 2026-02-16T09:32:49Z

packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx

+					</feMerge>
+				</filter>
+			),
+		})


Dark-mode exports include unused shadow filters

Low Severity

toSvg always calls ctx.addExportDef for the note shadow filter, even when ctx.isDarkMode prevents any filtered shadow rect from rendering. This leaves large unused filter definitions in dark-mode SVG exports, increasing output size and parse cost without affecting visuals.

Additional Locations (1)

packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx#L398-L407

mimecuvalo

LGTM

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

cursor · 2026-02-24T14:38:06Z

packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx

+					</feMerge>
+				</filter>
+			),
+		})


Filter IDs can collide across SVGs

Medium Severity

The new SVG filter id uses shape.id (cast to SafeId) without any per-export scoping, so exporting multiple SVGs that contain the same note shape.id and embedding them in the same document can cause url(#...) to reference the wrong <filter>, producing incorrect shadows.

cursor · 2026-02-24T14:38:06Z

packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx

+						fill={getColorValue(theme, shape.props.color, 'noteFill')}
+						filter={`url(#${filterId})`}
+					/>
+				)}


Note fill rendered twice in light mode

Low Severity

In light mode, a filled <rect> with filter is rendered and then an identical filled <rect> is rendered again on top, so the note’s fill is drawn twice. If noteFill ever includes transparency or non-normal blending, this changes exported colors/opacity compared to rendering a single fill.

cloudflare-workers-and-pages · 2026-02-25T10:01:10Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
🕒 Queued	multiplayer-template	`b3231a5`	Feb 25 2026, 10:01 AM

cloudflare-workers-and-pages · 2026-02-25T10:01:10Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
🔵 In progress View logs	image-pipeline-template	`b3231a5`	Feb 25 2026, 10:01 AM

cloudflare-workers-and-pages · 2026-02-25T10:01:10Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	multiplayer-template	`c8277fd`	Feb 25 2026, 06:18 PM

The update-snapshots workflow was missing the build step that the regular e2e workflow has, which is needed for `vite preview` to serve the app. Co-Authored-By: Claude Opus 4.6 <[email protected]>

Add 12 new entries from PRs merged since v4.4.0: - Featured: click-through on transparent image pixels (#7942) - API: enum-to-const-object refactor (#8084) - Improvements: SVG sanitizer (#7896), save-on-blur (#8037) - Bug fixes: cross-origin download (#8090), zero-size draw (#8067), rich text toolbar cleanup (#8050), zoom threshold (#8040), selection foreground fallback (#8011), sticky note SVG shadow (#7934), arrow frame clamping (#7932), zero pressure draw (#5693)

huppy-bot bot added the bugfix Bug fix label Feb 14, 2026

steveruizok added the update-snapshots ⚙️ Regenerates Playwright snapshots and commits them label Feb 14, 2026

github-actions bot removed the update-snapshots ⚙️ Regenerates Playwright snapshots and commits them label Feb 14, 2026

steveruizok and others added 2 commits February 14, 2026 22:49

fix(notes): refine SVG shadow filter with erode morphology

c729896

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Merge branch 'main' into steveruizok/fix-note-svg-shadow

98d4696

cursor bot reviewed Feb 16, 2026

View reviewed changes

mimecuvalo approved these changes Feb 18, 2026

View reviewed changes

steveruizok added the update-snapshots ⚙️ Regenerates Playwright snapshots and commits them label Feb 24, 2026

github-actions bot removed the update-snapshots ⚙️ Regenerates Playwright snapshots and commits them label Feb 24, 2026

[automated] update snapshots

b48c5fa

cursor bot reviewed Feb 24, 2026

View reviewed changes

Merge branch 'main' into steveruizok/fix-note-svg-shadow

b3231a5

vercel bot deployed to Preview – analytics February 25, 2026 10:01 View deployment

steveruizok enabled auto-merge February 25, 2026 10:02

vercel bot deployed to Preview – tldraw-docs February 25, 2026 10:10 View deployment

steveruizok added the update-snapshots ⚙️ Regenerates Playwright snapshots and commits them label Feb 25, 2026

github-actions bot removed the update-snapshots ⚙️ Regenerates Playwright snapshots and commits them label Feb 25, 2026

steveruizok added the update-snapshots ⚙️ Regenerates Playwright snapshots and commits them label Feb 25, 2026

github-actions bot removed the update-snapshots ⚙️ Regenerates Playwright snapshots and commits them label Feb 25, 2026

fix(ci): add missing build step to update-snapshots workflow

4b8a172

The update-snapshots workflow was missing the build step that the regular e2e workflow has, which is needed for `vite preview` to serve the app. Co-Authored-By: Claude Opus 4.6 <[email protected]>

steveruizok added the update-snapshots ⚙️ Regenerates Playwright snapshots and commits them label Feb 25, 2026

github-actions bot removed the update-snapshots ⚙️ Regenerates Playwright snapshots and commits them label Feb 25, 2026

huppy-bot bot and others added 2 commits February 25, 2026 10:43

[automated] update snapshots

55eaa17

ok

c8277fd

vercel bot temporarily deployed to Preview – workflow-template February 25, 2026 18:14 Inactive

vercel bot temporarily deployed to Preview – chat-template February 25, 2026 18:14 Inactive

vercel bot temporarily deployed to Preview – tldraw-shader February 25, 2026 18:14 Inactive

steveruizok temporarily deployed to bemo-canary February 25, 2026 18:14 — with GitHub Actions Inactive

steveruizok temporarily deployed to e2e-dotcom February 25, 2026 18:14 — with GitHub Actions Inactive

github-actions bot deployed to bemo-preview February 25, 2026 18:15 View deployment

vercel bot deployed to Preview – examples February 25, 2026 18:16 View deployment

steveruizok added this pull request to the merge queue Feb 25, 2026

Merged via the queue into main with commit 296d1c9 Feb 25, 2026
20 of 21 checks passed

steveruizok deleted the steveruizok/fix-note-svg-shadow branch February 25, 2026 18:24

steveruizok mentioned this pull request Feb 27, 2026

docs: update next.mdx release notes #8105

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(notes): use SVG filters for soft shadow in SVG export#7934

fix(notes): use SVG filters for soft shadow in SVG export#7934
steveruizok merged 8 commits intomainfrom
steveruizok/fix-note-svg-shadow

steveruizok commented Feb 14, 2026 •

edited by cursor bot

Loading

Uh oh!

vercel bot commented Feb 14, 2026 •

edited

Loading

Uh oh!

cursor bot Feb 16, 2026

Uh oh!

mimecuvalo left a comment

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Feb 24, 2026

Uh oh!

cursor bot Feb 24, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Feb 25, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Feb 25, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Feb 25, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

steveruizok commented Feb 14, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Change type

Test plan

Release notes

Uh oh!

vercel bot commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor bot Feb 16, 2026

Choose a reason for hiding this comment

Dark-mode exports include unused shadow filters

Uh oh!

mimecuvalo left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Feb 24, 2026

Choose a reason for hiding this comment

Filter IDs can collide across SVGs

Uh oh!

cursor bot Feb 24, 2026

Choose a reason for hiding this comment

Note fill rendered twice in light mode

Uh oh!

cloudflare-workers-and-pages bot commented Feb 25, 2026

Deploying with Cloudflare Workers

Uh oh!

cloudflare-workers-and-pages bot commented Feb 25, 2026

Deploying with Cloudflare Workers

Uh oh!

cloudflare-workers-and-pages bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

steveruizok commented Feb 14, 2026 •

edited by cursor bot

Loading

vercel bot commented Feb 14, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Feb 25, 2026 •

edited

Loading