summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html46
1 files changed, 30 insertions, 16 deletions
diff --git a/index.html b/index.html
index 31a4240..0e78684 100644
--- a/index.html
+++ b/index.html
@@ -12,17 +12,17 @@ svg {
transform: none;
transform-origin: 50% 50%;
}
-.pointer .plate path {
- stroke: none;
- stroke-width: none;
-}
.pointer path, .pointer circle {
stroke: black;
stroke-width: 1px;
}
-.pointer circle {
- fill: transparent;
+.pointer circle { fill: transparent; }
+.plate text { font: 5px serif; }
+.plate textPath {
+ dominant-baseline: central;
+ text-anchor: middle;
}
+.plate path { fill: none; }
</style>
<script>
let dragging = null;
@@ -62,37 +62,51 @@ function onmove(event) {
function change(query, ratio) {
svg.querySelector(query).dataset.ratio = ratio;
}
-function newSegment(radius, n) {
- let g = document.createElementNS("http://www.w3.org/2000/svg", "g");
- let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
- const outerRadius = radius + 10;
+function newSegment(radius, n, letter, colour) {
+ const ns = "http://www.w3.org/2000/svg";
+ let g = document.createElementNS(ns, "g");
+ let segment = document.createElementNS(ns, "path");
+ let path = document.createElementNS(ns, "path");
+ let text = document.createElementNS(ns, "text");
+ let textPath = document.createElementNS(ns, "textPath");
+ const thickness = 10;
+ const outerRadius = radius + thickness;
const left = width(radius);
const right = width(outerRadius);
- path.setAttribute("d", `M${left} ${-height(radius)}
+ segment.setAttribute("d", `M${left} ${-height(radius)}
A${radius} ${radius} 0 0 1 ${left} ${height(radius)}
L${right} ${height(outerRadius)}
A${outerRadius} ${outerRadius} 0 0 0 ${right} ${-height(outerRadius)}
Z`);
+ segment.style.fill = colour;
+ const centerRadius = radius + thickness/2;
+ const center = width(centerRadius);
+ path.setAttribute("d", `M${center} 0 A${centerRadius} ${centerRadius} 0 0 1 ${center} ${height(radius)}`);
+ path.id = crypto.randomUUID();
+ textPath.setAttribute("href", `#${path.id}`);
g.classList.add("plate");
+ g.appendChild(segment);
g.appendChild(path);
+ g.appendChild(text);
+ text.appendChild(textPath);
+ textPath.appendChild(document.createTextNode(letter));
return g;
function width(radius) { return Math.cos(Math.PI / n) * radius; }
function height(radius) { return Math.sin(Math.PI / n) * radius; }
}
-function generatePlate(svg, radius, segments) {
+function generatePlate(svg, radius, segments, alphabet) {
const colours = ["#edd", "#ded", "#dde"];
for (let i=0; i < segments; i++) {
- let segment = newSegment(radius, segments);
+ let segment = newSegment(radius, segments, alphabet[i], colours[i%3]);
segment.style.transform = `rotate(${i * 360 / segments}deg) translate(50%, 50%)`;
- segment.style.fill = colours[i%3];
svg.prepend(segment);
}
}
function init(element) {
svg = element;
- generatePlate(svg, 20, 26);
- generatePlate(svg, 30, 27);
+ generatePlate(svg, 20, 26, "VWXYZABCDEFGHIJKLMNOPQRSTU");
+ generatePlate(svg, 30, 27, " ABCDEFGHIJKLMNOPQRSTUVWXYZ");
}
</script>
<svg onload="init(this)" onmousemove="onmove(event)" onmouseleave="stop()" onmouseup="stop()" viewBox="0 0 100 100">