Use svg pattern for background instead of css tiling

src/additional-components/Background/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, HTMLAttributes } from 'react';
+import React, { memo, HTMLAttributes } from 'react';
 import cc from 'classcat';
 
 import { useStoreState } from '../../store/hooks';
@@ -34,25 +34,26 @@ const Background = ({
   const xOffset = x % scaledGap;
   const yOffset = y % scaledGap;
 
-  const bgSvgTile = useMemo(() => {
-    const isLines = variant === BackgroundVariant.Lines;
-    const bgColor = color ? color : defaultColors[variant];
-    const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
 
-    return encodeURIComponent(
+	const isLines = variant === BackgroundVariant.Lines;
-      `<svg width="${scaledGap}" height="${scaledGap}" xmlns='http://www.w3.org/2000/svg'>${path}</svg>`
+	const bgColor = color ? color : defaultColors[variant];
-    );
+	const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
-  }, [variant, scaledGap, size, color]);
 
   return (
-    <div
+    <svg
       className={bgClasses}
       style={{
-        ...style,
+				...style,
-        backgroundImage: `url("data:image/svg+xml;utf8,${bgSvgTile}")`,
+				width: "100%",
-        backgroundPosition: `${xOffset}px ${yOffset}px`,
+				height: "100%"
       }}
-    ></div>
+    >
+			<pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
+				{path}
+			</pattern>
+
+			<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
+		</svg>
   );
 };
 

src/additional-components/Background/utils.ts

@@ -1,7 +0,0 @@
-export const createGridLinesPath = (scaledGap: number, strokeWidth: number, stroke: string): string => {
-  return `<path stroke="${stroke}" strokeWidth="${strokeWidth}" d="M0 0 V${scaledGap} M0 0 H${scaledGap}" />`;
-};
-
-export const createGridDotsPath = (size: number, fill: string): string => {
-  return `<circle cx="${size}" cy="${size}" r="${size}" fill="${fill}" />`;
-};

src/additional-components/Background/utils.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const createGridLinesPath = (size: number, strokeWidth: number, stroke: string): React.ReactElement => {
+  return <path stroke={stroke} strokeWidth={strokeWidth} d={`M${size / 2} 0 V${size} M0 ${size / 2} H${size}`}  />;
+};
+
+export const createGridDotsPath = (size: number, fill: string): React.ReactElement => {
+  return <circle cx={size / 2} cy={size / 2} r={size} fill={fill} />;
+};