@rokkit/chart 1.0.0-next.16 → 1.0.0-next.160

package/src/patterns/patterns.js

@@ -0,0 +1,360 @@
+/**
+ * Unified pattern library.
+ *
+ * Each entry is an array of mark descriptors.  All geometry is in normalized
+ * 0–1 coordinates; the renderer scales by `size` at paint time.
+ *
+ * Mark types
+ * ----------
+ * circle   { cx, cy, r }
+ * line     { x1, y1, x2, y2 }           coordinates may exceed 0–1 for seamless tiling
+ * polygon  { points: [x,y][] }
+ * rect     { x, y, w, h }
+ * path     { d: [cmd, ...args][] }       SVG path commands as nested arrays (H/V take one arg)
+ *
+ * Appearance
+ * ----------
+ * fill: true      → element uses fill color (stroke: none)
+ * fill: false     → element uses stroke color (fill: none)   ← default
+ * fillOpacity: n  → applied as fill-opacity on filled marks
+ * opacity: n      → applied as opacity on any mark
+ */
+
+/** @typedef {{ type: 'circle',  cx: number, cy: number, r: number,              fill?: boolean, fillOpacity?: number, opacity?: number }} CircleMark */
+/** @typedef {{ type: 'line',    x1: number, y1: number, x2: number, y2: number, fill?: false,   strokeWidth?: number }} LineMark */
+/** @typedef {{ type: 'polygon', points: [number,number][],                       fill?: boolean, fillOpacity?: number, opacity?: number }} PolygonMark */
+/** @typedef {{ type: 'rect',    x: number,  y: number,  w: number,  h: number,  fill?: boolean, fillOpacity?: number, opacity?: number }} RectMark */
+/** @typedef {{ type: 'path',    d: (string|number)[][],                          fill?: boolean, fillOpacity?: number, opacity?: number }} PathMark */
+/** @typedef {CircleMark | LineMark | PolygonMark | RectMark | PathMark} PatternMark */
+
+/** @type {Record<string, PatternMark[]>} */
+export const PATTERNS = {
+	// ── Line-based ──────────────────────────────────────────────────────────────
+
+	brick: [
+		{ type: 'line', x1: 0, y1: 0.25, x2: 0.5, y2: 0.25 },
+		{ type: 'line', x1: 0.5, y1: 0.75, x2: 1, y2: 0.75 },
+		{ type: 'line', x1: 0, y1: 0, x2: 0, y2: 1 },
+		{ type: 'line', x1: 1, y1: 0, x2: 1, y2: 1 },
+		{ type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 }
+	],
+
+	hatch: [
+		{ type: 'line', x1: 0, y1: 0.25, x2: 1, y2: 0.25 },
+		{ type: 'line', x1: 0, y1: 0.5, x2: 1, y2: 0.5 },
+		{ type: 'line', x1: 0, y1: 0.75, x2: 1, y2: 0.75 },
+		{ type: 'line', x1: 0.25, y1: 0, x2: 0.25, y2: 1 },
+		{ type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 },
+		{ type: 'line', x1: 0.75, y1: 0, x2: 0.75, y2: 1 }
+	],
+
+	// Coordinates intentionally exceed 0–1 so lines tile seamlessly at tile edges
+	diagonal: [
+		{ type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: -0.5 },
+		{ type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
+		{ type: 'line', x1: 0.5, y1: 1.5, x2: 1.5, y2: 0.5 }
+	],
+
+	// Two sets of diagonals crossing to form a diamond lattice
+	diamonds: [
+		{ type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
+		{ type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: -0.5 },
+		{ type: 'line', x1: 0.5, y1: 1.5, x2: 1.5, y2: 0.5 },
+		{ type: 'line', x1: 0, y1: 0, x2: 1, y2: 1 },
+		{ type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: 1.5 },
+		{ type: 'line', x1: 0.5, y1: -0.5, x2: 1.5, y2: 0.5 }
+	],
+
+	tile: [
+		{ type: 'line', x1: 0, y1: 0.5, x2: 1, y2: 0.5 },
+		{ type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 }
+	],
+
+	// ── Path-based ──────────────────────────────────────────────────────────────
+
+	swell: [
+		{
+			type: 'path',
+			d: [
+				['M', 0, 0.3],
+				['A', 0.6, 0.5, 0, 0, 0, 1, 0.3]
+			]
+		}
+	],
+
+	waves: [
+		{
+			type: 'path',
+			d: [
+				['M', 0, 0.5],
+				['L', 0.25, 0],
+				['L', 0.75, 1],
+				['L', 1, 0.5]
+			]
+		}
+	],
+
+	// ── Circle-based ────────────────────────────────────────────────────────────
+
+	// Small filled dots in an X pattern across the tile
+	dots: [
+		{ type: 'circle', cx: 0.2, cy: 0.2, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.4, cy: 0.4, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.6, cy: 0.6, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.8, cy: 0.8, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.8, cy: 0.2, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.6, cy: 0.4, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.4, cy: 0.6, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.2, cy: 0.8, r: 0.08, fill: true }
+	],
+
+	// Outlined diamond (rotated square)
+	lattice: [
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0.22],
+				[0.78, 0.5],
+				[0.5, 0.78],
+				[0.22, 0.5]
+			]
+		}
+	],
+
+	// Fish-scale geometry as stroke only — same circles as petals, no fill
+	scales: [
+		{
+			type: 'path',
+			d: [
+				['M', -0.7071, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', 0.2929, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', -0.2071, 0.5],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', -0.7071, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', 0.2929, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0]
+			]
+		}
+	],
+
+	// Filled circles at tile corners + center (5-point dice pattern)
+	circles: [
+		{ type: 'circle', cx: 0.5, cy: 0.5, r: 0.2, fill: true },
+		{ type: 'circle', cx: 0, cy: 0, r: 0.2, fill: true },
+		{ type: 'circle', cx: 1, cy: 0, r: 0.2, fill: true },
+		{ type: 'circle', cx: 0, cy: 1, r: 0.2, fill: true },
+		{ type: 'circle', cx: 1, cy: 1, r: 0.2, fill: true }
+	],
+
+	// Diagonal cross strokes with a filled circle at the center
+	pip: [
+		{ type: 'line', x1: 0, y1: 0, x2: 1, y2: 1 },
+		{ type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
+		{ type: 'circle', cx: 0.5, cy: 0.5, r: 0.22, fill: true }
+	],
+
+	// Two outlined circles + two filled circles in a 2×2 grid
+	rings: [
+		{ type: 'circle', cx: 0.25, cy: 0.25, r: 0.2 },
+		{ type: 'circle', cx: 0.75, cy: 0.75, r: 0.2 },
+		{ type: 'circle', cx: 0.25, cy: 0.75, r: 0.2, fill: true },
+		{ type: 'circle', cx: 0.75, cy: 0.25, r: 0.2, fill: true }
+	],
+
+	// Fish-scale: circles centered at corners + tile center, r = 0.5√2 so each
+	// circle passes through its adjacent neighbors' centers. Even-odd fill produces
+	// the scallop/petal pattern where overlapping regions alternate filled/clear.
+	petals: [
+		{
+			type: 'path',
+			fill: true,
+			fillRule: 'evenodd',
+			d: [
+				// center (0, 0)   r=0.7071  leftmost = (-0.7071, 0)
+				['M', -0.7071, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (1, 0)   leftmost = (0.2929, 0)
+				['M', 0.2929, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (0.5, 0.5)  leftmost = (-0.2071, 0.5)
+				['M', -0.2071, 0.5],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (0, 1)   leftmost = (-0.7071, 1)
+				['M', -0.7071, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (1, 1)   leftmost = (0.2929, 1)
+				['M', 0.2929, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0]
+			]
+		}
+	],
+
+	// ── Polygon-based ───────────────────────────────────────────────────────────
+
+	// Three filled triangles tiling the corners + center of the tile
+	triangles: [
+		{
+			type: 'polygon',
+			points: [
+				[0, 0.5],
+				[0.5, 1],
+				[0, 1]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0],
+				[0, 0],
+				[0, 0.5]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[1, 0],
+				[0.5, 0.5],
+				[1, 1]
+			],
+			fill: true
+		}
+	],
+
+	// Two filled triangles scattered at opposite corners
+	shards: [
+		{
+			type: 'polygon',
+			points: [
+				[0.25, 0.017],
+				[0, 0.417],
+				[0.5, 0.417]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0.583],
+				[1, 0.583],
+				[0.75, 0.983]
+			],
+			fill: true
+		}
+	],
+
+	// Diagonal corner split — two-tone polygon division
+	wedge: [
+		{
+			type: 'polygon',
+			points: [
+				[1, 1],
+				[0.45, 1],
+				[0, 0.55],
+				[0, 0]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[1, 0],
+				[0, 0],
+				[1, 1]
+			],
+			fill: true,
+			fillOpacity: 0.55
+		}
+	],
+
+	// Two triangles pointing inward from top and bottom edges
+	argyle: [
+		{
+			type: 'polygon',
+			points: [
+				[1, 0],
+				[0.5, 0.5],
+				[0, 0]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[1, 1],
+				[0.5, 0.5],
+				[0, 1]
+			],
+			fill: true
+		}
+	],
+
+	// triangles pattern rotated 90° clockwise: (x,y) → (1−y, x)
+	chevrons: [
+		{
+			type: 'polygon',
+			points: [
+				[0, 0],
+				[0.5, 0],
+				[0, 0.5]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0],
+				[1, 0],
+				[1, 0.5]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0, 1],
+				[1, 1],
+				[0.5, 0.5]
+			],
+			fill: true
+		}
+	],
+
+	// ── Rect-based ──────────────────────────────────────────────────────────────
+
+	checkerboard: [
+		{ type: 'rect', x: 0, y: 0, w: 0.5, h: 0.5, fill: true },
+		{ type: 'rect', x: 0.5, y: 0.5, w: 0.5, h: 0.5, fill: true }
+	],
+
+	// Quarter-circle filled shape (bottom-left corner) with two accent dots
+	shell: [
+		{
+			type: 'path',
+			d: [
+				['M', 0, 1],
+				['V', 0],
+				['H', 0.6],
+				['V', 0.4],
+				['A', 0.6, 0.6, 0, 0, 1, 0, 1]
+			],
+			fill: true
+		},
+		{ type: 'circle', cx: 0.798, cy: 0.298, r: 0.081, fill: true },
+		{ type: 'circle', cx: 0.798, cy: 0.702, r: 0.081, fill: true }
+	]
+}

