44e04a4cef
Also fixes #251 Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/263 Co-authored-by: joostdecock <joost@joost.at> Co-committed-by: joostdecock <joost@joost.at>
100 lines
6.6 KiB
JavaScript
100 lines
6.6 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.3
|
|
|
|
/**
|
|
* A linedrawing component for Breanna
|
|
*
|
|
* @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 Breanna = ({ className, stroke = 1 }) => (
|
|
<LineDrawingWrapper viewBox="-5 0 106 106" {...{ className, stroke }}>
|
|
<Front stroke={strokeScale * stroke} />
|
|
<g transform="translate(-91 48)">
|
|
<Back stroke={strokeScale * stroke} />
|
|
</g>
|
|
</LineDrawingWrapper>
|
|
)
|
|
|
|
/**
|
|
* A linedrawing component for Breanna
|
|
*
|
|
* @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 BreannaFront = ({ className, stroke = 1 }) => (
|
|
<LineDrawingWrapper viewBox="0 -15 92 92" {...{ className }}>
|
|
<Front stroke={stroke * strokeScale} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
|
|
/*
|
|
* React component for the back
|
|
*/
|
|
export const BreannaBack = ({
|
|
className = 'tw:w-full', // CSS classes to apply
|
|
stroke = 1, // Stroke width to use
|
|
}) => {
|
|
// Normalize stroke across designs
|
|
stroke = stroke * strokeScale
|
|
|
|
return (
|
|
<LineDrawingWrapper viewBox="92 0 92 58" {...{ className, stroke }}>
|
|
<Back stroke={stroke} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
}
|
|
|
|
/*
|
|
* SVG elements for the front
|
|
*/
|
|
export const Front = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="stitches"
|
|
{...dashed(stroke)}
|
|
{...thin(stroke)}
|
|
d="m 89.781282,52.489971 -7.71664,2.821724 M 2.6011443,52.489971 10.31778,55.311695 M 54.249734,2.3598183 c -0.204443,1.239508 -0.48405,2.404687 -0.847335,3.483883 -0.430155,1.27782 -1.44837,2.799669 -2.19258,3.408193 -1.337153,1.4138547 -3.059348,2.1133457 -5.146748,2.1633017 -2.267857,-0.08602 -2.867685,-0.444645 -4.733883,-1.7589427 -1.388312,-1.298447 -2.048197,-2.463013 -2.53512,-3.693634 -0.479289,-1.21136 -0.817037,-2.476159 -0.88236,-3.568775 M 29.640157,43.418409 c 0.604243,0.212821 1.474886,0.497086 2.543473,0.763486 1.943691,0.483694 3.479597,0.642938 4.830958,0.763487 3.537647,0.314027 6.813356,0.446484 9.027168,0.447227 2.21382,5.62e-4 5.489528,-0.1332 9.027173,-0.447227 1.351357,-0.120549 2.887267,-0.279793 4.83096,-0.763487 1.0671,-0.264915 1.93923,-0.549174 2.543475,-0.763486 M 53.521671,2.9939193 c -1.91724,1.931715 -5.394412,2.016967 -7.742325,2.083381 -2.347912,0.06642 -5.108676,-0.375328 -7.063206,-2.063452"
|
|
/>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
d="m 27.803352,32.213571 6.719839,-2.16773 -6.7523,1.985858 z m 36.623424,-0.1269 -6.719835,-2.16773 6.752295,1.985858 z m -11.091667,14.166158 1.395262,-14.54795 -1.627807,14.529342 z m -14.440089,0.1269 -1.395264,-14.54795 1.627807,14.529342 z"
|
|
/>
|
|
<path
|
|
key="outline"
|
|
d="m 65.547921,5.9539063 c 0.420818,0.187322 0.971843,0.440306 1.55541,0.950132 1.15785,1.009998 1.978568,2.155179 2.066925,2.413954 0.59286,1.7071467 8.839606,16.6878187 21.089976,44.3131047 l -7.71663,2.686254 -16.995681,-31.85518 M 26.639782,5.9539063 c -0.417977,0.187322 -0.916774,0.440306 -1.496402,0.950132 -1.150014,1.009998 -1.965184,2.155179 -2.052934,2.413954 C 22.501582,11.025139 14.310626,26.005811 2.1431213,53.631097 l 7.664439,2.686254 16.8322217,-31.85518 m 38.908139,0 -3.050977,20.143883 c -0.604245,0.214312 -1.476383,0.498577 -2.543475,0.763487 -1.9437,0.483694 -3.479603,0.642938 -4.83096,0.763493 -3.537645,0.314026 -6.813353,0.447969 -9.028665,0.447226 -2.215305,-5.62e-4 -5.491007,-0.1332 -9.028653,-0.447226 -1.351361,-0.120555 -2.887268,-0.279799 -4.830964,-0.763493 -1.068581,-0.2664 -1.93923,-0.55066 -2.543467,-0.763487 L 26.639782,24.462171 c 1.034297,-1.43757 1.762959,-2.726685 2.123927,-4.514771 1.102281,-5.460232 -0.567231,-8.637532 -2.123927,-13.9934937 l 11.913688,-3.81447 c 0.08335,0.616151 0.232172,1.500188 0.508995,2.543473 0.335695,1.218094 1.224422,3.122089 2.724936,4.444515 1.200645,1.0581407 2.893383,1.6937657 4.26433,1.6794787 1.609485,-0.02919 3.28776,-0.630321 4.55061,-1.8302177 1.146173,-1.089011 1.950218,-2.27655 2.522895,-4.293776 0.276818,-1.043285 0.425648,-1.927322 0.508988,-2.543473 l 11.913697,3.81447 c -1.5567,5.3559617 -3.226207,8.5332617 -2.123932,13.9934937 0.360967,1.788086 1.08963,3.077201 2.123932,4.514771 M 53.634224,2.1394363 c -2.793713,2.105724 -4.118385,2.164404 -7.543845,2.249066 -3.425456,0.08466 -5.201291,-0.447255 -7.536909,-2.249066"
|
|
/>
|
|
</>
|
|
)
|
|
|
|
/*
|
|
* SVG elements for the back
|
|
*/
|
|
const Back = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="outline"
|
|
d="m 157.53711,5.8287953 c 0.42082,0.187322 0.97185,0.440305 1.55541,0.950131 1.15785,1.009999 1.97857,2.155179 2.06693,2.413955 0.59287,1.7071467 8.8396,16.6878187 21.08998,44.3131047 L 174.5328,56.19224 157.53711,24.33706 M 117.99645,5.8303753 c -0.41798,0.187323 -0.91677,0.440306 -1.4964,0.950132 -1.15002,1.009998 -1.96518,2.155179 -2.05293,2.413955 -0.58887,1.7071467 -8.77983,16.6878187 -20.947328,44.3131047 l 7.664438,2.686253 16.83222,-31.855179 M 137.88417,4.3772973 c -3.42546,0.08466 -5.2013,-0.447261 -7.53692,-2.249066 l -12.3508,3.702144 c 1.5567,5.3559677 3.2262,8.5332617 2.12392,13.9934997 -0.36097,1.788086 -1.08963,3.077196 -2.12392,4.514766 l 3.17748,20.524886 c 0.83196,0.180084 1.67879,0.351237 2.54348,0.508995 4.96788,0.907847 9.66192,1.265034 14.04937,1.263454 4.38745,-0.0016 9.08149,-0.35878 14.04938,-1.265141 0.8632,-0.157759 1.71152,-0.32742 2.54347,-0.50899 l 3.17748,-20.524785 c -1.03429,-1.437474 -1.76295,-2.726589 -2.12392,-4.514675 -1.10228,-5.460233 0.56722,-8.637533 2.12392,-13.9935957 L 145.428,2.1281353 c -2.79371,2.10582 -4.11837,2.1645 -7.54383,2.249162 z"
|
|
/>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
d="m 145.7152,46.256115 0.78928,-14.900416 -1.06224,14.921537 z m -16.23166,-0.04655 -0.78927,-14.900416 1.06224,14.933058 z"
|
|
/>
|
|
<path
|
|
key="stitches"
|
|
{...dashed(stroke)}
|
|
{...thin(stroke)}
|
|
d="m 181.77048,52.496955 -7.71664,2.821723 m -80.09602,-2.820144 7.71664,2.821724 m 19.50096,-11.516747 c 0.83195,0.180079 1.67878,0.351237 2.54348,0.50899 4.96788,0.907853 9.66191,1.26504 14.04863,1.264303 4.3867,-5.63e-4 9.08074,-0.357935 14.04863,-1.264303 0.8632,-0.157753 1.71152,-0.32742 2.54347,-0.50899 M 146.1154,2.5194944 c -1.28696,1.1513865 -2.87417,2.0662477 -4.53859,2.4285315 -1.3774,0.2998185 -2.81017,0.197685 -3.92503,0.227475 -1.11485,0.029813 -2.78576,-0.05655 -4.11326,-0.4222913 -1.6137,-0.4445715 -2.87708,-1.2579352 -3.94943,-2.18412"
|
|
/>
|
|
</>
|
|
)
|