eq.jq

def rotate_point($center; $ang):
    ($ang / 180 * 3.1415926) as $ang
    | (.x - $center.x) as $dx
    | (.y - $center.y) as $dy
    | ($dx * ($ang | cos) - $dy * ($ang | sin)) as $o_dx
    | ($dx * ($ang | sin) + $dy * ($ang | cos)) as $o_dy
    | .x |= ($o_dx + $center.x)
    | .y |= ($o_dy + $center.y);

def key($w; $h; $c_x; $c_y): {x: 0, y: 0, w: $w, h: $h, c_x: $c_x, c_y: $c_y, ang: 0};

def move_key($x; $y): (.x |= . + $x) | (.y |= . + $y);
def move($x; $y): walk(if type == "object" then move_key($x; $y) else . end);
def rotate_key($center; $ang): (.ang |= . + $ang) | rotate_point($center; $ang);
def rotate($center; $ang): walk(if type == "object" then rotate_key($center; $ang) else . end);

def column: [move(0; .h), ., move(0; -.h)];

def enumerate: [[range(length)], .] | transpose;
def thumbs($stag):
    . as $key
    | $stag | enumerate | map(. as $in | $key | move($key.w * $in[0]; $in[1]));
def alpha_columns($stag):
    . as $key
    | $stag | enumerate | map(. as $in | $key | column | move($key.w * $in[0]; $in[1]));

def key_to_svg:
    (.x + .c_x) as $c_x
    | (.y + .c_y) as $c_y
    | "<g transform=\"rotate(\(.ang) \($c_x) \($c_y))\">"
    + "<rect width=\"\(.w - 0.5)\" height=\"\(.h - 0.5)\" x=\"\(.x)\" y=\"\(.y)\" cx=\"1\" fill=\"#333\"/>"
    + "<circle r=\"1\" cx=\"\($c_x)\" cy=\"\($c_y)\" fill=\"#1eb6a7\"/>"
    + "</g>";
def draw_keys: walk(if type == "array" then add elif type == "object" then key_to_svg else . end);
def to_svg:
    move(0; 100)
    | "<svg viewBox=\"0 0 300 200\" xmlns=\"http://www.w3.org/2000/svg\">"
    + draw_keys
        + "<g transform=\"scale(-1,1)\">"
        + (move(-225; 0) | draw_keys)
        + "</g>"
    + "</svg>";

test.jq

include "eq";

key(18; 15; 9; 7.5) as $normal_key
| key(16.5; 15; 9; 7.5) as $narrow_key
| key(15; 18; 7.5; 9) as $thumb_key

| $normal_key | alpha_columns([20, 20, 0, -7, 0, 0])
| (.[-2][1] | {x, y}) as $index_home
| . + ($thumb_key | move($index_home.x; $index_home.y) | move(13.5 - $thumb_key.w; 34.5) | thumbs([-2, 0, 3]))
| rotate({x: 0, y: 0}; 15)

| to_svg