The mark on the menu bar was a solid triangle in a ring, which is the seed drawing with its middle filled in. The seed is a delta: the triangle is stroked at the same weight as the circle around it, and a fourth stroke cuts up the inside of it, so what reads at a glance is a ring, a triangle and a slot -- and at fourteen units none of that is decoration, it is the only thing telling this apart from a road sign. Transcribed rather than eyeballed. The seed is a 24-unit box with a 9-radius circle stroked at 2, so every coordinate here is that drawing divided by its own outer diameter of 20 and scaled back up by the ring's, and the single stroke weight -- a tenth of the outer diameter -- is the circle's and the delta's alike, as it is there. Measured back off the rendered pixels against the seed at the same size: ring 0.833 of the box against 0.833, delta 0.417 against 0.417, ink area 0.0937 against 0.0938, sitting 0.043 above centre in both. Still geometry rather than an asset, and still painted after the threshold in two flat colours -- the ring in the theme's ink, the delta in one of its piece colours. An SVG would have to be rasterised and recoloured per theme to end up in the same place. lineJoin and lineCap were already set to round and were doing nothing at all under a fill. They are load-bearing now: three heavy strokes meeting at sharp angles are a spike at each corner under a mitre, and the seed's corners are round.
- commit
- 85f4bddbf0a8e04973965f83de49cd863bdc4a41
- parent
- e7033102a10a04bccffb8b2eb38d1a2401d9c4fe
- author
- Dami <dami.etoile@gmail.com>
| M | mockup/ | 58 | +++++++++++++++++++++--------- |
@@ -943,42 +943,64 @@ const trophy = (x, y, size) => decals.push({ kind: 'cup', x, y, size, clip: acti
943943 const goldLine = (x1, y1, x2, y2) =>944944 decals.push({ kind: 'line', x1, y1, x2, y2, clip: activeClip });945945 946-/* The dev-logo: a ring around a triangle.946+/* The dev-logo: a delta in a ring.947947 *948948 * Queued as a decal for the same reason the trophy is, and then for one more.949949 * The trophy is painted after the threshold because it is gold and the board is950950 * one bit; this is painted after the threshold because it is a *mark* -- two951- * flat colours, a ring in ink and a triangle in one of the theme's piece952- * colours, and no texture at all. Shading it would put the house pattern953- * through a shape whose whole job is to be constant, and at fourteen pixels a954- * screen of any ruling turns a ring into four dots.951+ * flat colours, a ring in ink and a delta in one of the theme's piece colours,952+ * and no texture at all. Shading it would put the house pattern through a shape953+ * whose whole job is to be constant, and at fourteen pixels a screen of any954+ * ruling turns a ring into four dots.955955 *956- * Drawn from geometry rather than carried as an asset: it is a circle and a957- * triangle, the renderer has no path anywhere else, and an SVG would have to be958- * rasterised and recoloured per theme to end up here anyway. */956+ * Drawn from geometry rather than carried as an asset: it is a circle and three957+ * lines, the renderer has no path anywhere else, and an SVG would have to be958+ * rasterised and recoloured per theme to end up here anyway. Which is also why959+ * the numbers below are the seed drawing's, transcribed rather than eyeballed:960+ * the seed is a 24-unit box with a 9-radius circle stroked at 2, so every961+ * coordinate here is that drawing divided by its own outer diameter of 20 and962+ * multiplied back up by the ring's -- and the one stroke weight, a tenth of the963+ * outer diameter, is the circle's and the delta's alike, as it is there.964+ *965+ * The delta is stroked and not filled, which is the whole character of the966+ * mark. At this weight on a shape this size the outline very nearly fills967+ * itself, so what is left of the middle is a slot rather than a hole -- and the968+ * short inner stroke, the one that makes it a delta rather than a triangle,969+ * cuts that slot off-centre. A solid triangle was the earlier reading of it and970+ * it lost exactly that: the same silhouette with nothing inside. */959971 const devLogo = (cx, cy, size, ink) =>960972 decals.push({ kind: 'logo', x: cx, y: cy, size, ink, clip: activeClip });961973 962974 function paintDevLogo(c, d) {963975 const r = d.size / 2;964976 c.save();977+ // Load-bearing now that the delta is a stroke: three heavy segments meeting978+ // at sharp angles are a spike at each corner under a mitre, and the seed's979+ // corners are round.965980 c.lineJoin = 'round';966981 c.lineCap = 'round';982+ c.lineWidth = Math.max(1, d.size * 0.10);967983 968- // The triangle first, solid, so the ring reads as enclosing it rather than969- // as being crossed by it.970- c.fillStyle = d.ink;984+ // The ring, and then the delta inside it: the ring is the enclosure, so it is985+ // laid down first and the mark sits within it rather than across it.986+ c.strokeStyle = INK_CSS;971987 c.beginPath();972- c.moveTo(d.x, d.y - r * 0.46);973- c.lineTo(d.x + r * 0.44, d.y + r * 0.42);974- c.lineTo(d.x - r * 0.44, d.y + r * 0.42);988+ c.arc(d.x, d.y, r - c.lineWidth / 2, 0, Math.PI * 2);989+ c.stroke();990+991+ c.strokeStyle = d.ink;992+ c.beginPath();993+ c.moveTo(d.x, d.y - r * 0.5); // apex (12,7)994+ c.lineTo(d.x + r * 0.4, d.y + r * 0.3); // foot right (16,15)995+ c.lineTo(d.x - r * 0.4, d.y + r * 0.3); // foot left (8,15)975996 c.closePath();976- c.fill();997+ c.stroke();977998 978- c.strokeStyle = INK_CSS;979- c.lineWidth = Math.max(1, d.size * 0.10);999+ // The stroke that makes it a delta: up from just inside the right foot,1000+ // stopping short of the apex.9801001 c.beginPath();981- c.arc(d.x, d.y, r - c.lineWidth / 2, 0, Math.PI * 2);1002+ c.moveTo(d.x + r * 0.3, d.y + r * 0.3); // (15,15)1003+ c.lineTo(d.x - r * 0.05, d.y - r * 0.4); // (11.5,8)9821004 c.stroke();9831005 c.restore();9841006 }