From 88623c04ba0044f1625b9d655ebbcbf3f3f2ab52 Mon Sep 17 00:00:00 2001 From: jeremyfuksa Date: Mon, 27 Apr 2020 16:26:50 -0500 Subject: [PATCH] =?UTF-8?q?Modified=20SVG=20shapes=20to=20utilize=20filled?= =?UTF-8?q?=20=E2=80=9Cstrokes=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removes the need to use CSS borders on these shapes, as a possible fix for https://github.com/cerner/carbon-graphs/issues/176 Signed-off-by: jeremyfuksa --- src/main/js/core/Shape/shapeDefinitions.js | 423 ++++++++++++++++----- 1 file changed, 319 insertions(+), 104 deletions(-) diff --git a/src/main/js/core/Shape/shapeDefinitions.js b/src/main/js/core/Shape/shapeDefinitions.js index 6adf2ca8f..b78dddc06 100644 --- a/src/main/js/core/Shape/shapeDefinitions.js +++ b/src/main/js/core/Shape/shapeDefinitions.js @@ -2,6 +2,8 @@ "use strict"; /** + * All shapes modified for stroke legibility at small sizes + * * The S_0001_circle.svg SVG file as an object. * * @private @@ -12,12 +14,11 @@ export const CIRCLE = { cx: "24", cy: "24", r: "22", - "stroke-width": "4", - stroke: "#FFF", - fill: "none" + fill: "#1c1f21" }, path: { - d: "M2,24 a22,22 0 1,0 44,0 a22,22 0 1,0 -44,0z ", + d: "M24 5c10.5 0 19 8.5 19 19s-8.5 19-19 19S5 34.5 5 24 13.5 5 24 5m0-5C10.7 0 0 10.7 0 24s10.7 24 24 24 24-10.7 24-24S37.3 0 24 0z", + fill: "#fff" }, options: { x: -5, y: -5, scale: 0.2 }, }; @@ -28,17 +29,20 @@ export const CIRCLE = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const RHOMBUS = { - rect: { - x: "18", - y: "-16", - height: 32, - width: 32, - transform: "rotate(45)" - }, - path: { - d: "M24,0 L0,24 L24,48 L48,24z M24,6 L6,24 L24,42 L42,24z", - fill: "#FFF", - "fill-rule": "evenodd" + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#1c1f21", + d: "M24 1.373L46.627 24 24 46.627 1.373 24z" + }, + { + fill: "#fff", + "fill-rule": "nonzero", + d: "M24 0L0 24l24 24 24-24L24 0zm0 6.163l17.837 17.836L24 41.837 6.163 23.999 24 6.163z" + } + ] }, options: { x: -6, y: -6, scale: 0.25 } }; @@ -49,7 +53,21 @@ export const RHOMBUS = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const CROSS = { - path: { d: "M0 16h16V0h16v16h16v16H32v16H16V32H0V16z" }, + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#1c1f21", + d: "M16.615 1.846v14.768H1.846v14.77h14.769v14.77h14.77v-14.77h14.768v-14.77H31.385V1.846z" + }, + { + fill: "#fff", + "fill-rule": "nonzero", + d: "M33.23 0H14.77v14.768H0V33.23h14.77V48h18.46V33.23H48V14.768H33.23V0zm-3.692 3.692v14.769h14.769v11.077H29.538v14.77H18.462v-14.77H3.692V18.46h14.77V3.692h11.076z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -59,7 +77,21 @@ export const CROSS = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const VERTICAL_BAR = { - path: { d: "M14 0h20v48H14V0" }, + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#1c1f21", + d: "M2.764 46.236h18.113V2.764H2.764z" + }, + { + fill: "#fff", + "fill-rule": "nonzero", + d: "M23.142.5H.5v48h22.642V.5zm-4.529 4.528v38.944H5.028V5.028h13.585z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -69,7 +101,21 @@ export const VERTICAL_BAR = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const SQUARE = { - path: { d: "M0 0h48v48H0V0z" }, + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#1c1f21", + d: "M2.764 46.236h43.472V2.764H2.764z" + }, + { + fill: "#fff", + "fill-rule": "nonzero", + d: "M48.5.5H.5v48h48V.5zm-4.528 4.528v38.944H5.028V5.028h38.944z" + } + ] + }, options: { x: -5, y: -5, scale: 0.2 } }; /** @@ -79,9 +125,20 @@ export const SQUARE = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const TEAR_DROP = { - path: { - d: - "M24 0s4.8 5.9 14.5 17.6c6.4 8.1 5.1 19.9-2.9 26.3s-19.6 5.1-26-3c-5.4-6.8-5.4-16.5 0-23.4C19.2 5.9 24 0 24 0z" + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#1c1f21", + d: "M31.439 18.856c5.585 7.069 4.45 17.367-2.531 22.953-6.982 5.585-17.106 4.45-22.691-2.619-4.713-5.934-4.713-14.4 0-20.421C14.595 8.645 18.784 3.496 18.784 3.496s4.19 5.149 12.655 15.36z" + }, + { + fill: "#fff", + "fill-rule": "nonzero", + d: "M18.784.039L15.612 3.93l-4.718 5.746a3984.842 3984.842 0 01-6.358 7.7c-5.37 6.86-5.37 16.443-.028 23.17 6.323 8.002 17.823 9.317 25.763 2.965 7.921-6.337 9.207-18 2.88-26.009l-5.384-6.509-5.292-6.431-1.998-2.444-1.693-2.08zm0 6.904l4.144 5.042c2.028 2.46 4.305 5.216 6.831 8.263 4.812 6.091 3.828 15.024-2.214 19.857-6.05 4.84-14.79 3.84-19.616-2.267-4.087-5.146-4.087-12.495.006-17.725l6.6-7.995 4.25-5.175z" + } + ] }, options: { x: -6, y: -6, scale: 0.25 } }; @@ -92,9 +149,20 @@ export const TEAR_DROP = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const TEAR_ALT = { - path: { - d: - "M24 48s-4.8-5.9-14.5-17.6c-6.4-8.1-5.1-19.9 2.9-26.3s19.6-5.1 26 3c5.4 6.8 5.4 16.5 0 23.4C28.8 42.1 24 48 24 48z" + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#1c1f21", + d: "M31.439 29.221c5.585-7.069 4.45-17.367-2.531-22.952C21.926.683 11.802 1.818 6.217 8.887c-4.713 5.934-4.713 14.4 0 20.422C14.595 39.432 18.784 44.58 18.784 44.58s4.19-5.149 12.655-15.36z" + }, + { + fill: "#fff", + "fill-rule": "nonzero", + d: "M18.784 48.039l-3.172-3.893-4.718-5.746a3984.842 3984.842 0 00-6.358-7.7c-5.37-6.86-5.37-16.443-.028-23.17 6.323-8.002 17.823-9.317 25.763-2.965 7.921 6.337 9.207 18.001 2.88 26.009l-5.384 6.509-5.292 6.432-1.998 2.443-1.693 2.08zm0-6.905l4.144-5.042c2.028-2.46 4.305-5.216 6.831-8.263 4.812-6.091 3.828-15.023-2.214-19.857-6.05-4.84-14.79-3.84-19.616 2.267-4.087 5.147-4.087 12.495.006 17.725l6.6 7.995 4.25 5.175z" + } + ] }, options: { x: -6, y: -6, scale: 0.25 } }; @@ -105,7 +173,20 @@ export const TEAR_ALT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const DIAMOND = { - path: { d: "M24 0l14 24-14 24-14-24L24 0z" }, + g: { + fill: "none", + "fill-rule": "nonzero", + path: [ + { + fill: "#1c1f21", + d: "M14.087 4.144l11.587 19.862-11.587 19.862L2.5 24.006z" + }, + { + fill: "#fff", + d: "M28.069 24.007L14.087.038.106 24.007l13.981 23.968L28.07 24.007zM14.087 8.25l9.19 15.756-9.19 15.756-9.191-15.755L14.087 8.25z" + } + ] + }, options: { x: -8, y: -8, scale: 0.25 } }; /** @@ -115,7 +196,20 @@ export const DIAMOND = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const TRIANGLE = { - path: { d: "M24 4l24 40H0L24 4z" }, + g: { + fill: "none", + "fill-rule": "nonzero", + path: [ + { + fill: "#1c1f21", + d: "M24.514 4.233l20.21 33.684H4.303z" + }, + { + fill: "#fff", + d: "M48.442 40.022L24.513.141.585 40.022h47.857zM24.513 8.325l16.492 27.487H8.021L24.513 8.325z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -125,7 +219,20 @@ export const TRIANGLE = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const TRIANGLE_DOWN = { - path: { d: "M24 44L0 4h48L24 44z" }, + g: { + fill: "none", + "fill-rule": "nonzero", + path: [ + { + fill: "#1c1f21", + d: "M24.514 36.47l20.21-33.684H4.303z" + }, + { + fill: "#fff", + d: "M48.442.68L24.513 40.563.585.68h47.857zM24.513 32.379L41.005 4.891H8.021l16.492 27.487z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -135,9 +242,19 @@ export const TRIANGLE_DOWN = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const X = { - path: { - d: - "M0 12L12 0l12 12L36 0l12 12-12 12 12 12-12 12-12-12-12 12L0 36l12-12L0 12z" + g: { + fill: "none", + "fill-rule": "nonzero", + path: [ + { + fill: "#1c1f21", + d: "M3.494 13.78L13.78 3.494 24.066 13.78 34.352 3.494 44.637 13.78 34.352 24.066l10.285 10.286-10.285 10.285-10.286-10.285L13.78 44.637 3.494 34.352 13.78 24.066z" + }, + { + fill: "#fff", + d: "M34.352.464L24.066 10.751 13.781.464.464 13.781l10.287 10.285L.464 34.352l13.317 13.316 10.285-10.286 10.286 10.286 13.316-13.316-10.286-10.286 10.286-10.285L34.352.464zm0 6.06l7.256 7.257-10.286 10.285 10.286 10.286-7.256 7.256-10.286-10.286-10.285 10.286-7.256-7.256L16.81 24.066 6.525 13.781l7.256-7.256L24.066 16.81 34.352 6.525z" + } + ] }, options: { x: -6, y: -6, scale: 0.25 } }; @@ -148,10 +265,15 @@ export const X = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const CIRCLE_LIGHT = { - circle: { cx: "24", cy: "24", r: "21", fill: "#FFF" }, + circle: { + cx: "24", + cy: "24", + r: "22", + fill: "#fff" + }, path: { - d: - "M24.1 0C10.7 0 0 10.7 0 24s10.7 24 24 24 24-10.7 24-24C48 10.8 37.3 0 24.1 0zM24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21z" + d: "M24 5c10.5 0 19 8.5 19 19s-8.5 19-19 19S5 34.5 5 24 13.5 5 24 5m0-5C10.7 0 0 10.7 0 24s10.7 24 24 24 24-10.7 24-24S37.3 0 24 0z", + fill: "#1c1f21" }, options: { x: -5, y: -5, scale: 0.2 } }; @@ -162,13 +284,21 @@ export const CIRCLE_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const RHOMBUS_LIGHT = { - path: [ - { fill: "#FFF", d: "M4.2 24L24 4.201 43.798 24 24 43.799z" }, - { - d: - "M24 0L0 24l24 24 24-24L24 0zm19.8 24L24 43.8 4.2 24 24 4.2 43.8 24z" - } - ], + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#fff", + d: "M24 1.373L46.627 24 24 46.627 1.373 24z" + }, + { + fill: "#1c1f21", + "fill-rule": "nonzero", + d: "M24 0L0 24l24 24 24-24L24 0zm0 6.163l17.837 17.836L24 41.837 6.163 23.999 24 6.163z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -178,13 +308,21 @@ export const RHOMBUS_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const CROSS_LIGHT = { - path: [ - { fill: "#FFF", d: "M45 19v10H29v16H19V29H3V19h16V3h10v16z" }, - { - d: - "M32 16V0H16v16H0v16h16v16h16V32h16V16H32zm13 13H29v16H19V29H3V19h16V3h10v16h16v10z" - } - ], + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#fff", + d: "M16.615 1.846v14.768H1.846v14.77h14.769v14.77h14.77v-14.77h14.768v-14.77H31.385V1.846z" + }, + { + fill: "#1c1f21", + "fill-rule": "nonzero", + d: "M33.23 0H14.77v14.768H0V33.23h14.77V48h18.46V33.23H48V14.768H33.23V0zm-3.692 3.692v14.769h14.769v11.077H29.538v14.77H18.462v-14.77H3.692V18.46h14.77V3.692h11.076z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -194,10 +332,21 @@ export const CROSS_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const VERTICAL_BAR_LIGHT = { - path: [ - { fill: "#FFF", d: "M17 3h14v42H17z" }, - { d: "M14 0v48h20V0H14zm17 45H17V3h14v42z" } - ], + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#fff", + d: "M2.764 46.236h18.113V2.764H2.764z" + }, + { + fill: "#1c1f21", + "fill-rule": "nonzero", + d: "M23.142.5H.5v48h22.642V.5zm-4.529 4.528v38.944H5.028V5.028h13.585z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -207,10 +356,21 @@ export const VERTICAL_BAR_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const SQUARE_LIGHT = { - path: [ - { fill: "#FFF", d: "M3 3h42v42H3z" }, - { d: "M0 0v48h48V0H0zm45 45H3V3h42v42z" } - ], + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#fff", + d: "M2.764 46.236h43.472V2.764H2.764z" + }, + { + fill: "#1c1f21", + "fill-rule": "nonzero", + d: "M48.5.5H.5v48h48V.5zm-4.528 4.528v38.944H5.028V5.028h38.944z" + } + ] + }, options: { x: -5, y: -5, scale: 0.2 } }; /** @@ -220,17 +380,21 @@ export const SQUARE_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const TEAR_DROP_LIGHT = { - path: [ - { - fill: "#FFF", - d: - "M33.7 41.6C27 46.9 17.4 45.9 12 39.2c0-.1-.1-.1-.1-.2-4.6-5.8-4.6-13.9 0-19.7 5.7-6.8 9.7-11.7 12-14.5 2.3 2.8 6.4 7.8 12.2 14.7 5.4 6.8 4.3 16.6-2.4 22.1z" - }, - { - d: - "M38.4 17.6C28.7 5.9 23.9 0 23.9 0S19.1 5.9 9.5 17.5c-5.4 6.9-5.4 16.5 0 23.4 6.3 8 17.8 9.4 25.8 3.2.1 0 .1-.1.2-.2 8-6.5 9.3-18.2 2.9-26.3zM12 39.2c0-.1-.1-.1-.1-.2-4.6-5.8-4.6-13.9 0-19.7 5.7-6.8 9.7-11.7 12-14.5 2.3 2.8 6.4 7.8 12.2 14.7 5.4 6.8 4.3 16.6-2.4 22.1-6.7 5.3-16.3 4.3-21.7-2.4z" - } - ], + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#fff", + d: "M31.439 18.856c5.585 7.069 4.45 17.367-2.531 22.953-6.982 5.585-17.106 4.45-22.691-2.619-4.713-5.934-4.713-14.4 0-20.421C14.595 8.645 18.784 3.496 18.784 3.496s4.19 5.149 12.655 15.36z" + }, + { + fill: "#1c1f21", + "fill-rule": "nonzero", + d: "M18.784.039L15.612 3.93l-4.718 5.746a3984.842 3984.842 0 01-6.358 7.7c-5.37 6.86-5.37 16.443-.028 23.17 6.323 8.002 17.823 9.317 25.763 2.965 7.921-6.337 9.207-18 2.88-26.009l-5.384-6.509-5.292-6.431-1.998-2.444-1.693-2.08zm0 6.904l4.144 5.042c2.028 2.46 4.305 5.216 6.831 8.263 4.812 6.091 3.828 15.024-2.214 19.857-6.05 4.84-14.79 3.84-19.616-2.267-4.087-5.146-4.087-12.495.006-17.725l6.6-7.995 4.25-5.175z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -240,17 +404,21 @@ export const TEAR_DROP_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const TEAR_ALT_LIGHT = { - path: [ - { - fill: "#FFF", - d: - "M36.1 28.6c-5.7 6.9-9.7 11.8-12.1 14.6-2.3-2.8-6.4-7.8-12.2-14.7-5.4-6.8-4.3-16.6 2.4-22.1C17.1 4.2 20.5 3 24 3c4.7 0 9.2 2.2 12.1 5.9 4.6 5.8 4.6 13.9 0 19.7z" - }, - { - d: - "M38.5 7.1C35 2.6 29.6 0 24 0c-4.2 0-8.2 1.4-11.5 4.1-8 6.5-9.3 18.2-2.9 26.3C19.3 42.1 24.1 48 24.1 48s4.8-5.9 14.4-17.5c5.4-6.9 5.4-16.5 0-23.4zM11.8 28.5c-5.4-6.8-4.3-16.6 2.4-22.1C17.1 4.2 20.5 3 24 3c4.7 0 9.2 2.2 12.1 5.9 4.6 5.8 4.6 13.9 0 19.7-5.7 6.9-9.7 11.8-12.1 14.6-2.3-2.8-6.4-7.8-12.2-14.7z" - } - ], + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#fff", + d: "M31.439 29.221c5.585-7.069 4.45-17.367-2.531-22.952C21.926.683 11.802 1.818 6.217 8.887c-4.713 5.934-4.713 14.4 0 20.422C14.595 39.432 18.784 44.58 18.784 44.58s4.19-5.149 12.655-15.36z" + }, + { + fill: "#1c1f21", + "fill-rule": "nonzero", + d: "M18.784 48.039l-3.172-3.893-4.718-5.746a3984.842 3984.842 0 00-6.358-7.7c-5.37-6.86-5.37-16.443-.028-23.17 6.323-8.002 17.823-9.317 25.763-2.965 7.921 6.337 9.207 18.001 2.88 26.009l-5.384 6.509-5.292 6.432-1.998 2.443-1.693 2.08zm0-6.905l4.144-5.042c2.028-2.46 4.305-5.216 6.831-8.263 4.812-6.091 3.828-15.023-2.214-19.857-6.05-4.84-14.79-3.84-19.616 2.267-4.087 5.147-4.087 12.495.006 17.725l6.6 7.995 4.25 5.175z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -260,10 +428,20 @@ export const TEAR_ALT_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const DIAMOND_LIGHT = { - path: [ - { fill: "#FFF", d: "M34.5 24L24 42 13.5 24 24 6z" }, - { d: "M24 0L10 24l14 24 14-24L24 0zm0 6l10.5 18L24 42 13.5 24 24 6z" } - ], + g: { + fill: "none", + "fill-rule": "nonzero", + path: [ + { + fill: "#fff", + d: "M14.087 4.144l11.587 19.862-11.587 19.862L2.5 24.006z" + }, + { + fill: "#1c1f21", + d: "M28.069 24.007L14.087.038.106 24.007l13.981 23.968L28.07 24.007zM14.087 8.25l9.19 15.756-9.19 15.756-9.191-15.755L14.087 8.25z" + } + ] + }, options: { x: -8, y: -8, scale: 0.25 } }; /** @@ -273,10 +451,20 @@ export const DIAMOND_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const TRIANGLE_LIGHT = { - path: [ - { fill: "#FFF", d: "M42.7 41H5.3L24 9.8z" }, - { d: "M24 4L0 44h48L24 4zm0 5.8L42.7 41H5.3L24 9.8z" } - ], + g: { + fill: "none", + "fill-rule": "nonzero", + path: [ + { + fill: "#fff", + d: "M24.514 4.233l20.21 33.684H4.303z" + }, + { + fill: "#1c1f21", + d: "M48.442 40.022L24.513.141.585 40.022h47.857zM24.513 8.325l16.492 27.487H8.021L24.513 8.325z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -286,10 +474,20 @@ export const TRIANGLE_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const TRIANGLE_DOWN_LIGHT = { - path: [ - { fill: "#FFF", d: "M42.7 7L24 38.2 5.3 7z" }, - { d: "M0 4l24 40L48 4H0zm42.7 3L24 38.2 5.3 7h37.4z" } - ], + g: { + fill: "none", + "fill-rule": "nonzero", + path: [ + { + fill: "#fff", + d: "M24.514 36.47l20.21-33.684H4.303z" + }, + { + fill: "#1c1f21", + d: "M48.442.68L24.513 40.563.585.68h47.857zM24.513 32.379L41.005 4.891H8.021l16.492 27.487z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -299,17 +497,20 @@ export const TRIANGLE_DOWN_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const X_LIGHT = { - path: [ - { - fill: "#FFF", - d: - "M33.9 26.1l9.9 9.9-7.8 7.8-9.9-9.9-2.1-2.1-2.1 2.1-9.9 9.9L4.2 36l9.9-9.9 2.1-2.1-2.1-2.1L4.2 12 12 4.2l9.9 9.9 2.1 2.1 2.1-2.1L36 4.2l7.8 7.8-9.9 9.9-2.1 2.1z" - }, - { - d: - "M48 12L36 0 24 12 12 0 0 12l12 12L0 36l12 12 12-12 12 12 12-12-12-12 12-12zM36 43.8l-9.9-9.9-2.1-2.1-2.1 2.1-9.9 9.9L4.2 36l9.9-9.9 2.1-2.1-2.1-2.1L4.2 12 12 4.2l9.9 9.9 2.1 2.1 2.1-2.1L36 4.2l7.8 7.8-9.9 9.9-2.1 2.1 2.1 2.1 9.9 9.9-7.8 7.8z" - } - ], + g: { + fill: "none", + "fill-rule": "nonzero", + path: [ + { + fill: "#fff", + d: "M3.494 13.78L13.78 3.494 24.066 13.78 34.352 3.494 44.637 13.78 34.352 24.066l10.285 10.286-10.285 10.285-10.286-10.285L13.78 44.637 3.494 34.352 13.78 24.066z" + }, + { + fill: "#1c1f21", + d: "M34.352.464L24.066 10.751 13.781.464.464 13.781l10.287 10.285L.464 34.352l13.317 13.316 10.285-10.286 10.286 10.286 13.316-13.316-10.286-10.286 10.286-10.285L34.352.464zm0 6.06l7.256 7.257-10.286 10.285 10.286 10.286-7.256 7.256-10.286-10.286-10.285 10.286-7.256-7.256L16.81 24.066 6.525 13.781l7.256-7.256L24.066 16.81 34.352 6.525z" + } + ] + }, options: { x: -6, y: -6, scale: 0.25 } }; /** @@ -319,10 +520,24 @@ export const X_LIGHT = { * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}} */ export const CIRCLE_HASHED = { - circle: { fill: "#FFF", cx: "24", cy: "24", r: "23.5" }, - path: { - d: - "M45.49 34.685c.116-.233.227-.468.336-.705.1-.211.2-.419.285-.632.185-.437.353-.883.513-1.333.055-.157.108-.316.161-.475.353-1.068.629-2.16.828-3.267.006-.033.015-.065.021-.1a24.225 24.225 0 00.244-6.605 23.548 23.548 0 00-.329-2.191c-.014-.074-.025-.15-.04-.225a24.73 24.73 0 00-.22-.95c-.018-.074-.033-.149-.052-.222-.09-.349-.19-.694-.3-1.037l-.026-.092c-.022-.069-.039-.14-.062-.21l-.007.008a23.733 23.733 0 00-1.939-4.425l.014-.014c-.087-.154-.19-.3-.281-.45a23.504 23.504 0 00-.43-.693 23.802 23.802 0 00-.9-1.314l-.193-.257c-.206-.272-.4-.554-.615-.816l-.017.017A23.978 23.978 0 0039.3 5.514l.017-.017c-.262-.217-.544-.409-.816-.615l-.257-.193a23.46 23.46 0 00-1.314-.9 23.504 23.504 0 00-.693-.43c-.152-.091-.3-.194-.45-.281l-.014.014a23.733 23.733 0 00-4.425-1.939l.008-.007c-.07-.023-.142-.04-.212-.062-.027-.009-.055-.016-.082-.024a27.896 27.896 0 00-1.046-.3c-.071-.019-.143-.033-.214-.051a25.09 25.09 0 00-.957-.221L28.624.45a25.584 25.584 0 00-2.191-.329A24.21 24.21 0 0019.82.37c-.033.006-.064.015-.1.021a23.75 23.75 0 00-3.742.989c-.451.159-.9.328-1.334.513-.213.09-.42.189-.63.285a24.1 24.1 0 00-3.346 1.864l-.208.142a23.937 23.937 0 00-6.422 6.492 24.1 24.1 0 00-1.864 3.346c-.1.21-.195.417-.285.63a23.25 23.25 0 00-.673 1.807 23.75 23.75 0 00-.829 3.269c-.006.033-.015.064-.021.1a24.204 24.204 0 00-.244 6.604c.078.743.187 1.468.328 2.192.014.074.025.15.04.225.066.322.143.64.221.957.018.071.032.143.051.214.09.352.191.7.3 1.046.008.027.015.055.024.082.022.07.039.142.062.212l.007-.008a23.733 23.733 0 001.939 4.425l-.014.014c.087.154.19.3.281.45.139.234.283.464.43.693.286.449.586.887.9 1.314l.193.257c.206.272.4.554.615.816l.017-.017A23.993 23.993 0 008.7 42.486l-.017.017c.262.217.544.409.816.615l.257.193c.428.315.866.615 1.314.9.229.147.459.291.693.43.152.091.3.194.45.281l.014-.014a23.733 23.733 0 004.425 1.939l-.008.007c.07.023.141.04.21.062l.092.026c.343.105.688.205 1.037.3.073.019.148.034.222.052.315.078.63.154.95.22.075.015.151.026.225.04.72.141 1.449.255 2.191.329a24.21 24.21 0 006.609-.253c.033-.006.065-.015.1-.021a23.864 23.864 0 003.267-.828c.159-.053.318-.106.475-.161.45-.16.9-.328 1.333-.513.213-.09.421-.189.632-.285a23.733 23.733 0 003.345-1.865l.206-.14a23.967 23.967 0 006.43-6.496 23.873 23.873 0 001.522-2.636zM1 24c0-1.844.223-3.682.663-5.473L18.527 1.663A22.943 22.943 0 0124 1c.5 0 1 .022 1.5.054L1.054 25.5C1.022 25 1 24.505 1 24zm.955 6.549L30.549 1.955a22.896 22.896 0 014.49 1.874l-31.21 31.21a22.896 22.896 0 01-1.874-4.49zm4.276 8.038L38.587 6.231a23.225 23.225 0 013.182 3.182L9.413 41.769a23.225 23.225 0 01-3.182-3.182zm6.73 5.584l31.21-31.21a22.896 22.896 0 011.874 4.49L17.451 46.045a22.896 22.896 0 01-4.49-1.874zM24 47c-.5 0-1-.022-1.5-.054L46.946 22.5c.032.5.054 1 .054 1.5a22.994 22.994 0 01-.663 5.473L29.473 46.337c-1.791.44-3.629.662-5.473.663z" + g: { + fill: "none", + "fill-rule": "evenodd", + path: [ + { + fill: "#fff", + d: "M24.5 46.193c11.98 0 21.693-9.712 21.693-21.693 0-11.98-9.712-21.692-21.693-21.692-11.98 0-21.692 9.712-21.692 21.692S12.52 46.193 24.5 46.193" + }, + { + fill: "#1c1f21", + d: "M43.728 20.489a19.495 19.495 0 00-1.39-4.198L16.292 42.338c1.329.608 2.729 1.089 4.197 1.39l23.239-23.24zM12.013 39.69l27.676-27.677a19.756 19.756 0 00-2.793-2.794L9.219 36.896a19.756 19.756 0 002.794 2.793M5.181 28.42c.3 1.468.782 2.868 1.39 4.198L32.617 6.57a19.493 19.493 0 00-4.197-1.388L5.18 28.42zM21.674 5C13.04 6.225 6.225 13.04 5 21.674L21.674 5zM27.235 43.909c8.634-1.225 15.448-8.04 16.674-16.674L27.235 43.909z" + }, + { + fill: "#1c1f21", + "fill-rule": "nonzero", + d: "M24.5 48.5c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm0-4.615c10.706 0 19.385-8.679 19.385-19.385 0-10.706-8.679-19.384-19.385-19.384-10.706 0-19.384 8.678-19.384 19.384S13.794 43.885 24.5 43.885z" + } + ] }, options: { x: -6, y: -6, scale: 0.25 } };