Background Pattern

1/**
2 * Provides a background image URL based on a predefined pattern.
3 * @param pattern - The name of the pattern ['blueprint', 'boxes-sm', 'boxes-md', 'boxes-lg', 'dotted', 'hearts'] chosen to convert.
4 * @returns The background image URL for the given pattern.
5 */
6export const backgroundPattern = (pattern: string): string => {
7	let svg: string;
8
9	switch (pattern) {
10		case 'blueprint':
11			svg =
12				'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="#3399cc" stroke="#fff"><path d="M0 0H32V32H0V0Z"/></svg>';
13			break;
14		case 'boxes-sm':
15			svg =
16				'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="#808080"><path d="M0 0H32V32"/></svg>';
17			break;
18		case 'boxes-md':
19			svg =
20				'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="#808080"><path d="M0 0H32V32"/></svg>';
21			break;
22		case 'boxes-lg':
23			svg =
24				'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#808080"><path d="M0 0H32V32"/></svg>';
25			break;
26
27		case 'dotted':
28			svg =
29				'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="#808080"><circle cx="16" cy="16" r="2" /></svg>';
30			break;
31		case 'hearts':
32			svg =
33				'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="32" height="32" fill="red" stroke="#808080"><path d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z"/></svg>';
34			break;
35		default:
36			svg =
37				'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="#3399cc" stroke="#fff"><path d="M0 0H32V32H0V0Z"/></svg>';
38	}
39
40	return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
41};

1import { backgroundPattern } from '@/lib/utils';
2
3export default function SomeComponent(){
4	return (
5		<div className='w-48 h-48' style={{ backgroundImage: backgroundPattern('hearts') }}></div>
6	)
7}