ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

whew

Browse Source
This commit is contained in:
ntr
2019-05-28 18:29:22 +10:00
parent e55705a841
commit f277a5714d
11 changed files with 163 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/svgs/circle.jsx
+35 -17
View File
@@ -1,20 +1,38 @@
const preact = require('preact');
module.exports = function triangle(classes) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 198.13 199.94" style="enable-background:new 0 0 198.13 199.94;" className={classes} >
<g>
<ellipse class="st2" cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
<path class="st2" d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38
S141.34,177.35,99.07,177.35z"/>
<path class="st2" d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26
S129.81,156.23,99.07,156.23z"/>
<path class="st2" d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15
S118.27,135.11,99.07,135.11z"/>
<path class="st2" d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"
/>
</g>
</svg>
);
module.exports = function circle(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 198.13 199.94" >
<ellipse class={colours[0]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
<path class={colours[0]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
<path class={colours[0]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
<path class={colours[0]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
<path class={colours[0]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
</svg>
);
}
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 198.13 199.94" >
<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>
<ellipse clip-path="url(#firstColour)" class={colours[0]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
<path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
<ellipse clip-path="url(#secondColour)" class={colours[1]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
<path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
</svg>
);
};
client/src/components/svgs/square.jsx
+14 -1
View File
@@ -1,9 +1,22 @@
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 199.33 199.99" >
<rect x="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
<rect x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
<rect x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
<rect x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
<rect x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>
</svg>
);
}
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;" >
viewBox="0 0 199.33 199.99" >
<clipPath id="firstColour">
<rect x="0" y="0" width="100" height="200" />
</clipPath>
client/src/components/svgs/triangle.jsx
+33 -11
View File
@@ -1,16 +1,38 @@
const preact = require('preact');
module.exports = function triangle(classes) {
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" style="enable-background:new 0 0 202.69 177.29;" className={classes}>
<g>
<polygon class="st1" points="1.77,176.25 100.7,2.08 200.9,176.25 "/>
<polygon class="st1" points="23.99,163.23 100.78,28.05 178.54,163.23 "/>
<polygon class="st1" points="46.21,150.21 100.85,54.03 156.18,150.21 "/>
<polygon class="st1" points="68.43,137.19 100.92,80 133.82,137.19 "/>
<polygon class="st1" points="90.65,124.17 100.99,105.98 111.46,124.17 "/>
</g>
<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>
);
}
};