08. February 2024

The mystery of the Confucian Girl

We finished Season 1 of Girls’ High Mystery Class, which was fun. The mysteries were well-designed (though, I don’t think I actually solved any of them), and it was good times to watch the characters interacting. (The players play versions of themselves as if they were mystery-solving high school students.)

There was one small meta-mystery I did solve just now, though.

more

01. December 2023

Ultimate Bandcamp Fridays

Sadly, Now More Than Ever, every single Bandcamp Friday is possibly the last one, a last chance to conveniently maximize how much money you get to artists when you buy music.

So, today, here is what I picked up.

more

26. August 2023

A literal edge case

The other day, I was in an <svg>, trying to make the end of a line into a triangle, like that of a pencil.

I eventually realized that the most elegant way to do it was with a marker definition like this:

<svg width="100%" height="50">
  <title>Line with triangular point diagram</title>
  <defs>
    <marker
      id="pencil-point"
      viewBox="0 0 10 10"
      refX="0"
      refY="5"
      markerWidth="1"
      markerHeight="1"
      orient="auto-start-reverse"
    >
      <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke" />
    </marker>
  </defs>
  <line
    x1="40"
    x2="200"
    y1="25"
    y2="25"
    stroke="hsl(35, 80%, 60%)"
    stroke-width="20"
    marker-start="url(#pencil-point)"
  ></line>
</svg>
Line with triangular point diagram

If you just wanted to know how to cut a triangle into the end of a line efficiently, there’s no need to read further. Close the tab immediately.

The rest of this post is about a <clipPath> mystery that I encountered back when I was trying to do this the wrong way.

more