forked from phc/website
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
644 B
Plaintext
27 lines
644 B
Plaintext
---
|
|
type Props = {
|
|
color: string
|
|
}
|
|
|
|
const { color } = Astro.props
|
|
|
|
const patternId = 'zig-zag-' + color.slice(1)
|
|
---
|
|
|
|
<div class="zig-zag">
|
|
<svg
|
|
width="100%"
|
|
height="2rem"
|
|
viewBox="0 0 1 1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
preserveAspectRatio="xMinYMid meet"
|
|
>
|
|
<defs>
|
|
<pattern id={patternId} x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
|
|
<path fill={color} d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
|
|
</pattern>
|
|
</defs>
|
|
<rect fill={`url(#${patternId})`} x="0" y="0" width="1000" height="1"></rect>
|
|
</svg>
|
|
</div>
|