package/src/patterns/scale.js

@@ -0,0 +1,116 @@
+/**
+ * Mark geometry scaling and attribute resolution utilities.
+ *
+ * All pattern coordinates are stored normalized 0–1.  `scaleMark` multiplies
+ * every geometric value by `size`.  `resolveMarkAttrs` then folds in the
+ * runtime fill/stroke colors and produces a plain object whose keys are
+ * valid SVG attribute names, ready for spread (`{...attrs}`).
+ *
+ * Path `A` (arc) commands: indices 2, 3, 4 are xRotation, largeArcFlag, and
+ * sweepFlag — NOT coordinates — and are never scaled.
+ *
+ * Source → SVG name mappings applied by scaleMark:
+ *   rect  w → width,  h → height
+ *   polygon  points [[x,y]…] → SVG points string
+ *   path  d [[cmd,…]…] → SVG d string
+ */
+
+/** @import { PatternMark } from './patterns.js' */
+
+/**
+ * Scale a single SVG path command by `size`.
+ * @param {(string|number)[]} cmd
+ * @param {number} size
+ * @returns {(string|number)[]}
+ */
+function scalePathCmd(cmd, size) {
+	const [op, ...args] = cmd
+	if (op === 'A' || op === 'a') {
+		return [
+			op,
+			args[0] * size,
+			args[1] * size,
+			args[2],
+			args[3],
+			args[4],
+			args[5] * size,
+			args[6] * size
+		]
+	}
+	return [op, ...args.map((v) => (typeof v === 'number' ? v * size : v))]
+}
+
+/**
+ * Scale all geometric coordinates in a mark by `size`.
+ * Renames rect `w`/`h` to `width`/`height` and converts polygon/path to strings.
+ * @param {PatternMark} mark
+ * @param {number} size
+ * @returns {object}
+ */
+export function scaleMark(mark, size) {
+	switch (mark.type) {
+		case 'line':
+			return {
+				...mark,
+				x1: mark.x1 * size,
+				y1: mark.y1 * size,
+				x2: mark.x2 * size,
+				y2: mark.y2 * size
+			}
+		case 'circle':
+			return { ...mark, cx: mark.cx * size, cy: mark.cy * size, r: mark.r * size }
+		case 'rect': {
+			const { w, h, ...rest } = mark
+			return { ...rest, x: mark.x * size, y: mark.y * size, width: w * size, height: h * size }
+		}
+		case 'polygon':
+			return { ...mark, points: mark.points.map(([x, y]) => `${x * size},${y * size}`).join(' ') }
+		case 'path':
+			return {
+				...mark,
+				d: mark.d
+					.map((cmd) => scalePathCmd(cmd, size))
+					.map((cmd) => cmd.join(' '))
+					.join(' ')
+			}
+		default:
+			return mark
+	}
+}
+
+/**
+ * Resolve a scaled mark into SVG-ready `{ type, attrs }`.
+ * `attrs` can be spread directly onto the SVG element.
+ *
+ * Per-mark overrides respected:
+ *   mark.strokeWidth  → `stroke-width` (takes precedence over `thickness`)
+ *   mark.fillOpacity  → `fill-opacity`
+ *   mark.opacity      → `opacity`
+ *
+ * @param {object} scaledMark  Output of scaleMark
+ * @param {{ fill: string, stroke: string, thickness: number }} appearance
+ * @returns {{ type: string, attrs: object }}
+ */
+export function resolveMarkAttrs(scaledMark, { fill, stroke, thickness }) {
+	const {
+		type,
+		fill: isFill,
+		strokeWidth,
+		fillOpacity,
+		opacity,
+		fillRule,
+		...geometry
+	} = scaledMark
+
+	const attrs = {
+		...geometry,
+		fill: isFill ? fill : 'none',
+		stroke: isFill ? 'none' : stroke,
+		'stroke-width': isFill ? 0 : (strokeWidth ?? thickness)
+	}
+	if (fillOpacity !== null && fillOpacity !== undefined) attrs['fill-opacity'] = fillOpacity
+	if (opacity !== null && opacity !== undefined) attrs.opacity = opacity
+	if (fillRule !== null && fillRule !== undefined) attrs['fill-rule'] = fillRule
+
+	return { type, attrs }
+}

