100 lines
10 KiB
JavaScript
100 lines
10 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 Aaron
|
|
*
|
|
* @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 Aaron = ({ className, stroke = 1 }) => (
|
|
<LineDrawingWrapper viewBox="-2 -15 152 152" {...{ stroke, className }}>
|
|
<Front stroke={stroke * strokeScale} />
|
|
<Back stroke={stroke * strokeScale} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
|
|
/**
|
|
* A linedrawing component for the front of Aaron
|
|
*
|
|
* @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 AaronFront = ({ className, stroke = 1 }) => (
|
|
<LineDrawingWrapper viewBox="-23 0 119 119" {...{ className }}>
|
|
<Front stroke={stroke * strokeScale} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
|
|
/**
|
|
* A linedrawing component for the front of Aaron
|
|
*
|
|
* @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 AaronBack = ({ className, stroke = 1 }) => (
|
|
<LineDrawingWrapper viewBox="51 0 119 119" {...{ className }}>
|
|
<Back stroke={stroke * strokeScale} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
|
|
/*
|
|
* SVG elements for the front
|
|
*/
|
|
const Front = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="stitches"
|
|
{...dashed(stroke)}
|
|
{...thin(stroke)}
|
|
d="m2.6292 110.88c0.63236 0.09 2.8764 0.43138 3.514 0.51605 10.485 1.4129 20.582 1.9817 30.207 1.9182h1.6774c9.6256 0.0635 19.719-0.50536 30.207-1.9182 1.0372-0.14023 2.069-0.28575 3.093-0.43921m-9.9665-107.51c-0.20109 1.8706-0.62209 5.9021-0.86022 8.63-0.46831 5.3208-0.5371 7.4242-0.55827 8.1518-0.12964 4.5614-0.17992 6.9003 0.55827 9.6811 0.4789 1.8018 1.053 3.8814 2.7861 6.1145 0.36248 0.46567 2.196 2.7728 5.5748 4.5852 0.75407 0.40481 1.8246 0.91658 2.4693 1.1012m-58.791-38.15c0.20109 1.8706 0.62209 5.7878 0.86022 8.5157 0.46831 5.3208 0.5371 7.4242 0.55827 8.1518 0.12964 4.5614 0.17991 6.9003-0.55827 9.6811-0.4789 1.8018-1.053 3.8814-2.7861 6.1145-0.36247 0.46567-2.196 2.7728-5.5748 4.5852-0.75406 0.40481-1.9396 0.90647-2.4873 1.1234m0.11863 70.162c0.63235 0.09 2.7735 0.37423 3.4111 0.45889 10.485 1.4129 20.582 1.9817 30.207 1.9182h1.6775c9.6255 0.0635 19.719-0.50535 30.207-1.9182 1.0372-0.14023 2.069-0.28575 3.093-0.4392m-15.352-109.64c-0.65352 4.5191-2.724 14.228-2.8802 14.77-0.0979 0.33602-0.12965 0.59531-0.30956 0.87842-0.25136 0.39952-0.58738 0.61912-0.77259 0.73289-9.0341 4.359-22.81 4.5807-30.194 0-0.1852-0.11641-0.52122-0.33337-0.77258-0.73289-0.17992-0.28575-0.21167-0.5424-0.30956-0.87842-0.17727-0.60589-2.659-12.398-2.995-14.716m36.052 2.1867c-9.6445 4.951-24.147 4.747-33.635 0"
|
|
/>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
d="m4.3282 54.821c0.10055 1.487 0.17728 2.9792 0.19844 4.4688 0.0185 1.4896-8e-3 2.9818-0.0926 4.4741-0.0953 1.4922-0.24342 2.9792-0.47361 4.4556-0.22489 1.4764-0.52916 2.9395-0.91281 4.3815 0.18256-1.4817 0.34925-2.958 0.50271-4.4344 0.14552-1.4764 0.27252-2.9554 0.35719-4.4344 0.0953-1.479 0.14552-2.9633 0.20902-4.4503l0.082-2.2304c0.045-0.74083 0.0714-1.487 0.12964-2.2304zm1.8494 50.21c4.7837-0.42069 9.652-0.26194 14.38 0.73025 2.3627 0.46831 4.6964 1.0345 7.0458 1.5134 2.3495 0.48948 4.7069 0.93398 7.0697 1.3652 2.3574 0.44714 4.7202 0.84402 7.1014 1.1139 2.3866 0.28046 4.7678 0.54769 7.1596 0.67469 2.3892 0.12965 4.789 0.0714 7.1755-0.15081 2.3892-0.20638 4.7598-0.59531 7.1067-1.1218-2.3151 0.64293-4.6884 1.0848-7.0776 1.3811-2.3918 0.27517-4.8075 0.381-7.2205 0.29898-2.413-0.0635-4.8075-0.34925-7.1967-0.60325-2.3945-0.25665-4.7784-0.64029-7.1438-1.0742-2.3627-0.44714-4.7228-0.90752-7.075-1.4155-2.3522-0.50535-4.6937-1.0583-7.03-1.5875-1.1695-0.25665-2.3442-0.48683-3.5295-0.65881-1.1827-0.17463-2.376-0.28575-3.5719-0.37571-2.3892-0.17992-4.7943-0.19579-7.194-0.09zm6.1172-19.913c1.7648-0.69585 3.5745-1.2859 5.4001-1.8098 1.8309-0.51329 3.6909-0.92604 5.5668-1.2515 1.8732-0.33602 3.7624-0.55827 5.6409-0.80433l5.6436-0.73554c3.7624-0.48684 7.538-0.87578 11.202-1.8045 1.8388-0.43921 3.6592-0.96573 5.4557-1.5663 0.89959-0.29633 1.7939-0.60854 2.6802-0.94191 0.88636-0.33602 1.7674-0.68527 2.6458-1.0451-1.7066 0.8308-3.4634 1.561-5.2414 2.2304-1.7859 0.65088-3.601 1.225-5.4398 1.7145-0.92075 0.24606-1.8442 0.47096-2.7808 0.65881-0.93663 0.18786-1.8759 0.34396-2.8152 0.48684-1.8785 0.28575-3.7597 0.5371-5.6409 0.78581l-5.6515 0.68792c-1.8838 0.22225-3.765 0.45772-5.6356 0.7276-1.8706 0.27517-3.728 0.64029-5.5642 1.1007-1.8415 0.4445-3.6618 0.9816-5.4663 1.5663zm-1.0663-12.306c0.62177 0.18521 1.2435 0.37306 1.86 0.56621 0.61912 0.1905 1.233 0.39158 1.86 0.55033 0.62442 0.17198 1.2435 0.3519 1.8732 0.50006 0.62706 0.15611 1.2515 0.3228 1.8838 0.45509 2.5188 0.5715 5.0615 1.0292 7.6226 1.3494 2.5612 0.32809 5.1356 0.52917 7.7179 0.61119 2.5823 0.0794 5.17 0.0582 7.7629-0.0503-2.5744 0.31221-5.17 0.47096-7.7682 0.46302-2.5982 3e-3 -5.1991-0.17727-7.7788-0.50006-2.5797-0.33338-5.1408-0.81492-7.6544-1.4737-0.62971-0.15611-1.2541-0.33602-1.8785-0.52123-0.62442-0.17727-1.2409-0.38365-1.8574-0.58473-0.61912-0.19579-1.2224-0.43656-1.8309-0.6641-0.60589-0.22755-1.2118-0.46303-1.8124-0.70115z"
|
|
/>
|
|
<path
|
|
key="outline"
|
|
d="m54.356 1.8383c-6.0877 5.9635-28.882 6.1419-34.769 0m18.224 114.83c9.6255 0.0635 19.719-0.50536 30.207-1.9182 1.1271-0.15081 2.2463-0.31221 3.3576-0.4789v-74.798c-0.50007-0.20903-1.1668-0.51859-1.9182-0.9578-2.9051-1.7066-4.482-3.8761-4.7942-4.3154-1.4896-2.1008-1.9844-4.0587-2.3971-5.7547-0.635-2.6167-0.59266-4.8154-0.47889-9.1096 0.0185-0.68527 0.0767-2.6644 0.47889-7.6729 0.26459-3.2835 0.52652-6.0034 0.71967-7.911l-8.6307-1.9182s-2.5453 13.29-2.7173 13.912c-0.09 0.32279-0.11642 0.56621-0.28046 0.83873-0.22754 0.381-0.53181 0.59002-0.6985 0.6985-6.8987 4.0814-21.715 3.6852-27.376 0-0.16668-0.11112-0.47095-0.3175-0.6985-0.6985-0.16139-0.27252-0.1905-0.51858-0.28045-0.83873-0.17198-0.62177-2.7173-13.912-2.7173-13.912l-8.6307 1.9182c0.19314 1.9076 0.45508 4.6276 0.71966 7.911 0.40217 5.0059 0.46038 6.985 0.4789 7.6729 0.11377 4.2942 0.1561 6.4929-0.4789 9.1096-0.41275 1.696-0.90752 3.6512-2.3971 5.7547-0.31221 0.43921-1.8891 2.6088-4.7942 4.3154-0.75142 0.44186-1.4182 0.74877-1.9182 0.9578v74.798c1.1112 0.16669 2.2304 0.32809 3.3576 0.4789 10.485 1.4129 20.582 1.9817 30.207 1.9182z"
|
|
/>
|
|
</>
|
|
)
|
|
|
|
/*
|
|
* SVG elements for the back
|
|
*/
|
|
const Back = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="outline"
|
|
d="m93.73 1.8383-8.6307 1.9182c0.19315 1.9076 0.45508 4.6276 0.71967 7.911 0.40216 5.0059 0.46037 6.985 0.47889 7.6729 0.11377 4.2942 0.15611 6.4929-0.47889 9.1096-0.41275 1.696-0.90752 3.6512-2.3971 5.7547-0.31221 0.43921-1.8891 2.6088-4.7942 4.3154-0.75141 0.44186-1.4182 0.74877-1.9182 0.9578v74.798c1.1112 0.16669 2.2304 0.32809 3.3576 0.4789 10.485 1.4129 20.582 1.9817 30.207 1.9182h1.6774c9.6255 0.0635 19.719-0.50536 30.207-1.9182 1.1271-0.15081 2.2463-0.31221 3.3576-0.4789v-74.798c-0.50006-0.20903-1.1668-0.51859-1.9182-0.9578-2.9051-1.7066-4.482-3.8761-4.7942-4.3154-1.4896-2.1008-1.9844-4.0587-2.3971-5.7547-0.635-2.6167-0.59267-4.8154-0.4789-9.1096 0.0185-0.68527 0.0767-2.6644 0.4789-7.6729 0.26458-3.2835 0.52652-6.0034 0.71967-7.911l-8.6307-1.9182c-6.0877 5.9635-28.879 6.1419-34.766 0z"
|
|
/>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
d="m140.01 65.37c-0.23548 1.6722-0.55033 3.3338-0.89693 4.99-0.36248 1.651-0.78052 3.2914-1.2409 4.9212-0.23548 0.81227-0.48154 1.6219-0.73819 2.4289-0.27516 0.79904-0.53181 1.606-0.8255 2.4024-0.29368 0.79375-0.57414 1.5928-0.89164 2.3786l-0.46567 1.1827-0.49212 1.1695c-1.3494 3.1062-2.8787 6.133-4.5879 9.054-0.86783 1.4526-1.7595 2.8919-2.7067 4.2916-0.95779 1.3917-1.9368 2.7728-2.9766 4.1037 0.94456-1.4023 1.8759-2.8072 2.7596-4.2439 0.89959-1.4261 1.7462-2.884 2.5691-4.3524 0.80433-1.479 1.6087-2.958 2.3521-4.4715 0.37307-0.75406 0.73025-1.5161 1.0874-2.2807 0.34131-0.76993 0.6985-1.5319 1.0186-2.3098 1.3467-3.085 2.5056-6.2521 3.511-9.4668 0.50535-1.606 0.96308-3.2306 1.3785-4.863 0.42862-1.6351 0.79375-3.2835 1.1456-4.9345zm-58.735-15.105c0.73025 2.4553 1.4843 4.9001 2.3098 7.3237 0.80963 2.4262 1.6695 4.8366 2.585 7.2258 1.8283 4.7784 3.8338 9.4853 6.0563 14.089 2.1828 4.6249 4.617 9.1255 7.1808 13.549 2.5797 4.4185 5.3419 8.7286 8.2391 12.951-1.5399-2.0452-3.0083-4.146-4.4556-6.26-1.4235-2.1299-2.7993-4.2942-4.1328-6.4823-0.65617-1.1007-1.3229-2.196-1.9447-3.3179l-0.94456-1.6748-0.91811-1.6907c-0.62177-1.1218-1.1933-2.2675-1.7912-3.4026-0.5715-1.1483-1.1589-2.2886-1.7066-3.4475-0.54504-1.1615-1.0954-2.3178-1.6087-3.4925-0.25929-0.58737-0.52916-1.1668-0.78052-1.7568l-0.75406-1.7701-0.37571-0.88371-1.0795-2.6749c-0.47096-1.1933-0.91546-2.3945-1.36-3.5957-0.87048-2.4104-1.6907-4.8392-2.45-7.2866-0.74877-2.4527-1.4526-4.916-2.069-7.403z"
|
|
/>
|
|
<path
|
|
key="stitches"
|
|
{...dashed(stroke)}
|
|
{...thin(stroke)}
|
|
d="m145.43 110.89c-0.63235 0.09-2.4763 0.41995-3.1139 0.50462-10.485 1.4129-20.582 1.9817-30.207 1.9182h-1.6775c-9.6255 0.0635-19.719-0.50536-30.207-1.9182-1.0372-0.14023-2.4462-0.41148-3.4702-0.56494m10.051-107.27c0.20109 1.8706 0.57637 5.7878 0.8145 8.5157 0.46831 5.3208 0.5371 7.4242 0.55827 8.1518 0.12964 4.5614 0.17991 6.9003-0.55827 9.6811-0.4789 1.8018-1.053 3.8814-2.7861 6.1145-0.36248 0.46567-2.196 2.7728-5.5748 4.5852-0.75406 0.40481-1.9701 0.9085-2.5178 1.1254m58.774-38.288c-0.20108 1.8706-0.55351 5.9021-0.79163 8.63-0.46832 5.3208-0.53711 7.4242-0.55827 8.1518-0.12965 4.5614-0.17992 6.9003 0.55827 9.6811 0.47889 1.8018 1.053 3.8814 2.7861 6.1145 0.36248 0.46567 2.196 2.7728 5.5748 4.5852 0.75406 0.40481 1.7796 0.77502 2.3273 0.99197m2.3e-4 70.236c-0.63236 0.09-2.3963 0.43138-3.0339 0.51604-10.485 1.4129-20.582 1.9817-30.207 1.9182h-1.6774c-9.6256 0.0635-19.719-0.50535-30.207-1.9182-1.0372-0.14023-2.4805-0.37719-3.5045-0.53064m53.025-109.57c-4.9848 7.6282-32.798 7.553-37.46 0.0313"
|
|
/>
|
|
</>
|
|
)
|