From 7973d7e26dcf52c76f4795ec3ba0ddd2e8a7eff8 Mon Sep 17 00:00:00 2001
From: Natalia Sayang <nareva@gmail.com>
Date: Sun, 26 Nov 2023 18:54:03 +0000
Subject: [PATCH 1/2] Add Benjamin, Bent, and Bob line drawings

---
 .../designs/linedrawings/benjamin.mjs         | 51 ++++++++++
 .../components/designs/linedrawings/bent.mjs  | 98 +++++++++++++++++++
 .../components/designs/linedrawings/bob.mjs   | 88 +++++++++++++++++
 .../components/designs/linedrawings/index.mjs | 11 +++
 4 files changed, 248 insertions(+)
 create mode 100644 sites/shared/components/designs/linedrawings/benjamin.mjs
 create mode 100644 sites/shared/components/designs/linedrawings/bent.mjs
 create mode 100644 sites/shared/components/designs/linedrawings/bob.mjs

diff --git a/sites/shared/components/designs/linedrawings/benjamin.mjs b/sites/shared/components/designs/linedrawings/benjamin.mjs
new file mode 100644
index 00000000000..320667b6266
--- /dev/null
+++ b/sites/shared/components/designs/linedrawings/benjamin.mjs
@@ -0,0 +1,51 @@
+import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
+
+const strokeScale = 0.5
+
+export const Benjamin = ({
+  className = 'w-64', // CSS classes to apply
+  stroke = 1, // Stroke width to use
+}) => {
+  // Normalize stroke across designs
+  stroke = stroke * strokeScale
+
+  return (
+    <LineDrawingWrapper viewBox="0 0 138 53" {...{ className, stroke }}>
+      <Front stroke={stroke} />
+    </LineDrawingWrapper>
+  )
+}
+
+/*
+ * React component for the front
+ */
+export const BenjaminFront = ({
+  className = 'w-64', // CSS classes to apply
+  stroke = 1, // Stroke width to use
+}) => {
+  // Normalize stroke across designs
+  stroke = stroke * strokeScale
+
+  return (
+    <LineDrawingWrapper viewBox="0 0 138 53" {...{ className, stroke }}>
+      <Front stroke={stroke} />
+    </LineDrawingWrapper>
+  )
+}
+
+/*
+ * SVG elements for the front
+ */
+export const Front = ({ stroke }) => (
+  <>
+    <path
+      key="folds"
+      opacity={0.3}
+      d="m 68.275,19.943197 c -2.025,3.925 -0.75,5.325 -0.75,9.2 h -0.05 c -0.1,-2.375 -1.35,-4.8 -0.55,-7.175 0.3,-0.775 0.725,-1.5 1.3,-2.05 0.025,0 0.05,0.025 0.05,0.025 z m 0.6,13.675 c 0.45,-1.15 0.825,-2.2 1,-3.375 0.2,-1.875 -0.075,-4.225 0.35,-6.075 H 70.3 c -0.15,1.925 0.3,4.2 0.325,6.125 -0.05,1.3 -0.725,2.525 -1.675,3.35 -0.025,0.025 -0.075,-0.025 -0.075,-0.025 z m -6.25,-4.95 c -2.65,1.675 -5.8,2.925 -8.975,2.325 1.525,-0.375 3.025,-0.6 4.525,-1 1.475,-0.4 2.95,-0.975 4.45,-1.325 z m 0.125,-4.25 c -1.475,-0.475 -2.9,-1.175 -4.325,-1.675 -1.45,-0.525 -2.925,-0.875 -4.425,-1.375 3.225,-0.375 6.275,1.15 8.75,3.05 z m -18.7,1.975 c 1.55,0.15 3.075,0.25 4.6,0.2 1.525,-0.075 3.025,-0.3 4.575,-0.525 3.1,-0.4 6.25,-0.3 9.325,0.3 -1.55,0.025 -3.1,-0.025 -4.625,0.05 -3.1,0.05 -6.15,0.775 -9.25,0.725 -1.575,-0.025 -3.125,-0.3 -4.625,-0.75 z m 31.125,2.275 c 1.5,0.35 2.975,0.925 4.45,1.325 1.5,0.4 3,0.625 4.525,1 -3.175,0.625 -6.325,-0.65 -8.975,-2.325 z m -0.125,-4.25 c 2.5,-1.9 5.525,-3.4 8.75,-3.05 -1.475,0.5 -2.95,0.85 -4.425,1.375 -1.425,0.5 -2.85,1.2 -4.325,1.675 z m 18.7,1.975 c -1.5,0.45 -3.025,0.725 -4.6,0.775 -3.1,0.05 -6.15,-0.7 -9.25,-0.725 -1.525,-0.075 -3.075,-0.025 -4.625,-0.05 3.05,-0.6 6.225,-0.7 9.325,-0.3 1.55,0.2 3.05,0.45 4.575,0.525 1.5,0.025 3.025,-0.075 4.575,-0.225 z"
+    />
+    <path
+      key="outline"
+      d="m 82.5,39.268193 c 0,0 4.775,3.875 6.775,4.875 2,1 7.1,3.125 7.1,3.125 l 0.575,-1.125 M 82.525,11.893197 c 0,0 7.25,-5.5000001 14.75,-6.7500001 l 0.25,1.25 M 55.275,39.268193 c 0,0 -4.775,3.875 -6.775,4.875 -2,1 -7.075,3.125 -7.075,3.125 l -0.575,-1.125 M 57,12.943197 m -1.75,-1.05 c 0,0 -7.25,-5.5000001 -14.75,-6.7500001 l -0.25,1.25 m 14.375,5.0000001 h 28.5 m 20,0 c 0.65,0 12.475,0 19.75,0.475 1.775,0.125 4.35,0.325 7.55,1.425 0.975,0.35 1.75,0.6 2.275,0.85 l 0.025,0.35 m -28.475,19.15 c 6.35,-0.025 14.525,-0.9 22.525,-3.15 2.1,-0.6 4.075,-1.25 5.975,-1.95 v -14.05 c -1.3,0.425 -2.625,0.825 -3.975,1.2 -8.625,2.35 -17.3,3.15 -24.525,2.975 m -69.5,-7.275 c -0.65,0 -12.475,0 -19.75,0.475 -1.775,0.125 -4.35,0.325 -7.55,1.425 -0.975,0.35 -1.75,0.6 -2.275,0.85 l -0.025,0.35 m 28.6,19.15 c -6.35,-0.025 -14.65,-0.9 -22.65,-3.15 -2.1,-0.6 -4.075,-1.25 -5.975,-1.95 v -14.05 c 1.3,0.425 2.625,0.825 3.975,1.2 8.625,2.35 17.425,3.15 24.65,2.975 m 39.75,1.225 c 0.225,0.625 1.5,4.35 1.25,7.75 -0.1,1.3 -0.75,5.25 -0.75,5.25 l -0.825,0.25 c -3.825,0.425 -4.275,0.825 -4.925,0.5 -0.5,-0.25 -1.475,-0.2 -2.25,-0.25 -0.575,-0.05 -2.5,-0.25 -2.5,-0.25 -0.25,-1.075 -1.025,-5.475 -1.025,-6.775 0,-4 1.275,-5.875 1.5,-6.5 z m 0,0 c 3.1,-3.9 5.625,-6.025 7.825,-7.25 2.275,-1.275 4.975,-2.35 9.475,-4.1250001 1.55,-0.625 2.85,-1.1 3.725,-1.425 l 6.35,-1.425 c 0.575,1.35 1.35,3.275 2.175,5.6250001 1.575,4.45 0.975,8.875 1.225,15.125 0.05,1.55 0.3,7.4 -0.75,11.299996 -0.775,2.85 -0.875,3.45 -0.9,4.1 -0.025,0.45 -0.05,1.175 -0.3,2.125 -0.175,0.675 -0.35,1.4 -0.9,2.125 -0.475,0.625 -1,1 -1.375,1.225 -2.275,-0.8 -4.125,-1.55 -5.475,-2.125 -5.575,-2.4 -6.025,-3.35 -11.4,-5.625 -2.45,-1.05 -3.425,-1.3 -5.175,-2.425 -2.15,-1.424996 -3.05,-3.074996 -4,-4.224996 m -10.5,0.25 c -0.95,1.15 -1.55,2.55 -3.7,3.949996 -1.725,1.125 -2.7,1.4 -5.175,2.425 -5.375,2.275 -5.8,3.2 -11.4,5.625 -1.35,0.575 -3.2,1.325 -5.475,2.125 -0.35,-0.225 -0.9,-0.6 -1.375,-1.225 -0.55,-0.725 -0.75,-1.45 -0.9,-2.125 -0.25,-0.975 -0.275,-1.675 -0.3,-2.125 -0.05,-0.65 -0.175,-2.075 -0.95,-4.9 -1.05,-3.899996 -0.775,-15.999996 -0.5,-17.999996 0.375,-2.75 0.25,-3 1,-7.625 0.4,-2.4500001 1.6,-4.2750001 2.175,-5.6250001 l 6.35,1.425 c 0.875,0.325 2.175,0.825 3.725,1.425 4.5,1.7750001 7.2,2.8500001 9.475,4.1250001 2.175,1.225 4.45,3.35 7.525,7.25"
+    />
+  </>
+)
diff --git a/sites/shared/components/designs/linedrawings/bent.mjs b/sites/shared/components/designs/linedrawings/bent.mjs
new file mode 100644
index 00000000000..e3a40f1a82d
--- /dev/null
+++ b/sites/shared/components/designs/linedrawings/bent.mjs
@@ -0,0 +1,98 @@
+import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
+
+const strokeScale = 0.5
+
+export const Bent = ({
+  className = 'w-64', // CSS classes to apply
+  stroke = 1, // Stroke width to use
+}) => {
+  // Normalize stroke across designs
+  stroke = stroke * strokeScale
+
+  return (
+    <LineDrawingWrapper viewBox="0 0 210 100" {...{ className, stroke }}>
+      <Front stroke={stroke} />
+      <Back stroke={stroke} />
+    </LineDrawingWrapper>
+  )
+}
+
+/*
+ * React component for the front
+ */
+export const BentFront = ({
+  className = 'w-64', // CSS classes to apply
+  stroke = 1, // Stroke width to use
+}) => {
+  // Normalize stroke across designs
+  stroke = stroke * strokeScale
+
+  return (
+    <LineDrawingWrapper viewBox="0 0 110 100" {...{ className, stroke }}>
+      <Front stroke={stroke} />
+    </LineDrawingWrapper>
+  )
+}
+
+/*
+ * React component for the back
+ */
+export const BentBack = ({
+  className = 'w-64', // CSS classes to apply
+  stroke = 1, // Stroke width to use
+}) => {
+  // Normalize stroke across designs
+  stroke = stroke * strokeScale
+
+  return (
+    <LineDrawingWrapper viewBox="110 0 110 100" {...{ className, stroke }}>
+      <Back stroke={stroke} />
+    </LineDrawingWrapper>
+  )
+}
+
+/*
+ * SVG elements for the front
+ */
+export const Front = ({ stroke }) => (
+  <>
+    <path
+      key="stitches"
+      {...dashed(stroke)}
+      {...thin(stroke)}
+      d="m 60.68625,3.2106857 c -3.49033,2.88802 -6.11627,2.60249 -10.28923,2.70742 -4.17295,0.10494 -6.24977,-0.27315 -9.72449,-2.65196 m 21.40696,-0.79189 c -0.24934,1.5189 -0.55753,2.89562 -1.13985,4.01572 C 55.95804,16.072326 43.67653,14.149876 40.59035,7.069566 39.90685,5.5015157 39.41621,4.0031457 39.29797,2.5697757 m 38.8812,90.6255203 c -17.98203,3.57254 -37.50468,3.35217 -54.10199,0.0609 m 75.89309,-2.66175 -12.47516,2.51618 M 2.5612303,90.594446 15.03637,93.110626"
+    />
+    <path
+      key="folds"
+      opacity={0.3}
+      d="m 80.888499,8.187321 -1.825625,7.784041 c -0.55298,2.606146 -1.068917,5.220229 -1.500188,7.850188 -0.449792,2.624666 -0.836083,5.262562 -1.166812,7.905749 -0.17198,1.320271 -0.320146,2.645834 -0.460375,3.971396 -0.145521,1.325563 -0.269875,2.651125 -0.386292,3.979334 0.08467,-1.330855 0.177271,-2.659063 0.291042,-3.989917 0.119062,-1.328208 0.251354,-2.653771 0.404812,-3.979333 0.301625,-2.651125 0.687917,-5.289021 1.124479,-7.921625 0.449792,-2.629959 0.963084,-5.246688 1.547813,-7.850188 0.616479,-2.59027 1.304396,-5.169958 1.971146,-7.749645 z m -59.420125,0 c 0.66675,2.579687 1.352021,5.159375 1.973792,7.752291 0.584729,2.600854 1.098021,5.220229 1.547812,7.850188 0.436563,2.632604 0.822855,5.270499 1.12448,7.921624 0.153458,1.325563 0.28575,2.651125 0.404812,3.979334 0.113771,1.328208 0.206375,2.659062 0.291042,3.989916 -0.116417,-1.328208 -0.240771,-2.65377 -0.386292,-3.979333 -0.140229,-1.325562 -0.288396,-2.648479 -0.460375,-3.971396 -0.330729,-2.643187 -0.717021,-5.281083 -1.166812,-7.90575 -0.433917,-2.629958 -0.947209,-5.244041 -1.500188,-7.850187 z"
+    />
+    <path
+      key="outline"
+      d="m 60.88802,2.1951157 c -0.0738,0.85214 -0.22146,2.06862 -0.67064,3.22089 -1.69119,4.1677803 -5.79125,6.4419003 -9.81416,6.4180203 -3.85255,-0.0229 -7.63239,-2.16097 -9.24399,-6.4180203 -0.44834,-1.19574 -0.59798,-2.38491 -0.67064,-3.22089 m 20.39943,-0.0662 c -3.68096,2.66655 -5.95551,2.74086 -10.46887,2.84807 -4.51335,0.10721 -6.85316,-0.56637 -9.93056,-2.84807 m 0,5e-5 -16.34791,3.97873 c -0.59532,0.17198 -1.84944,0.61912 -2.97128,1.7832903 -1.24883,1.29381 -7.79991,21.57413 -8.71802,26.14348 -0.69432,3.45931 -2.77637,10.71022 -4.60615,19.42997 -2.5142297,11.98162 -3.4345597,26.73653 -5.4850497,38.23861 -0.0714,0.39688 -0.14288,0.80963 -0.20638,1.15623 l 12.4777497,2.37596 6.08928,-36.73188 6.38847,-19.12166 -3.06387,55.85354 c 0.67468,0.13229 1.19327,0.33602 2.47385,0.59531 13.90174,2.663044 36.14894,2.678174 49.39771,0 1.28058,-0.25929 1.79916,-0.46302 2.47385,-0.59531 l -3.06652,-55.85354 6.5223,19.7207 5.95545,36.13284 12.4804,-2.37596 c -0.0635,-0.3466 -0.13494,-0.75935 -0.20638,-1.15623 C 97.983,79.961996 96.97867,64.831546 94.43502,52.721296 92.67331,44.333776 90.65939,37.395016 89.98488,34.034466 89.06678,29.465116 82.5157,9.184796 81.26686,7.890986 80.14503,6.7268157 78.8909,6.2796757 78.29559,6.1076957 l -17.40757,-3.97873"
+    />
+  </>
+)
+
+/*
+ * SVG elements for the back
+ */
+const Back = ({ stroke }) => (
+  <>
+    <path
+      key="outline"
+      d="m 184.95972,94.975946 c -1.22238,-11.23421 -2.0373,-22.2885 -2.44211,-28.85546 -0.46831,-7.5856 -0.56092,-14.56531 -0.59531,-17.23231 -0.0476,-3.82058 -0.0291,-7.06702 0,-9.50648 1.34331,4.88743 5.68179,14.33057 7.88834,24.09456 3.05654,13.52519 3.96711,27.66601 4.58941,31.16631 l 13.07306,-1.78329 -5.60917,-38.62123 c -4.64608,-22.06095 -10.27906,-38.1582 -11.03047,-40.99983 -0.0371,-0.14287 -0.36778,-1.44198 -1.18798,-2.97127 -0.64294,-1.19592 -1.40759,-2.57969 -2.97127,-3.5639403 -0.47096,-0.29633 -0.89694,-0.48154 -1.18798,-0.59531 l -18.05586,-3.82145 c -3.68096,2.66655 -5.9555,2.74086 -10.46886,2.84807 -4.51335,0.10721 -6.85317,-0.56638 -9.93057,-2.84807 l -16.80294,3.82145 c -0.29104,0.11112 -0.71702,0.29633 -1.18798,0.59531 -1.56369,0.9842503 -2.32833,2.3680203 -2.97127,3.5639403 -0.82286,1.52929 -1.15094,2.8284 -1.18798,2.97127 -0.75142,2.84163 -6.38175,18.93888 -11.03048,40.99983 l -5.60652,38.62123 13.07306,1.78329 c 0.65048,-3.65717 1.81192,-18.94217 5.00454,-32.99786 2.06664,-9.09861 6.21414,-17.68212 7.47321,-22.26301 0.0291,2.43946 0.0476,5.6859 0,9.50648 -0.0317,2.66435 -0.12435,9.64671 -0.59531,17.23231 -0.40481,6.56696 -1.21973,17.75354 -2.44211,28.85546 0.67469,0.13229 1.19328,0.33602 2.47386,0.59531 13.90174,2.663044 36.00606,2.678164 49.25483,0 1.28058,-0.25929 1.79917,-0.46302 2.47386,-0.59531"
+    />
+    <path
+      key="folds"
+      opacity={0.3}
+      d="m 198.33202,91.249626 c 0,0 -1.6918,-24.40297 -4.36562,-34.39583 -2.67383,-9.99286 -10.58334,-25.26771 -10.58334,-25.26771 0,0 7.27927,15.42762 9.92188,25.4 2.6426,9.97238 5.02708,34.26354 5.02708,34.26354 z m -80.84365,0.41373 c 0,0 1.6918,-24.40297 4.36563,-34.39583 2.67382,-9.99286 10.58333,-25.26771 10.58333,-25.26771 0,0 -7.27927,15.42762 -9.92187,25.4 -2.64261,9.97238 -5.02709,34.26354 -5.02709,34.26354 z m 69.83937,-84.07135 -1.82298,7.38188 c -0.55298,2.47385 -1.06892,4.95564 -1.50019,7.45066 -0.45244,2.49238 -0.83608,4.99798 -1.16946,7.51152 -0.17198,1.25678 -0.32014,2.51355 -0.46037,3.77296 -0.14552,1.25942 -0.26988,2.52148 -0.3863,3.78354 0.0847,-1.2647 0.17728,-2.52941 0.29105,-3.79147 0.11906,-1.26207 0.25135,-2.52413 0.40481,-3.78355 0.30162,-2.51883 0.68792,-5.02708 1.12448,-7.52739 0.44979,-2.49767 0.96308,-4.98211 1.54781,-7.45067 0.62177,-2.45798 1.3044,-4.90008 1.97115,-7.34748 z m -59.41748,0 c 0.66675,2.44475 1.34937,4.8895 1.97114,7.34748 0.58473,2.46856 1.09802,4.953 1.54782,7.45067 0.43656,2.50031 0.82285,5.00856 1.12448,7.52739 0.15345,1.25942 0.28575,2.52148 0.40481,3.78355 0.11377,1.26206 0.20637,2.52677 0.29104,3.79147 -0.11642,-1.26206 -0.24077,-2.52412 -0.38629,-3.78354 -0.14023,-1.25941 -0.2884,-2.51883 -0.46038,-3.77296 -0.33337,-2.51354 -0.71702,-5.0165 -1.16946,-7.51152 -0.43391,-2.49766 -0.9472,-4.97945 -1.50018,-7.45066 z"
+    />
+    <path
+      key="stitches"
+      {...dashed(stroke)}
+      {...thin(stroke)}
+      d="m 184.71704,93.211716 c -17.98204,3.57253 -37.23002,3.04815 -53.82734,-0.24317 m 76.2775,-2.41481 -12.98642,1.94409 m -85.67087,-1.94415 12.9701,1.94419"
+    />
+  </>
+)
diff --git a/sites/shared/components/designs/linedrawings/bob.mjs b/sites/shared/components/designs/linedrawings/bob.mjs
new file mode 100644
index 00000000000..a7cc9de29f4
--- /dev/null
+++ b/sites/shared/components/designs/linedrawings/bob.mjs
@@ -0,0 +1,88 @@
+import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
+
+const strokeScale = 0.5
+
+export const Bob = ({
+  className = 'w-64', // CSS classes to apply
+  stroke = 1, // Stroke width to use
+}) => {
+  // Normalize stroke across designs
+  stroke = stroke * strokeScale
+
+  return (
+    <LineDrawingWrapper viewBox="0 0 136 87" {...{ className, stroke }}>
+      <Front stroke={stroke} />
+      <Back stroke={stroke} />
+    </LineDrawingWrapper>
+  )
+}
+
+/*
+ * React component for the front
+ */
+export const BobFront = ({
+  className = 'w-64', // CSS classes to apply
+  stroke = 1, // Stroke width to use
+}) => {
+  // Normalize stroke across designs
+  stroke = stroke * strokeScale
+
+  return (
+    <LineDrawingWrapper viewBox="0 0 68 87" {...{ className, stroke }}>
+      <Front stroke={stroke} />
+    </LineDrawingWrapper>
+  )
+}
+
+/*
+ * React component for the back
+ */
+export const BobBack = ({
+  className = 'w-64', // CSS classes to apply
+  stroke = 1, // Stroke width to use
+}) => {
+  // Normalize stroke across designs
+  stroke = stroke * strokeScale
+
+  return (
+    <LineDrawingWrapper viewBox="68 0 68 87" {...{ className, stroke }}>
+      <Back stroke={stroke} />
+    </LineDrawingWrapper>
+  )
+}
+
+/*
+ * SVG elements for the front
+ */
+export const Front = ({ stroke }) => (
+  <>
+    <path
+      key="stitches"
+      {...dashed(stroke)}
+      {...thin(stroke)}
+      d="m 60.06281,7.079377 c 0.05,0.075 0.65,0.65 1.4,2.775 0.65,1.85 1.075,6.825 1.075,13.325 v 0 c 0,0 0.05,6.875 0.1,11.625 0.125,12.5 0.3,29.6 0.15,42.2 -0.05,4.15 -3.475,7.525 -7.625,7.525 h -44.075 c -4.1500001,0 -7.5750001,-3.375 -7.6250001,-7.525 -0.15,-12.6 0.025,-29.7 0.15,-42.2 0.05,-4.75 0.1,-8.85 0.1,-11.525 v -0.125 c 0.025,-6.5 0.425,-11.475 1.075,-13.325 0.775,-2.125 1.675,-2.9500002 1.725,-3.0250002 m 7.6000001,-3.3 c -0.05,0.75 -0.25,3.5750002 -0.25,3.7000002 -0.15,7.025 1.35,12.3 4.575,16.1 3.5,4.1 8.675,6.2 15.4,6.2 7.1,0 12.375,-2.15 15.65,-6.4 4.15,-5.35 4.025,-12.775 3.55,-16.7000002 l -0.425,-2.725 m -21.25,8.4750002 c -0.825,-0.275 -1.2,-0.35 -2.3,-0.575 -6.8,-1.5 -13.85,-7.3000002 -14.175,-7.5500002 m 36.5,-0.225 c -0.35,0.25 -8.675,6.0500002 -15.475,7.4250002 -5.5,1.125 -5.6,2.875 -5.075,5.65 0.525,2.85 7,2.025 7.075,2 0.025,0 3.925,-0.6 8.05,-1.775 2.7,-0.775 5.675,-2.325 5.7,-2.35 m -35.85,0.8 c 0.05,0.025 4.4,2.075 7.125,2.775 3.8,0.975 7.075,1.45 9.375,1.05"
+    />
+    <path
+      key="outline"
+      d="m 16.08781,16.454377 c 0,0 3.85,1.775 6.65,2.575 4.25,1.2 9.6,1.375 11.725,0.675 m 24.375,-13.5250002 c 0,0 1.15,1.8500002 1.9,3.9250002 0.5,1.4 1.025,5.55 1.05,13.075 0,0 0.05,6.875 0.1,11.625 0.125,12.475 0.3,29.575 0.15,42.175 -0.05,3.75 -3.125,6.8 -6.875,6.8 h -44.075 c -3.75,0 -6.8250001,-3.05 -6.8750001,-6.8 -0.15,-12.6 0.025,-29.7 0.15,-42.175 0.05,-4.75 0.1,-8.85 0.1,-11.525 v -0.125 c 0.025,-7.525 0.525,-11.675 1.05,-13.075 0.75,-2.075 1.9000001,-3.9250002 1.9000001,-3.9250002 m -0.6500001,-0.4 m 1.2750001,0.8 m 5.3,-2.75 c 0,0.25 -0.2,3.125 -0.225,3.3750002 -0.1,4.425 0.3,11.35 4.75,16.6 3.65,4.275 9.025,6.45 15.975,6.45 7.35,0 12.825,-2.25 16.25,-6.675 4.25,-5.475 4.225,-12.9 3.7,-17.2750002 l -0.375,-2.3 m -37.975,10.0750002 c 0.025,0.025 5.225,2.3 7.85,3.05 2.525,0.725 5.2,1.175 7.35,1.175 m -0.075,-5.425 c -9.5,-1.7 -15.425,-7.6500002 -15.725,-7.9000002 m 17.375,6.6750002 c -0.85,-0.275 -1.85,-0.55 -2.975,-0.8 -6.7,-1.475 -14.15,-7.8000002 -14.15,-7.8000002 m 36.15,0.125 c 0,0 6.475,25.1250002 -17.4,25.1250002 -22.9,0 -18.825,-25.1250002 -18.825,-25.1250002 l -7.425,2.925 c 0,0 -1.5500001,0.625 -3.1750001,3.2250002 -2,3.2 -1.975,12.725 -1.975,14 -0.025,9.425 -0.475,36.15 -0.25,53.725 0.05,4.85 4.025,8.775 8.8750001,8.775 h 44.1 c 4.85,0 8.825,-3.9 8.875,-8.775 0.225,-17.575 -0.225,-44.3 -0.25,-53.725 0,-1.275 0.025,-10.8 -1.975,-14 -1.625,-2.6000002 -3.175,-3.2250002 -3.175,-3.2250002 z m 0.425,1.95 c -0.375,0.25 -8.45,5.9250002 -15.5,7.3500002 -2.75,0.55 -3.7,1.25 -4.025,1.725 -0.3,0.425 -0.325,1.125 -0.075,2.5 0.125,0.725 1.925,1.125 3.825,1.125 0.625,0 1.25,-0.05 1.85,-0.125 0.025,0 3.825,-0.575 7.9,-1.75 2.55,-0.725 6.225,-2.725 6.25,-2.725 m -0.75,-10.1750002 c 0,0 -8.65,6.1000002 -15.375,7.4500002 -5.975,1.225 -6.25,3.4 -5.675,6.525 0.675,3.65 7.925,2.6 7.925,2.6 0,0 3.925,-0.6 8.15,-1.8 2.8,-0.8 5.3,-2.125 5.3,-2.125 m -18.7,70.1"
+    />
+  </>
+)
+
+/*
+ * SVG elements for the back
+ */
+const Back = ({ stroke }) => (
+  <>
+    <path
+      key="outline"
+      d="m 103.38781,14.879377 a 1.35,1.35 0 0 1 -1.35,1.35 1.35,1.35 0 0 1 -1.35,-1.35 1.35,1.35 0 0 1 1.35,-1.35 1.35,1.35 0 0 1 1.35,1.35 z m 0.625,0 a 1.975,1.975 0 0 1 -1.975,1.975 1.975,1.975 0 0 1 -1.975,-1.975 1.975,1.975 0 0 1 1.975,-1.975 1.975,1.975 0 0 1 1.975,1.975 z M 85.38781,2.1293768 c 0,0 -2.875,0.275 -6.4,2.525 -2.35,1.5 -4.1,3.9750002 -4.1,3.9750002 0.05,0.325 1,0.55 3.425,2.775 2.25,2.05 4.35,3.375 10.825,5.65 3.05,1.075 11.9,2.55 14.55,1.55 0,0 3.075,-0.7 3.075,-3.7 0,-3.625 -4.075,-4.2 -4.075,-4.2 -0.85,-0.275 -1.85,-0.55 -2.975,-0.8 -6.725,-1.475 -14.325,-7.7750002 -14.325,-7.7750002 z m 36.475,13.1500002 c -1.425,6.2 -5.8,12.325 -17.575,12.325 -11,0 -15.65,-5.425 -17.625,-11.45 m -11.8,-7.525 c -1.925,3.325 -1.95,12.7 -1.95,13.975 -0.025,9.425 -0.475,36.15 -0.25,53.725 0.05,4.85 4.025,8.775 8.875,8.775 h 44.1 c 4.85,0 8.825,-3.9 8.875,-8.775 0.225,-17.575 -0.225,-44.3 -0.25,-53.725 0,-1.275 0.175,-10.575 -1.85,-13.775 m -26.9,3.225 c 0.325,-0.1 0.7,-0.175 1.1,-0.25 7.05,-1.425 16.275,-7.8250002 17.525,-9.0250002 m -18.275,14.6250002 c 3.3,0.025 6.025,-0.625 10.125,-1.775 2.55,-0.725 6.1,-2.1 7.775,-3.075 2.05,-1.175 5.625,-4.625 7.875,-5.125 m -9.525,6.675 m -0.525,-11.7250002 c 0,0 -8.65,6.1000002 -15.375,7.4500002 -1.325,0.275 -2.375,0.575 -3.175,0.95 1,0.25 3.7,1.175 3.7,4.125 0,3 -3.075,3.7 -3.075,3.7 -0.125,0.05 -0.3,0.1 -0.475,0.125 2.3,0.65 5.275,0.225 5.275,0.225 0,0 3.925,-0.6 8.15,-1.8 2.8,-0.8 6.975,-2.325 10.225,-4.625 4.1,-2.925 5.575,-3.675 5.575,-3.675 0,0 -1.175,-2.9500002 -3.675,-4.4250002 -3.025,-1.75 -7.15,-2.05 -7.15,-2.05 z m -33.275,20.7500002 c 3.65,4.275 9.025,6.45 15.975,6.45 7.35,0 12.825,-2.25 16.25,-6.675 2.05,-2.65 3.1,-5.725 3.575,-8.725 m 0.025,0 m -3.6,8.725 c -3.425,4.425 -8.9,6.675 -16.25,6.675 -6.95,0 -12.325,-2.175 -15.975,-6.45 -2.125,-2.475 -3.25,-5.125 -3.925,-7.9 m -0.5,-2.6 m -8.175,-5.225 c 0,0 1.95,0.925 3.95,2.75 2,1.825 3.825,3 10.15,5.25 2.975,1.05 9.15,2.2 11.3,2.2 0,0 3.625,-0.025 3.825,-2.55 0.175,-2.2 -3.3,-3.025 -3.3,-3.025 -12.275,-2.2 -17.95,-9.1750002 -18.275,-9.4500002 m -6.15,2.525 m 1.275,0.775 m 24.725,79.2250002 m -0.55,-70.6 a 0.25,0.25 0 0 1 -0.25,0.25 0.25,0.25 0 0 1 -0.25,-0.25 0.25,0.25 0 0 1 0.25,-0.25 0.25,0.25 0 0 1 0.25,0.25 z m -0.75,0 a 0.25,0.25 0 0 1 -0.25,0.25 0.25,0.25 0 0 1 -0.25,-0.25 0.25,0.25 0 0 1 0.25,-0.25 0.25,0.25 0 0 1 0.25,0.25 z m 0,0.75 a 0.25,0.25 0 0 1 -0.25,0.25 0.25,0.25 0 0 1 -0.25,-0.25 0.25,0.25 0 0 1 0.25,-0.25 0.25,0.25 0 0 1 0.25,0.25 z m 0.75,0 a 0.25,0.25 0 0 1 -0.25,0.25 0.25,0.25 0 0 1 -0.25,-0.25 0.25,0.25 0 0 1 0.25,-0.25 0.25,0.25 0 0 1 0.25,0.25 z"
+    />
+    <path
+      key="stitches"
+      {...dashed(stroke)}
+      {...thin(stroke)}
+      d="m 85.08781,15.554377 c 0.75,2.9 1.975,5.325 3.7,7.35 3.5,4.1 8.675,6.2 15.4,6.2 7.1,0 12.375,-2.15 15.65,-6.4 1.825,-2.375 2.825,-5.125 3.325,-7.825 m 8.6,-6.975 c -1.325,0.3 -3.3,1.8 -5.025,3.125 -1,0.775 -1.975,1.5 -2.725,1.95 -1.675,0.975 -5.225,2.375 -7.9,3.125 -4.275,1.2 -6.9,1.8 -10.05,1.8 -0.075,0 -0.15,0 -0.225,0 m -0.475,-6.35 c 0.375,-0.1 0.75,-0.175 1.125,-0.275 6.875,-1.4 15.725,-7.3750002 17.05,-8.6750002 m -39.575,-0.1 c 0.05,0.05 0.1,0.1 0.2,0.2 2.375,2.575 7.8,7.1250002 17.525,8.8750002 h 0.025 c 0.15,0.05 3.875,0.95 3.675,3.55 -0.175,2.35 -2.9,3 -4.3,3 -2.15,0 -8.35,-1.125 -11.475,-2.225 -6.275,-2.225 -8.175,-3.4 -10.3,-5.35 -1.925,-1.75 -3.8,-2.675 -3.825,-2.675 m 55.8,1.625 c 0.475,2.65 0.925,7.075 0.95,13 0,0 0.05,6.875 0.1,11.625 0.125,12.475 0.3,29.575 0.15,42.175 -0.05,3.75 -3.125,6.8 -6.875,6.8 h -44.1 c -3.75,0 -6.825,-3.05 -6.875,-6.8 -0.15,-12.6 0.025,-29.7 0.15,-42.175 0.05,-4.75 0.1,-8.85 0.1,-11.525 v -0.125 c 0.025,-7.525 0.525,-11.675 1.05,-13.075 m 55.975,-0.225 c 0.65,1.85 1.075,6.825 1.075,13.325 v 0 c 0,0 0.05,6.875 0.1,11.625 0.125,12.5 0.3,29.6 0.15,42.2 -0.05,4.15 -3.475,7.525 -7.625,7.525 h -44.1 c -4.15,0 -7.575,-3.375 -7.625,-7.525 -0.15,-12.6 0.025,-29.7 0.15,-42.2 0.05,-4.75 0.1,-8.85 0.1,-11.525 v -0.125 c 0.025,-6.5 0.425,-11.475 1.075,-13.325"
+    />
+  </>
+)
diff --git a/sites/shared/components/designs/linedrawings/index.mjs b/sites/shared/components/designs/linedrawings/index.mjs
index bb1b3e441d8..927a1862ccb 100644
--- a/sites/shared/components/designs/linedrawings/index.mjs
+++ b/sites/shared/components/designs/linedrawings/index.mjs
@@ -1,6 +1,9 @@
 import { Aaron, AaronFront, AaronBack } from 'shared/components/designs/linedrawings/aaron.mjs'
 import { Albert, AlbertFront } from 'shared/components/designs/linedrawings/albert.mjs'
 import { Bella, BellaFront, BellaBack } from 'shared/components/designs/linedrawings/bella.mjs'