package/src/spec/chart-spec.js

@@ -0,0 +1,72 @@
+export class ChartSpec {
+	constructor(data) {
+		this.data = data ?? []
+		this.channels = {}
+		this.layers = []
+		this.options = {}
+	}
+
+	x(f) {
+		this.channels.x = f
+		return this
+	}
+	y(f) {
+		this.channels.y = f
+		return this
+	}
+	color(f) {
+		this.channels.color = f
+		return this
+	}
+	pattern(f) {
+		this.channels.pattern = f
+		return this
+	}
+	aes(ch) {
+		Object.assign(this.channels, ch)
+		return this
+	}
+
+	bar(opts = {}) {
+		this.layers.push({ type: 'bar', ...opts })
+		return this
+	}
+	line(opts = {}) {
+		this.layers.push({ type: 'line', ...opts })
+		return this
+	}
+	area(opts = {}) {
+		this.layers.push({ type: 'area', ...opts })
+		return this
+	}
+	arc(opts = {}) {
+		this.layers.push({ type: 'arc', ...opts })
+		return this
+	}
+	point(opts = {}) {
+		this.layers.push({ type: 'point', ...opts })
+		return this
+	}
+
+	grid(opts = {}) {
+		this.options.grid = opts
+		return this
+	}
+	legend(opts = {}) {
+		this.options.legend = opts
+		return this
+	}
+	axis(type, opts = {}) {
+		this.options[`axis_${type}`] = opts
+		return this
+	}
+	size(w, h) {
+		this.options.width = w
+		this.options.height = h
+		return this
+	}
+}
+
+export function chart(data, channels = {}) {
+	return new ChartSpec(data).aes(channels)
+}

