@jannchie/icons 0.1.0 → 0.3.0

package/dist/src/rate.js

@@ -1,31 +1,41 @@
 import { dot } from "./scene.js";
-import { glyph, snap } from "./letters.js";
+import { advance, glyph, shift, snap } from "./letters.js";
 //#region src/rate.js
-var CROSS = .65;
-var POINT = .3;
-var GAP = .18;
+var H = 7;
+var TOP = 12 - H / 2;
+var CROSS = 4.2;
+var GAP = 1.75;
+var POINT = 1;
+var POINT_GAP = 2;
+var MAX_WIDTH = 21;
+var ASPECT = .95;
 function rate(text) {
 	const chars = ["x", ...text];
-	const widthAt = (h) => chars.reduce((w, c) => w + (c === "x" ? CROSS : c === "." ? POINT : 3.5 / 6) * h, 0) + GAP * h * (chars.length - 1);
-	const h = Math.min(9.5, 19 / widthAt(1));
-	let x = 12 - widthAt(h) / 2;
-	const top = 12 - h / 2;
+	const gapAfter = (i) => chars[i] === "." || chars[i + 1] === "." ? POINT_GAP : GAP;
+	const fixed = chars.reduce((w, c, i) => w + (c === "x" ? CROSS : c === "." ? POINT : 0) + (i < chars.length - 1 ? gapAfter(i) : 0), 0);
+	const units = chars.reduce((w, c) => w + (c === "x" || c === "." ? 0 : advance(c)), 0);
+	const sy = H / 6;
+	const sx = Math.min(sy * ASPECT, (MAX_WIDTH - fixed) / units);
+	let x = 12 - (fixed + units * sx) / 2;
 	const out = [];
-	for (const c of chars) {
+	chars.forEach((c, i) => {
 		if (c === "x") {
-			const s = CROSS * h;
-			const [cx, cy] = [x + s / 2, top + h * .6];
-			out.push(`M${cx - s / 2} ${cy - s / 2}L${cx + s / 2} ${cy + s / 2}`, `M${cx + s / 2} ${cy - s / 2}L${cx - s / 2} ${cy + s / 2}`);
-			x += s;
+			const [cx, cy, h] = [
+				x + CROSS / 2,
+				12,
+				CROSS / 2
+			];
+			out.push(`M${cx - h} ${cy - h}L${cx + h} ${cy + h}`, `M${cx + h} ${cy - h}L${cx - h} ${cy + h}`);
+			x += CROSS;
 		} else if (c === ".") {
-			out.push(dot(x + POINT * h / 2, top + h - .25));
-			x += POINT * h;
+			out.push(dot(x + POINT / 2, 15.25));
+			x += POINT;
 		} else {
-			out.push(glyph(c, x, top, h / 6));
-			x += 3.5 / 6 * h;
+			out.push(glyph(c, x - shift(c) * sx, TOP, sx, sy));
+			x += advance(c) * sx;
 		}
-		x += GAP * h;
-	}
+		x += gapAfter(i);
+	});
 	return snap(out);
 }
 //#endregion

package/dist/src/rating.js

@@ -1,5 +1,6 @@
 import { circle, rounded } from "./geometry.js";
 import { line, textWidth } from "./letters.js";
+import { tagShape } from "./marks.js";
 //#region src/rating.js
 var sq = (x0, y0, x1, y1) => [
 	[x0, y0],
@@ -130,6 +131,15 @@ var FRAMES = {
 			18.5,
 			18.5
 		]
+	},
+	tag: {
+		shape: tagShape,
+		box: [
+			10.5,
+			7.5,
+			18.5,
+			16.5
+		]
 	}
 };
 var SYSTEMS = {
@@ -242,6 +252,16 @@ var SYSTEMS = {
 			"12+",
 			"16+"
 		]
+	},
+	sensitivity: {
+		frame: "tag",
+		zh: "图片敏感度",
+		ratings: [
+			"G",
+			"S",
+			"Q",
+			"E"
+		]
 	}
 };
 var GAP = 2;

package/dist/src/render.js

