diff options
| -rw-r--r-- | index.html | 46 |
1 files changed, 30 insertions, 16 deletions
@@ -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"> |