162 lines
7.1 KiB
JavaScript
162 lines
7.1 KiB
JavaScript
|
import React from 'react'
|
||
|
|
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
|
||
|
|
|
||
|
|
const strokeScale = 0.5
|
||
|
|
|
||
|
|
export const Lumina = ({
|
||
|
|
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 187 127" {...{ className, stroke }}>
|
||
|
|
<Front stroke={stroke} />
|
||
|
|
<Back stroke={stroke} />
|
||
|
|
</LineDrawingWrapper>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* React component for the front
|
||
|
|
*/
|
||
|
|
export const LuminaFront = ({
|
||
|
|
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 94 127" {...{ className, stroke }}>
|
||
|
|
<Front stroke={stroke} />
|
||
|
|
</LineDrawingWrapper>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* React component for the back
|
||
|
|
*/
|
||
|
|
export const LuminaBack = ({
|
||
|
|
className = 'w-64', // CSS classes to apply
|
||
|
|
stroke = 1, // Stroke width to use
|
||
|
|
}) => {
|
||
|
|
// Normalize stroke across designs
|
||
|
|
stroke = stroke * strokeScale
|
||
|
|
|
||
|
|
return (
|
||
|
|
<LineDrawingWrapper viewBox="94 0 94 127" {...{ className, stroke }}>
|
||
|
|
<Back stroke={stroke} />
|
||
|
|
</LineDrawingWrapper>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* SVG elements for the front
|
||
|
|
*/
|
||
|
|
export const Front = ({ stroke }) => (
|
||
|
|
<>
|
||
|
|
<path
|
||
|
|
key="stitches"
|
||
|
|
{...dashed(stroke)}
|
||
|
|
{...thin(stroke)}
|
||
|
|
d="m 73.001713,119.90179
|
||
|
|
c 0,0 -15.325416,1.97711 -21.001496,-0.21969
|
||
|
|
|
||
|
|
m 21.219465,-0.7338
|
||
|
|
c 0,0 -15.713778,2.05035 -21.38986,-0.14645
|
||
|
|
|
||
|
|
m -37.054436,0.97127
|
||
|
|
c 0,0 15.184181,1.98891 20.807954,-0.22097
|
||
|
|
|
||
|
|
m -21.023915,-0.73818
|
||
|
|
c 0,0 15.568967,2.06256 21.192739,-0.14733"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
key="folds"
|
||
|
|
opacity={0.3}
|
||
|
|
d="m 46.89927,56.981705
|
||
|
|
c -0.674688,0.04498 -1.354667,0.02381 -2.032,-0.04498 -0.674688,-0.07938 -1.344083,-0.224896 -1.994958,-0.423333 -0.653521,-0.193146 -1.28323,-0.468313 -1.894417,-0.754063
|
||
|
|
l -0.227542,-0.103187 -0.111125,-0.04498
|
||
|
|
c -0.03175,-0.01323 -0.08202,-0.02646 -0.07937,-0.02381
|
||
|
|
h 0.01588
|
||
|
|
c 0,0 0.03969,-0.01323 0.05027,-0.03175 0.01323,-0.02381 0.01852,-0.02646 0.02381,-0.04498 0.0053,-0.01323 -0.0053,-0.03969 -0.0026,-0.03704 0.0026,0 0,0 0.01323,0.01852 0.01587,0.02381 0.04498,0.05292 0.07144,0.07937 0.05556,0.05556 0.116417,0.111125 0.179917,0.161396 0.251354,0.211667 0.526521,0.407458 0.804333,0.592667 1.103313,0.759354 2.33098,1.325562 3.608917,1.740958 1.277938,0.418042 2.608792,0.661458 3.952875,0.804333 -0.677333,-0.01323 -1.352021,-0.07673 -2.024062,-0.171979 -0.669396,-0.103187 -1.336146,-0.248708 -1.989667,-0.436562 -1.307042,-0.381 -2.558521,-0.960438 -3.696229,-1.717146 -0.283104,-0.193146 -0.558271,-0.394229 -0.820209,-0.619125 -0.06614,-0.05556 -0.129645,-0.116417 -0.193145,-0.179917 -0.03175,-0.0344 -0.0635,-0.0635 -0.09525,-0.111125 -0.01323,-0.01587 -0.0344,-0.05292 -0.05027,-0.0926 -0.0079,-0.0291 -0.01058,-0.100542 0.02646,-0.142875 0.01852,-0.02646 0.06615,-0.05027 0.07673,-0.04762 0.01587,-0.0026 0.03175,-0.0053 0.04762,-0.0053 0.08731,0.0079 0.116417,0.02646 0.164042,0.04233
|
||
|
|
l 0.121708,0.05292 0.232834,0.10848
|
||
|
|
c 0.608541,0.293687 1.222375,0.55827 1.857375,0.777875 1.267354,0.4445 2.611437,0.642937 3.963458,0.664104
|
||
|
|
z"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
key="outline"
|
||
|
|
d="M 69.955282,121.18495
|
||
|
|
C 69.106026,122.24652 75.110374,83.187497 76.597093,52.024475 77.265327,38.017666 74.513865,22.885673 72.796562,18.306198
|
||
|
|
|
||
|
|
M 17.891199,121.4196
|
||
|
|
c 0.849256,1.06157 -5.155092,-37.997453 -6.641811,-69.160477 -0.668234,-14.006809 1.908916,-29.278251 3.626219,-33.857726
|
||
|
|
|
||
|
|
m 28.98995,39.279875 0.003,-37.254165
|
||
|
|
|
||
|
|
m 8.148599,100.715533 0.08287,-0.0134
|
||
|
|
c 7.903327,1.89572 20.85026,0.0419 20.85026,0.0419 0.09239,-0.52639 0.142278,-1.0408 0.191478,-1.54963 1.056507,-10.92569 3.194941,-22.488113 5.255204,-32.507923
|
||
|
|
C 87.678539,41.97403 80.470024,20.49199 74.974879,4.8746537 53.944103,6.0323127 33.269789,5.9842897 12.757432,4.8521182 7.2530994,20.430048 0.02167241,41.930424 9.3122024,87.113667
|
||
|
|
c 2.0602626,10.01981 4.1987086,21.582233 5.2552096,32.507923 0.05175,0.53518 0.104256,1.07654 0.209159,1.60921 0,0 12.956824,1.83259 20.883422,-0.002 1.487993,-24.698753 5.671335,-64.205823 8.194596,-63.484806 2.518248,-0.71941 6.69,38.629513 8.162567,63.398646
|
||
|
|
z
|
||
|
|
|
||
|
|
M 8.6975824,17.164303
|
||
|
|
c 20.4733386,4.519247 49.3381366,4.28906 70.2441736,-0.02692"
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
|
||
|
|
/*
|
||
|
|
* SVG elements for the back
|
||
|
|
*/
|
||
|
|
const Back = ({ stroke }) => (
|
||
|
|
<>
|
||
|
|
<path
|
||
|
|
key="outline"
|
||
|
|
d="m 117.70875,121.58103
|
||
|
|
c 1.16344,1.09005 -5.43565,-39.363383 -7.47239,-71.362536 -0.91545,-14.382623 2.16142,-29.193125 4.51405,-33.895471
|
||
|
|
|
||
|
|
m 53.9369,105.342327
|
||
|
|
c -1.17072,1.08594 5.46969,-39.214783 7.51918,-71.09314 0.92119,-14.328329 -2.38412,-29.050584 -4.75148,-33.735179
|
||
|
|
|
||
|
|
m -28.33385,40.852958 0.003,-32.006135
|
||
|
|
|
||
|
|
M 108.50528,15.568896
|
||
|
|
c 5.02347,0.799817 13.38683,1.111983 20.63878,3.391093 7.62109,2.39512 14.01474,6.741554 14.01474,6.741554 0,0 5.93198,-4.119429 13.18562,-6.325286 7.41923,-2.256211 16.22114,-2.608228 21.47244,-3.363636
|
||
|
|
|
||
|
|
M 151.33585,121.31483
|
||
|
|
c 7.94306,1.91293 20.87339,0.0564 20.87339,0.0564 0.0839,-0.61471 0.142,-1.21293 0.1991,-1.80362 1.0565,-10.92569 3.19494,-22.488113 5.25521,-32.507923 9.28156,-45.139627 2.07305,-66.621664 -3.4221,-82.2390003 -21.03077,1.157659 -41.70509,1.109636 -62.21746,-0.022536 -5.50433,15.5779293 -12.735762,37.0783083 -3.44523,82.2615453 2.06027,10.01981 4.19871,21.582234 5.25521,32.507924 0.059,0.60992 0.11894,1.22786 0.22471,1.85238 0,0 12.95025,1.84616 20.86772,-0.0378 1.47038,-24.737904 5.66614,-64.41452 8.19476,-63.69209 2.52535,-0.721562 6.71352,38.851387 8.21469,63.62472
|
||
|
|
z"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
key="folds"
|
||
|
|
opacity={0.3}
|
||
|
|
d="m 142.13749,57.690062
|
||
|
|
c -0.80276,0.476597 -1.63436,0.86832 -2.46597,1.240456 -0.84122,0.346022 -1.69685,0.633286 -2.55249,0.887905 -1.72089,0.502711 -3.48024,0.757331 -5.2444,0.822618 -1.75934,0.05223 -3.5283,-0.07834 -5.26362,-0.450481 -0.87006,-0.169746 -1.7305,-0.411309 -2.59095,-0.665929 -0.85083,-0.293792 -1.70166,-0.594113 -2.53326,-0.972778 1.71608,0.483125 3.43697,0.894434 5.16748,1.142525 1.7305,0.248091 3.47062,0.359079 5.20593,0.293792 3.47543,-0.104459 6.92684,-0.900963 10.27728,-2.298108
|
||
|
|
z
|
||
|
|
|
||
|
|
m 1.02869,-0.685515
|
||
|
|
c 3.35045,1.397145 6.80185,2.193649 10.27728,2.298108 1.73531,0.06529 3.47543,-0.0457 5.20594,-0.293792 1.73051,-0.241563 3.4514,-0.652872 5.16748,-1.142525 -0.8316,0.378665 -1.67763,0.678986 -2.53327,0.972778 -0.85564,0.25462 -1.72089,0.496183 -2.59095,0.665929 -1.74012,0.365608 -3.50427,0.502711 -5.26362,0.450481 -1.75935,-0.06529 -3.51869,-0.319907 -5.24439,-0.822618 -0.86045,-0.254619 -1.71609,-0.541883 -2.5525,-0.887905 -0.83641,-0.365608 -1.6632,-0.763859 -2.46597,-1.240456
|
||
|
|
z"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
key="stitches"
|
||
|
|
{...dashed(stroke)}
|
||
|
|
{...thin(stroke)}
|
||
|
|
d="m 172.28677,120.0259
|
||
|
|
c 0,0 -15.32541,1.97711 -21.00149,-0.21969
|
||
|
|
|
||
|
|
m 21.21946,-0.7338
|
||
|
|
c 0,0 -15.71377,2.05035 -21.38985,-0.14645
|
||
|
|
|
||
|
|
m -37.05461,0.97127
|
||
|
|
c 0,0 15.18428,1.98891 20.80808,-0.22097
|
||
|
|
|
||
|
|
m -21.02404,-0.73818
|
||
|
|
c 0,0 15.56906,2.06256 21.19287,-0.14733"
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)
|