package/src/symbols/RoundedSquare.svelte

@@ -0,0 +1,33 @@
+<script>
+	let {
+		x = 0,
+		y = 0,
+		size = 1,
+		fill = 'currentColor',
+		stroke = 'currentColor',
+		onclick,
+		onmouseover,
+		onmouseleave,
+		onfocus,
+		...restProps
+	} = $props()
+
+	let r = $derived(size * 3.534)
+	let props = $derived({ rx: r * 0.1, ry: r * 0.1, ...restProps })
+</script>
+
+<rect
+	x={x - r}
+	y={y - r}
+	width={r * 2}
+	height={r * 2}
+	{fill}
+	{stroke}
+	{...props}
+	role="button"
+	{onclick}
+	{onmouseover}
+	{onmouseleave}
+	{onfocus}
+	tabindex="0"
+/>

package/src/symbols/Shape.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { namedShapes } from './constants'
+
+	let {
+		x = 0,
+		y = 0,
+		size = 1,
+		fill = 'none',
+		stroke = 'currentColor',
+		thickness = 1,
+		name = 'circle',
+		onclick,
+		onmouseover,
+		onmouseleave,
+		onfocus,
+		onblur
+	} = $props()
+
+	let d = $derived(name in namedShapes ? namedShapes[name](size) : namedShapes['circle'](size))
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<path
+	{d}
+	{fill}
+	{stroke}
+	transform="translate({x},{y})"
+	stroke-width={thickness}
+	fill-rule="nonzero"
+	role="button"
+	{onclick}
+	{onmouseover}
+	{onmouseleave}
+	{onfocus}
+	{onblur}
+	tabindex="0"
+/>

