This commit is contained in:
ntr
2019-05-28 17:46:35 +10:00
parent a2b1e2d3ff
commit e55705a841
6 changed files with 36 additions and 95 deletions
+20 -7
View File
@@ -1,14 +1,27 @@
const preact = require('preact');
module.exports = function triangle(classes) {
module.exports = function square(colours) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 199.33 199.99" style="enable-background:new 0 0 199.33 199.99;" className={classes} >
<rect x="1.47" y="1.47" class="st0" width="196.39" height="197.05"/>
<rect x="21.63" y="22.22" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 199.6583 0.3317)" class="st0" width="156.07" height="155.55"/>
<rect x="42.12" y="42.64" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 199.6583 0.3317)" class="st0" width="115.09" height="114.71"/>
<rect x="62.61" y="63.06" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 199.6583 0.3317)" class="st0" width="74.11" height="73.86"/>
<rect x="83.1" y="83.48" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 199.6578 0.3322)" class="st0" width="33.13" height="33.02"/>
viewBox="0 0 199.33 199.99" style="enable-background:new 0 0 199.33 199.99;" >
<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="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
<rect clip-path="url(#firstColour)" x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
<rect clip-path="url(#firstColour)" x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
<rect clip-path="url(#firstColour)" x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
<rect clip-path="url(#firstColour)" x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>
<rect clip-path="url(#secondColour)" x="1.47" y="1.47" class={colours[1]} width="196.39" height="197.05"/>
<rect clip-path="url(#secondColour)" x="21.63" y="22.22" class={colours[1]} width="156.07" height="155.55"/>
<rect clip-path="url(#secondColour)" x="42.12" y="42.64" class={colours[1]} width="115.09" height="114.71"/>
<rect clip-path="url(#secondColour)" x="62.61" y="63.06" class={colours[1]} width="74.11" height="73.86"/>
<rect clip-path="url(#secondColour)" x="83.1" y="83.48" class={colours[1]} width="33.13" height="33.02"/>
</svg>
);
}