2024-10-06 11:49:14 +02:00
|
|
|
import React from 'react'
|
|
|
|
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
|
|
|
|
|
|
|
|
/*
|
2025-04-01 16:15:20 +02:00
|
|
|
* This strokeScale factor is used to normalize the stroke across
|
|
|
|
* designs so we have a consistent look when showing our collection
|
2024-10-06 11:49:14 +02:00
|
|
|
*/
|
2025-04-01 16:15:20 +02:00
|
|
|
const strokeScale = 0.15
|
2024-10-06 11:49:14 +02:00
|
|
|
|
2025-04-01 16:15:20 +02:00
|
|
|
/**
|
|
|
|
* A linedrawing component for Simon
|
|
|
|
*
|
2025-05-24 14:57:15 +02:00
|
|
|
* @component
|
|
|
|
* @param {object} props - All component props
|
2025-04-01 16:15:20 +02:00
|
|
|
* @param {string} props.className - Any CSS classes to apply
|
|
|
|
* @param {number} props.stroke - The stroke width to apply
|
2025-05-24 14:57:15 +02:00
|
|
|
* @returns {JSX.Element}
|
2025-04-01 16:15:20 +02:00
|
|
|
*/
|
|
|
|
export const Simon = ({ className, stroke = 1 }) => (
|
|
|
|
<LineDrawingWrapper viewBox="0 0 157 121" {...{ className, stroke }}>
|
|
|
|
<Front stroke={stroke * strokeScale} />
|
|
|
|
<Back stroke={stroke * strokeScale} />
|
|
|
|
</LineDrawingWrapper>
|
|
|
|
)
|
|
|
|
|
|
|
|
/**
|
|
|
|
* A linedrawing component for the front of Simon
|
|
|
|
*
|
2025-05-24 14:57:15 +02:00
|
|
|
* @component
|
|
|
|
* @param {object} props - All component props
|
2025-04-01 16:15:20 +02:00
|
|
|
* @param {string} props.className - Any CSS classes to apply
|
|
|
|
* @param {number} props.stroke - The stroke width to apply
|
2025-05-24 14:57:15 +02:00
|
|
|
* @returns {JSX.Element}
|
2025-04-01 16:15:20 +02:00
|
|
|
*/
|
|
|
|
export const SimonFront = ({ className, stroke = 1 }) => (
|
|
|
|
<LineDrawingWrapper viewBox="-20 0 122 122" {...{ className, stroke }}>
|
|
|
|
<Front stroke={stroke * strokeScale} />
|
|
|
|
</LineDrawingWrapper>
|
|
|
|
)
|
2024-10-06 11:49:14 +02:00
|
|
|
|
2025-05-24 14:57:15 +02:00
|
|
|
/**
|
|
|
|
* A linedrawing component for the back of Simon
|
|
|
|
*
|
|
|
|
* @component
|
|
|
|
* @param {object} props - All component props
|
|
|
|
* @param {string} props.className - Any CSS classes to apply
|
|
|
|
* @param {number} props.stroke - The stroke width to apply
|
|
|
|
* @returns {JSX.Element}
|
2024-10-06 11:49:14 +02:00
|
|
|
*/
|
|
|
|
export const SimonBack = ({
|
|
|
|
className = 'w-64', // CSS classes to apply
|
|
|
|
stroke = 1, // Stroke width to use
|
|
|
|
}) => {
|
|
|
|
// Normalize stroke across designs
|
|
|
|
stroke = stroke * strokeScale
|
|
|
|
|
|
|
|
return (
|
|
|
|
<LineDrawingWrapper viewBox="79 0 79 121" {...{ className, stroke }}>
|
|
|
|
<Back stroke={stroke} />
|
|
|
|
</LineDrawingWrapper>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
|
|
* Always use an id for defs that is unique to the design because if we have
|
|
|
|
* multiple linedrawings on the page, they share the same namespace and thus
|
|
|
|
* IDs will collide
|
|
|
|
*/
|
|
|
|
const defs = (
|
|
|
|
<defs>
|
|
|
|
<g id="simon-button">
|
|
|
|
<circle cx="0" cy="0" r="1.1" strokeWidth="0.35" />
|
|
|
|
<circle cx="-0.35" cy="-0.35" r="0.15" strokeWidth="0.25" />
|
|
|
|
<circle cx="0.35" cy="-0.35" r="0.15" strokeWidth="0.25" />
|
|
|
|
<circle cx="0.35" cy="0.35" r="0.15" strokeWidth="0.25" />
|
|
|
|
<circle cx="-0.35" cy="0.35" r="0.15" strokeWidth="0.25" />
|
|
|
|
</g>
|
|
|
|
</defs>
|
|
|
|
)
|
|
|
|
|
|
|
|
/*
|
|
|
|
* SVG elements for the back
|
|
|
|
*/
|
|
|
|
const Front = ({ stroke }) => (
|
|
|
|
<>
|
|
|
|
{defs}
|
|
|
|
<path
|
|
|
|
key="neck-opening-fill"
|
|
|
|
fill="currentColor"
|
|
|
|
stroke="none"
|
|
|
|
d="m 33.064193,4.2660035 c -0.809625,0.3862917 -1.542521,1.0424583 -1.796521,1.9129375 -0.132291,0.428625 -0.150812,0.8837083 -0.08731,1.3255624 0.06615,0.4418542 0.198437,0.8757709 0.41275,1.2673542 0.211666,0.3942292 0.492125,0.746125 0.801687,1.0715625 0.156104,0.1613959 0.3175,0.3174999 0.481542,0.4736039 0.15875,0.145521 0.351896,0.272521 0.531812,0.404813 0.738188,0.526521 1.457855,1.0795 2.182813,1.624541 l 0.0053,0.0053 0.0053,0.0053 1.180042,1.299104 -0.06879,-0.03175 c 1.653646,-0.0053 3.309938,-0.0079 4.963584,0 l -0.06879,0.03175 1.180042,-1.299104 0.0053,-0.0053 0.0053,-0.0053 c 0.724958,-0.545041 1.444625,-1.09802 2.182812,-1.624541 0.182563,-0.134938 0.373063,-0.259292 0.531813,-0.404813 0.164041,-0.153458 0.328083,-0.309562 0.481541,-0.4736039 0.309563,-0.3227917 0.590021,-0.6773333 0.801688,-1.0715625 0.214312,-0.3915833 0.346604,-0.8255 0.41275,-1.2673542 0.0635,-0.4418541 0.04498,-0.8995833 -0.08731,-1.3255624 -0.254,-0.8704792 -0.986895,-1.5266458 -1.79652,-1.9129375 0.410104,0.1905 0.804333,0.428625 1.12977,0.7487708 0.328084,0.3148542 0.595313,0.7037917 0.732896,1.143 0.145521,0.4365625 0.179917,0.904875 0.121709,1.3626041 -0.06085,0.4550834 -0.193146,0.9022292 -0.407459,1.3096875 -0.211666,0.4101042 -0.494771,0.7752292 -0.806979,1.11125 -0.156104,0.1666871 -0.3175,0.3280831 -0.481542,0.4868331 -0.171979,0.164042 -0.362479,0.288396 -0.542395,0.425979 -0.73025,0.537105 -1.449917,1.087438 -2.169584,1.637771 l 0.01323,-0.01058 -1.17475,1.304396 -0.02646,0.03175 h -0.04233 c -1.653646,0.0079 -3.309938,0.0053 -4.963583,0 h -0.04233 l -0.02646,-0.03175 -1.17475,-1.304396 0.01323,0.01058 c -0.719667,-0.550333 -1.439333,-1.100666 -2.169583,-1.637771 -0.179917,-0.137583 -0.367771,-0.261937 -0.542396,-0.425979 -0.164042,-0.15875 -0.325438,-0.3175 -0.481542,-0.4868331 -0.312208,-0.333375 -0.595312,-0.7011458 -0.806979,-1.11125 -0.214312,-0.4074583 -0.346604,-0.85725 -0.407458,-1.3096875 -0.05821,-0.4550833 -0.02381,-0.9260416 0.121708,-1.3626041 0.140229,-0.4392083 0.404813,-0.8281458 0.732896,-1.143 0.336021,-0.3201458 0.73025,-0.5609166 1.140354,-0.7487708 z"
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
key="folds"
|
|
|
|
fill="currentColor"
|
|
|
|
stroke="none"
|
|
|
|
d="m 59.316151,68.361315 0.08467,10.750021 c -0.113771,3.582458 -0.198438,7.167562 -0.381,10.744729 -0.08202,1.791229 -0.193146,3.582458 -0.367771,5.36575 -0.177271,1.785937 -0.407458,3.563937 -0.672042,5.339295 -0.5715,3.53748 -1.182687,7.07495 -1.994958,10.56481 l -0.02646,-0.005 c 0.166687,-0.88107 0.328083,-1.76213 0.481541,-2.64319 0.161396,-0.88106 0.314854,-1.76213 0.463021,-2.64583 0.296333,-1.76477 0.560917,-3.53748 0.812271,-5.31019 0.267229,-1.770064 0.494771,-3.545418 0.674687,-5.326063 0.193146,-1.778 0.320146,-3.563938 0.418042,-5.352521 0.209021,-3.577167 0.320146,-7.156979 0.460375,-10.734146 l 0.02117,-10.747375 z m 12.789958,-6.495521 c -0.505354,-0.928687 -1.053041,-1.830916 -1.640416,-2.709333 -0.58473,-0.878417 -1.193271,-1.743604 -1.860021,-2.558521 -0.336021,-0.404812 -0.682625,-0.804333 -1.076854,-1.140354 -0.195792,-0.161396 -0.415396,-0.325437 -0.642938,-0.362479 -0.113771,-0.01323 -0.201083,0.02381 -0.256646,0.121708 -0.05821,0.0979 -0.09789,0.224896 -0.140229,0.346605 -0.174625,0.492125 -0.22225,1.010708 -0.140229,1.521354 0.08731,0.505354 0.256646,1.008062 0.455083,1.489604 0.404813,0.965729 0.923396,1.889125 1.397,2.836333 0.232834,0.473604 0.470959,0.949854 0.672042,1.444625 0.203729,0.494771 0.367771,1.005417 0.489479,1.526646 0.111125,0.521229 0.216958,1.045104 0.198438,1.603375 -0.01058,0.137583 -0.02381,0.28575 -0.116417,0.436562 -0.04233,0.06615 -0.142875,0.15875 -0.267229,0.134938 -0.09525,-0.02117 -0.150813,-0.05292 -0.214313,-0.08467 -0.24077,-0.124354 -0.465666,-0.261937 -0.693208,-0.394229 -0.457729,-0.261937 -0.907521,-0.545042 -1.373187,-0.783167 -0.116417,-0.06085 -0.23548,-0.116416 -0.354542,-0.164041 -0.121708,-0.04498 -0.240771,-0.08202 -0.367771,-0.06085 -0.254,0.0291 -0.489479,0.171979 -0.674687,0.351895 l -0.01852,-0.01852 c 0.177271,-0.195792 0.410104,-0.359834 0.682625,-0.407459 0.137583,-0.03175 0.283104,0.0026 0.410104,0.04233 0.129646,0.04233 0.251354,0.0926 0.375708,0.14552 0.484188,0.22225 0.941917,0.486834 1.410229,0.73025 0.232834,0.121709 0.468313,0.251355 0.695855,0.367771 0.05556,0.02646 0.119062,0.05556 0.153458,0.06085 0.01587,0 0.0053,0.0053 0.02117,-0.01058 0.01058,-0.01058 0.02646,-0.01323 0.03439,-0.03704 0.04498,-0.07408 0.06615,-0.201083 0.06879,-0.322791 0.0053,-0.502709 -0.105833,-1.023938 -0.227542,-1.529292 -0.227541,-1.021292 -0.66675,-1.973792 -1.140354,-2.915708 -0.455083,-0.949854 -0.960437,-1.881188 -1.357312,-2.873375 -0.195792,-0.497417 -0.362479,-1.005417 -0.447146,-1.542521 -0.07937,-0.534458 -0.01852,-1.098021 0.166687,-1.600729 0.04498,-0.127 0.08202,-0.254 0.161396,-0.383646 0.03969,-0.0635 0.100542,-0.127 0.179917,-0.161396 0.03969,-0.01323 0.07937,-0.02381 0.119062,-0.03175 0.03969,0 0.07937,-0.0026 0.119063,0.0026 0.301625,0.05556 0.513292,0.238125 0.722312,0.407458 0.404813,0.354542 0.748771,0.762 1.082146,1.17475 0.656167,0.833438 1.251479,1.709209 1.822979,2.598209 0.574146,0.889 1.108604,1.801812 1.598084,2.738437 z m -52.498624,6.495521 0.02117,10.747375 c 0.140229,3.579813 0.251354,7.159625 0.460375,10.734146 0.09789,1.788583 0.224895,3.571875 0.418041,5.352521 0.179917,1.780645 0.407459,3.555999 0.674688,5.326063 0.254,1.77271 0.518583,3.54542 0.812271,5.31019 0.148166,0.8837 0.30427,1.76477 0.46302,2.64583 0.153459,0.88106 0.314855,1.76212 0.481542,2.64319 l -0.02646,0.005 c -0.812271,-3.4925 -1.420813,-7.02733 -1.994959,-10.56481 -0.267229,-1.772712 -0.49477,-3.553358 -0.672041,-5.339295 -0.177271,-1.785938 -0.28575,-3.577167 -0.367771,-5.36575 -0.182563,-3.579813 -0.267229,-7.164917 -0.381,-10.744729 l 0.08467,-10.750021 z M 6.7699018,61.852565 c 0.4894792,-0.936625 1.0239375,-1.849437 1.5980833,-2.738437 0.5715,-0.889 1.1668125,-1.764771 1.8229789,-2.598209 0.333375,-0.412749 0.674688,-0.820208 1.082146,-1.174749 0.206375,-0.169334 0.420688,-0.351896 0.722313,-0.407459 0.03704,-0.0026 0.07937,-0.0026 0.119062,-0.0026 0.03969,0.0079 0.07938,0.01852 0.119063,0.03175 0.07937,0.0344 0.140229,0.0979 0.179916,0.161396 0.07938,0.129646 0.119063,0.256646 0.161396,0.383646 0.185208,0.502708 0.246063,1.066271 0.166688,1.60072
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
key="outline"
|
|
|
|
d="m 31.150632,7.4729531 c 5.193139,-0.673894 10.51942,-0.815214 16.084836,0 m -14.945909,2.357779 c 4.498544,-0.351311 9.08277,-0.445577 13.846944,0 m -9.136561,7.1614709 c -0.04759,0.100313 3.126179,0.34145 4.561915,0.03311 -0.0161,4.233061 -0.112434,33.661411 -0.09975,35.627695 0.01588,2.434167 -0.0053,4.868337 0.04233,7.302497 0.07144,3.75179 0.0344,11.61257 0,19.38867 -0.06615,14.732 -0.24077,18.79071 -0.256645,34.337617 -0.0026,1.81505 0,3.29671 0,4.22805 v 1.04245 M 47.700983,14.590048 c -0.521229,0.306917 -1.098021,0.616479 -1.730375,0.915458 -0.722313,0.343959 -1.410229,0.624417 -2.050521,0.854605 L 41.546775,17.02686 M 53.807566,9.5497361 c 0.275167,0.7434789 0.526521,1.5478119 0.732896,2.4103539 0.661458,2.780771 0.637646,5.265208 0.394229,7.239 -1.664229,-0.923396 -2.960687,-1.754188 -3.854979,-2.357438 -1.399646,-0.944562 -5.423958,-3.712104 -6.424083,-3.870854 -0.206375,-0.0344 -1.180042,-0.171979 -2.174875,0.251354 -0.351896,0.150813 -0.610045,0.281051 -0.819066,0.58003 -0.575665,-0.107503 -4.709483,-0.378208 -4.629323,0.492329 0.07258,0.788221 -0.07905,1.547278 0.0066,2.588799 m 25.827927,35.936383 c -0.373062,2.137834 -0.74877,5.02444 -0.817562,8.46138 -0.01323,0.68791 0.907521,11.98827 2.135187,18.5367 1.484313,7.92427 2.135188,11.2739 2.135188,11.2739 0.896937,4.62492 1.658937,8.509 2.219854,11.361207 m -0.989542,-84.407374 -0.46302,1.725084 c -0.148167,0.669395 -0.365125,1.674812 -0.597959,2.905125 -0.632354,3.323166 -0.709083,4.672541 -1.452562,10.421937 -0.124354,0.955146 -0.396875,3.286125 -0.939271,7.942792 -0.0926,0.796395 -0.275167,2.410354 -0.171979,4.52702 0.03969,0.828146 0.113771,1.508125 0.171979,1.965854 -0.15875,0.510646 -0.378354,1.243542 -0.597958,2.135188 -0.931334,3.767667 -1.013355,6.688667 -1.023938,7.688787 -0.02646,2.39184 -0.04233,3.73857 0.597958,5.29696 0.166688,0.40217 0.402167,0.88107 0.682625,1.70921 0.206375,0.6059 0.555625,1.7489 0.769938,3.33111 0.193146,1.42345 0.108479,1.96585 0.171979,3.58775 0.04763,1.22502 0.116417,1.48431 0.425979,4.44235 0.531813,5.06148 0.799042,7.59089 0.769938,8.0301 -0.05027,0.72496 -0.198438,2.27542 0.425979,4.10104 0.179917,0.52653 0.378354,0.93928 0.513292,1.19592 l 0.256645,5.55096 M 25.036775,9.5497361 c -0.264583,0.7540619 -0.505354,1.5689789 -0.703792,2.4473949 -0.635,2.820459 -0.611187,5.344584 -0.378354,7.344834 1.595438,-0.936625 2.838979,-1.778 3.696229,-2.391834 1.341438,-0.957791 5.199063,-3.76502 6.1595,-3.929062 0.198438,-0.0344 1.132417,-0.174625 2.084917,0.256646 0.336021,0.150812 0.750781,0.273706 0.951864,0.577977 0.381859,0.585741 0.102319,1.798856 0.201719,2.644648 M 16.033004,52.819693 c 0.373063,2.137834 0.870479,11.54906 0.563563,15.12358 -0.275167,3.19882 -0.650875,5.32342 -1.878542,11.87186 -1.484313,7.92427 -2.135188,11.27389 -2.135188,11.27389 -0.896937,4.62492 -1.658937,8.509 -2.219854,11.361207 M 11.349879,18.045506 11.8129,19.77059 c 0.148167,0.669395 0.365125,1.674812 0.597958,2.905125 0.632354,3.323166 0.709084,4.672541 1.452563,10.421937 0.124354,0.955146 0.394229,3.286125 0.939271,7.942792 0.0926,0.796395 0.275166,2.410354 0.171979,4.52702 -0.03969,0.828146 -0.113771,1.508125 -0.171979,1.965854 0.15875,0.510646 0.378354,1.243542 0.597958,2.135188 0.931333,3.767667 1.013354,6.688667 1.023937,7.688787 0.02646,2.39184 0.04233,3.73857 -0.597958,5.29696 -0.166687,0.40217 -0.402167,0.88107 -0.682625,1.70921 -0.206375,0.6059 -0.555625,1.7489 -0.769937,3.33111 -0.193146,1.42345 -0.10848,1.96585 -0.17198,3.58775 -0.04763,1.22502 -0.116416,1.48431 -0.425979,4.44235 -0.531812,5.06148 -0.799041,7.59089 -0.769937,8.0301 0.05027,0.72496 0.198437,2.27542 -0.425979,4.10104 -0.179917,0.52653 -0.378355,0.93928 -0.513292,1.19592 l -0.256646,5.55096 m 27.744208,24.420997 -1.899708,-0.0661 -7.731125,-0.27517 c -0.772583,-0.0185 -1.889125,-0.11642 -3.161771,-0.51329 -1.018646,-0.3175 -1.608666,-0.74613 -3.503083,-1.79388 -1.534584,-0.84666 -3.299354,-1.82033 -5.381625,-3.3311 -0.304271,-0.22225 -1.883833,-1.37319 -3.503083,-2.56381 -0.333375,-0.24607 -0.936625,-0.68792 -1.793875,-1.19592 -0.724959,-0.42863 -1.352021,-0.73554
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
key="stitches"
|
|
|
|
{...dashed(stroke)}
|
|
|
|
{...thin(stroke)}
|
|
|
|
d="m 31.150632,7.1132921 c 5.193139,-0.673894 10.51942,-0.815214 16.084836,0 m -15.118443,2.436444 c 4.694022,-0.378862 10.013495,-0.449568 14.091708,0.03703 m 1.228028,4.8315769 c -1.765705,0.79284 -3.463842,1.340202 -5.29732,1.949705 -0.400573,-0.63927 -0.65412,-1.630712 -0.20902,-2.159 1.115359,-0.586786 2.125827,-0.676319 3.452812,-0.846667 m -13.964708,1.016 c 1.5588,0.78852 3.196052,1.378482 4.828646,1.989667 0.349264,-0.644583 0.59621,-1.609689 0.185208,-2.156354 -0.973508,-0.580538 -1.879574,-0.674701 -3.063875,-0.846667 M 53.413337,9.3936311 c 0.829876,2.8835759 1.284622,6.0964299 1.026583,8.8079789 -2.840694,-1.979187 -5.900521,-4.343454 -8.135937,-5.667374 -0.56027,-0.160218 -1.164383,-0.160559 -1.664229,-0.03175 M 25.483921,9.3354231 C 24.64485,12.290618 24.201925,15.466338 24.457337,18.146048 27.440274,16.437222 31.725128,11.96967 34.26015,12.441631 M 31.250538,7.8525951 c 5.14153,-0.673894 10.414879,-0.815214 15.924987,0 m -9.809167,5.8669739 c 0.01058,2.106083 0.433917,35.030833 0.418042,37.136916 -0.01852,2.500313 0.0053,5.000625 -0.04498,7.500938 -0.07938,3.85233 -0.03704,11.92742 0,19.91519 0.07144,15.13152 0.259291,19.30135 0.277812,35.271597 0.0026,1.86531 0,3.38667 0,4.34181 v 1.07157 M 41.049358,13.722215 c -0.140229,8.03275 -0.08467,14.557375 -0.08467,14.557375 0.0079,0.8255 -0.0026,-0.134938 0.04233,11.093979 0.0079,2.106083 0.01852,4.323291 0.02117,7.355416 0,0.34925 0.0026,2.770188 0,5.656792 -0.0079,7.715246 -0.06085,15.515166 -0.0635,16.195146 -0.0979,14.67644 -0.148166,12.66031 -0.171979,20.24327 -0.02646,8.44021 0.03704,11.445867 -0.02117,21.664077 -0.02117,3.50838 -0.04498,6.38704 -0.0635,8.28411 m 35.266319,-18.70075 c 0.0026,0.0476 0.0053,0.11112 0,0.18521 0,0.0159 -0.01323,0.17727 -0.06879,0.33602 -0.06615,0.18785 -0.185208,0.34395 -0.320146,0.48154 -0.301625,0.30691 -0.648229,0.48948 -0.912812,0.60854 -0.388938,0.17462 -0.74348,0.27517 -1.105959,0.3519 -0.851958,0.18256 -1.526646,0.19843 -2.114021,0.20902 -0.293687,0.005 -0.891645,0.008 -1.648354,-0.0635 -0.473604,-0.045 -0.881062,-0.10319 -1.201208,-0.1614 M 2.8673378,100.07163 c -0.0026,0.0476 -0.0053,0.11112 0,0.18521 0,0.0159 0.01323,0.17727 0.06879,0.33602 0.06615,0.18785 0.185209,0.34395 0.320146,0.48154 0.301625,0.30691 0.6482293,0.48948 0.9128127,0.60854 0.3889375,0.17462 0.7434791,0.27517 1.1059583,0.3519 0.8519583,0.18256 1.5266458,0.19843 2.1140208,0.20902 0.2936875,0.005 0.8916458,0.008 1.6483541,-0.0635 0.4736042,-0.045 0.8810625,-0.10319 1.2012083,-0.1614 M 76.18867,99.508063 h -0.812271 c -0.772583,0.0106 -1.378479,0.005 -1.793875,0 -0.351896,-0.005 -0.748771,-0.0132 -1.30175,0.0212 -0.396875,0.0265 -0.637646,0.0556 -0.703791,0.0635 -0.293688,0.0397 -0.674688,0.09 -1.132417,0.23548 -0.291042,0.0926 -0.497417,0.185207 -0.703792,0.277807 -0.34925,0.15875 -0.817562,0.39688 -1.344083,0.74613 M 2.6530248,99.508063 h 0.812271 c 0.7725833,0.0106 1.3784791,0.005 1.793875,0 0.3518958,-0.005 0.7487708,-0.0132 1.30175,0.0212 0.396875,0.0265 0.6376458,0.0556 0.7037916,0.0635 0.2936875,0.0397 0.6746875,0.09 1.1324167,0.23548 0.2910416,0.0926 0.4974166,0.185207 0.7037916,0.277807 0.34925,0.15875 0.8175625,0.39688 1.3440833,0.74613 M 76.326253,87.599173 c -0.230187,-0.0688 -0.537104,-0.15081 -0.899583,-0.22754 -0.182562,-0.0397 -0.796396,-0.1614 -1.666875,-0.2249 -0.209021,-0.0159 -1.143,-0.0767 -2.468562,0.0317 -0.85725,0.0688 -1.465792,0.11906 -2.243667,0.32015 -0.613833,0.15875 -1.486958,0.44979 -2.468562,1.02658 M 2.3117128,87.599173 c 0.230187,-0.0688 0.537104,-0.15081 0.899583,-0.22754 0.182562,-0.0397 0.7963958,-0.1614 1.666875,-0.2249 0.2090208,-0.0159 1.143,-0.0767 2.4685624,0.0317 0.85725,0.0688 1.4657917,0.11906 2.2436667,0.32015 0.6138331,0.15875 1.4869581,0.44979 2.4685621,1.02658 m 56.684333,17.846197 c -1.513416,0.65616 -2.696104,1.32291 -3.526896,1.83356 -0.886354,0.54504 -1.558395,1.02923 -2.754312,1.89177 -1.653646,1.19062 -1.680104,1.29646 -2.820458,2.08227 -0.976313,0.67469 -1.688042,1.10331 -3.108855,1.95527 -2.116666,1.27 -3.029479,1.70392 -3.590395,1.95527 -0.658813,0.29634 -1.235604,0.51594 -1.314979,0.545
|
|
|
|
/>
|
|
|
|
<use xlinkHref="#simon-button" x="39.25" y="15.5" color="currentColor"></use>
|
|
|
|
<use xlinkHref="#simon-button" x="39.35" y="27.5" color="currentColor"></use>
|
|
|
|
<use xlinkHref="#simon-button" x="39.35" y="39.5" color="currentColor"></use>
|
|
|
|
<use xlinkHref="#simon-button" x="39.4" y="51.5" color="currentColor"></use>
|
|
|
|
<use xlinkHref="#simon-button" x="39.4" y="63.5" color="currentColor"></use>
|
|
|
|
<use xlinkHref="#simon-button" x="39.4" y="75.5" color="currentColor"></use>
|
|
|
|
<use xlinkHref="#simon-button" x="39.4" y="87.5" color="currentColor"></use>
|
|
|
|
<use xlinkHref="#simon-button" x="39.45" y="99.5" color="currentColor"></use>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
|
|
|
|
/*
|
|
|
|
* SVG elements for the back
|
|
|
|
*/
|
|
|
|
const Back = ({ stroke }) => (
|
|
|
|
<>
|
|
|
|
<path
|
|
|
|
key="folds-fill"
|
|
|
|
fill="currentColor"
|
|
|
|
stroke="none"
|
|
|
|
d="m 85.589338,87.302836 c -0.03704,-0.926042 -0.06879,-1.854729 -0.0926,-2.780771 -0.01323,-0.463021 -0.04498,-0.926042 -0.02646,-1.389063 0.01852,-0.46302 0.04762,-0.926041 0.119063,-1.389062 h 0.02646 c 0.07144,0.463021 0.100542,0.926042 0.119063,1.389062 0.01852,0.463021 -0.01323,0.926042 -0.02646,1.389063 -0.02381,0.926042 -0.05556,1.854729 -0.0926,2.780771 z m 1.373187,0.171979 c 0.06615,-0.724958 0.105834,-1.455208 0.201084,-2.177521 0.0926,-0.722312 0.206375,-1.444625 0.341312,-2.161646 0.132292,-0.71702 0.275167,-1.436687 0.481542,-2.137833 0.211667,-0.6985 0.4445,-1.394354 0.743479,-2.061104 l 0.02381,0.0079 c -0.156105,0.714375 -0.34925,1.412875 -0.513292,2.121959 -0.171979,0.703791 -0.370417,1.402291 -0.529167,2.111375 -0.15875,0.709083 -0.298979,1.420812 -0.418041,2.137833 -0.129646,0.717021 -0.201084,1.439333 -0.304271,2.161646 z m 17.608025,-39.224479 0.63764,4.452938 c 0.20109,1.484312 0.40217,2.971271 0.58738,4.460875 0.36512,2.976562 0.67998,5.961062 0.86518,8.956145 0.0926,1.497542 0.15346,2.99773 0.17198,4.497917 0.0106,1.500187 -0.0106,3.003021 -0.0741,4.500562 -0.15875,2.99773 -0.42862,5.990167 -0.89429,8.9535 l -0.0185,-0.0026 c 0.0873,-0.743479 0.17198,-1.489604 0.24341,-2.235729 0.0767,-0.746125 0.14817,-1.49225 0.20903,-2.238375 0.1217,-1.49225 0.20902,-2.989791 0.26193,-4.484687 0.0635,-1.497542 0.0873,-2.995083 0.0767,-4.492625 -0.003,-1.497542 -0.0529,-2.995083 -0.13229,-4.489979 -0.16404,-2.992438 -0.45773,-5.976938 -0.80433,-8.9535 -0.17198,-1.489604 -0.35719,-2.976562 -0.54769,-4.463521 l -0.6006,-4.458229 z m 45.91579,39.0525 c -0.037,-0.926042 -0.0688,-1.854729 -0.0926,-2.780771 -0.0132,-0.463021 -0.045,-0.926042 -0.0265,-1.389063 0.0185,-0.46302 0.0476,-0.926041 0.11907,-1.389062 h 0.0265 c 0.0714,0.463021 0.10054,0.926042 0.11906,1.389062 0.0185,0.463021 -0.0132,0.926042 -0.0265,1.389063 -0.0238,0.926042 -0.0556,1.854729 -0.0926,2.780771 z m -1.37319,0.174625 c -0.10319,-0.722313 -0.17727,-1.444625 -0.30427,-2.161646 -0.11906,-0.717021 -0.25929,-1.431396 -0.41804,-2.137833 -0.1614,-0.709084 -0.35984,-1.407584 -0.52917,-2.111375 -0.16404,-0.706438 -0.35719,-1.407584 -0.51329,-2.121959 l 0.0238,-0.0079 c 0.30163,0.66675 0.53181,1.362604 0.74348,2.061104 0.20638,0.701146 0.34925,1.418167 0.48154,2.137833 0.13494,0.717021 0.24871,1.439334 0.34131,2.161646 0.0926,0.722313 0.1323,1.452563 0.20109,2.177521 z m -17.56304,-39.224479 -0.60061,4.458229 c -0.18785,1.486959 -0.3757,2.973917 -0.54768,4.463521 -0.34661,2.976562 -0.6403,5.961062 -0.80434,8.9535 -0.0794,1.494896 -0.12964,2.992437 -0.13229,4.489979 -0.0106,1.497542 0.0132,2.995083 0.0767,4.492625 0.0503,1.497542 0.13758,2.992437 0.26194,4.484687 0.0609,0.746125 0.13229,1.49225 0.20902,2.238375 0.0714,0.746125 0.1561,1.489604 0.24342,2.235729 l -0.0185,0.0026 c -0.46302,-2.963333 -0.73554,-5.95577 -0.89429,-8.9535 -0.0635,-1.500187 -0.0873,-3.000375 -0.0741,-4.500562 0.0159,-1.500187 0.0794,-3.000375 0.17198,-4.497917 0.18256,-2.995083 0.49742,-5.979583 0.86519,-8.956145 0.1852,-1.486959 0.38364,-2.973917 0.58737,-4.460875 l 0.63765,-4.452938 z"
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
key="buttonholes"
|
|
|
|
{...thin(stroke)}
|
|
|
|
d="m 152.40992,99.574213 c 0.0714,-0.0132 0.16933,-0.0291 0.28839,-0.0556 0.23284,-0.0476 0.34925,-0.0741 0.34925,-0.0926 0,-0.0185 -0.11641,-0.0397 -0.64293,-0.045 m 0.66145,0.19849 -0.0159,-0.14552 -0.0212,-0.1905 m -69.365813,0.38629 c -0.07144,-0.0132 -0.169333,-0.0291 -0.288396,-0.0556 -0.232833,-0.0476 -0.34925,-0.0741 -0.34925,-0.0926 0,-0.0185 0.116417,-0.0397 0.642938,-0.045"
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
key="outline"
|
|
|
|
d="m 91.470756,26.467195 53.129624,0.137588 M 89.767166,17.063902 c 0.0926,0.291042 0.2196,0.714375 0.35454,1.232958 0.33602,1.288521 0.48683,2.275417 0.56092,2.759605 0.49477,3.20675 0.1905,0.838729 0.77523,4.828645 0.37306,2.545292 0.55827,3.817938 0.73289,5.172604 0.21961,1.722438 0.52917,4.15925 0.77523,7.241646 0.17198,2.166938 0.33867,4.942417 0.38894,8.188854 0.0609,0.365125 0.15081,0.902229 0.25929,1.550459 0.71173,4.233333 0.9234,5.25727 1.12183,6.50875 0.58473,3.70946 0.60325,6.70454 0.60325,7.41362 0,1.55311 -0.0873,3.09298 -0.60325,7.06967 -0.50006,3.85233 -1.00806,6.97177 -1.59543,10.38754 -1.016,5.91079 -1.905,10.59921 -2.45798,13.44877 -0.67998,3.50838 -1.27794,6.45848 -1.72509,8.620127 l -0.12964,0.82021 M 146.33508,17.063902 c -0.0926,0.291042 -0.2196,0.714375 -0.35454,1.232958 -0.33602,1.288521 -0.48683,2.275417 -0.56091,2.759605 -0.49477,3.20675 -0.1905,0.838729 -0.77523,4.828645 -0.37307,2.545292 -0.55827,3.817938 -0.7329,5.172604 -0.2196,1.722438 -0.52917,4.15925 -0.77523,7.241646 -0.17198,2.166938 -0.33866,4.942417 -0.38894,8.188854 -0.0608,0.365125 -0.15081,0.902229 -0.25929,1.550459 -0.71173,4.233333 -0.92339,5.25727 -1.12183,6.50875 -0.58473,3.70946 -0.60325,6.70454 -0.60325,7.41362 0,1.55311 0.0873,3.09298 0.60325,7.06967 0.50006,3.85233 1.00806,6.97177 1.59544,10.38754 1.016,5.91079 1.905,10.59921 2.45798,13.44877 0.67998,3.50838 1.27793,6.45848 1.72508,8.620127 l 0.12965,0.82021 m -29.32117,16.63435 h 0.8255 c 1.96056,-0.0767 5.74675,-0.23548 9.65465,-0.4736 0.59266,-0.0344 1.35202,-0.0847 2.32833,-0.34396 0.87842,-0.23284 1.5531,-0.53446 4.82865,-2.54265 1.7145,-1.05039 2.59027,-1.59014 3.66447,-2.32833 0.59532,-0.41011 1.48696,-1.02129 2.62996,-1.89706 1.66159,-1.27265 1.8759,-1.58486 2.93159,-2.19869 0.42333,-0.24606 1.22237,-0.68263 2.11137,-1.12183 0.40481,-0.19844 0.74877,-0.35984 0.99219,-0.47361 l -0.64558,-5.25727 c 0.66145,0.037 3.22527,0.1561 5.38691,-0.34396 1.16417,-0.26987 1.905,-0.64823 2.413,-1.29381 0.12171,-0.1561 0.20639,-0.29634 0.25929,-0.38894 0.037,-3.862907 -0.003,-6.527267 -0.12964,-8.104187 -0.0635,-0.77258 -0.20902,-2.05845 0.12964,-3.44752 0.0529,-0.2196 0.15611,-0.59531 0.2593,-1.16416 0.16931,-0.94721 0.20111,-1.68011 0.21431,-2.02671 0.1376,-3.57981 0.0873,-5.94783 0.0873,-5.94783 -0.10319,-4.84717 -0.0476,-7.08025 -0.34396,-9.39536 -0.17991,-1.38641 -0.26723,-2.07698 -0.51858,-2.84427 -0.17198,-0.53181 -0.38629,-1.03981 -0.51594,-1.85473 -0.1191,-0.75671 -0.0953,-1.33085 -0.0873,-1.55046 0.0503,-1.44198 -0.1614,-3.24379 -0.47361,-5.9055 -0.30427,-2.595559 -0.48683,-4.090455 -1.12183,-6.077475 -0.35983,-1.135063 -0.33073,-0.738188 -0.94721,-2.500313 -0.30691,-0.873125 -1.60603,-4.659312 -1.59543,-7.069666 v -1.248834 c 0,0 -0.008,-0.891646 -0.0423,-1.897062 -0.0847,-2.428875 -0.25929,-4.527021 -0.25929,-4.527021 -0.11906,-1.441979 -0.32544,-3.852333 -0.86254,-6.940021 -0.35454,-2.037291 -0.32808,-1.344083 -1.03452,-4.955646 0,0 -0.35719,-1.830916 -0.94721,-3.749145 -0.11377,-0.375709 -0.30427,-0.96573 -0.64558,-1.680105 -0.0582,-0.119062 -0.30163,-0.62177 -0.69057,-1.248833 -0.27781,-0.449791 -0.54504,-0.822854 -0.77523,-1.121833 -5.74675,-2.770188 -9.91393,-4.833938 -10.51718,-5.1726039 -0.26988,-0.150813 -0.58473,-0.328084 -0.82021,-0.690563 -0.1614,-0.251354 -0.15875,-0.396875 -0.34396,-0.60325 -0.26723,-0.296333 -0.62442,-0.312208 -0.82021,-0.431271 -0.72496,-0.447145 -1.18798,-0.92075 -1.42346,-1.164166 -2.30452,-2.391834 -3.44752,-3.706813 -3.44752,-3.706813 -0.33337,-0.381 -0.7911,-0.912812 -1.33614,-1.550458 -0.27517,-0.166687 -0.70115,-0.375704 -1.24884,-0.473604 -0.68262,-0.121708 -13.36675,-0.121708 -14.04937,0 -0.54769,0.0979 -0.97367,0.306917 -1.24883,0.473604 -0.54505,0.637646 -1.00277,1.169458 -1.33615,1.550458 0,0 -1.143,1.314979 -3.44752,3.706813 -0.23548,0.243416 -0.6985,0.717021 -1.42346,1.164166 -0.19579,0.119063 -0.55298,0.134938 -0.82021,0.431271 -0.18521,0.206375 -0.18256,0.351896 -0.34396,0.60325 -0.23547,0.362479 -0.55033,0.53975 -0.8202,0.690563 -0.60325,0.3386659 -4.770444,2.4024159 -10.517194,5.1726039 -0.23019,0.298979 -0.49742
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
key="stitches"
|
|
|
|
{...thin(stroke)}
|
|
|
|
{...dashed(stroke)}
|
|
|
|
d="m 147.39077,101.81788 c 1.08479,0.0582 1.99231,0.037 2.66436,0 0.80168,-0.045 2.11137,-0.15611 3.25702,-0.59267 0.26987,-0.10319 0.56885,-0.23812 0.889,-0.46567 0.43127,-0.30691 0.71702,-0.64823 0.889,-0.888997 m -66.349564,1.947337 c -1.0848,0.0582 -1.992317,0.037 -2.664359,0 -0.801687,-0.045 -2.111375,-0.15611 -3.257021,-0.59267 -0.269874,-0.10319 -0.568854,-0.23812 -0.888999,-0.46567 -0.431271,-0.30691 -0.717021,-0.64823 -0.889,-0.888997 m 7.442729,5.535087 c 1.49754,0.64823 2.667,1.30968 3.48985,1.81504 0.87842,0.53975 1.54252,1.01864 2.72521,1.8706 1.63513,1.1774 1.66423,1.28323 2.79136,2.06111 0.96837,0.66939 1.66952,1.09008 3.077104,1.9341 2.0955,1.25677 2.99773,1.6854 3.55071,1.93411 0.65087,0.29104 1.22237,0.51064 1.2991,0.53975 0.38629,0.14287 0.67998,0.254 1.04775,0.34925 0.59796,0.1561 1.09273,0.19843 1.45786,0.22225 0.93133,0.0582 3.78354,0.1561 7.64381,0.22225 h 5.21229 c 3.85763,-0.0661 6.70983,-0.16405 7.64381,-0.22225 0.36777,-0.0238 0.8599,-0.0661 1.45786,-0.22225 0.36777,-0.0952 0.66146,-0.20638 1.04775,-0.34925 0.0794,-0.0291 0.64823,-0.24607 1.2991,-0.53975 0.55298,-0.24871 1.45786,-0.67734 3.55071,-1.93411 1.40494,-0.84402 2.10873,-1.26471 3.0771,-1.9341 1.12713,-0.78052 1.15623,-0.88371 2.79136,-2.06111 1.18269,-0.85196 1.84679,-1.33085 2.72521,-1.8706 0.82285,-0.50536 1.99231,-1.16681 3.48985,-1.81504 m 0.24606,-17.584207 c -0.008,0.37835 -0.0159,0.98689 0,1.73302 0.0503,2.39712 0.30692,4.25715 0.66675,6.81831 0.0185,0.12965 0.17992,1.22767 0.508,3.42636 0.0609,0.404807 0.2884,1.947327 0.34925,2.346847 M 88.010336,87.821423 c 0.008,0.37835 0.0159,0.98689 0,1.73302 -0.0503,2.39712 -0.30692,4.25715 -0.66675,6.81831 -0.0185,0.12965 -0.182567,1.22767 -0.508005,3.42636 -0.06085,0.404807 -0.288395,1.947327 -0.34925,2.346847 M 155.13777,87.302843 c -0.31485,-0.0794 -0.78316,-0.18257 -1.35466,-0.25136 -0.23019,-0.0265 -0.56357,-0.0609 -1.87061,-0.0635 -1.33879,-0.005 -1.17475,0.0291 -2.60085,0.0317 -0.635,0 -0.76465,-0.005 -1.04775,0.0318 -0.48948,0.0635 -0.79904,0.17727 -1.68011,0.47625 -0.31485,0.10583 -0.80698,0.27252 -1.4261,0.47625 m -64.590088,-0.70114 c 0.314855,-0.0794 0.783167,-0.18257 1.354667,-0.25136 0.230188,-0.0265 0.563563,-0.0609 1.870604,-0.0635 1.338792,-0.005 1.17475,0.0291 2.600854,0.0317 0.635,0 0.764646,-0.005 1.047749,0.0318 0.48948,0.0635 0.79904,0.17727 1.68011,0.47625 0.31485,0.10583 0.80697,0.27252 1.4261,0.47625 M 103.73981,8.2691521 c 0.58209,0.08467 1.39965,0.195792 2.37861,0.312209 3.34698,0.394229 5.91608,0.508 7.54856,0.576791 3.0189,0.127 5.29431,0.103188 5.96106,0.09525 1.22767,-0.01588 2.84692,-0.03969 4.97946,-0.1905 0.97102,-0.06879 1.9394,-0.164041 3.83646,-0.34925 1.66687,-0.164041 3.05065,-0.306916 4.02696,-0.41275"
|
|
|
|
/>
|
|
|
|
<use xlinkHref="#simon-button" x="84.9" y="99.5" color="currentColor"></use>
|
|
|
|
<use xlinkHref="#simon-button" x="151.2" y="99.5" color="currentColor"></use>
|
|
|
|
</>
|
|
|
|
)
|