35 lines
1.6 KiB
JavaScript
35 lines
1.6 KiB
JavaScript
const preact = require('preact');
|
|
|
|
module.exports = function square(colours) {
|
|
if (colours.length === 1) {
|
|
return (
|
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
viewBox="0 0 200 200" >
|
|
<rect x="10" y="10" class={colours[0]} width="180" height="180"/>
|
|
<rect x="40" y="40" class={colours[0]} width="120" height="120"/>
|
|
<rect x="70" y="70" class={colours[0]} width="60" height="60"/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
viewBox="0 0 200 200" >
|
|
<clipPath id="firstColour">
|
|
<rect x="0" y="0" width="100" height="200" />
|
|
</clipPath>
|
|
<clipPath id="secondColour">
|
|
<rect x="100" y="0" width="100" height="200" />
|
|
</clipPath>
|
|
|
|
<rect clip-path="url(#firstColour)" x="10" y="10" class={colours[0]} width="180" height="180"/>
|
|
<rect clip-path="url(#firstColour)" x="40" y="40" class={colours[0]} width="120" height="120"/>
|
|
<rect clip-path="url(#firstColour)" x="70" y="70" class={colours[0]} width="60" height="60"/>
|
|
|
|
<rect clip-path="url(#secondColour)" x="10" y="10" class={colours[1]} width="180" height="180"/>
|
|
<rect clip-path="url(#secondColour)" x="40" y="40" class={colours[1]} width="120" height="120"/>
|
|
<rect clip-path="url(#secondColour)" x="70" y="70" class={colours[1]} width="60" height="60"/>
|
|
</svg>
|
|
);
|
|
}
|