gradiente 2.4.0 → 2.5.0

package/dist/index.js

@@ -2213,12 +2213,12 @@ function getColorStopsWithPositions(stops) {
 	});
 }
 function formatColorForCanvas(input) {
-	const color = toRgb$9(input);
+	const color = toRgb$10(input);
 	if (!color) throw new Error("Failed to convert interpolated color to rgb.");
 	return formatRgb(color);
 }
 const DEFAULT_SAMPLE_COUNT = 64;
-const toRgb$9 = converter("rgb");
+const toRgb$10 = converter("rgb");
 function resolveRenderableGradientStops(gradient, sampleCount = DEFAULT_SAMPLE_COUNT) {
 	const colorStops = getColorStopsWithPositions(gradient.stops);
 	const interpolation = gradient.config.interpolation;
@@ -2249,9 +2249,9 @@ function resolveRenderableGradientStops(gradient, sampleCount = DEFAULT_SAMPLE_C
 }
 //#endregion
 //#region src/gradient-transformer/modules/helpers/mesh-rendering.ts
-const toRgb$8 = converter("rgb");
+const toRgb$9 = converter("rgb");
 function toColor(input) {
-	const color = toRgb$8(input);
+	const color = toRgb$9(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return [
 		color.r ?? 0,
@@ -2260,7 +2260,7 @@ function toColor(input) {
 		color.alpha ?? 1
 	];
 }
-function resolveLengthPercentage$2(value, reference) {
+function resolveLengthPercentage$5(value, reference) {
 	if (value.kind === "percent") return value.value / 100 * reference;
 	if (value.unit === "px") return value.value;
 	throw new Error(`Unsupported mesh-gradient length unit: ${value.unit}`);
@@ -2268,8 +2268,8 @@ function resolveLengthPercentage$2(value, reference) {
 function resolveMeshVertex(vertex, width, height) {
 	return {
 		id: vertex.id,
-		x: resolveLengthPercentage$2(vertex.x, width),
-		y: resolveLengthPercentage$2(vertex.y, height),
+		x: resolveLengthPercentage$5(vertex.x, width),
+		y: resolveLengthPercentage$5(vertex.y, height),
 		color: toColor(vertex.color)
 	};
 }
@@ -2558,7 +2558,7 @@ function buildMeshEdgeSkirtTriangles(gradient, grid, width, height, subdivisions
 //#endregion
 //#region src/gradient-transformer/modules/css/ModuleTransformerDiamondGradientToCss.ts
 const DIAMOND_SAMPLE_COUNT = 96;
-function getColorStops$1(stops) {
+function getColorStops$2(stops) {
 	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
 }
 function sampleColorAtPosition$1(stops, position) {
@@ -2579,33 +2579,33 @@ function sampleColorAtPosition$1(stops, position) {
 }
 function resolvePosition(position) {
 	if (position.kind === "keywords") return {
-		x: resolveKeywordX(position.x),
-		y: resolveKeywordY(position.y)
+		x: resolveKeywordX$3(position.x),
+		y: resolveKeywordY$3(position.y)
 	};
 	return {
-		x: resolveLengthPercentage$1(position.x, 100),
-		y: resolveLengthPercentage$1(position.y, 100)
+		x: resolveLengthPercentage$4(position.x, 100),
+		y: resolveLengthPercentage$4(position.y, 100)
 	};
 }
-function resolveKeywordX(value) {
+function resolveKeywordX$3(value) {
 	if (value === "left") return 0;
 	if (value === "right") return 100;
 	return 50;
 }
-function resolveKeywordY(value) {
+function resolveKeywordY$3(value) {
 	if (value === "top") return 0;
 	if (value === "bottom") return 100;
 	return 50;
 }
-function resolveLengthPercentage$1(value, reference) {
+function resolveLengthPercentage$4(value, reference) {
 	if (value.kind === "percent") return value.value / 100 * reference;
 	if (value.unit === "px") return value.value;
 	throw new Error(`Unsupported diamond-gradient length unit for CSS transformer: ${value.unit}`);
 }
-function getDistanceToCorner$4(center, corner) {
+function getDistanceToCorner$6(center, corner) {
 	return Math.abs(corner.x - center.x) + Math.abs(corner.y - center.y);
 }
-function getCornerDeltas$4(center) {
+function getCornerDeltas$5(center) {
 	return [
 		{
 			dx: -center.x,
@@ -2625,7 +2625,7 @@ function getCornerDeltas$4(center) {
 		}
 	];
 }
-function scaleDiamondRadiiToCorner$2(radiusX, radiusY, dx, dy) {
+function scaleDiamondRadiiToCorner$3(radiusX, radiusY, dx, dy) {
 	const safeRadiusX = Math.max(radiusX, 1e-4);
 	const safeRadiusY = Math.max(radiusY, 1e-4);
 	const scale = Math.abs(dx) / safeRadiusX + Math.abs(dy) / safeRadiusY;
@@ -2634,7 +2634,7 @@ function scaleDiamondRadiiToCorner$2(radiusX, radiusY, dx, dy) {
 		y: safeRadiusY * scale
 	};
 }
-function getMaxVisibleDiamondT$2(center, radii) {
+function getMaxVisibleDiamondT$3(center, radii) {
 	return Math.max(...[
 		{
 			x: 0,
@@ -2654,10 +2654,10 @@ function getMaxVisibleDiamondT$2(center, radii) {
 		}
 	].map((corner) => Math.abs(corner.x - center.x) / Math.max(radii.x, 1e-4) + Math.abs(corner.y - center.y) / Math.max(radii.y, 1e-4)));
 }
-function resolveDiamondRadii$1(size, shape, center) {
+function resolveDiamondRadii$2(size, shape, center) {
 	if (size.kind === "explicit") {
-		const radiusX = resolveLengthPercentage$1(size.x, 100);
-		const radiusY = size.y ? resolveLengthPercentage$1(size.y, 100) : radiusX;
+		const radiusX = resolveLengthPercentage$4(size.x, 100);
+		const radiusY = size.y ? resolveLengthPercentage$4(size.y, 100) : radiusX;
 		return {
 			x: Math.max(radiusX, 1e-4),
 			y: Math.max(shape === "circle" ? radiusX : radiusY, 1e-4)
@@ -2685,7 +2685,7 @@ function resolveDiamondRadii$1(size, shape, center) {
 				x: 100,
 				y: 100
 			}
-		].map((corner) => getDistanceToCorner$4(center, corner));
+		].map((corner) => getDistanceToCorner$6(center, corner));
 		if (size.value === "closest-side") {
 			const radius = Math.max(Math.min(left, right, top, bottom), 1e-4);
 			return {
@@ -2725,24 +2725,24 @@ function resolveDiamondRadii$1(size, shape, center) {
 		x: Math.max(farthestSideRadiusX, 1e-4),
 		y: Math.max(farthestSideRadiusY, 1e-4)
 	};
-	const corners = getCornerDeltas$4(center);
-	if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner$2(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
-	return corners.map((corner) => scaleDiamondRadiiToCorner$2(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
+	const corners = getCornerDeltas$5(center);
+	if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner$3(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
+	return corners.map((corner) => scaleDiamondRadiiToCorner$3(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
 }
-function formatPoint(value) {
+function formatPoint$1(value) {
 	return Number(value.toFixed(3)).toString();
 }
-function buildDiamondPolygon(center, radii, position) {
+function buildDiamondPolygon$1(center, radii, position) {
 	const x = radii.x * position;
 	const y = radii.y * position;
 	return [
-		`${formatPoint(center.x)} ${formatPoint(center.y - y)}`,
-		`${formatPoint(center.x + x)} ${formatPoint(center.y)}`,
-		`${formatPoint(center.x)} ${formatPoint(center.y + y)}`,
-		`${formatPoint(center.x - x)} ${formatPoint(center.y)}`
+		`${formatPoint$1(center.x)} ${formatPoint$1(center.y - y)}`,
+		`${formatPoint$1(center.x + x)} ${formatPoint$1(center.y)}`,
+		`${formatPoint$1(center.x)} ${formatPoint$1(center.y + y)}`,
+		`${formatPoint$1(center.x - x)} ${formatPoint$1(center.y)}`
 	].join(" ");
 }
-function encodeSvgDataUrl$1(svg) {
+function encodeSvgDataUrl$2(svg) {
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
 var ModuleTransformerDiamondGradientToCss = class {
@@ -2751,21 +2751,21 @@ var ModuleTransformerDiamondGradientToCss = class {
 	to(input) {
 		if (!(input instanceof DiamondGradient)) throw new Error("Expected DiamondGradient");
 		const center = resolvePosition(input.config.position);
-		const radii = resolveDiamondRadii$1(input.config.size, input.config.shape, center);
-		const maxVisibleT = getMaxVisibleDiamondT$2(center, radii);
+		const radii = resolveDiamondRadii$2(input.config.size, input.config.shape, center);
+		const maxVisibleT = getMaxVisibleDiamondT$3(center, radii);
 		const maxT = input.isRepeating ? maxVisibleT : 1;
 		const baseStops = resolveRenderableGradientStops(input, DIAMOND_SAMPLE_COUNT);
-		const stops = getColorStops$1(input.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops);
+		const stops = getColorStops$2(input.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops);
 		const outerColor = sampleColorAtPosition$1(stops, maxT);
 		const polygons = [];
 		const sampleCount = Math.max(DIAMOND_SAMPLE_COUNT, Math.ceil(DIAMOND_SAMPLE_COUNT * maxT));
 		for (let index = sampleCount; index >= 0; index -= 1) {
 			const position = index / sampleCount * maxT;
 			const color = sampleColorAtPosition$1(stops, position);
-			const points = buildDiamondPolygon(center, radii, position);
+			const points = buildDiamondPolygon$1(center, radii, position);
 			polygons.push(`<polygon points="${points}" fill="${color}"/>`);
 		}
-		return encodeSvgDataUrl$1([
+		return encodeSvgDataUrl$2([
 			"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">",
 			`<rect width="100" height="100" fill="${outerColor}"/>`,
 			...polygons,
@@ -2786,8 +2786,8 @@ var ModuleTransformerConicGradientToCss = class {
 //#endregion
 //#region src/gradient-transformer/modules/css/ModuleTransformerMeshGradientToCss.ts
 const CSS_SAMPLE_SIZE = 96;
-const BICUBIC_SUBDIVISIONS$2 = 24;
-function formatRgba(color) {
+const BICUBIC_SUBDIVISIONS$3 = 24;
+function formatRgba$1(color) {
 	return `rgba(${color[0]},${color[1]},${color[2]},${Number(color[3].toFixed(3))})`;
 }
 function getBarycentric$1(x, y, a, b, c) {
@@ -2812,7 +2812,7 @@ function mixTriangleColor$1(weights, a, b, c) {
 		a.color[3] * wA + b.color[3] * wB + c.color[3] * wC
 	];
 }
-function encodeSvgDataUrl(svg) {
+function encodeSvgDataUrl$1(svg) {
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
 var ModuleTransformerMeshGradientToCss = class {
@@ -2822,7 +2822,7 @@ var ModuleTransformerMeshGradientToCss = class {
 		if (!(input instanceof MeshGradient)) throw new Error("Expected MeshGradient");
 		const vertexMap = buildMeshVertexMap(input, CSS_SAMPLE_SIZE, CSS_SAMPLE_SIZE);
 		const grid = buildRegularMeshGrid(input, vertexMap);
-		const subdivisions = input.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS$2 : 1;
+		const subdivisions = input.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS$3 : 1;
 		const triangles = input.patches.flatMap((patch) => buildPatchTriangles(input, grid, patch, vertexMap, subdivisions));
 		const edgeTriangles = buildMeshEdgeSkirtTriangles(input, grid, CSS_SAMPLE_SIZE, CSS_SAMPLE_SIZE, subdivisions);
 		const renderTriangles = [...triangles, ...edgeTriangles];
@@ -2838,9 +2838,9 @@ var ModuleTransformerMeshGradientToCss = class {
 				break;
 			}
 			if (!color) continue;
-			rects.push(`<rect x="${x}" y="${y}" width="1" height="1" fill="${formatRgba(color)}"/>`);
+			rects.push(`<rect x="${x}" y="${y}" width="1" height="1" fill="${formatRgba$1(color)}"/>`);
 		}
-		return encodeSvgDataUrl([
+		return encodeSvgDataUrl$1([
 			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${CSS_SAMPLE_SIZE} ${CSS_SAMPLE_SIZE}" preserveAspectRatio="none" shape-rendering="crispEdges">`,
 			...rects,
 			"</svg>"
@@ -2849,9 +2849,9 @@ var ModuleTransformerMeshGradientToCss = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerLinearGradientToCanvas.ts
-const toRgb$7 = converter("rgb");
+const toRgb$8 = converter("rgb");
 function toCanvasColor$2(input) {
-	const color = toRgb$7(input);
+	const color = toRgb$8(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return formatRgb(color);
 }
@@ -2914,10 +2914,10 @@ var ModuleTransformerLinearGradientToCanvas = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerRadialGradientToCanvas.ts
-const toRgb$6 = converter("rgb");
+const toRgb$7 = converter("rgb");
 const RADIAL_GRADIENT_SAMPLE_COUNT = 128;
 function toCanvasColor$1(input) {
-	const color = toRgb$6(input);
+	const color = toRgb$7(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return formatRgb(color);
 }
@@ -2947,12 +2947,12 @@ function getDistanceToSide$1(center, width, height, side) {
 	if (side === "top") return center.y;
 	return height - center.y;
 }
-function getDistanceToCorner$3(center, corner) {
+function getDistanceToCorner$5(center, corner) {
 	const dx = corner.x - center.x;
 	const dy = corner.y - center.y;
 	return Math.sqrt(dx * dx + dy * dy);
 }
-function getCornerDeltas$3(center, width, height) {
+function getCornerDeltas$4(center, width, height) {
 	return [
 		{
 			dx: -center.x,
@@ -3078,7 +3078,7 @@ var ModuleTransformerRadialGradientToCanvas = class {
 					x: width,
 					y: height
 				}
-			].map((corner) => getDistanceToCorner$3(center, corner));
+			].map((corner) => getDistanceToCorner$5(center, corner));
 			if (size.value === "closest-side") {
 				const radius = Math.min(left, right, top, bottom);
 				return {
@@ -3118,7 +3118,7 @@ var ModuleTransformerRadialGradientToCanvas = class {
 			x: Math.max(farthestSideRadiusX, 1e-4),
 			y: Math.max(farthestSideRadiusY, 1e-4)
 		};
-		const corners = getCornerDeltas$3(center, width, height);
+		const corners = getCornerDeltas$4(center, width, height);
 		if (size.value === "closest-corner") return corners.map((corner) => scaleEllipseRadiiToCorner$1(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => {
 			const closestArea = closest.x * closest.y;
 			return current.x * current.y < closestArea ? current : closest;
@@ -3136,11 +3136,11 @@ var ModuleTransformerRadialGradientToCanvas = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerDiamondGradientToCanvas.ts
-const toRgb$5 = converter("rgb");
+const toRgb$6 = converter("rgb");
 const DIAMOND_GRADIENT_SAMPLE_COUNT = 128;
 const DIAMOND_COLOR_LOOKUP_SIZE = 1024;
 function toCanvasColor(input) {
-	const color = toRgb$5(input);
+	const color = toRgb$6(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return [
 		Math.round((color.r ?? 0) * 255),
@@ -3149,7 +3149,7 @@ function toCanvasColor(input) {
 		Math.round((color.alpha ?? 1) * 255)
 	];
 }
-function getColorStops(stops) {
+function getColorStops$1(stops) {
 	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
 }
 function sampleColorAtPosition(stops, position) {
@@ -3187,7 +3187,7 @@ function buildColorLookup(stops, maxT) {
 	}
 	return lookup;
 }
-function getMaxVisibleDiamondT$1(center, radii, width, height) {
+function getMaxVisibleDiamondT$2(center, radii, width, height) {
 	return Math.max(...[
 		{
 			x: 0,
@@ -3207,10 +3207,10 @@ function getMaxVisibleDiamondT$1(center, radii, width, height) {
 		}
 	].map((corner) => Math.abs(corner.x - center.x) / Math.max(radii.x, 1e-4) + Math.abs(corner.y - center.y) / Math.max(radii.y, 1e-4)));
 }
-function getDistanceToCorner$2(center, corner) {
+function getDistanceToCorner$4(center, corner) {
 	return Math.abs(corner.x - center.x) + Math.abs(corner.y - center.y);
 }
-function getCornerDeltas$2(center, width, height) {
+function getCornerDeltas$3(center, width, height) {
 	return [
 		{
 			dx: -center.x,
@@ -3230,7 +3230,7 @@ function getCornerDeltas$2(center, width, height) {
 		}
 	];
 }
-function scaleDiamondRadiiToCorner$1(radiusX, radiusY, dx, dy) {
+function scaleDiamondRadiiToCorner$2(radiusX, radiusY, dx, dy) {
 	const safeRadiusX = Math.max(radiusX, 1e-4);
 	const safeRadiusY = Math.max(radiusY, 1e-4);
 	const scale = Math.abs(dx) / safeRadiusX + Math.abs(dy) / safeRadiusY;
@@ -3248,9 +3248,9 @@ var ModuleTransformerDiamondGradientToCanvas = class {
 		return { draw: (ctx, width, height) => {
 			const center = this._resolveCenter(gradient.config.position, width, height);
 			const radii = this._resolveDiamondRadii(gradient.config.size, gradient.config.shape, center, width, height);
-			const maxVisibleT = getMaxVisibleDiamondT$1(center, radii, width, height);
+			const maxVisibleT = getMaxVisibleDiamondT$2(center, radii, width, height);
 			const baseStops = resolveRenderableGradientStops(gradient, DIAMOND_GRADIENT_SAMPLE_COUNT);
-			const colorLookup = buildColorLookup(getColorStops(gradient.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops), maxVisibleT);
+			const colorLookup = buildColorLookup(getColorStops$1(gradient.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops), maxVisibleT);
 			const imageData = ctx.createImageData(width, height);
 			const data = imageData.data;
 			for (let y = 0; y < height; y += 1) for (let x = 0; x < width; x += 1) {
@@ -3316,7 +3316,7 @@ var ModuleTransformerDiamondGradientToCanvas = class {
 					x: width,
 					y: height
 				}
-			].map((corner) => getDistanceToCorner$2(center, corner));
+			].map((corner) => getDistanceToCorner$4(center, corner));
 			if (size.value === "closest-side") {
 				const radius = Math.max(Math.min(left, right, top, bottom), 1e-4);
 				return {
@@ -3356,9 +3356,9 @@ var ModuleTransformerDiamondGradientToCanvas = class {
 			x: Math.max(farthestSideRadiusX, 1e-4),
 			y: Math.max(farthestSideRadiusY, 1e-4)
 		};
-		const corners = getCornerDeltas$2(center, width, height);
-		if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner$1(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
-		return corners.map((corner) => scaleDiamondRadiiToCorner$1(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
+		const corners = getCornerDeltas$3(center, width, height);
+		if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner$2(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
+		return corners.map((corner) => scaleDiamondRadiiToCorner$2(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
 	}
 	_resolve(value, size) {
 		if (value.kind === "percent") return value.value / 100 * size;
@@ -3369,7 +3369,7 @@ var ModuleTransformerDiamondGradientToCanvas = class {
 //#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerConicGradientToCanvas.ts
 const CONIC_GRADIENT_SAMPLE_COUNT = 128;
-const toRgb$4 = converter("rgb");
+const toRgb$5 = converter("rgb");
 var ModuleTransformerConicGradientToCanvas = class {
 	target = "canvas-2d";
 	gradientType = "conic-gradient";
@@ -3469,7 +3469,7 @@ var ModuleTransformerConicGradientToCanvas = class {
 		};
 	}
 	_parseColor(input) {
-		const color = toRgb$4(input);
+		const color = toRgb$5(input);
 		if (!color) throw new Error(`Failed to convert color: ${input}`);
 		return {
 			r: Math.round((color.r ?? 0) * 255),
@@ -3484,7 +3484,7 @@ var ModuleTransformerConicGradientToCanvas = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/canvas/ModuleTransformerMeshGradientToCanvas.ts
-const BICUBIC_SUBDIVISIONS$1 = 24;
+const BICUBIC_SUBDIVISIONS$2 = 24;
 function getBarycentric(x, y, a, b, c) {
 	const denominator = (b.y - c.y) * (a.x - c.x) + (c.x - b.x) * (a.y - c.y);
 	if (Math.abs(denominator) < 1e-6) return null;
@@ -3534,7 +3534,7 @@ var ModuleTransformerMeshGradientToCanvas = class {
 			const imageData = ctx.createImageData(width, height);
 			const vertexMap = buildMeshVertexMap(gradient, width, height);
 			const grid = buildRegularMeshGrid(gradient, vertexMap);
-			const subdivisions = gradient.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS$1 : 1;
+			const subdivisions = gradient.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS$2 : 1;
 			const edgeTriangles = buildMeshEdgeSkirtTriangles(gradient, grid, width, height, subdivisions);
 			for (const patch of gradient.patches) {
 				const triangles = buildPatchTriangles(gradient, grid, patch, vertexMap, subdivisions);
@@ -3547,10 +3547,10 @@ var ModuleTransformerMeshGradientToCanvas = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/webgl/ModuleTransformerLinearGradientToWebgl.ts
-const toRgb$3 = converter("rgb");
+const toRgb$4 = converter("rgb");
 const MAX_STOPS$3 = 128;
 function toWebGLColor$3(input) {
-	const color = toRgb$3(input);
+	const color = toRgb$4(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return [
 		color.r ?? 0,
@@ -3784,11 +3784,11 @@ var ModuleTransformerLinearGradientToCanvasWebGL = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/webgl/ModuleTransformerConicGradientToWebgl.ts
-const toRgb$2 = converter("rgb");
+const toRgb$3 = converter("rgb");
 const MAX_STOPS$2 = 128;
-const TWO_PI = Math.PI * 2;
+const TWO_PI$1 = Math.PI * 2;
 function toWebGLColor$2(input) {
-	const color = toRgb$2(input);
+	const color = toRgb$3(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return [
 		color.r ?? 0,
@@ -3863,7 +3863,7 @@ function fitStopsToWebGLLimit$2(stops, maxStops) {
 	}
 	return sampledStops;
 }
-function resolveLengthPercentage(value, reference) {
+function resolveLengthPercentage$3(value, reference) {
 	if (value.kind === "percent") return value.value / 100 * reference;
 	if (value.kind === "length") {
 		if (value.unit === "px") return value.value;
@@ -3871,11 +3871,11 @@ function resolveLengthPercentage(value, reference) {
 	}
 	return value;
 }
-function resolveAngleToRadians(angle) {
+function resolveAngleToRadians$1(angle) {
 	if (angle.unit === "rad") return angle.value;
-	if (angle.unit === "deg") return angle.value / 360 * TWO_PI;
-	if (angle.unit === "turn") return angle.value * TWO_PI;
-	if (angle.unit === "grad") return angle.value / 400 * TWO_PI;
+	if (angle.unit === "deg") return angle.value / 360 * TWO_PI$1;
+	if (angle.unit === "turn") return angle.value * TWO_PI$1;
+	if (angle.unit === "grad") return angle.value / 400 * TWO_PI$1;
 	return angle.unit;
 }
 function resolveKeywordPositionX$2(x, width) {
@@ -3896,8 +3896,8 @@ function resolveConicCenter(position, width, height) {
 		y: resolveKeywordPositionY$2(position.y, height)
 	};
 	if (position.kind === "values") return {
-		x: resolveLengthPercentage(position.x, width),
-		y: resolveLengthPercentage(position.y, height)
+		x: resolveLengthPercentage$3(position.x, width),
+		y: resolveLengthPercentage$3(position.y, height)
 	};
 	return {
 		x: width / 2,
@@ -4007,7 +4007,7 @@ var ModuleTransformerConicGradientToCanvasWebGL = class {
 				colors[index * 4 + 3] = color[3];
 			});
 			gl.uniform2f(gl.getUniformLocation(program, "u_center"), center.x / width, 1 - center.y / height);
-			gl.uniform1f(gl.getUniformLocation(program, "u_startAngle"), resolveAngleToRadians(gradient.config.from));
+			gl.uniform1f(gl.getUniformLocation(program, "u_startAngle"), resolveAngleToRadians$1(gradient.config.from));
 			gl.uniform1i(gl.getUniformLocation(program, "u_stopCount"), limitedStops.length);
 			gl.uniform1fv(gl.getUniformLocation(program, "u_positions"), positions);
 			gl.uniform4fv(gl.getUniformLocation(program, "u_colors"), colors);
@@ -4019,11 +4019,11 @@ var ModuleTransformerConicGradientToCanvasWebGL = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/webgl/ModuleTransformerRadialGradientToWebgl.ts
-const toRgb$1 = converter("rgb");
+const toRgb$2 = converter("rgb");
 const MAX_STOPS$1 = 128;
 const MAX_REPEATING_RADIAL_T = 16;
 function toWebGLColor$1(input) {
-	const color = toRgb$1(input);
+	const color = toRgb$2(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return [
 		color.r ?? 0,
@@ -4138,7 +4138,7 @@ function getDistanceToSide(center, width, height, side) {
 	if (side === "top") return center.y;
 	return height - center.y;
 }
-function getDistanceToCorner$1(center, corner) {
+function getDistanceToCorner$3(center, corner) {
 	const dx = corner.x - center.x;
 	const dy = corner.y - center.y;
 	return Math.sqrt(dx * dx + dy * dy);
@@ -4150,7 +4150,7 @@ function normalizeStops$1(stops, min, max) {
 		position: (stop.position - min) / range
 	}));
 }
-function getCornerDeltas$1(center, width, height) {
+function getCornerDeltas$2(center, width, height) {
 	return [
 		{
 			dx: -center.x,
@@ -4210,7 +4210,7 @@ function resolveRadialRadii(size, shape, center, width, height) {
 				x: width,
 				y: height
 			}
-		].map((corner) => getDistanceToCorner$1(center, corner));
+		].map((corner) => getDistanceToCorner$3(center, corner));
 		if (size.value === "closest-side") {
 			const radius = Math.max(Math.min(left, right, top, bottom), 1e-4);
 			return {
@@ -4250,7 +4250,7 @@ function resolveRadialRadii(size, shape, center, width, height) {
 		x: Math.max(farthestSideRadiusX, 1e-4),
 		y: Math.max(farthestSideRadiusY, 1e-4)
 	};
-	const corners = getCornerDeltas$1(center, width, height);
+	const corners = getCornerDeltas$2(center, width, height);
 	if (size.value === "closest-corner") return corners.map((corner) => scaleEllipseRadiiToCorner(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => {
 		const closestArea = closest.x * closest.y;
 		return current.x * current.y < closestArea ? current : closest;
@@ -4380,11 +4380,11 @@ var ModuleTransformerRadialGradientToCanvasWebGL = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/webgl/ModuleTransformerDiamondGradientToWebgl.ts
-const toRgb = converter("rgb");
+const toRgb$1 = converter("rgb");
 const MAX_STOPS = 128;
 const MAX_REPEATING_DIAMOND_T = 16;
 function toWebGLColor(input) {
-	const color = toRgb(input);
+	const color = toRgb$1(input);
 	if (!color) throw new Error(`Failed to convert color: ${input}`);
 	return [
 		color.r ?? 0,
@@ -4491,10 +4491,10 @@ function resolveDiamondCenter(position, width, height) {
 		y: parseLengthPercentage(position.y, height)
 	};
 }
-function getDistanceToCorner(center, corner) {
+function getDistanceToCorner$2(center, corner) {
 	return Math.abs(corner.x - center.x) + Math.abs(corner.y - center.y);
 }
-function getCornerDeltas(center, width, height) {
+function getCornerDeltas$1(center, width, height) {
 	return [
 		{
 			dx: -center.x,
@@ -4514,7 +4514,7 @@ function getCornerDeltas(center, width, height) {
 		}
 	];
 }
-function scaleDiamondRadiiToCorner(radiusX, radiusY, dx, dy) {
+function scaleDiamondRadiiToCorner$1(radiusX, radiusY, dx, dy) {
 	const safeRadiusX = Math.max(radiusX, 1e-4);
 	const safeRadiusY = Math.max(radiusY, 1e-4);
 	const scale = Math.abs(dx) / safeRadiusX + Math.abs(dy) / safeRadiusY;
@@ -4523,7 +4523,7 @@ function scaleDiamondRadiiToCorner(radiusX, radiusY, dx, dy) {
 		y: safeRadiusY * scale
 	};
 }
-function resolveDiamondRadii(size, shape, center, width, height) {
+function resolveDiamondRadii$1(size, shape, center, width, height) {
 	if (size.kind === "explicit") {
 		const radiusX = parseLengthPercentage(size.x, width);
 		const radiusY = size.y ? parseLengthPercentage(size.y, height) : radiusX;
@@ -4554,7 +4554,7 @@ function resolveDiamondRadii(size, shape, center, width, height) {
 				x: width,
 				y: height
 			}
-		].map((corner) => getDistanceToCorner(center, corner));
+		].map((corner) => getDistanceToCorner$2(center, corner));
 		if (size.value === "closest-side") {
 			const radius = Math.max(Math.min(left, right, top, bottom), 1e-4);
 			return {
@@ -4594,11 +4594,11 @@ function resolveDiamondRadii(size, shape, center, width, height) {
 		x: Math.max(farthestSideRadiusX, 1e-4),
 		y: Math.max(farthestSideRadiusY, 1e-4)
 	};
-	const corners = getCornerDeltas(center, width, height);
-	if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
-	return corners.map((corner) => scaleDiamondRadiiToCorner(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
+	const corners = getCornerDeltas$1(center, width, height);
+	if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner$1(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
+	return corners.map((corner) => scaleDiamondRadiiToCorner$1(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
 }
-function getMaxVisibleDiamondT(center, radii, width, height) {
+function getMaxVisibleDiamondT$1(center, radii, width, height) {
 	return Math.max(...[
 		{
 			x: 0,
@@ -4708,8 +4708,8 @@ var ModuleTransformerDiamondGradientToCanvasWebGL = class {
 			gl.enableVertexAttribArray(positionLocation);
 			gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
 			const center = resolveDiamondCenter(gradient.config.position, width, height);
-			const radius = resolveDiamondRadii(gradient.config.size, gradient.config.shape, center, width, height);
-			const maxVisibleT = getMaxVisibleDiamondT(center, radius, width, height);
+			const radius = resolveDiamondRadii$1(gradient.config.size, gradient.config.shape, center, width, height);
+			const maxVisibleT = getMaxVisibleDiamondT$1(center, radius, width, height);
 			const baseStops = resolveRenderableGradientStops(gradient, getWebGLSampleCount(gradient, MAX_STOPS));
 			const repeatMaxT = Math.min(maxVisibleT, MAX_REPEATING_DIAMOND_T);
 			const maxT = gradient.isRepeating ? repeatMaxT : 1;
@@ -4739,7 +4739,7 @@ var ModuleTransformerDiamondGradientToCanvasWebGL = class {
 };
 //#endregion
 //#region src/gradient-transformer/modules/webgl/ModuleTransformerMeshGradientToWebgl.ts
-const BICUBIC_SUBDIVISIONS = 24;
+const BICUBIC_SUBDIVISIONS$1 = 24;
 function createShader(gl, type, source) {
 	const shader = gl.createShader(type);
 	if (!shader) throw new Error("Failed to create WebGL shader.");
@@ -4804,7 +4804,7 @@ var ModuleTransformerMeshGradientToCanvasWebGL = class {
                 `);
 			const vertexMap = buildMeshVertexMap(gradient, width, height);
 			const grid = buildRegularMeshGrid(gradient, vertexMap);
-			const subdivisions = gradient.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS : 1;
+			const subdivisions = gradient.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS$1 : 1;
 			const edgeTriangles = buildMeshEdgeSkirtTriangles(gradient, grid, width, height, subdivisions);
 			const positions = [];
 			const colors = [];
@@ -4838,6 +4838,625 @@ var ModuleTransformerMeshGradientToCanvasWebGL = class {
 		} };
 	}
 };
+const toRgb = converter("rgb");
+function escapeXml(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
+}
+function clamp01(value) {
+	return Math.min(1, Math.max(0, value));
+}
+function toPercent$1(value) {
+	return `${Number((value * 100).toFixed(3))}%`;
+}
+function formatPoint(value) {
+	return `${Number(value.toFixed(3))}%`;
+}
+function normalizeSvgStops(stops) {
+	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
+}
+function parseSvgColor(input) {
+	const color = toRgb(input);
+	if (!color) throw new Error(`Failed to convert color: ${input}`);
+	return {
+		r: Math.round((color.r ?? 0) * 255),
+		g: Math.round((color.g ?? 0) * 255),
+		b: Math.round((color.b ?? 0) * 255),
+		a: Math.round((color.alpha ?? 1) * 255)
+	};
+}
+function formatSvgColor(color) {
+	if (color.a >= 255) return `rgb(${color.r} ${color.g} ${color.b})`;
+	return `rgba(${color.r}, ${color.g}, ${color.b}, ${Number((color.a / 255).toFixed(4))})`;
+}
+function mixSvgColor(from, to, t) {
+	return {
+		r: Math.round(from.r + (to.r - from.r) * t),
+		g: Math.round(from.g + (to.g - from.g) * t),
+		b: Math.round(from.b + (to.b - from.b) * t),
+		a: Math.round(from.a + (to.a - from.a) * t)
+	};
+}
+function sampleSvgStops(stops, position) {
+	const colorStops = normalizeSvgStops(stops);
+	if (colorStops.length === 0) throw new Error("Cannot sample color from empty gradient stops.");
+	if (colorStops.length === 1) return parseSvgColor(colorStops[0].value);
+	const first = colorStops[0];
+	const extendedStops = [...colorStops, {
+		...first,
+		position: first.position + 1
+	}];
+	let samplePosition = position;
+	if (samplePosition < first.position) samplePosition += 1;
+	for (let index = 0; index < extendedStops.length - 1; index += 1) {
+		const current = extendedStops[index];
+		const next = extendedStops[index + 1];
+		if (samplePosition >= current.position && samplePosition <= next.position) {
+			const span = next.position - current.position || 1;
+			const localT = (samplePosition - current.position) / span;
+			return mixSvgColor(parseSvgColor(current.value), parseSvgColor(next.value), localT);
+		}
+	}
+	return parseSvgColor(colorStops[colorStops.length - 1].value);
+}
+function encodeSvgDataUrl(svg) {
+	return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+function buildSvgStops(gradient) {
+	return normalizeSvgStops(resolveRenderableGradientStops(gradient, 128)).map((stop) => `<stop offset="${toPercent$1(clamp01(stop.position))}" stop-color="${escapeXml(stop.value)}"/>`).join("");
+}
+function buildSvgGradientResult(input) {
+	const defs = `<defs>${input.gradient}</defs>`;
+	return {
+		id: input.id,
+		href: `#${input.id}`,
+		url: `url(#${input.id})`,
+		type: input.type,
+		gradient: input.gradient,
+		defs,
+		svg: `<svg xmlns="http://www.w3.org/2000/svg">${defs}</svg>`
+	};
+}
+//#endregion
+//#region src/gradient-transformer/modules/svg/ModuleTransformerLinearGradientToSvg.ts
+const DEFAULT_ID$4 = "gradiente-linear-gradient";
+function getLinearVector(angle) {
+	const dx = Math.sin(angle);
+	const dy = -Math.cos(angle);
+	const scale = Math.max(Math.abs(dx), Math.abs(dy), 1e-4);
+	const unitX = dx / scale;
+	const unitY = dy / scale;
+	return {
+		x1: 50 - unitX * 50,
+		y1: 50 - unitY * 50,
+		x2: 50 + unitX * 50,
+		y2: 50 + unitY * 50
+	};
+}
+var ModuleTransformerLinearGradientToSvg = class {
+	target = "svg";
+	gradientType = "linear-gradient";
+	to(input) {
+		if (!(input instanceof LinearGradient)) throw new Error("Expected LinearGradient");
+		const id = DEFAULT_ID$4;
+		const vector = getLinearVector(input.config.angle);
+		const stopsSvg = buildSvgStops(input);
+		return buildSvgGradientResult({
+			id,
+			type: "linearGradient",
+			gradient: [
+				`<linearGradient id="${id}" gradientUnits="objectBoundingBox" x1="${formatPoint(vector.x1)}" y1="${formatPoint(vector.y1)}" x2="${formatPoint(vector.x2)}" y2="${formatPoint(vector.y2)}">`,
+				stopsSvg,
+				"</linearGradient>"
+			].join("")
+		});
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/svg/ModuleTransformerRadialGradientToSvg.ts
+const DEFAULT_ID$3 = "gradiente-radial-gradient";
+function resolveKeywordX$2(value) {
+	if (value === "left") return 0;
+	if (value === "right") return 100;
+	return 50;
+}
+function resolveKeywordY$2(value) {
+	if (value === "top") return 0;
+	if (value === "bottom") return 100;
+	return 50;
+}
+function resolveLengthPercentage$2(value) {
+	if (value.kind === "percent") return value.value;
+	if (value.unit === "px") return value.value;
+	return value.value;
+}
+function resolveCenter$2(position) {
+	if (position.kind === "keywords") return {
+		x: resolveKeywordX$2(position.x),
+		y: resolveKeywordY$2(position.y)
+	};
+	return {
+		x: resolveLengthPercentage$2(position.x),
+		y: resolveLengthPercentage$2(position.y)
+	};
+}
+function getDistanceToCorner$1(center, corner) {
+	const dx = corner.x - center.x;
+	const dy = corner.y - center.y;
+	return Math.sqrt(dx * dx + dy * dy);
+}
+function resolveRadii(size, shape, center) {
+	if (size.kind === "explicit") {
+		const radiusX = resolveLengthPercentage$2(size.x);
+		const radiusY = size.y ? resolveLengthPercentage$2(size.y) : radiusX;
+		return {
+			x: Math.max(radiusX, 1e-4),
+			y: Math.max(shape === "circle" ? radiusX : radiusY, 1e-4)
+		};
+	}
+	const left = center.x;
+	const right = 100 - center.x;
+	const top = center.y;
+	const bottom = 100 - center.y;
+	if (shape === "circle") {
+		const cornerDistances = [
+			{
+				x: 0,
+				y: 0
+			},
+			{
+				x: 100,
+				y: 0
+			},
+			{
+				x: 0,
+				y: 100
+			},
+			{
+				x: 100,
+				y: 100
+			}
+		].map((corner) => getDistanceToCorner$1(center, corner));
+		if (size.value === "closest-side") {
+			const radius = Math.min(left, right, top, bottom);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		if (size.value === "farthest-side") {
+			const radius = Math.max(left, right, top, bottom);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		if (size.value === "closest-corner") {
+			const radius = Math.min(...cornerDistances);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		const radius = Math.max(...cornerDistances);
+		return {
+			x: radius,
+			y: radius
+		};
+	}
+	if (size.value === "closest-side") return {
+		x: Math.min(left, right),
+		y: Math.min(top, bottom)
+	};
+	if (size.value === "farthest-side") return {
+		x: Math.max(left, right),
+		y: Math.max(top, bottom)
+	};
+	return {
+		x: Math.max(left, right),
+		y: Math.max(top, bottom)
+	};
+}
+var ModuleTransformerRadialGradientToSvg = class {
+	target = "svg";
+	gradientType = "radial-gradient";
+	to(input) {
+		if (!(input instanceof RadialGradient)) throw new Error("Expected RadialGradient");
+		const id = DEFAULT_ID$3;
+		const center = resolveCenter$2(input.config.position);
+		const radii = resolveRadii(input.config.size, input.config.shape, center);
+		const radius = Math.max(radii.x, radii.y);
+		const scaleX = radii.x / radius;
+		const scaleY = radii.y / radius;
+		const transform = input.config.shape === "ellipse" ? ` gradientTransform="translate(${center.x} ${center.y}) scale(${scaleX} ${scaleY}) translate(${-center.x} ${-center.y})"` : "";
+		return buildSvgGradientResult({
+			id,
+			type: "radialGradient",
+			gradient: [
+				`<radialGradient id="${id}" gradientUnits="objectBoundingBox" cx="${formatPoint(center.x)}" cy="${formatPoint(center.y)}" r="${formatPoint(radius)}"${transform}>`,
+				buildSvgStops(input),
+				"</radialGradient>"
+			].join("")
+		});
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/svg/ModuleTransformerConicGradientToSvg.ts
+const DEFAULT_ID$2 = "gradiente-conic-gradient";
+const TWO_PI = Math.PI * 2;
+const VIEW_BOX_SIZE$1 = 100;
+const CONIC_SEGMENT_COUNT = 720;
+function resolveKeywordX$1(value, size) {
+	if (value === "left") return 0;
+	if (value === "right") return size;
+	return size / 2;
+}
+function resolveKeywordY$1(value, size) {
+	if (value === "top") return 0;
+	if (value === "bottom") return size;
+	return size / 2;
+}
+function resolveLengthPercentage$1(value, size) {
+	if (value.kind === "percent") return value.value / 100 * size;
+	if (value.unit === "px") return value.value;
+	return value.value;
+}
+function resolveCenter$1(position, size) {
+	if (position.kind === "keywords") return {
+		x: resolveKeywordX$1(position.x, size),
+		y: resolveKeywordY$1(position.y, size)
+	};
+	return {
+		x: resolveLengthPercentage$1(position.x, size),
+		y: resolveLengthPercentage$1(position.y, size)
+	};
+}
+function resolveAngleToRadians(angle) {
+	if (angle.unit === "deg") return degToRad(angle.value);
+	if (angle.unit === "turn") return turnToRad(angle.value);
+	if (angle.unit === "grad") return gradToRad(angle.value);
+	return angle.value;
+}
+function getDistance(from, to) {
+	const dx = to.x - from.x;
+	const dy = to.y - from.y;
+	return Math.sqrt(dx * dx + dy * dy);
+}
+function getCoverRadius(center) {
+	return Math.max(...[
+		{
+			x: 0,
+			y: 0
+		},
+		{
+			x: VIEW_BOX_SIZE$1,
+			y: 0
+		},
+		{
+			x: 0,
+			y: VIEW_BOX_SIZE$1
+		},
+		{
+			x: VIEW_BOX_SIZE$1,
+			y: VIEW_BOX_SIZE$1
+		}
+	].map((corner) => getDistance(center, corner))) * 1.02;
+}
+function pointOnConicRay(center, radius, angle) {
+	return {
+		x: center.x + Math.sin(angle) * radius,
+		y: center.y - Math.cos(angle) * radius
+	};
+}
+function formatNumber$2(value) {
+	return `${Number(value.toFixed(3))}`;
+}
+var ModuleTransformerConicGradientToSvg = class {
+	target = "svg";
+	gradientType = "conic-gradient";
+	to(input) {
+		if (!(input instanceof ConicGradient)) throw new Error("Expected ConicGradient");
+		const id = DEFAULT_ID$2;
+		const center = resolveCenter$1(input.config.position, VIEW_BOX_SIZE$1);
+		const from = resolveAngleToRadians(input.config.from);
+		const stops = resolveRenderableGradientStops(input, 128);
+		const radius = getCoverRadius(center);
+		const paths = [];
+		for (let index = 0; index < CONIC_SEGMENT_COUNT; index += 1) {
+			const startT = index / CONIC_SEGMENT_COUNT;
+			const endT = (index + 1) / CONIC_SEGMENT_COUNT;
+			const color = formatSvgColor(sampleSvgStops(stops, startT + (endT - startT) / 2));
+			const start = pointOnConicRay(center, radius, startT * TWO_PI + from);
+			const end = pointOnConicRay(center, radius, endT * TWO_PI + from);
+			paths.push([
+				`<path d="M ${formatNumber$2(center.x)} ${formatNumber$2(center.y)}`,
+				`L ${formatNumber$2(start.x)} ${formatNumber$2(start.y)}`,
+				`A ${formatNumber$2(radius)} ${formatNumber$2(radius)} 0 0 1 ${formatNumber$2(end.x)} ${formatNumber$2(end.y)}`,
+				`Z" fill="${color}" stroke="${color}" stroke-width="0.25"/>`
+			].join(" "));
+		}
+		const vectorSvg = [
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${VIEW_BOX_SIZE$1} ${VIEW_BOX_SIZE$1}" width="${VIEW_BOX_SIZE$1}" height="${VIEW_BOX_SIZE$1}">`,
+			...paths,
+			"</svg>"
+		].join("");
+		return buildSvgGradientResult({
+			id,
+			type: "pattern",
+			gradient: [
+				`<pattern id="${id}" patternUnits="objectBoundingBox" width="1" height="1" viewBox="0 0 ${VIEW_BOX_SIZE$1} ${VIEW_BOX_SIZE$1}" preserveAspectRatio="none">`,
+				`<image width="${VIEW_BOX_SIZE$1}" height="${VIEW_BOX_SIZE$1}" href="${escapeXml(encodeSvgDataUrl(vectorSvg))}"/>`,
+				"</pattern>"
+			].join("")
+		});
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/svg/ModuleTransformerDiamondGradientToSvg.ts
+const DEFAULT_ID$1 = "gradiente-diamond-gradient";
+const VIEW_BOX_SIZE = 100;
+function resolveKeywordX(value) {
+	if (value === "left") return 0;
+	if (value === "right") return VIEW_BOX_SIZE;
+	return VIEW_BOX_SIZE / 2;
+}
+function resolveKeywordY(value) {
+	if (value === "top") return 0;
+	if (value === "bottom") return VIEW_BOX_SIZE;
+	return VIEW_BOX_SIZE / 2;
+}
+function resolveLengthPercentage(value) {
+	if (value.kind === "percent") return value.value / 100 * VIEW_BOX_SIZE;
+	if (value.unit === "px") return value.value;
+	throw new Error(`Unsupported diamond-gradient length unit for SVG transformer: ${value.unit}`);
+}
+function resolveCenter(position) {
+	if (position.kind === "keywords") return {
+		x: resolveKeywordX(position.x),
+		y: resolveKeywordY(position.y)
+	};
+	return {
+		x: resolveLengthPercentage(position.x),
+		y: resolveLengthPercentage(position.y)
+	};
+}
+function getDistanceToCorner(center, corner) {
+	return Math.abs(corner.x - center.x) + Math.abs(corner.y - center.y);
+}
+function getCornerDeltas(center) {
+	return [
+		{
+			dx: -center.x,
+			dy: -center.y
+		},
+		{
+			dx: VIEW_BOX_SIZE - center.x,
+			dy: -center.y
+		},
+		{
+			dx: -center.x,
+			dy: VIEW_BOX_SIZE - center.y
+		},
+		{
+			dx: VIEW_BOX_SIZE - center.x,
+			dy: VIEW_BOX_SIZE - center.y
+		}
+	];
+}
+function scaleDiamondRadiiToCorner(radiusX, radiusY, dx, dy) {
+	const safeRadiusX = Math.max(radiusX, 1e-4);
+	const safeRadiusY = Math.max(radiusY, 1e-4);
+	const scale = Math.abs(dx) / safeRadiusX + Math.abs(dy) / safeRadiusY;
+	return {
+		x: safeRadiusX * scale,
+		y: safeRadiusY * scale
+	};
+}
+function resolveDiamondRadii(size, shape, center) {
+	if (size.kind === "explicit") {
+		const radiusX = resolveLengthPercentage(size.x);
+		const radiusY = size.y ? resolveLengthPercentage(size.y) : radiusX;
+		return {
+			x: Math.max(radiusX, 1e-4),
+			y: Math.max(shape === "circle" ? radiusX : radiusY, 1e-4)
+		};
+	}
+	const left = center.x;
+	const right = VIEW_BOX_SIZE - center.x;
+	const top = center.y;
+	const bottom = VIEW_BOX_SIZE - center.y;
+	if (shape === "circle") {
+		const cornerDistances = [
+			{
+				x: 0,
+				y: 0
+			},
+			{
+				x: VIEW_BOX_SIZE,
+				y: 0
+			},
+			{
+				x: 0,
+				y: VIEW_BOX_SIZE
+			},
+			{
+				x: VIEW_BOX_SIZE,
+				y: VIEW_BOX_SIZE
+			}
+		].map((corner) => getDistanceToCorner(center, corner));
+		if (size.value === "closest-side") {
+			const radius = Math.max(Math.min(left, right, top, bottom), 1e-4);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		if (size.value === "farthest-side") {
+			const radius = Math.max(Math.max(left, right, top, bottom), 1e-4);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		if (size.value === "closest-corner") {
+			const radius = Math.max(Math.min(...cornerDistances), 1e-4);
+			return {
+				x: radius,
+				y: radius
+			};
+		}
+		const radius = Math.max(Math.max(...cornerDistances), 1e-4);
+		return {
+			x: radius,
+			y: radius
+		};
+	}
+	const closestSideRadiusX = Math.min(left, right);
+	const closestSideRadiusY = Math.min(top, bottom);
+	const farthestSideRadiusX = Math.max(left, right);
+	const farthestSideRadiusY = Math.max(top, bottom);
+	if (size.value === "closest-side") return {
+		x: Math.max(closestSideRadiusX, 1e-4),
+		y: Math.max(closestSideRadiusY, 1e-4)
+	};
+	if (size.value === "farthest-side") return {
+		x: Math.max(farthestSideRadiusX, 1e-4),
+		y: Math.max(farthestSideRadiusY, 1e-4)
+	};
+	const corners = getCornerDeltas(center);
+	if (size.value === "closest-corner") return corners.map((corner) => scaleDiamondRadiiToCorner(closestSideRadiusX, closestSideRadiusY, corner.dx, corner.dy)).reduce((closest, current) => current.x * current.y < closest.x * closest.y ? current : closest);
+	return corners.map((corner) => scaleDiamondRadiiToCorner(farthestSideRadiusX, farthestSideRadiusY, corner.dx, corner.dy)).reduce((farthest, current) => current.x * current.y > farthest.x * farthest.y ? current : farthest);
+}
+function getMaxVisibleDiamondT(center, radii) {
+	return Math.max(...[
+		{
+			x: 0,
+			y: 0
+		},
+		{
+			x: VIEW_BOX_SIZE,
+			y: 0
+		},
+		{
+			x: 0,
+			y: VIEW_BOX_SIZE
+		},
+		{
+			x: VIEW_BOX_SIZE,
+			y: VIEW_BOX_SIZE
+		}
+	].map((corner) => Math.abs(corner.x - center.x) / Math.max(radii.x, 1e-4) + Math.abs(corner.y - center.y) / Math.max(radii.y, 1e-4)));
+}
+function getColorStops(stops) {
+	return stops.filter((stop) => stop.type === "color-stop" && stop.position != null).sort((a, b) => a.position - b.position);
+}
+function formatNumber$1(value) {
+	return `${Number(value.toFixed(3))}`;
+}
+function buildDiamondPolygon(center, radii, position) {
+	const x = radii.x * position;
+	const y = radii.y * position;
+	return [
+		`${formatNumber$1(center.x)} ${formatNumber$1(center.y - y)}`,
+		`${formatNumber$1(center.x + x)} ${formatNumber$1(center.y)}`,
+		`${formatNumber$1(center.x)} ${formatNumber$1(center.y + y)}`,
+		`${formatNumber$1(center.x - x)} ${formatNumber$1(center.y)}`
+	].join(" ");
+}
+var ModuleTransformerDiamondGradientToSvg = class {
+	target = "svg";
+	gradientType = "diamond-gradient";
+	to(input) {
+		if (!(input instanceof DiamondGradient)) throw new Error("Expected DiamondGradient");
+		const id = DEFAULT_ID$1;
+		const center = resolveCenter(input.config.position);
+		const radii = resolveDiamondRadii(input.config.size, input.config.shape, center);
+		const maxVisibleT = getMaxVisibleDiamondT(center, radii);
+		const maxT = input.isRepeating ? maxVisibleT : 1;
+		const baseStops = resolveRenderableGradientStops(input, 128);
+		const stops = getColorStops(input.isRepeating ? expandRepeatingStopsTo(baseStops, 0, maxVisibleT) : baseStops);
+		const outerColor = formatSvgColor(sampleSvgStops(stops, maxT));
+		const sampleCount = Math.max(128, Math.ceil(128 * maxT));
+		const polygons = [];
+		for (let index = sampleCount; index >= 0; index -= 1) {
+			const position = index / sampleCount * maxT;
+			const color = formatSvgColor(sampleSvgStops(stops, position));
+			const points = buildDiamondPolygon(center, radii, position);
+			polygons.push(`<polygon points="${points}" fill="${color}"/>`);
+		}
+		const vectorSvg = [
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}" width="${VIEW_BOX_SIZE}" height="${VIEW_BOX_SIZE}" preserveAspectRatio="none">`,
+			`<rect width="${VIEW_BOX_SIZE}" height="${VIEW_BOX_SIZE}" fill="${outerColor}"/>`,
+			...polygons,
+			"</svg>"
+		].join("");
+		return buildSvgGradientResult({
+			id,
+			type: "pattern",
+			gradient: [
+				`<pattern id="${id}" patternUnits="objectBoundingBox" width="1" height="1" viewBox="0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}" preserveAspectRatio="none">`,
+				`<image width="${VIEW_BOX_SIZE}" height="${VIEW_BOX_SIZE}" href="${escapeXml(encodeSvgDataUrl(vectorSvg))}"/>`,
+				"</pattern>"
+			].join("")
+		});
+	}
+};
+//#endregion
+//#region src/gradient-transformer/modules/svg/ModuleTransformerMeshGradientToSvg.ts
+const DEFAULT_ID = "gradiente-mesh-gradient";
+const MESH_VIEW_BOX_SIZE = 100;
+const BILINEAR_SUBDIVISIONS = 32;
+const BICUBIC_SUBDIVISIONS = 40;
+function formatRgba(color) {
+	return `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${Number(color[3].toFixed(4))})`;
+}
+function getTriangleColor(a, b, c) {
+	return [
+		Math.round((a.color[0] + b.color[0] + c.color[0]) / 3 * 255),
+		Math.round((a.color[1] + b.color[1] + c.color[1]) / 3 * 255),
+		Math.round((a.color[2] + b.color[2] + c.color[2]) / 3 * 255),
+		(a.color[3] + b.color[3] + c.color[3]) / 3
+	];
+}
+function formatNumber(value) {
+	return `${Number(value.toFixed(3))}`;
+}
+function triangleToPolygon(triangle) {
+	const [a, b, c] = triangle;
+	const color = formatRgba(getTriangleColor(a, b, c));
+	return `<polygon points="${[
+		`${formatNumber(a.x)} ${formatNumber(a.y)}`,
+		`${formatNumber(b.x)} ${formatNumber(b.y)}`,
+		`${formatNumber(c.x)} ${formatNumber(c.y)}`
+	].join(" ")}" fill="${color}" stroke="${color}" stroke-width="0.08"/>`;
+}
+var ModuleTransformerMeshGradientToSvg = class {
+	target = "svg";
+	gradientType = "mesh-gradient";
+	to(input) {
+		if (!(input instanceof MeshGradient)) throw new Error("Expected MeshGradient");
+		const id = DEFAULT_ID;
+		const vertexMap = buildMeshVertexMap(input, MESH_VIEW_BOX_SIZE, MESH_VIEW_BOX_SIZE);
+		const grid = buildRegularMeshGrid(input, vertexMap);
+		const subdivisions = input.config.method === "bicubic" ? BICUBIC_SUBDIVISIONS : BILINEAR_SUBDIVISIONS;
+		const patchTriangles = input.patches.flatMap((patch) => buildPatchTriangles(input, grid, patch, vertexMap, subdivisions));
+		const edgeTriangles = buildMeshEdgeSkirtTriangles(input, grid, MESH_VIEW_BOX_SIZE, MESH_VIEW_BOX_SIZE, subdivisions);
+		const polygons = [...patchTriangles, ...edgeTriangles].map(triangleToPolygon);
+		const imageSvg = [
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${MESH_VIEW_BOX_SIZE} ${MESH_VIEW_BOX_SIZE}" width="${MESH_VIEW_BOX_SIZE}" height="${MESH_VIEW_BOX_SIZE}" preserveAspectRatio="none">`,
+			...polygons,
+			"</svg>"
+		].join("");
+		return buildSvgGradientResult({
+			id,
+			type: "pattern",
+			gradient: [
+				`<pattern id="${id}" patternUnits="objectBoundingBox" width="1" height="1" viewBox="0 0 ${MESH_VIEW_BOX_SIZE} ${MESH_VIEW_BOX_SIZE}" preserveAspectRatio="none">`,
+				`<image width="${MESH_VIEW_BOX_SIZE}" height="${MESH_VIEW_BOX_SIZE}" href="${escapeXml(encodeSvgDataUrl(imageSvg))}"/>`,
+				"</pattern>"
+			].join("")
+		});
+	}
+};
 //#endregion
 //#region src/gradient-transformer/GradientTransformer.ts
 var GradientTransformer = class {
@@ -4884,6 +5503,11 @@ var GradientTransformer = class {
 		this.add(new ModuleTransformerDiamondGradientToCanvasWebGL());
 		this.add(new ModuleTransformerConicGradientToCanvasWebGL());
 		this.add(new ModuleTransformerMeshGradientToCanvasWebGL());
+		this.add(new ModuleTransformerLinearGradientToSvg());
+		this.add(new ModuleTransformerRadialGradientToSvg());
+		this.add(new ModuleTransformerConicGradientToSvg());
+		this.add(new ModuleTransformerDiamondGradientToSvg());
+		this.add(new ModuleTransformerMeshGradientToSvg());
 	}
 	static _getKey(target, gradientType) {
 		return `${target}:${gradientType}`;
@@ -4961,4 +5585,4 @@ function transformFrom(target, gradientType, input) {
 	return GradientTransformer.from(target, gradientType, input);
 }
 //#endregion
-export { ConicGradient, DiamondGradient, GRADIENT_COLOR_SPACE, GRADIENT_HUE_INTERPOLATIONS, GRADIENT_POLAR_COLOR_SPACES, GradientBase, GradientFactory, GradientTransformer, LinearGradient, MeshGradient, ModuleTransformerConicGradientToCanvas, ModuleTransformerConicGradientToCanvasWebGL, ModuleTransformerConicGradientToCss, ModuleTransformerDiamondGradientToCanvas, ModuleTransformerDiamondGradientToCanvasWebGL, ModuleTransformerDiamondGradientToCss, ModuleTransformerLinearGradientToCanvas, ModuleTransformerLinearGradientToCanvasWebGL, ModuleTransformerLinearGradientToCss, ModuleTransformerMeshGradientToCanvas, ModuleTransformerMeshGradientToCanvasWebGL, ModuleTransformerMeshGradientToCss, ModuleTransformerRadialGradientToCanvas, ModuleTransformerRadialGradientToCanvasWebGL, ModuleTransformerRadialGradientToCss, PatternTokenKind, RadialGradient, angleValueFromString, ceilTo, clamp, degToRad, floorTo, format, fromPercent, gradToRad, isAngle, isAngleUnit, isColorHint, isColorStop, isConfig, isGradient, isGradientColorSpace, isGradientHueInterpolation, isGradientPolarColorSpace, isPatternSyntaxValid, isPatternValid, isValid, matchExpression, normalizeAngleDeg, normalizeAngleRad, parse, parseStringToAbi, radToDeg, roundTo, splitTopLevelByWhitespace, toPercent, tokenizePattern, transformFrom, transformTo, truncTo, turnToRad, validate, validatePattern, validatePatternSemantic, validatePatternStructure, validatePatternSyntax };
+export { ConicGradient, DiamondGradient, GRADIENT_COLOR_SPACE, GRADIENT_HUE_INTERPOLATIONS, GRADIENT_POLAR_COLOR_SPACES, GradientBase, GradientFactory, GradientTransformer, LinearGradient, MeshGradient, ModuleTransformerConicGradientToCanvas, ModuleTransformerConicGradientToCanvasWebGL, ModuleTransformerConicGradientToCss, ModuleTransformerConicGradientToSvg, ModuleTransformerDiamondGradientToCanvas, ModuleTransformerDiamondGradientToCanvasWebGL, ModuleTransformerDiamondGradientToCss, ModuleTransformerDiamondGradientToSvg, ModuleTransformerLinearGradientToCanvas, ModuleTransformerLinearGradientToCanvasWebGL, ModuleTransformerLinearGradientToCss, ModuleTransformerLinearGradientToSvg, ModuleTransformerMeshGradientToCanvas, ModuleTransformerMeshGradientToCanvasWebGL, ModuleTransformerMeshGradientToCss, ModuleTransformerMeshGradientToSvg, ModuleTransformerRadialGradientToCanvas, ModuleTransformerRadialGradientToCanvasWebGL, ModuleTransformerRadialGradientToCss, ModuleTransformerRadialGradientToSvg, PatternTokenKind, RadialGradient, angleValueFromString, ceilTo, clamp, degToRad, floorTo, format, fromPercent, gradToRad, isAngle, isAngleUnit, isColorHint, isColorStop, isConfig, isGradient, isGradientColorSpace, isGradientHueInterpolation, isGradientPolarColorSpace, isPatternSyntaxValid, isPatternValid, isValid, matchExpression, normalizeAngleDeg, normalizeAngleRad, parse, parseStringToAbi, radToDeg, roundTo, splitTopLevelByWhitespace, toPercent, tokenizePattern, transformFrom, transformTo, truncTo, turnToRad, validate, validatePattern, validatePatternSemantic, validatePatternStructure, validatePatternSyntax };