179 lines
9.6 KiB
JavaScript
179 lines
9.6 KiB
JavaScript
import React from 'react'
|
|
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
|
|
|
|
const strokeScale = 0.5
|
|
|
|
export const Lumira = ({
|
|
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 220" {...{ className, stroke }}>
|
|
<Front stroke={stroke} />
|
|
<Back stroke={stroke} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
}
|
|
|
|
/*
|
|
* React component for the front
|
|
*/
|
|
export const LumiraFront = ({
|
|
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 220" {...{ className, stroke }}>
|
|
<Front stroke={stroke} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
}
|
|
|
|
/*
|
|
* React component for the back
|
|
*/
|
|
export const LumiraBack = ({
|
|
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 220" {...{ className, stroke }}>
|
|
<Back stroke={stroke} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
}
|
|
|
|
/*
|
|
* SVG elements for the front
|
|
*/
|
|
export const Front = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="stitches"
|
|
{...dashed(stroke)}
|
|
{...thin(stroke)}
|
|
d="m 70.552919,212.38392
|
|
c 0,0 -12.646166,1.99677 -17.329932,-0.22186
|
|
|
|
m 17.509796,-0.74109
|
|
c 0,0 -12.966635,2.07072 -17.650401,-0.14791
|
|
|
|
m -36.029081,0.98067
|
|
c 0,0 12.646166,1.99677 17.329932,-0.22186
|
|
|
|
m -17.509796,-0.74109
|
|
c 0,0 12.966635,2.07072 17.650401,-0.14791"
|
|
/>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
d="m 57.534797,210.87985
|
|
c -1.120226,-0.84702 -2.007445,-2.07392 -2.661657,-3.42402 -0.64525,-1.35523 -1.066455,-2.85421 -1.178478,-4.38398 0.457052,1.43737 0.94099,2.82854 1.572797,4.13244 0.622846,1.31417 1.3846,2.52053 2.267338,3.67042
|
|
z
|
|
|
|
m 11.036469,0.30801
|
|
c 0.07618,-1.17043 0.206121,-2.30493 0.29574,-3.44969 0.10306,-1.13963 0.165793,-2.27926 0.291258,-3.44969 0.233007,1.1499 0.250931,2.3306 0.156832,3.49589 -0.107542,1.1653 -0.322625,2.32546 -0.74383,3.39835
|
|
z
|
|
|
|
m -38.367886,-0.4881
|
|
c 0,-0.62115 0.02689,-1.23717 0.03585,-1.85318 0.01792,-0.61602 0.06721,-1.2269 0.07169,-1.84292 0.01344,-1.23203 0.03137,-2.45892 0.009,-3.68582 -0.01344,-1.2269 -0.05377,-2.45893 -0.09858,-3.68583 -0.04929,-1.23203 -0.129946,-2.45893 -0.192679,-3.69609 0.125466,0.60062 0.219565,1.2115 0.318145,1.82238 0.08066,0.61088 0.156831,1.2269 0.219564,1.84291 0.129946,1.23203 0.183717,2.4692 0.206121,3.71149 0.01344,1.2423 -0.01792,2.47947 -0.116503,3.71663 -0.107542,1.23203 -0.264373,2.46406 -0.448091,3.68069
|
|
z
|
|
|
|
m -10.451572,-0.18523
|
|
c -0.425686,-1.83778 -0.636288,-3.72689 -0.734868,-5.61601 -0.08514,-1.89424 -0.05825,-3.79876 0.183717,-5.67761 0.112022,1.89425 0.165793,3.76797 0.264373,5.64681 0.08514,1.87885 0.215084,3.74743 0.291259,5.64681
|
|
z
|
|
|
|
M 46.911397,57.386992
|
|
c -0.674686,0.04497 -1.354668,0.02382 -2.032001,-0.04497 -0.674686,-0.07938 -1.344083,-0.224897 -1.994957,-0.423336 -0.653522,-0.193146 -1.283228,-0.46831 -1.894419,-0.754059
|
|
l -0.227541,-0.103188 -0.111126,-0.04497
|
|
c -0.03177,-0.01324 -0.08202,-0.02644 -0.07937,-0.02382 0.0053,0 0.01057,0 0.01586,0 0,0 0.0397,-0.01324 0.05027,-0.03173 0.01322,-0.02382 0.01851,-0.02644 0.02379,-0.04497 0.0053,-0.01325 -0.0053,-0.03968 -0.0027,-0.03706 0.0027,0 0,0 0.01322,0.01853 0.01586,0.02382 0.04498,0.05292 0.07144,0.07938 0.05556,0.05556 0.116414,0.111124 0.179917,0.161396 0.251352,0.211663 0.52652,0.407458 0.804331,0.592663 1.103316,0.759357 2.33098,1.325563 3.608917,1.740957 1.27794,0.418044 2.608791,0.661462 3.952875,0.804337 -0.677334,-0.01325 -1.352019,-0.07673 -2.024061,-0.171982 -0.669398,-0.103187 -1.336148,-0.248706 -1.98967,-0.43656 -1.307039,-0.381 -2.55852,-0.960439 -3.696226,-1.717148 -0.283104,-0.193146 -0.558272,-0.394229 -0.820207,-0.619126 -0.06615,-0.05556 -0.129647,-0.116417 -0.19315,-0.179912 -0.03177,-0.03439 -0.0635,-0.0635 -0.09525,-0.111129 -0.01322,-0.01586 -0.03441,-0.05292 -0.05027,-0.0926 -0.0079,-0.02911 -0.01058,-0.100544 0.02644,-0.142875 0.01851,-0.02644 0.06615,-0.05026 0.07673,-0.04764 0.01586,-0.0026 0.03177,-0.0053 0.04762,-0.0053 0.08732,0.008 0.116419,0.02644 0.164042,0.04235
|
|
l 0.12171,0.05291 0.232832,0.108481
|
|
c 0.608543,0.29369 1.222378,0.558274 1.857376,0.777878 1.267356,0.444496 2.61144,0.642935 3.963458,0.664101
|
|
z"
|
|
/>
|
|
<path
|
|
key="outline"
|
|
d="m 43.866714,58.149296 0.0028,-35.753942
|
|
|
|
m 8.506427,105.859036
|
|
c 0.263735,6.20435 0.294754,9.71392 -0.667225,18.61793 -2.795518,25.87511 1.772041,67.09064 1.772041,67.09064 6.310757,1.92281 16.61504,0.0493 16.61504,0.0493 3.236711,-8.09177 3.902418,-32.79428 1.913503,-67.21258 -0.553085,-9.57117 0.378338,-18.84872 1.144592,-26.77281 1.056506,-10.92569 3.194941,-22.488114 5.255204,-32.507924
|
|
C 87.690662,42.379319 80.482146,20.897279 74.987001,5.279942 53.956225,6.437601 33.281911,6.389578 12.769554,5.257402 7.265221,20.835333 0.033794,42.335709 9.324324,87.518956
|
|
c 2.060263,10.01981 4.1987,21.582234 5.25521,32.507924 0.76625,7.92409 1.69768,17.20164 1.14459,26.77281 -1.98891,34.4183 -1.32321,59.12081 1.9135,67.21258 0,0 10.30429,1.87351 16.61504,-0.0493 0,0 4.56756,-41.21553 1.77204,-67.09064 -0.96197,-8.90401 -0.930956,-12.41358 -0.66722,-18.61793 0.999734,-23.51861 5.74827,-70.893864 8.50923,-70.105024 2.760956,-0.78885 7.509496,46.586404 8.509227,70.105014
|
|
z
|
|
|
|
M 8.395945,19.104799
|
|
c 20.473339,4.519247 50.070246,4.271629 70.976283,-0.04435"
|
|
/>
|
|
</>
|
|
)
|
|
|
|
/*
|
|
* SVG elements for the back
|
|
*/
|
|
const Back = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="outline"
|
|
d="m 143.13328,58.095276 0.003,-32.006133
|
|
|
|
m -8.51223,102.111287
|
|
c -0.26373,6.20435 -0.29475,9.71392 0.66722,18.61793 2.79552,25.87511 -1.77204,67.09064 -1.77204,67.09064 -6.31075,1.92281 -16.61504,0.0493 -16.61504,0.0493 -3.23672,-8.09177 -3.90242,-32.79428 -1.91351,-67.21258 0.5531,-9.57117 -0.37834,-18.84872 -1.14459,-26.77281 -1.05651,-10.92569 -3.19494,-22.488114 -5.25521,-32.507924 -9.290528,-45.183237 -2.0591,-66.683616 3.44523,-82.261547 20.51237,1.132172 41.18669,1.180195 62.21746,0.02254 5.49515,15.617337 12.70366,37.099374 3.4221,82.238997 -2.06027,10.01981 -4.1987,21.582234 -5.25521,32.507924 -0.76625,7.92409 -1.69768,17.20164 -1.14459,26.77281 1.98892,34.4183 1.32321,59.12081 -1.9135,67.21258 0,0 -10.30429,1.87351 -16.61504,-0.0493 0,0 -4.56756,-41.21553 -1.77204,-67.09064 0.96197,-8.90401 0.93096,-12.41358 0.66722,-18.61793 -0.99973,-23.51861 -5.74827,-70.893864 -8.50923,-70.105014 -2.76096,-0.78884 -7.50949,46.586414 -8.50923,70.105024
|
|
z
|
|
|
|
M 108.5174,15.974185
|
|
c 10.30264,1.640345 34.65352,10.132647 34.65352,10.132647 0,0 24.27266,-8.194966 34.65806,-9.688922"
|
|
/>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
d="m 142.14962,58.095352
|
|
c -0.80277,0.476596 -1.63437,0.868319 -2.46597,1.240456 -0.84122,0.346022 -1.69686,0.633285 -2.5525,0.887905 -1.72089,0.502711 -3.48024,0.757331 -5.24439,0.822618 -1.75935,0.05223 -3.52831,-0.07834 -5.26362,-0.450481 -0.87006,-0.169747 -1.73051,-0.411309 -2.59095,-0.665929 -0.85083,-0.293792 -1.70167,-0.594113 -2.53327,-0.972779 1.71608,0.483125 3.43698,0.894434 5.16748,1.142525 1.73051,0.248092 3.47063,0.35908 5.20594,0.293793 3.47543,-0.10446 6.92683,-0.900963 10.27728,-2.298108
|
|
z
|
|
|
|
m 1.02869,-0.685515
|
|
c 3.35045,1.397145 6.80184,2.193648 10.27728,2.298107 1.73531,0.06529 3.47543,-0.0457 5.20593,-0.293792 1.73051,-0.241562 3.4514,-0.652871 5.16748,-1.142525 -0.8316,0.378666 -1.67762,0.678987 -2.53326,0.972779 -0.85564,0.25462 -1.72089,0.496182 -2.59095,0.665929 -1.74012,0.365608 -3.50428,0.502711 -5.26363,0.450481 -1.75934,-0.06529 -3.51869,-0.319907 -5.24439,-0.822618 -0.86044,-0.25462 -1.71608,-0.541883 -2.55249,-0.887905 -0.83642,-0.365608 -1.66321,-0.76386 -2.46597,-1.240456
|
|
z
|
|
|
|
m -13.6344,153.416053
|
|
c 1.12022,-0.84702 2.00744,-2.07392 2.66166,-3.42402 0.64525,-1.35523 1.06645,-2.8542 1.17847,-4.38397 -0.45705,1.43737 -0.94099,2.82853 -1.57279,4.13244 -0.62285,1.31416 -1.38461,2.52052 -2.26734,3.67042
|
|
z
|
|
|
|
m -11.03647,0.30801
|
|
c -0.0762,-1.17043 -0.20612,-2.30492 -0.29574,-3.44969 -0.10306,-1.13962 -0.1658,-2.27926 -0.29126,-3.44968 -0.23301,1.14989 -0.25093,2.33059 -0.15683,3.49589 0.10754,1.16529 0.32263,2.32545 0.74383,3.39834
|
|
z
|
|
|
|
m 38.36788,-0.4881
|
|
c 0,-0.62115 -0.0269,-1.23716 -0.0359,-1.85318 -0.0179,-0.61602 -0.0672,-1.2269 -0.0717,-1.84291 -0.0135,-1.23203 -0.0313,-2.45893 -0.009,-3.68583 0.0135,-1.22689 0.0538,-2.45893 0.0986,-3.68582 0.0493,-1.23204 0.12995,-2.45893 0.19268,-3.6961 -0.12546,0.60062 -0.21956,1.2115 -0.31814,1.82238 -0.0807,0.61089 -0.15683,1.2269 -0.21957,1.84292 -0.12994,1.23203 -0.18372,2.46919 -0.20612,3.71149 -0.0135,1.2423 0.0179,2.47946 0.1165,3.71663 0.10754,1.23203 0.26438,2.46406 0.44809,3.68069
|
|
z
|
|
|
|
m 10.45158,-0.18522
|
|
c 0.42568,-1.83778 0.63628,-3.72689 0.73486,-5.61601 0.0851,-1.89425 0.0583,-3.79877 -0.18371,-5.67761 -0.11202,1.89425 -0.1658,3.76796 -0.26438,5.64681 -0.0851,1.87884 -0.21508,3.74743 -0.29125,5.64681
|
|
z"
|
|
/>
|
|
<path
|
|
key="stitches"
|
|
{...dashed(stroke)}
|
|
{...thin(stroke)}
|
|
d="m 169.81949,212.32995
|
|
c 0,0 -12.64617,1.99677 -17.32994,-0.22186
|
|
|
|
m 17.5098,-0.74109
|
|
c 0,0 -12.96663,2.07072 -17.6504,-0.14791
|
|
|
|
m -36.02908,0.98067
|
|
c 0,0 12.64616,1.99677 17.32993,-0.22186
|
|
|
|
M 116.14,211.23681
|
|
c 0,0 12.96664,2.07072 17.65041,-0.14791"
|
|
/>
|
|
</>
|
|
)
|