charge svg, space out randomly generated points

2019-06-19 14:01:34 +10:00
parent c4c3c415b9
commit ae481d54bf
3 changed files with 81 additions and 52 deletions
@@ -0,0 +1,42 @@
+const preact = require('preact');
+
+module.exports = function charge(x, y, height, colour) {
+    return (
+        <svg>
+            <polygon
+                points={`
+                    ${x},${y - height}
+                    ${x - 2 * height},${y + 2 * height}
+                    ${x + 2 * height},${y + 2 * height}
+                `}
+                stroke="#a52a2a"
+                stroke-width="2"
+                id="charge"
+            />
+            <polyline
+                points={`
+                    ${x + 2 * height},${y + 2 * height}
+                    ${x + 3.5 * height},${y + height}
+                    ${x},${y - 4 * height}
+                    ${x - 3.5 * height},${y + height}
+                    ${x - 2 * height},${y + 2 * height}
+                `}
+                stroke="#a52a2a"
+                stroke-width="2"
+                id="charge"
+            />
+            <polyline
+                points={`
+                    ${x + 3.5 * height},${y + height}
+                    ${x + 5 * height},${y}
+                    ${x},${y - 7 * height}
+                    ${x - 5 * height},${y}
+                    ${x - 3.5 * height},${y + height}
+                `}
+                stroke={colour}
+                stroke-width="2"
+                id="charge"
+            />
+        </svg>
+    );
+}