diff --git a/packages/background/src/Background.vue b/packages/background/src/Background.vue
index 81c4b673..9f42cfb1 100644
--- a/packages/background/src/Background.vue
+++ b/packages/background/src/Background.vue
@@ -2,7 +2,7 @@
 import { useVueFlow } from '@vue-flow/core'
 import { BackgroundVariant } from './types'
 import type { BackgroundProps } from './types'
-import { LinePattern } from './patterns'
+import { DotPattern, LinePattern } from './patterns'
 
 const {
   id,
@@ -29,7 +29,7 @@ const { id: vueFlowId, viewport } = useVueFlow()
 const gapXY = computed(() => (Array.isArray(gap) ? gap : [gap, gap]))
 
 const background = $computed(() => {
-  const scaledGap = [gapXY.value[0] * viewport.value.zoom || 1, gapXY.value[1] * viewport.value.zoom || 1]
+  const scaledGap: [number, number] = [gapXY.value[0] * viewport.value.zoom || 1, gapXY.value[1] * viewport.value.zoom || 1]
 
   const scaledSize = size * viewport.value.zoom
 
@@ -79,7 +79,7 @@ export default {
       >
         <slot name="pattern">
           <template v-if="variant === BackgroundVariant.Lines">
-            <LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.size" />
+            <LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.scaledGap" />
           </template>
 
           <template v-else-if="variant === BackgroundVariant.Dots">
diff --git a/packages/background/src/patterns.ts b/packages/background/src/patterns.ts
index 87566b2d..4181a397 100644
--- a/packages/background/src/patterns.ts
+++ b/packages/background/src/patterns.ts
@@ -7,13 +7,12 @@ interface LinePatternProps {
   color: string
 }
 
-export const LinePattern: FunctionalComponent<LinePatternProps> = ({ dimensions, size, color }) => {
-  return () =>
-    h('path', {
-      'stroke': color,
-      'stroke-width': size,
-      'd': `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`,
-    })
+export const LinePattern: FunctionalComponent<LinePatternProps> = function ({ dimensions, size, color }) {
+  return h('path', {
+    'stroke': color,
+    'stroke-width': size,
+    'd': `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`,
+  })
 }
 
 interface DotPatternProps {
@@ -21,8 +20,8 @@ interface DotPatternProps {
   color: string
 }
 
-export const DotPattern: FunctionalComponent<DotPatternProps> = ({ radius, color }) => {
-  return () => h('circle', { cx: radius, cy: radius, r: radius, fill: color })
+export const DotPattern: FunctionalComponent<DotPatternProps> = function ({ radius, color }) {
+  return h('circle', { cx: radius, cy: radius, r: radius, fill: color })
 }
 
 export const Patterns = {