freesewing/packages/react/components/LineDrawing/bibi.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.5

/**
 * A linedrawing component for Bibi
 *
 * @param {object} props - All React props
 * @param {string} props.className - Any CSS classes to apply
 * @param {number} props.stroke - The stroke width to apply
 */
export const Bibi = ({ className, stroke = 1 }) => (
  <LineDrawingWrapper viewBox="2 -34 167 167" {...{ className }}>
    <Front stroke={strokeScale * stroke} />
    <Back stroke={strokeScale * stroke} />
  </LineDrawingWrapper>
)

/**
 * A linedrawing component for the front of Bibi
 *
 * @param {object} props - All React props
 * @param {string} props.className - Any CSS classes to apply
 * @param {number} props.stroke - The stroke width to apply
 */
export const BibiFront = ({ className, stroke = 1 }) => (
  <LineDrawingWrapper viewBox="0 0 85 90" {...{ className }}>
    <Front stroke={stroke * strokeScale} />
  </LineDrawingWrapper>
)

/*
 * React component for the back
 */
export const BibiBack = ({
  className = 'tw:w-full', // CSS classes to apply
  stroke = 1, // Stroke width to use
}) => {
  // Normalize stroke across designs
  stroke = stroke * strokeScale

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

/*
 * SVG elements for the front
 */
export const Front = ({ stroke }) => (
  <>
    <path
      key="stitches"
      {...dashed(stroke)}
      {...thin(stroke)}
      d="m 51.779709,4.4354272 c -3.178132,2.6245716 -5.352405,2.321948 -9.152107,2.4173197 -3.799694,0.09541 -5.69075,-0.2480656 -8.85467,-2.4100521 M 53.571002,3.0225117 C 53.244801,17.268394 32.490143,17.17025 32.028546,3.0214915 M 67.85005,83.570653 c -12.883744,1.342898 -35.273054,0.941978 -48.22536,0.01527 M 81.602885,34.106116 68.162638,38.784072 M 5.8824761,34.420045 18.371275,38.750312"
    />
    <path
      key="folds"
      opacity={0.3}
      d="M 70.59442,7.8820746 C 65.45604,19.582046 64.572162,27.123324 65.356704,32.595955 M 15.872468,7.8820746 c 5.138378,11.6999714 6.193153,19.1064544 5.40861,24.5790854"
    />
    <path
      key="outline"
      d="M 33.463622,2.6758086 18.577976,6.2614815 C 18.035908,6.4179536 16.893966,6.8240942 15.872468,7.8820746 10.792223,20.038985 7.9638598,24.104892 5.224788,36.970028 l 12.421894,4.398489 3.634397,-8.907357 c -1.856518,7.622293 1.273767,13.188354 0.959961,18.456751 -0.976284,16.390523 -2.892219,25.189064 -3.127854,35.381693 18.522439,1.450034 30.663149,1.242285 49.3425,0.370571 C 67.3318,76.597187 65.398713,67.634449 64.44056,50.999681 64.136947,45.728582 66.845449,39.967465 65.356704,32.595955 l 3.358143,8.655629 13.44487,-4.586026 C 79.151143,22.830528 76.600622,19.324724 70.59442,7.8820746 69.572937,6.8240942 68.430984,6.4177628 67.888923,6.2614815 L 52.038395,2.6758086 c 0.808937,11.6606614 -18.383254,13.0787394 -18.574773,0 z M 52.038388,2.64564 C 48.68668,5.068935 45.311708,5.2062352 42.505923,5.2338795 39.681909,5.2617034 36.265759,4.7192007 33.463622,2.64564"
    />
  </>
)

/*
 * SVG elements for the back
 */
const Back = ({ stroke }) => (
  <>
    <path
      key="stitches"
      {...dashed(stroke)}
      {...thin(stroke)}
      d="m 136.00902,2.9270757 c -2.71821,2.747446 -6.16508,3.7122931 -10.94816,3.6630589 -5.38013,-0.05538 -7.81113,-1.2662531 -10.15322,-3.6438351 m 35.18904,78.2834545 c -6.68571,1.790956 -15.92126,3.464636 -25.08206,3.378254 -8.03644,-0.07578 -16.81448,-1.59251 -22.72449,-3.273326 m 61.43806,-48.407266 -13.66997,4.534445 m -62.048312,-3.371372 13.445742,4.019055"
    />
    <path
      key="folds"
      opacity={0.3}
      d="M 152.36459,7.7441465 C 147.35394,19.141488 146.49203,24.520434 147.25707,29.851512 M 99.002982,7.7441465 c 5.010638,11.3973415 6.039198,16.6449785 5.274158,21.9760555 m 2.13593,15.294224 c -0.2505,5.618072 1.94359,10.868263 1.89777,20.247187 M 146.97672,36.97725 c -0.8854,5.478971 -2.67314,6.78947 -2.37135,17.80827"
    />
    <path
      key="outline"
      d="m 125.28003,5.2975987 c -4.00839,-0.040472 -6.39072,-0.6345162 -9.12319,-2.6544242 l -14.51561,3.522297 c -0.52859,0.152425 -1.642143,0.54806 -2.638248,1.578675 C 93.222229,18.3724 90.210821,23.818471 87.327104,36.3762 l 13.405986,4.339466 3.54405,-9.028194 c 0.1628,6.441504 2.13531,9.365102 2.13593,13.326953 0.003,18.61597 -3.99958,27.140207 -4.24993,39.118919 0.59906,0.117106 4.39936,1.231667 5.53641,1.46127 12.3436,2.357529 24.20468,2.370914 35.9685,0 1.13705,-0.229381 6.0119,-0.983176 6.61097,-1.100284 -0.37711,-12.29561 -4.18931,-20.782157 -4.40295,-39.479905 -0.045,-3.943736 1.50697,-6.785794 1.381,-13.195645 l 3.59292,7.946573 13.90626,-4.522154 C 160.66104,23.59597 158.49047,18.842507 152.36459,7.7441465 c -0.99609,-1.030615 -2.10966,-1.426436 -2.63824,-1.578675 l -15.4565,-3.522297 c -3.26839,2.360596 -4.98233,2.6948872 -8.98982,2.6544242 z"
    />
  </>
)