@@ -69,7 +69,7 @@ var animateAttrs = (p) => p.frames ? {
 var finalized = /* @__PURE__ */ new Map();
 var hinted = /* @__PURE__ */ new Map();
 function pathsOf(icon, corner, weight, px = 0) {
-	const base = `${icon.name}|${corner.radius}|${weight.stroke}`;
+	const base = `${icon.name}|${corner.sharp && !icon.animation ? "sharp" : corner.radius}|${weight.stroke}`;
 	let paths = finalized.get(base);
 	if (!paths) {
 		const stroke = weight.stroke;
@@ -78,7 +78,7 @@ function pathsOf(icon, corner, weight, px = 0) {
 			stroke,
 			weight: weight.id
 		};
-		paths = icon.animation ? animatedPaths(icon, opts, stroke) : finalize(icon.draw(opts), stroke);
+		paths = icon.animation ? animatedPaths(icon, opts, stroke) : finalize(icon.draw(opts), stroke, { sharp: !!corner.sharp });
 		finalized.set(base, paths);
 	}
 	if (!px || px / 24 >= HINT_MAX_SCALE || icon.animation) return paths;
@@ -108,7 +108,9 @@ var pathAttrs = (p, colors) => {
 		"d": p.d,
 		"stroke-width": p.width ? +p.width.toFixed(3) : void 0,
 		"stroke": color,
-		"fill": p.fill ? color ?? colors?.primary ?? "currentColor" : void 0
+		"fill": p.fill ? color ?? colors?.primary ?? "currentColor" : void 0,
+		"stroke-linecap": p.round ? "round" : void 0,
+		"stroke-linejoin": p.round ? "round" : void 0
 	};
 };
 Object.fromEntries(Object.keys(ROLES).map((r) => [r, `var(--icon-${r}, currentColor)`]));

package/dist/src/scene.js

@@ -5,6 +5,12 @@ var dot = (x, y, size = 2) => ({
 	d: `M${x} ${y}h0`,
 	dot: size
 });
+var eye = (x, y, size = 2) => ({
+	d: `M${x} ${y}h0`,
+	dot: size,
+	round: true,
+	eye: true
+});
 var opening = (cx, w, h) => [
 	[cx - w / 2, GROUND],
 	[cx - w / 2, 20 - h],
@@ -12,4 +18,4 @@ var opening = (cx, w, h) => [
 	[cx + w / 2, GROUND]
 ];
 //#endregion
-export { GROUND, dot, groundLine, opening };
+export { GROUND, dot, eye, groundLine, opening };

package/dist/src/sensor.js

@@ -0,0 +1,52 @@
+import { line, textWidth } from "./letters.js";
+//#region src/sensor.js
+var L = 2.5;
+var [X0, Y0, X1, Y1] = [
+	2.5,
+	5.5,
+	21.5,
+	18.5
+];
+var cropMarks = () => [
+	`M${X0} ${Y0 + L}V${Y0}H${X0 + L}`,
+	`M${X1 - L} ${Y0}H${X1}V${Y0 + L}`,
+	`M${X1} ${Y1 - L}V${Y1}H${X1 - L}`,
+	`M${X0 + L} ${Y1}H${X0}V${Y1 - L}`
+];
+var SPAN = 16;
+var GAP = 1.75;
+var label = (text) => {
+	const sx = Math.min(1, (SPAN - GAP * (text.length - 1)) / textWidth(text, 1, 0));
+	return line(text, [12, 12], sx, GAP, 1).map((d) => ({
+		d,
+		thin: true
+	}));
+};
+var SENSORS = {
+	"medium-format": {
+		zh: "中画幅",
+		paths: () => label("MF")
+	},
+	"full-frame": {
+		zh: "全画幅",
+		paths: () => label("FF")
+	},
+	"aps-c": {
+		zh: "APS-C 画幅",
+		paths: () => label("APSC")
+	},
+	"mft": {
+		zh: "M4/3 画幅",
+		paths: () => label("M43")
+	},
+	"one-inch": {
+		zh: "1 英寸",
+		paths: () => [...line("1", [10.5, 12], 1, GAP, 1), "M14 9V11M16 9V11"].map((d) => ({
+			d,
+			thin: true
+		}))
+	}
+};
+var sensor = (key) => [...cropMarks(), ...SENSORS[key].paths()];
+//#endregion
+export { SENSORS, cropMarks, sensor };

package/dist/src/shield.js

@@ -0,0 +1,34 @@
+import { place } from "./clearance.js";
+import { badge } from "./folder.js";
+import { cornerScale, outlines, shield } from "./symbols.js";
+//#region src/shield.js
+var plain = (radius) => shield([12, 12], 2.3, radius);
+function withBadge(name, draw, tone, radius) {
+	const k = cornerScale[name];
+	const shape = place(outlines[name], badge, k);
+	const [x0, y0, x1, y1] = shape.circle ? [
+		shape.c[0] - shape.circle,
+		shape.c[1] - shape.circle,
+		shape.c[0] + shape.circle,
+		shape.c[1] + shape.circle
+	] : shape.box;
+	const hole = {
+		d: `M${x0} ${y0}H${x1}V${y1}H${x0}Z`,
+		cut: true,
+		hidden: true,
+		occlude: true
+	};
+	return [
+		...plain(radius),
+		hole,
+		...tone(draw(badge, k, radius)).map((p) => typeof p === "string" ? {
+			d: p,
+			cut: true
+		} : {
+			...p,
+			cut: true
+		})
+	];
+}
+//#endregion
+export { badge, plain, withBadge };

package/dist/src/status.js

@@ -0,0 +1,83 @@
+import { dot } from "./scene.js";
+import { danger, success, warning } from "./tone.js";
+import { rotate } from "./transform.js";
+import { circle, rounded } from "./geometry.js";
+import { ring } from "./marks.js";
+import { check, cross } from "./symbols.js";
+//#region src/status.js
+var R = 9;
+var at = (deg) => `${+(12 + R * Math.cos(deg * Math.PI / 180)).toFixed(3)} ${+(12 + R * Math.sin(deg * Math.PI / 180)).toFixed(3)}`;
+var dashed = () => Array.from({ length: 10 }, (_, i) => `M${at(i * 36 - 82)}A${R} ${R} 0 0 1 ${at(i * 36 - 62)}`);
+var pie = (deg) => ({
+	d: deg >= 360 ? `${circle(12, 12, 5.5)}Z` : `M12 12V6.5A5.5 5.5 0 ${deg > 180 ? 1 : 0} 1 ${+(12 + 5.5 * Math.sin(deg * Math.PI / 180)).toFixed(3)} ${+(12 - 5.5 * Math.cos(deg * Math.PI / 180)).toFixed(3)}Z`,
+	fill: true
+});
+var pencil = (radius) => rotate(rounded([
+	[7.5, 12],
+	[9.25, 10.75],
+	[16.5, 10.75],
+	[16.5, 13.25],
+	[9.25, 13.25]
+], Math.min(radius, .5)), -45);
+var STATUS = {
+	"backlog": {
+		zh: "积压",
+		paths: () => dashed()
+	},
+	"draft": {
+		zh: "草稿",
+		paths: (radius) => [...dashed(), pencil(radius)]
+	},
+	"todo": {
+		zh: "待办",
+		paths: () => [ring()]
+	},
+	"pending": {
+		zh: "待处理",
+		paths: () => [
+			ring(),
+			dot(8, 12),
+			dot(12, 12),
+			dot(16, 12)
+		].map((p) => typeof p === "string" ? p : warning(p))
+	},
+	"in-progress": {
+		zh: "进行中",
+		paths: () => [ring(), warning(pie(180))]
+	},
+	"in-review": {
+		zh: "审核中",
+		paths: () => [ring(), warning(pie(270))]
+	},
+	"on-hold": {
+		zh: "搁置",
+		paths: () => [
+			ring(),
+			"M9.5 8.5V15.5",
+			"M14.5 8.5V15.5"
+		]
+	},
+	"blocked": {
+		zh: "受阻",
+		paths: (radius) => [ring(), danger(rounded([
+			[7.5, 10.5],
+			[16.5, 10.5],
+			[16.5, 13.5],
+			[7.5, 13.5]
+		], Math.min(radius, 1.5)))]
+	},
+	"approved": {
+		zh: "已批准",
+		paths: (radius) => [ring(), ...success(check([12, 12], 1.4, radius))]
+	},
+	"rejected": {
+		zh: "已驳回",
+		paths: (radius) => [ring(), ...danger(cross([12, 12], 1.6, radius))]
+	},
+	"cancelled": {
+		zh: "已取消",
+		paths: (radius) => [...dashed(), ...cross([12, 12], 1.6, radius)]
+	}
+};
+//#endregion
+export { STATUS };

package/dist/src/svg.js

@@ -135,7 +135,7 @@ var THIN = .7;
 var widthOf = (item, stroke) => Math.min(item.thin ? stroke * THIN : item.detail ? Math.min(stroke, DETAIL_STROKE) : stroke, item.relief ?? Infinity);
 var dotSize = (item) => item.dot ?? (/^(?:M[^MLHVCSQTAZ]+h0)+$/i.test(item.d.replace(/\s+/g, "")) ? 2 : 0);
 var DOT_STROKE = 1.5;
-var dotWidth = (item, stroke) => dotSize(item) * stroke / DOT_STROKE;
+var dotWidth = (item, stroke) => dotSize(item) * (item.eye ? Math.min(stroke, DOT_STROKE) : stroke) / DOT_STROKE;
 function nearestOn(p, pts) {
 	let best = {
 		d2: Infinity,
@@ -429,8 +429,242 @@ function relieve(items, stroke) {
 	});
 }
 var toneOf = (item) => item.tone ?? "primary";
+var MITER_LIMIT = 2;
+function capRegions(shapes) {
+	return shapes.flatMap((s, owner) => {
+		if (s.dot) return segments(s.d).map((sub, k) => ({
+			owner,
+			sub: k,
+			kind: "dot",
+			x: sub.start[0],
+			y: sub.start[1],
+			r: s.dot / 2
+		}));
+		return segments(s.d).map((sub, k) => {
+			const pts = sub.segs.flatMap((g, i) => samples(g, 24).slice(i ? 1 : 0));
+			if (sub.closed && pts.length > 1 && Math.hypot(pts[0][0] - pts.at(-1)[0], pts[0][1] - pts.at(-1)[1]) > 1e-6) pts.push(pts[0]);
+			const caps = sub.closed || pts.length < 2 ? [] : [[pts[0], pts[1]], [pts.at(-1), pts.at(-2)]].map(([p, q]) => {
+				const l = Math.hypot(p[0] - q[0], p[1] - q[1]) || 1;
+				return {
+					p,
+					f: [(p[0] - q[0]) / l, (p[1] - q[1]) / l]
+				};
+			});
+			return {
+				owner,
+				sub: k,
+				kind: "stroke",
+				pts,
+				closed: sub.closed,
+				h: s.w / 2,
+				fill: s.fill,
+				round: s.round,
+				caps
+			};
+		});
+	});
+}
+function miterHit(q, a, p, b, h) {
+	const u = [p[0] - a[0], p[1] - a[1]];
+	const v = [b[0] - p[0], b[1] - p[1]];
+	const [lu, lv] = [Math.hypot(...u), Math.hypot(...v)];
+	if (lu < 1e-9 || lv < 1e-9) return false;
+	const [du, dv] = [[u[0] / lu, u[1] / lu], [v[0] / lv, v[1] / lv]];
+	const turn = du[0] * dv[1] - du[1] * dv[0];
+	if (Math.abs(turn) < 1e-6) return false;
+	const side = turn > 0 ? -1 : 1;
+	const na = [-du[1] * side, du[0] * side];
+	const nb = [-dv[1] * side, dv[0] * side];
+	const pa = [p[0] + na[0] * h, p[1] + na[1] * h];
+	const pb = [p[0] + nb[0] * h, p[1] + nb[1] * h];
+	const cos = Math.max(-1, Math.min(1, du[0] * dv[0] + du[1] * dv[1]));
+	const half = (Math.PI - Math.acos(cos)) / 2;
+	let poly = [
+		p,
+		pa,
+		pb
+	];
+	if (1 / Math.sin(half) <= MITER_LIMIT) {
+		const bis = [na[0] + nb[0], na[1] + nb[1]];
+		const bl = Math.hypot(...bis);
+		const m = h / Math.sin(half);
+		poly = [
+			p,
+			pa,
+			[p[0] + bis[0] / bl * m, p[1] + bis[1] / bl * m],
+			pb
+		];
+	}
+	return inPoly(q, poly);
+}
+function inPoly([x, y], poly) {
+	let inside = false;
+	for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+		const [xi, yi] = poly[i];
+		const [xj, yj] = poly[j];
+		if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
+	}
+	return inside;
+}
+function covered(q, regions, skip, eps = .02) {
+	return regions.some((r) => {
+		if (r === skip) return false;
+		if (r.kind === "dot") return Math.abs(q[0] - r.x) <= r.r + eps && Math.abs(q[1] - r.y) <= r.r + eps;
+		const { pts, h } = r;
+		if (r.fill && inPoly(q, pts)) return true;
+		for (const { p, f } of r.caps) {
+			const [dx, dy] = [q[0] - p[0], q[1] - p[1]];
+			if (r.round ? Math.hypot(dx, dy) <= h + eps : Math.abs(dx * f[1] - dy * f[0]) <= h + eps && dx * f[0] + dy * f[1] >= -eps && dx * f[0] + dy * f[1] <= h + eps) return true;
+		}
+		for (let i = 1; i < pts.length; i++) if (segDist2(q, pts[i - 1], pts[i]) <= (h + eps) ** 2) return true;
+		const n = pts.length;
+		const reach2 = (h * MITER_LIMIT + eps) ** 2;
+		for (let i = r.closed ? 0 : 1; i < n - 1; i++) {
+			const c = pts[i];
+			if ((q[0] - c[0]) ** 2 + (q[1] - c[1]) ** 2 <= reach2 && miterHit(q, pts[i ? i - 1 : n - 2], c, pts[i + 1], h)) return true;
+		}
+		return false;
+	});
+}
+function farSide(p, f, regions, skip) {
+	let best = { d2: Infinity };
+	for (const r of regions) {
+		if (r === skip || r.kind !== "stroke" || r.fill) continue;
+		for (let i = 1; i < r.pts.length; i++) {
+			const d2 = segDist2(p, r.pts[i - 1], r.pts[i]);
+			if (d2 < best.d2 && d2 <= (r.h + .02) ** 2) best = {
+				d2,
+				a: r.pts[i - 1],
+				b: r.pts[i]
+			};
+		}
+	}
+	if (!best.a) return () => true;
+	const [tx, ty] = [best.b[0] - best.a[0], best.b[1] - best.a[1]];
+	let m = [-ty, tx];
+	if (m[0] * f[0] + m[1] * f[1] < 0) m = [-m[0], -m[1]];
+	return (q) => (q[0] - best.a[0]) * m[0] + (q[1] - best.a[1]) * m[1] > 1e-6;
+}
+function gapTo(q, regions, skip) {
+	if (covered(q, regions, skip)) return 0;
+	let best = Infinity;
+	for (const r of regions) {
+		if (r === skip) continue;
+		if (r.kind === "dot") {
+			best = Math.min(best, Math.hypot(Math.max(0, Math.abs(q[0] - r.x) - r.r), Math.max(0, Math.abs(q[1] - r.y) - r.r)));
+			continue;
+		}
+		for (let i = 1; i < r.pts.length; i++) best = Math.min(best, Math.sqrt(segDist2(q, r.pts[i - 1], r.pts[i])) - r.h);
+	}
+	return Math.max(0, best);
+}
+function capPoints(p, f, h, d) {
+	const n = [-f[1], f[0]];
+	const out = [];
+	for (const s of [
+		.25,
+		.5,
+		.75,
+		1
+	]) for (const l of [
+		-1,
+		-.5,
+		0,
+		.5,
+		1
+	]) out.push([p[0] + f[0] * (h * s - d) + n[0] * h * l, p[1] + f[1] * (h * s - d) + n[1] * h * l]);
+	return out;
+}
+function capJoins(shapes) {
+	const regions = capRegions(shapes);
+	const out = [];
+	for (const r of regions) {
+		if (r.kind !== "stroke" || r.closed || r.fill || r.round || r.pts.length < 2) continue;
+		for (const end of [0, 1]) {
+			const pts = end ? r.pts : [...r.pts].reverse();
+			const p = pts.at(-1);
+			let k = pts.length - 2;
+			while (k > 0 && Math.hypot(pts[k][0] - p[0], pts[k][1] - p[1]) < .1) k--;
+			const fl = Math.hypot(p[0] - pts[k][0], p[1] - pts[k][1]);
+			if (fl < 1e-6 || !covered(p, regions, r)) continue;
+			const f = [(p[0] - pts[k][0]) / fl, (p[1] - pts[k][1]) / fl];
+			const far = farSide(p, f, regions, r);
+			const ok = (d) => capPoints(p, f, r.h, d).every((q) => !far(q) || covered(q, regions, r));
+			if (ok(0)) continue;
+			if (Math.max(...capPoints(p, f, r.h, 0).map((q) => far(q) ? gapTo(q, regions, r) : 0)) < .05) continue;
+			let need = Infinity;
+			let excess = 0;
+			if (!ok(r.h)) excess = Math.max(...capPoints(p, f, r.h, r.h).map((q) => far(q) ? gapTo(q, regions, r) : 0));
+			else {
+				let [lo, hi] = [0, r.h];
+				for (let i = 0; i < 7; i++) {
+					const m = (lo + hi) / 2;
+					if (ok(m)) hi = m;
+					else lo = m;
+				}
+				need = hi;
+			}
+			out.push({
+				owner: r.owner,
+				sub: r.sub,
+				end,
+				need,
+				excess,
+				h: r.h,
+				at: p.map((v) => +v.toFixed(2))
+			});
+		}
+	}
+	return out;
+}
+function fitSquareCaps(items, stroke) {
+	const joins = capJoins(items.map((it) => ({
+		d: it.d,
+		w: widthOf(it, stroke),
+		dot: dotSize(it) ? dotWidth(it, stroke) : 0,
+		fill: it.fill,
+		round: it.round
+	}))).filter((j) => j.need > .05);
+	if (!joins.length) return items;
+	return items.map((it, i) => {
+		const mine = joins.filter((j) => j.owner === i);
+		if (!mine.length) return it;
+		const subs = segments(it.d).map((sub, k) => {
+			let start = sub.start;
+			const out = sub.segs.map((s) => s.sub(0, 1));
+			for (const j of mine.filter((j) => j.sub === k)) {
+				const d = Math.min(j.need, j.h);
+				const seg = j.end ? sub.segs.at(-1) : sub.segs[0];
+				const p = seg.at(j.end);
+				const dist = (t) => Math.hypot(seg.at(t)[0] - p[0], seg.at(t)[1] - p[1]);
+				if (dist(j.end ? 0 : 1) < d + .25) continue;
+				let [lo, hi] = [0, 1];
+				for (let n = 0; n < 30; n++) {
+					const m = (lo + hi) / 2;
+					if (j.end ? dist(m) > d : dist(m) < d) lo = m;
+					else hi = m;
+				}
+				if (j.end) out[out.length - 1] = seg.sub(0, lo);
+				else {
+					start = seg.at(hi);
+					out[0] = seg.sub(hi, 1);
+				}
+			}
+			return {
+				start,
+				segs: out,
+				closed: sub.closed
+			};
+		});
+		const fmt = (n) => Math.round(n * 1e3) / 1e3;
+		return {
+			...it,
+			d: subs.map((s) => `M${fmt(s.start[0])} ${fmt(s.start[1])}${s.segs.join("")}${s.closed ? "Z" : ""}`).join("")
+		};
+	});
+}
 var absolute = (d) => parse(d).map(([t, a]) => t + join(a)).join("");
-function finalize(paths, stroke, { animated = false } = {}) {
+function finalize(paths, stroke, { animated = false, sharp = false } = {}) {
 	const items = paths.map((p) => typeof p === "string" ? { d: p } : p);
 	const cuts = /* @__PURE__ */ new Map();
 	for (const p of items.filter((p) => p.cut)) {
@@ -450,16 +684,18 @@ function finalize(paths, stroke, { animated = false } = {}) {
 	} : p).filter((p) => p.d && !p.hidden);
 	const groups = /* @__PURE__ */ new Map();
 	const snapped = tuckTips(snapEnds(clipped, stroke), stroke);
-	for (const item of animated ? snapped : relieve(snapped, stroke)) {
+	const relieved = animated ? snapped : relieve(snapped, stroke);
+	for (const item of sharp && !animated ? fitSquareCaps(relieved, stroke) : relieved) {
 		const dot = dotSize(item);
 		const tone = toneOf(item);
 		const key = [
 			Boolean(item.detail),
 			Boolean(item.fill),
-			dot,
+			dot && dotWidth(item, stroke),
 			Boolean(item.thin),
 			item.relief ?? 0,
-			tone
+			tone,
+			Boolean(item.round)
 		].join();
 		const g = groups.get(key);
 		if (g) g.d += item.d;
@@ -472,6 +708,7 @@ function finalize(paths, stroke, { animated = false } = {}) {
 				dot,
 				thin: !!item.thin,
 				tone,
+				round: !!item.round,
 				width: dot ? dotWidth(item, stroke) : w !== stroke ? w : void 0
 			});
 		}