39 lines
2.3 KiB
JavaScript
39 lines
2.3 KiB
JavaScript
const preact = require('preact');
|
|
|
|
module.exports = function triangle(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 202.69 177.29" >
|
|
<polygon class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
|
|
<polygon class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
|
|
<polygon class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
|
|
<polygon class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
|
|
<polygon class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 202.69 177.29" >
|
|
<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>
|
|
|
|
<polygon clip-path="url(#firstColour)" class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
|
|
<polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
|
|
<polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
|
|
<polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
|
|
<polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
|
|
|
|
<polygon clip-path="url(#secondColour)" class={colours[1]} points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
|
|
<polygon clip-path="url(#secondColour)" class={colours[1]} points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
|
|
<polygon clip-path="url(#secondColour)" class={colours[1]} points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
|
|
<polygon clip-path="url(#secondColour)" class={colours[1]} points="68.43,137.19 100.92,80 133.82,137.19 "/>
|
|
<polygon clip-path="url(#secondColour)" class={colours[1]} points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
|
|
</svg>
|
|
);
|
|
};
|