108 lines
6.1 KiB
JavaScript
108 lines
6.1 KiB
JavaScript
import React from 'react'
|
|
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
|
|
|
|
/*
|
|
* This strokeScale factor is used to normalize the stroke across
|
|
* designs so we have a consistent look when showing our collection
|
|
*/
|
|
const strokeScale = 0.5
|
|
|
|
/**
|
|
* A linedrawing component for Bella
|
|
*
|
|
* @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}
|
|
*/
|
|
export const Bella = ({ className, stroke = 1 }) => (
|
|
<LineDrawingWrapper viewBox="2 -30 155 155" {...{ stroke, className }}>
|
|
<Front stroke={stroke * strokeScale} />
|
|
<Back stroke={stroke * strokeScale} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
|
|
/**
|
|
* A linedrawing component for the front of Bella
|
|
*
|
|
* @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}
|
|
*/
|
|
export const BellaFront = ({ className, stroke = 1 }) => (
|
|
<LineDrawingWrapper viewBox="-4 2 89 86" {...{ className, stroke }}>
|
|
<Front stroke={stroke * strokeScale} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
|
|
/**
|
|
* A linedrawing component for the back of Bella
|
|
*
|
|
* @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}
|
|
*/
|
|
export const BellaBack = ({
|
|
className = 'tw:w-full', // CSS classes to apply
|
|
stroke = 1, // Stroke width to use
|
|
}) => {
|
|
// Normalize stroke across designs
|
|
stroke = stroke * strokeScale
|
|
|
|
return (
|
|
<LineDrawingWrapper viewBox="77 0 77 89" {...{ className, stroke }}>
|
|
<Back stroke={stroke} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
}
|
|
|
|
/*
|
|
* SVG elements for the front
|
|
*/
|
|
const Front = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="stitches"
|
|
{...dashed(stroke)}
|
|
{...thin(stroke)}
|
|
d="m 52.952993,6.6931889 c -3.40842,3.4341601 -9.59006,3.5857201 -13.76413,3.7037901 -4.17407,0.11808 -9.08209,-0.6672501 -12.55681,-3.6683601 m 27.61528,-1.16272 c -0.36346,2.20357 -0.86053,4.275 -1.50638,6.1935701 -0.76472,2.27168 -2.57487,4.97719 -3.89792,6.05901 -2.37715,2.51352 -5.43883,3.75706 -9.14977,3.84587 -4.03175,-0.15292 -5.0981,-0.79048 -8.41579,-3.12701 -2.46811,-2.30835 -3.64124,-4.37869 -4.50688,-6.56646 -0.85207,-2.1535301 -1.45251,-4.4020601 -1.56864,-6.3444901 m 47.78595,5.8850601 c -3.40715,10.58105 -6.52658,17.900843 -3.53692,27.572333 0.89243,2.88693 2.34201,5.22395 4.34136,7.43254 M 6.3959329,11.513529 c 3.40714,10.58105 6.5265801,17.900843 3.53692,27.572333 -0.89244,2.88694 -2.34201,5.22396 -4.34136,7.43255 m 4.9054801,32.040537 c 1.07421,0.37835 2.62202,0.88371 4.52173,1.35731 3.45545,0.8599 6.18595,1.143 8.58837,1.35731 6.28915,0.55827 12.11263,0.79375 16.0483,0.79507 3.93568,10e-4 9.75916,-0.2368 16.04831,-0.79507 2.40241,-0.21431 5.13291,-0.49741 8.58837,-1.35731 1.89706,-0.47096 3.44752,-0.97631 4.52173,-1.35731"
|
|
/>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
d="M 7.2315396,58.639239 19.177926,54.785496 7.1738296,58.315909 Z m 65.1083164,-0.2256 -11.946386,-3.853743 12.004096,3.530413 z m -19.718523,25.18428 2.48047,-25.863023 -2.89388,25.829943 z m -25.67127,0.2256 -2.48047,-25.863023 2.89388,25.829943 z"
|
|
/>
|
|
<path
|
|
key="outline"
|
|
d="m 53.153093,5.1741089 c -4.9666,3.74351 -7.32157,3.84783 -13.41128,3.99834 -6.0897,0.15051 -9.24674,-0.79512 -13.39895,-3.99834 m 47.99013,39.6848631 -5.42396,35.811347 c -1.07421,0.381 -2.62467,0.88636 -4.52173,1.35731 -3.45546,0.8599 -6.18596,1.143 -8.58837,1.35732 -6.28915,0.55827 -12.11263,0.79639 -16.05096,0.79507 -3.93832,-0.001 -9.76179,-0.2368 -16.05094,-0.79507 -2.40242,-0.21432 -5.13292,-0.49742 -8.58838,-1.35732 -1.8997,-0.4736 -3.44752,-0.97895 -4.52172,-1.35731 L 5.1629729,44.858972 c 1.83875,-2.55568 3.13415,-4.84744 3.77587,-8.02626 1.9596101,-9.70708 -1.00841,-15.355613 -3.77587,-24.877323 L 26.342863,5.1741089 c 0.14817,1.09538 0.41275,2.667 0.90488,4.52173 0.59679,2.1655001 2.17675,5.5503801 4.84433,7.9013601 2.13448,1.88114 5.14379,3.01114 7.58103,2.98574 2.86131,-0.0519 5.84491,-1.12057 8.08998,-3.25372 2.03764,-1.93602 3.46705,-4.0472 4.48514,-7.6333801 0.49212,-1.85473 0.75671,-3.42635 0.90487,-4.52173 l 21.1799,6.7812801 c -2.76746,9.52171 -5.73548,15.170243 -3.77587,24.877323 0.64172,3.17882 1.93712,5.47058 3.77587,8.02626"
|
|
/>
|
|
</>
|
|
)
|
|
|
|
/*
|
|
* SVG elements for the front
|
|
*/
|
|
const Back = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="outline"
|
|
d="m 118.26405,9.1525289 c -6.08971,0.15051 -9.24675,-0.79513 -13.39896,-3.99834 L 82.908123,11.735779 c 2.76746,9.52172 5.73547,15.170243 3.77586,24.877333 -0.64172,3.17882 -1.93712,5.47057 -3.77586,8.02625 l 5.64885,36.488687 c 1.47902,0.32015 2.9845,0.62442 4.52173,0.90488 8.831787,1.61395 17.176747,2.24895 24.976667,2.24614 7.79991,-0.003 16.14487,-0.63783 24.97666,-2.24914 1.53459,-0.28046 3.04271,-0.58208 4.52173,-0.90487 l 5.64886,-36.488507 c -1.83875,-2.55551 -3.13415,-4.84727 -3.77587,-8.02609 -1.95961,-9.70708 1.0084,-15.355613 3.77587,-24.877503 l -21.5273,-6.5789401 c -4.9666,3.74368 -7.32157,3.848 -13.41127,3.99851 z"
|
|
/>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
d="m 132.18589,83.576999 1.40316,-45.369 -1.88843,45.43331 z m -28.85628,-0.14173 -1.40316,-45.369 1.88843,45.46839 z"
|
|
/>
|
|
<path
|
|
key="stitches"
|
|
{...dashed(stroke)}
|
|
{...thin(stroke)}
|
|
d="m 151.94214,11.371109 c -3.40715,10.58105 -6.52658,17.900843 -3.53692,27.572333 0.89244,2.88694 2.34201,5.22396 4.34136,7.43254 M 84.192643,11.315319 c 3.40715,10.58105 6.52658,17.900833 3.53693,27.572323 -0.89244,2.88694 -2.34202,5.22396 -4.34137,7.43255 m 5.17142,32.688547 c 1.47902,0.32014 2.9845,0.62442 4.52173,0.90487 8.831787,1.61396 17.176737,2.24896 24.975337,2.24765 7.79859,-0.001 16.14355,-0.63633 24.97534,-2.24765 1.53459,-0.28045 3.04271,-0.58208 4.52173,-0.90487 M 132.89735,5.6149289 c -2.28793,2.04691 -5.10963,3.67333 -8.0686,4.31739 -2.44872,0.5330101 -4.99586,0.3514401 -6.97783,0.4044001 -1.98197,0.053 -4.95247,-0.10054 -7.31247,-0.7507401 -2.8688,-0.79035 -5.1148,-2.23633 -7.0212,-3.88288"
|
|
/>
|
|
</>
|
|
)
|