+import { Benjamin, BenjaminFront } from 'shared/components/designs/linedrawings/benjamin.mjs'
+import { Bent, BentFront, BentBack } from 'shared/components/designs/linedrawings/bent.mjs'
+import { Bob, BobFront, BobBack } from 'shared/components/designs/linedrawings/bob.mjs'
 import { Bruce, BruceFront, BruceBack } from 'shared/components/designs/linedrawings/bruce.mjs'
 import { Simon, SimonFront, SimonBack } from 'shared/components/designs/linedrawings/simon.mjs'
 import { Wahid, WahidFront, WahidBack } from 'shared/components/designs/linedrawings/wahid.mjs'
@@ -9,6 +12,9 @@ export const lineDrawingsFront = {
   aaron: AaronFront,
   albert: AlbertFront,
   bella: BellaFront,
+  benjamin: BenjaminFront,
+  bent: BentFront,
+  bob: BobFront,
   bruce: BruceFront,
   simon: SimonFront,
   wahid: WahidFront,
@@ -17,6 +23,8 @@ export const lineDrawingsFront = {
 export const lineDrawingsBack = {
   aaron: AaronBack,
   bella: BellaBack,
+  bent: BentBack,
+  bob: BobBack,
   bruce: BruceBack,
   simon: SimonBack,
   wahid: WahidBack,
@@ -26,6 +34,9 @@ export const lineDrawings = {
   aaron: Aaron,
   albert: Albert,
   bella: Bella,
+  benjamin: Benjamin,
+  bent: Bent,
+  bob: Bob,
   bruce: Bruce,
   simon: Simon,
   wahid: Wahid,

From 102b518656bb35818b01433087844d4ce5fa2b92 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Thu, 30 Nov 2023 16:49:37 +0100
Subject: [PATCH 2/2] Update benjamin.mjs

---
 sites/shared/components/designs/linedrawings/benjamin.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sites/shared/components/designs/linedrawings/benjamin.mjs b/sites/shared/components/designs/linedrawings/benjamin.mjs
index 320667b6266..663eda366a2 100644
--- a/sites/shared/components/designs/linedrawings/benjamin.mjs
+++ b/sites/shared/components/designs/linedrawings/benjamin.mjs
@@ -1,4 +1,4 @@
-import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
+import { LineDrawingWrapper } from './shared.mjs'
 
 const strokeScale = 0.5