package/src/symbols/constants/index.js

@@ -0,0 +1,4 @@
+import { scaledPathCollection } from '../../lib/utils'
+import paths from './shapes.json' with { type: 'json' }
+
+export const namedShapes = scaledPathCollection(paths)

package/src/symbols/index.js

@@ -0,0 +1,9 @@
+import { namedShapes } from './constants'
+import { default as Shape } from './Shape.svelte'
+import { default as RoundedSquare } from './RoundedSquare.svelte'
+
+export const shapes = [...Object.keys(namedShapes), 'rounded-square']
+export const components = {
+	default: Shape,
+	'rounded-square': RoundedSquare
+}

package/src/symbols/outline.svelte

@@ -0,0 +1,60 @@
+<svg
+	class="plot"
+	fill="currentColor"
+	font-family="system-ui, sans-serif"
+	font-size="10"
+	text-anchor="middle"
+	width="688"
+	height="60"
+	viewBox="0 0 688 60"
+>
+	<style>
+		:where(.plot) {
+			--plot-background: white;
+			display: block;
+			height: auto;
+			height: intrinsic;
+			max-width: 100%;
+		}
+		:where(.plot text),
+		:where(.plot tspan) {
+			white-space: pre;
+		}
+	</style>
+	<g aria-label="x-axis tick" fill="none" stroke="currentColor"
+		><path transform="translate(68,30)" d="M0,0L0,6"></path><path
+			transform="translate(160,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(252,30)" d="M0,0L0,6"></path><path
+			transform="translate(344,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(436,30)" d="M0,0L0,6"></path><path
+			transform="translate(528,30)"
+			d="M0,0L0,6"
+		></path><path transform="translate(620,30)" d="M0,0L0,6"></path></g
+	><g aria-label="x-axis tick label" transform="translate(0,9)"
+		><text y="0.71em" transform="translate(68,30)">asterisk</text><text
+			y="0.71em"
+			transform="translate(160,30)">circle</text
+		><text y="0.71em" transform="translate(252,30)">diamond2</text><text
+			y="0.71em"
+			transform="translate(344,30)">plus</text
+		><text y="0.71em" transform="translate(436,30)">square2</text><text
+			y="0.71em"
+			transform="translate(528,30)">times</text
+		><text y="0.71em" transform="translate(620,30)">triangle2</text></g
+	><g aria-label="dot" fill="none" stroke="currentColor" stroke-width="1.5"
+		><path transform="translate(160,15.25)" d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"
+		></path><path transform="translate(344,15.25)" d="M-6.873,0L6.873,0M0,6.873L0,-6.873"
+		></path><path transform="translate(528,15.25)" d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"
+		></path><path transform="translate(620,15.25)" d="M0,-5.443L4.714,2.721L-4.714,2.721Z"
+		></path><path
+			transform="translate(68,15.25)"
+			d="M0,4.769L0,-4.769M-4.13,-2.384L4.13,2.384M-4.13,2.384L4.13,-2.384"
+		></path><path
+			transform="translate(436,15.25)"
+			d="M3.534,3.534L3.534,-3.534L-3.534,-3.534L-3.534,3.534Z"
+		></path><path transform="translate(252,15.25)" d="M0,-4.995L4.995,0L0,4.995L-4.995,0Z"
+		></path></g
+	></svg
+>