diff --git a/examples/svelte/src/routes/stress/+page.svelte b/examples/svelte/src/routes/stress/+page.svelte
index b57384ca..0d67394b 100644
--- a/examples/svelte/src/routes/stress/+page.svelte
+++ b/examples/svelte/src/routes/stress/+page.svelte
@@ -52,6 +52,6 @@
 
 <SvelteFlow {nodes} {edges} fitView minZoom={0.2}>
 	<Controls />
-	<Background variant={BackgroundVariant.Dots} />
+	<Background variant={BackgroundVariant.Lines} />
 	<MiniMap />
 </SvelteFlow>
diff --git a/packages/svelte/src/lib/plugins/Background/DotPattern.svelte b/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
index 1951a3d2..62c0077a 100644
--- a/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
+++ b/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
@@ -10,5 +10,5 @@
   cx={radius}
   cy={radius}
   r={radius}
-  class={cc(['svelte-flow__background-pattern', 'dot', className])}
+  class={cc(['svelte-flow__background-pattern', 'dots', className])}
 />
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 0bdb9f71..53a6bb83 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -276,14 +276,14 @@
 }
 
 .xy-flow__background-pattern {
-  &.dot {
+  &.dots {
     fill: var(
       --background-pattern-color-props,
       var(--background-pattern-color, var(--background-pattern-dot-color-default))
     );
   }
 
-  &.line {
+  &.lines {
     stroke: var(
       --background-pattern-color-props,
       var(--background-pattern-color, var(--background-pattern-line-color-default))