121 lines
3.8 KiB
JavaScript
121 lines
3.8 KiB
JavaScript
import React from 'react'
|
|
import { LineDrawingWrapper, regular } 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 = 1.3
|
|
|
|
/**
|
|
* A linedrawing component for Hi
|
|
*
|
|
* @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 Hi = ({ className, stroke = 1 }) => (
|
|
<LineDrawingWrapper viewBox="0 -40 228 228" {...{ className }}>
|
|
<Front stroke={stroke * strokeScale} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
|
|
/**
|
|
* A linedrawing component for the front of Hi
|
|
*
|
|
* @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 HiFront = Hi
|
|
|
|
/*
|
|
* SVG elements for the front
|
|
*/
|
|
const Front = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
{...regular(stroke)}
|
|
d="m 109.14,106.83
|
|
c 0,0 36.32,8.99 40.28,9.11
|
|
|
|
m 32.2,-78.22
|
|
c 0,0 17.66,3.97 24.63,14.26 6.97,10.29 11.34,19.04 11.1,33.54 -0.24,14.5 -0.97,11.42 -0.97,11.42
|
|
|
|
M 176.99,77.26
|
|
c 0,0 32.25,-6 38.48,-4.29 0,0 3.4,-2.19 6.56,-2.67
|
|
|
|
m -110.19,33.79
|
|
c 0,0 15.39,-2.67 17.34,-2.51 1.94,0.16 9.24,3.89 13.77,3.4 4.54,-0.49 25.93,3.97 40.92,0.49 14.99,-3.48 27.55,-5.83 28.11,-5.83
|
|
|
|
m -94.79,18.96
|
|
c 0,0 -4.94,-1.13 -8.75,-12.15
|
|
|
|
m -65.63,24.14
|
|
c 0,0 26.74,-10.94 34.03,-14.34 7.29,-3.4 32.81,-8.26 35.41,-12.4
|
|
|
|
m -3.06,-10.98 2.29,9.68
|
|
|
|
m 2.92,-9.68 1.72,9.62
|
|
|
|
m 10.14,-19.13 4.53,18.45
|
|
|
|
m -8.82,-15.24 3.32,15.07
|
|
|
|
m -6.7,-12.89 2.46,13.75"
|
|
/>
|
|
<path
|
|
key="outline"
|
|
{...regular(stroke)}
|
|
d="m 158.93,97.78
|
|
a 4.83,3.82 15.24 0 1 -5.66,2.42 4.83,3.82 15.24 0 1 -3.65,-4.96 4.83,3.82 15.24 0 1 5.66,-2.42 4.83,3.82 15.24 0 1 3.65,4.96
|
|
z
|
|
|
|
m -54.36,18.61
|
|
c 0,0 50.14,11.34 59.06,9.24 8.91,-2.11 12.32,-1.3 18.31,-5.02 -11.34,0.81 -33.15,-4.82 -33.15,-4.82 13.98,0.3 43.3,-0.96 43.3,-0.96 0,0 3.53,0.69 9.29,-3.68 0,0 11.13,-13.43 17.35,-14.81 0,0 5.07,-16.12 3.53,-25.94 -1.54,-9.83 -2.77,-10.04 -6.14,-16.27 -4.82,-8.93 -12.13,-10.75 -12.59,-11.51 -0.46,-0.77 -24.41,-7.68 -49.43,-7.37 -25.02,0.31 -27.48,-3.07 -27.48,-3.07 -0.07,0 -1.63,-11.94 -7.06,-20.61 -4.58,-7.3 -7.53,-6.24 -9.82,-5.15 -1.03,0.49 -1.44,2.72 -1.44,2.72 0,0 -1.13,16.29 -3.65,20.5 -2.51,4.21 -5.72,13.37 -4.36,19.26 -10.84,7.8 -20.65,15.37 -20.65,15.37 0,0 -0.96,-0.03 -4.12,-3.31 -3.16,-3.28 -4.58,4.13 -4.58,4.13 0,0 -4.9,10.37 -8.79,11.99 -3.89,1.62 -7.72,1.82 -7.72,1.82 0,0 -2.12,-3.61 -3.04,-10.89 -0.92,-7.28 -7.33,-4.07 -10.03,1.83
|
|
C 38.67,75.73 38.44,80.65 28.25,85.87 18.05,91.08 8.94,93.66 8.94,93.66
|
|
c 0,0 -8.08,4.3 0.92,6.76 0,0 17.47,-2.98 21.54,-2.86 4.07,0.11 15.64,-0.57 17.19,-2.41 0,0 9.57,5.5 22.34,7.39
|
|
|
|
m 17.36,-9.05
|
|
c 0,0 -23.26,11 -29.1,16.96 0,0 -15.01,13.64 -15.35,15.58 -0.34,1.95 -4.24,9.28 6.65,8.02 10.89,-1.26 49.04,-13.98 58.09,-19.82
|
|
|
|
m 66.31,4.38 0.43,1.83
|
|
|
|
m -3.98,-0.52 1,-1.52
|
|
|
|
m -3.18,-0.32 0.49,1.55
|
|
|
|
m -5.76,-0.57 1.75,-1.78
|
|
|
|
m 21.11,-2.06
|
|
c 0.01,0 3.3,7.1 6.16,-0.24 0.33,-0.09 4.44,5.24 4.61,-1.01
|
|
|
|
m -21.58,6.46
|
|
c 0.04,0.01 4.16,-5.32 4.33,0.93
|
|
|
|
m -1.66,-6
|
|
c 0,0 3.21,6.7 6,-0.23
|
|
|
|
m -13.14,0.76
|
|
c 0,0 1.6,6.87 5.79,-0.29
|
|
|
|
m -12.12,0.08
|
|
c 0,0 1.6,6.87 5.79,-0.29
|
|
|
|
m 32.62,-6.57
|
|
c 0.29,-0.35 3.7,2.08 2.36,-2.21
|
|
|
|
m -4.6,4.96
|
|
c 0.27,-0.21 4.4,1.64 2.46,-2.82
|
|
|
|
m -5.95,4.51
|
|
c 0.23,-0.18 4.59,3.35 3.58,-1.85"
|
|
/>
|
|
</>
|
|
)
|