list => [
map { '<svg width="14" height="14" viewBox="-1 -1 10 10">'.$_.'</svg>' }
map {
- my @coords = map { $_ % 2 << 3, $_ >> 1 << 3 } split //; # x,y,
+ my @route = split //;
+ my @coords = map { $_ % 2 << 3, $_ >> 1 << 3 } @route; # x,y,
sprintf('<circle cx="%s" cy="%s" r="1"/>', @coords[0, 1]) . # start point
- sprintf('<path d="M%s"/>', "@coords")
+ sprintf('<path d="M%s"/>', join ' ', map {
+ my $pos = join(',', @coords[$_*2, $_*2 + 1]);
+ $_ > 1 && $route[$_] == $route[$_ - 2] ? 'Q4,4 '.$pos.'L' : # curve back
+ $pos
+ } 0 .. $#route)
}
# corners (0..3) clockwise from top-left in order
qw(