freesewing/packages/react/components/LineDrawing/noble.mjs

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.4

/**
 * A linedrawing component for Noble
 *
 * @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 Noble = ({ className, stroke = 1 }) => (
  <LineDrawingWrapper viewBox="0 0 152 83" {...{ className, stroke }}>
    <Front stroke={stroke * strokeScale} />
    <Back stroke={stroke * strokeScale} />
  </LineDrawingWrapper>
)

/**
 * A linedrawing component for the front of Noble
 *
 * @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 NobleFront = ({ className, stroke = 1 }) => (
  <LineDrawingWrapper viewBox="-5 0 83 83" {...{ className, stroke }}>
    <Front stroke={stroke * strokeScale} />
  </LineDrawingWrapper>
)

/**
 * A linedrawing component for the back of Noble
 *
 * @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 NobleBack = ({
  className = 'w-64', // CSS classes to apply
  stroke = 1, // Stroke width to use
}) => {
  // Normalize stroke across designs
  stroke = stroke * strokeScale

  return (
    <LineDrawingWrapper viewBox="76 0 76 83" {...{ className, stroke }}>
      <Back stroke={stroke} />
    </LineDrawingWrapper>
  )
}

/*
 * SVG elements for the front
 */
const Front = ({ stroke }) => (
  <>
    <path
      key="stitches"
      {...dashed(stroke)}
      {...thin(stroke)}
      d="m 49.952993,3.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 3.3959329,8.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 7.496973,75.558949 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 11.798419,5.8578873 c -0.160362,-0.160362 8.176004,20.5190487 9.37078,32.6760727 1.612027,16.402602 0.548439,41.936486 0.548439,41.936486 M 61.735085,5.8972043 C 61.895447,5.7368423 53.55908,26.416254 52.364304,38.573278 50.752277,54.97588 51.815865,80.509764 51.815865,80.509764"
    />
    <path
      key="outline"
      d="m 50.153093,2.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 2.1629729,41.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 23.342863,2.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 115.26405,6.1525289 c -6.08971,0.15051 -9.24675,-0.79513 -13.39896,-3.99834 L 79.908123,8.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 89.767602,5.7303582 C 89.60724,5.5699962 97.94361,26.249407 99.13838,38.406431 c 1.61203,16.402602 0.54844,41.936485 0.54844,41.936485 M 139.70427,5.7696752 c 0.16036,-0.160362 -8.17601,20.5190498 -9.37078,32.6760738 -1.61203,16.402602 -0.54844,41.936487 -0.54844,41.936487"
    />
    <path
      key="stitches"
      {...dashed(stroke)}
      {...thin(stroke)}
      d="m 148.94214,8.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 81.192643,8.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 129.89735,2.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"
    />
  </>
)