diff --git a/.changeset/tiny-ducks-roll.md b/.changeset/tiny-ducks-roll.md
new file mode 100644
index 000000000..b7720f99c
--- /dev/null
+++ b/.changeset/tiny-ducks-roll.md
@@ -0,0 +1,5 @@
+---
+'@guardian/source-development-kitchen': major
+---
+
+Refactor `DottedLines` to render pattern with CSS rather than SVG
diff --git a/libs/@guardian/source-development-kitchen/src/react-components/lines/DottedLines.tsx b/libs/@guardian/source-development-kitchen/src/react-components/lines/DottedLines.tsx
index 1e9344975..2aef058fd 100644
--- a/libs/@guardian/source-development-kitchen/src/react-components/lines/DottedLines.tsx
+++ b/libs/@guardian/source-development-kitchen/src/react-components/lines/DottedLines.tsx
@@ -1,5 +1,5 @@
-import type { SerializedStyles } from '@emotion/react';
-import { breakpoints, neutral } from '@guardian/source/foundations';
+import { css, type SerializedStyles } from '@emotion/react';
+import { breakpoints, palette } from '@guardian/source/foundations';
import type { LineCount } from './Lines';
const dotRadius = 1;
@@ -8,56 +8,28 @@ const maxWidth = breakpoints.wide;
export const getHeight = (count: LineCount): number => gridSize * count;
+const pattern = css`
+ max-width: ${maxWidth}px;
+ background-size: ${gridSize}px ${gridSize}px;
+ background-position: top center;
+ background-image: radial-gradient(
+ currentColor,
+ currentColor ${dotRadius}px,
+ transparent ${dotRadius}px
+ );
+`;
+
export const DottedLines = ({
count = 4,
- color = neutral[86],
+ color = palette.neutral[86],
cssOverrides,
}: {
count?: LineCount;
color?: string;
cssOverrides?: SerializedStyles | SerializedStyles[];
-}) => {
- const dots = [];
- for (let index = 1; index <= count; index++) {
- dots.push(
-