1
0
Fork 0

wip: More work on line drawings

This commit is contained in:
joostdecock 2024-12-27 10:18:25 +01:00
parent c8808695e5
commit 9f2da8b926
15 changed files with 263 additions and 275 deletions

View file

@ -1,38 +1,27 @@
import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
const strokeScale = 0.6
export const Lunetius = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
<LineDrawingWrapper viewBox="0 0 152 294" {...{ className, stroke }}>
<Front stroke={stroke} />
</LineDrawingWrapper>
)
}
/*
* React component for the front
* This strokeScale factor is used to normalize the stroke across
* designs so we have a consistent look when showing our collection
*/
export const LunetiusFront = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
const strokeScale = 1.2
return (
<LineDrawingWrapper viewBox="0 0 152 294" {...{ className, stroke }}>
<Front stroke={stroke} />
</LineDrawingWrapper>
)
}
/**
* A linedrawing component for Lunetius
*
* @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 Lunetius = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-60 0 294 294" {...{ className }}>
<Front stroke={stroke * strokeScale} />
</LineDrawingWrapper>
)
// Front is the same
export const LunetiusFront = Lunetius
/*
* SVG elements for the front