Icon_Factory.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.778534Z",
     "iopub.status.busy": "2023-10-02T20:04:23.777746Z",
     "iopub.status.idle": "2023-10-02T20:04:23.798405Z",
     "shell.execute_reply": "2023-10-02T20:04:23.797843Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.778497Z"
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "import base64\n",
    "import drawSvg as draw\n",
    "# import drawsvg as drawp\n",
    "from IPython.display import display, HTML\n",
    "from io import StringIO\n",
    "\n",
    "blue = \"rgb(83,160,227)\"\n",
    "trans = \"none\"\n",
    "\n",
    "class Icon:\n",
    "    def __init__(self, width, height, stroke, stroke_width):\n",
    "        self.width = width\n",
    "        self.height = height\n",
    "        self.stroke = stroke\n",
    "        self.stroke_width = stroke_width\n",
    "        self.d = draw.Drawing(width, height)\n",
    "        \n",
    "    def add_rect(self, x, y, w, h, fill=\"none\", stroke=None, stroke_width=None, opacity=1.0):\n",
    "        stroke = stroke or self.stroke\n",
    "        stroke_width = stroke_width or self.stroke_width\n",
    "        self.d.append(\n",
    "            draw.Rectangle(x, y, w, h, fill=fill, stroke=stroke, stroke_width=stroke_width, stroke_linejoin=\"round\", fill_opacity=opacity)\n",
    "        )\n",
    "        \n",
    "    def add_lines(self, *points, fill=\"none\", close=True, stroke=None, stroke_width=None, stroke_linejoin=\"round\", stroke_linecap=\"round\", opacity=1.0):\n",
    "        stroke = stroke or self.stroke\n",
    "        stroke_width = stroke_width or self.stroke_width\n",
    "        self.d.append(\n",
    "            draw.Lines(*points, close=close, fill=fill, stroke=stroke, stroke_width=stroke_width, stroke_linejoin=stroke_linejoin, stroke_linecap=stroke_linecap, fill_opacity=opacity)\n",
    "        )\n",
    "        \n",
    "    def add_arc(self, cx, cy, r, startDeg, endDeg, fill=\"none\", stroke=None, stroke_width=None):\n",
    "        stroke = stroke or self.stroke\n",
    "        stroke_width = stroke_width or self.stroke_width\n",
    "        self.d.append(\n",
    "            draw.Arc(cx, cy, r, startDeg, endDeg, cw=False, stroke=stroke, stroke_width=stroke_width, fill=fill, stroke_linecap=\"round\")\n",
    "        )\n",
    "\n",
    "    def add_ellipse(self, cx, cy, rx, ry, fill=\"none\", stroke=None, stroke_width=None):\n",
    "        stroke = stroke or self.stroke\n",
    "        stroke_width = stroke_width or self.stroke_width\n",
    "        self.d.append(\n",
    "            draw.Ellipse(cx, cy, rx, ry, fill=fill, stroke=stroke, stroke_width=stroke_width)\n",
    "        )\n",
    "\n",
    "    def add_text(self, text, fontsize, x, y, font_family=\"sans-serif\", font_weight=\"normal\", fill=\"none\"):\n",
    "        self.d.append(\n",
    "            draw.Text(text, fontsize, x, y, fill=fill, font_family=font_family, font_weight=font_weight)\n",
    "        )\n",
    "        \n",
    "    def as_svg(self, name, width, height):\n",
    "        outputFile = StringIO()\n",
    "        outputFile.write('''<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"{}\" height=\"{}\" viewBox=\"{} {} {} {}\">'''.format(\n",
    "                width, height, *self.d.viewBox))\n",
    "        outputFile.write('\\n')\n",
    "\n",
    "        isDuplicate = lambda x: False\n",
    "\n",
    "        for element in self.d.allElements():\n",
    "            element.writeSvgElement(name, isDuplicate, outputFile, False)\n",
    "            outputFile.write('\\n')\n",
    "        outputFile.write('</svg>\\n')\n",
    "\n",
    "        return outputFile.getvalue()\n",
    "\n",
    "\n",
    "class Icons:\n",
    "    def __init__(self, width, height, background):\n",
    "        self.width = width\n",
    "        self.height = height\n",
    "        self.background = background\n",
    "        self.icons = {}\n",
    "        \n",
    "    def append(self, name, icon):\n",
    "        self.icons[name] = icon\n",
    "        \n",
    "    def show(self, theme, kind, show_html=False):\n",
    "        html = f\"\"\"<style>\n",
    "    .btn_{kind}_{theme} {{\n",
    "        display: inline-block;\n",
    "        width: {self.width}px;\n",
    "        height: {self.height}px;\n",
    "        background-color: {self.background}; \n",
    "        padding: 0px;\n",
    "        margin: 4px;\n",
    "        border: solid 1px #222;\n",
    "    }}\n",
    "    .all_{theme} {{\n",
    "        background-color: {self.background};     \n",
    "    }}\n",
    "    </style>\"\"\"\n",
    "\n",
    "        for name, icon in self.icons.items():\n",
    "            html += f'<div class=\"btn_{kind}_{theme}\">{icon.as_svg(name, self.width, self.height)}</div>\\n'\n",
    "        if show_html:\n",
    "            print(html)\n",
    "        else:\n",
    "            display(HTML(f\"\"\"<div class=\"all_{theme}\">{html}</div>\"\"\"))\n",
    "\n",
    "    def save(self, theme):\n",
    "        for name, icon in self.icons.items():\n",
    "            xml = icon.as_svg(name, self.width, self.height)\n",
    "            with open(f\"./icons/{theme}/{name}.svg\", \"w\") as fd:\n",
    "                fd.write(xml)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.799773Z",
     "iopub.status.busy": "2023-10-02T20:04:23.799621Z",
     "iopub.status.idle": "2023-10-02T20:04:23.812279Z",
     "shell.execute_reply": "2023-10-02T20:04:23.811843Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.799760Z"
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "def cube(name, width, height, margin, stroke, stroke_width,\n",
    "         ftop=\"none\", fbottom=\"none\", ffront=\"none\", frear=\"none\", fright=\"none\", fleft=\"none\"):\n",
    "    m = margin\n",
    "    r = 2 * (width - m) / 3   # rect size\n",
    "    o = r / 2                 # offset\n",
    "    \n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_rect(o, o, r,  r, fill=frear)\n",
    "    icon.add_lines(m,m, m,m+r, o,o+r, o,o, fill=fleft)\n",
    "    icon.add_lines(m,m, o,o, o+r,o, r+m,m, fill=fbottom)\n",
    "    icon.add_lines(m,m+r, o,o+r, o+r,o+r, r+m,m+r, fill=ftop)\n",
    "    icon.add_lines(m+r,m, m+r,m+r, o+r,o+r, o+r,o, fill=fright)\n",
    "    icon.add_rect(m, m, r, r, fill=ffront)\n",
    "    return icon\n",
    "\n",
    "def iso(width, height, margin, stroke, stroke_width):\n",
    "    x2 = 2 * margin\n",
    "    x1 = width / 2\n",
    "    x0 = width - 2 * margin\n",
    "    y4 = margin\n",
    "    y3 = margin + (width - 2 * margin) / 4\n",
    "    y2 = margin + (width - 2 * margin) / 2\n",
    "    y1 = margin + (width - 2 * margin) / 4 * 3\n",
    "    y0 = width - margin\n",
    "    \n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_lines(x0,y3, x0,y1, x1,y2, x1,y4, fill=blue)\n",
    "    icon.add_lines(x1,y2, x1,y4, x2,y3, x2,y1, fill=blue)\n",
    "    icon.add_lines(x0,y1, x1,y0, x2,y1, x1,y2, fill=blue)\n",
    "    return icon\n",
    "   \n",
    "def reset(width, height, margin, stroke, stroke_width):\n",
    "    stroke_width *= 1.25\n",
    "    cx = cy = width / 2\n",
    "    r1 = width / 2  - 1.5 * margin\n",
    "    r2 = r1 - 2 * margin\n",
    "    r = r1 - margin\n",
    "    \n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_arc(cx, cy, r1, 60, 360)\n",
    "    icon.add_arc(cx, cy, r2, 60, 360)\n",
    "    icon.add_lines(\n",
    "        cx + r2 - margin, cy, \n",
    "        cx + r2 + margin, cy + 2 * margin,\n",
    "        cx + r1 + margin, cy,\n",
    "        close=False\n",
    "    )\n",
    "    return icon\n",
    "\n",
    "def resize(width, height, margin, stroke, stroke_width):\n",
    "    stroke_width *= 1.25\n",
    "    m = margin\n",
    "    r = width - 2 * m\n",
    "    d = 2 * m\n",
    "    md = 3 * m\n",
    "    mo = 5 * m\n",
    "    \n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_rect(m, m, r, r)\n",
    "    icon.add_lines(md, md, mo, mo)\n",
    "    icon.add_lines(width - md, height - md, width - mo, height - mo)\n",
    "    icon.add_lines(width - md, md, width - mo, mo)\n",
    "    icon.add_lines(md, height - md, mo, height - mo)\n",
    "    icon.add_lines(md, md, md, md + d)\n",
    "    icon.add_lines(md, md, md + d, md)\n",
    "    icon.add_lines(width - md, height - md, width - md, height - md - d)\n",
    "    icon.add_lines(width - md, height - md, width - md - d, height - md)\n",
    "    icon.add_lines(md, height - md, md, height - md - d)\n",
    "    icon.add_lines(md, height - md, md + d, height-md)\n",
    "    icon.add_lines(width - md, md, width-md, md + d)\n",
    "    icon.add_lines(width - md, md, width - md - d, md)\n",
    "    return icon\n",
    "\n",
    "def plane(width, height, margin, stroke, stroke_width):\n",
    "    stroke_width *= 1.25\n",
    "    m = margin\n",
    "    x0 = (margin, 2.5 * margin)\n",
    "    x1 = (2.2 * margin, width / 2)\n",
    "    x2 = (width - margin, width / 2)\n",
    "    x3 = (width - 2.5 * margin, 2.5 * margin)\n",
    "    c = width / 2\n",
    "    \n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_lines(*x0, *x1, *x2, *x3)\n",
    "    icon.add_lines(c,  1.5 * m + height/4, c, c + height/4, stroke=blue, stroke_width=1.5*stroke_width)\n",
    "    icon.add_lines(c - m, c + height/4 - m, c, c + height/4, c + m, c + height/4 - m, stroke=blue, stroke_width=1.5*stroke_width)\n",
    "    \n",
    "    return icon\n",
    "\n",
    "def nav_icons(factor, stroke, background, missing=None):\n",
    "    stroke_width = factor / 8 * 1.2\n",
    "    margin = factor / 4\n",
    "    width = height = factor * 3 + margin\n",
    "\n",
    "    icons = Icons(width, height, background)\n",
    "\n",
    "    for name in [\"top\", \"bottom\", \"front\", \"rear\", \"left\", \"right\"]:\n",
    "        icon = cube(name, width, height, margin, stroke, stroke_width, **{f\"f{name}\": blue})\n",
    "        icons.append(name, icon)\n",
    "\n",
    "    icons.append(\"iso\", iso(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"reset\", reset(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"resize\", resize(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"plane\", plane(width, height, margin, stroke, stroke_width))\n",
    "\n",
    "    return icons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.813004Z",
     "iopub.status.busy": "2023-10-02T20:04:23.812876Z",
     "iopub.status.idle": "2023-10-02T20:04:23.823515Z",
     "shell.execute_reply": "2023-10-02T20:04:23.823141Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.812994Z"
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "def mesh(width, height, margin, stroke, stroke_width, mix=False, empty=False, no=False):\n",
    "    m = margin\n",
    "    dx = (width - 4 * margin) / 2\n",
    "    dy = (height - 2 * margin) / 3\n",
    "    d =  m\n",
    "    x0 = margin\n",
    "    x1 = margin + dx\n",
    "    x2 = margin + 2 * dx\n",
    "    y0 = margin\n",
    "    y1 = margin + dy\n",
    "    y2 = margin + 2 * dy\n",
    "    y3 = margin + 3 * dy\n",
    "    o = 2 * margin\n",
    "    \n",
    "    if empty:\n",
    "        stroke = blue\n",
    "    if no:\n",
    "        fill = stroke\n",
    "    else:\n",
    "        fill = blue\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    if not mix:\n",
    "        icon.add_lines(\n",
    "            x0 + o, y0, x0, y1, x0, y2, x0 + o, y3,\n",
    "            x1 + o, y3, x1, y2, x1, y1, x1 + o, y0,\n",
    "            fill=fill, stroke=stroke, stroke_linecap=\"square\", stroke_linejoin=\"round\"\n",
    "        )\n",
    "        icon.add_lines(\n",
    "            x1 + o, y0, x1, y1, x1, y2, x1 + o, y3,\n",
    "            x2 + o, y3, x2, y2, x2, y1, x2 + o, y0,\n",
    "            fill=fill, stroke=stroke, stroke_linecap=\"square\", stroke_linejoin=\"round\"\n",
    "        )\n",
    "        if not empty:\n",
    "            icon.add_lines(\n",
    "                x0, y1, x0, y2, x1, y2, x2, y2, x2, y1, stroke_linecap=\"square\", stroke_linejoin=\"round\"\n",
    "            )\n",
    "    else:\n",
    "        icon.add_lines(\n",
    "            x0 + o, y3, x1 + o - d, y3, x1 - d, y2, x1 - d, y1, x1 + o - d, y0, \n",
    "            x0 + o, y0, x0, y1, x0, y2, stroke=blue, fill=blue, stroke_linejoin=\"square\"\n",
    "        )            \n",
    "        icon.add_lines(\n",
    "            x1 + o + d, y3, x2 + o, y3, x2, y2, x2, y1, x2 + o, y0, \n",
    "            x1 + o + d, y0, x1 + d, y1, x1 + d, y2, stroke=blue, fill=blue, stroke_linejoin=\"round\"\n",
    "        )            \n",
    "        icon.add_lines(\n",
    "            x1, y2, x0, y2, x0, y1, x1, y1, close=False\n",
    "        )\n",
    "        icon.add_lines(\n",
    "            x1 + o, y3, x0 + o, y3, x0, y2, x0, y1, x0 + o, y0, x1 + o, y0, close=False\n",
    "        )\n",
    "           \n",
    "    return icon\n",
    "\n",
    "def shape(width, height, margin, stroke, stroke_width, mix=False, empty=False, no=False):\n",
    "    m = margin\n",
    "    cx = width / 2\n",
    "    cy = height / 2\n",
    "    r = (width - 2*m) / 2\n",
    "    r2 = width / 5\n",
    "    r3 = width / 12\n",
    "    \n",
    "    e1 = 30\n",
    "    e2 = 180 - e1\n",
    "    e3 = 90 if mix else e1\n",
    "\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    if not empty:\n",
    "        if mix:\n",
    "            icon.add_arc(cx, cy, r2, 90, 270, fill=blue, stroke=trans, stroke_width=stroke_width)\n",
    "            icon.add_arc(cx, cy, r3, 90, 270, fill=stroke)    \n",
    "            icon.add_arc(cx, cy-2.5*m, r, e1, e2/2-m, stroke_width=stroke_width)\n",
    "            icon.add_arc(cx, cy+2.5*m, r, m-e2/2, -e1, stroke_width=stroke_width)\n",
    "        else:\n",
    "            icon.add_ellipse(cx, cy, r2, r2, fill=stroke if no else blue, stroke_width=stroke_width, stroke=trans)\n",
    "            if not no:\n",
    "                icon.add_ellipse(cx, cy, r3, r3, fill=stroke)    \n",
    "    icon.add_arc(cx, cy-2.5*m, r, e3, e2, fill=trans, stroke_width=stroke_width)\n",
    "    icon.add_arc(cx, cy+2.5*m, r, -e2, -e3, fill=trans, stroke_width=stroke_width)\n",
    "    return icon\n",
    "\n",
    "def tree_icons(factor, stroke, background, missing):\n",
    "    stroke_width = factor / 8 * 1.25\n",
    "    margin = factor / 4\n",
    "    width = (factor / 8 * 26 + margin) * 0.9\n",
    "    height = (factor / 8 * 16 + margin) * 0.9\n",
    "    icons = Icons(width, height, background)\n",
    "\n",
    "    icons.append(\"shape\", shape(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"shape_mix\", shape(width, height, margin,stroke, stroke_width, mix=True))\n",
    "    icons.append(\"shape_no\", shape(width, height, margin,stroke, stroke_width, empty=True))\n",
    "    icons.append(\"shape_empty\", shape(width, height, margin, missing, stroke_width, no=True))\n",
    "\n",
    "    icons.append(\"mesh\", mesh(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"mesh_mix\", mesh(width, height, margin, stroke, stroke_width, mix=True))\n",
    "    icons.append(\"mesh_no\", mesh(width, height, margin, stroke, stroke_width, empty=True))\n",
    "    icons.append(\"mesh_empty\", mesh(width, height, margin, missing, stroke_width, no=True))\n",
    "\n",
    "    return icons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.824062Z",
     "iopub.status.busy": "2023-10-02T20:04:23.823962Z",
     "iopub.status.idle": "2023-10-02T20:04:23.828579Z",
     "shell.execute_reply": "2023-10-02T20:04:23.828193Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.824053Z"
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "def stop(width, height, margin, stroke, stroke_width):\n",
    "    m = 2 * margin\n",
    "\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_rect(m, m, width - 2*m, width - 2*m, fill=blue)\n",
    "    return icon\n",
    "\n",
    "def pause(width, height, margin, stroke, stroke_width):\n",
    "    m = 2 * margin\n",
    "\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_rect(1.3*m, m, 1.4*m, width - 2*m, fill=blue)\n",
    "    icon.add_rect(width - 2.7*m, m, 1.4*m, width - 2*m, fill=blue)\n",
    "    return icon\n",
    "    \n",
    "def play(width, height, margin, stroke, stroke_width):\n",
    "    m = 2 * margin\n",
    "    \n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_lines(1.25*m, m, 1.25*m, height - m, width - 1.25*m, width/2, fill=blue)\n",
    "    \n",
    "    return icon\n",
    "\n",
    "def ani_icons(factor, stroke, background, missing=None):\n",
    "    stroke_width = factor / 8 * 1.5\n",
    "    margin = factor / 4\n",
    "    width = height = factor * 3 + margin\n",
    "\n",
    "    icons = Icons(width, height, background)\n",
    "    \n",
    "    icons.append(\"play\", play(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"pause\", pause(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"stop\", stop(width, height, margin, stroke, stroke_width))\n",
    "    \n",
    "    return icons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.830190Z",
     "iopub.status.busy": "2023-10-02T20:04:23.830056Z",
     "iopub.status.idle": "2023-10-02T20:04:23.836548Z",
     "shell.execute_reply": "2023-10-02T20:04:23.836199Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.830178Z"
    },
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_pin_light {\n",
       "        display: inline-block;\n",
       "        width: 104.0px;\n",
       "        height: 104.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_pin_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<rect x=\"40.0\" y=\"-92.0\" width=\"24.0\" height=\"44.0\" fill=\"rgb(83,160,227)\" stroke=\"#333\" stroke-width=\"5.0\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M52.0,-12.0 L52.0,-40.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"9.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M69.32050807568878,-86.0 A20.0,20.0,0,0,0,34.67949192431122,-86.0\" stroke=\"#333\" stroke-width=\"5.0\" fill=\"rgb(83,160,227)\" stroke-linecap=\"round\" />\n",
       "<path d=\"M86.64101615137756,-40.8 A40.0,40.0,0,0,0,17.35898384862245,-40.8\" stroke=\"#333\" stroke-width=\"5.0\" fill=\"rgb(83,160,227)\" stroke-linecap=\"round\" />\n",
       "<path d=\"M18.0,-40.8 L86.0,-40.8 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"5.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M35.2,-85.6 L68.8,-85.6 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"5.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_pin_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<path d=\"M92.0,-52.0 A40.0,40.0,0,1,0,91.99390780625565,-51.30190374250862\" stroke=\"#333\" stroke-width=\"5.0\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<text x=\"28.0\" y=\"-24.0\" font-size=\"80.0\" fill=\"rgb(83,160,227)\" font-family=\"sans-serif\" font-weight=\"bold\" dy=\"0em\">?</text>\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def pin(width, height, margin, stroke, stroke_width):\n",
    "    m = margin\n",
    "    dx = width / 2\n",
    "    dy = height - 3.5*m\n",
    "    r = 2 * m\n",
    "    \n",
    "    d =  m\n",
    "    stroke_width *= 1.25\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_rect(dx-3*m/2, 6*m, 3* m, 5.5*m,fill=blue)\n",
    "    icon.add_lines(dx, 1.5*m, dx, 5*m, stroke_width=stroke_width*1.8)\n",
    "    icon.add_arc(dx, dy, 2.5*m, 30, 150, fill=blue, stroke_width=stroke_width)   \n",
    "    icon.add_arc(dx, 2.6*m, 5*m, 30, 150, fill=blue, stroke_width=stroke_width)\n",
    "    icon.add_lines(2.25*m, 5.1*m, width-2.25*m, 5.1*m, stroke_width=stroke_width)\n",
    "    icon.add_lines(4.4*m, dy+1.2*m, width-4.4*m, dy+1.2*m, stroke_width=stroke_width)   \n",
    "    return icon\n",
    "\n",
    "def help(width, height, margin, stroke, stroke_width):\n",
    "    stroke_width *= 1.25\n",
    "    cx = cy = width / 2\n",
    "    r1 = width / 2  - 1.5 * margin\n",
    "    r2 = r1 - 2 * margin\n",
    "    r = r1 - margin\n",
    "    \n",
    "    \n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_arc(cx, cy, r1, 0, 359)\n",
    "\n",
    "    icon.add_text(\"?\", margin*10, cx-3*margin, 3*margin, fill=blue, font_weight=\"bold\")\n",
    "    return icon \n",
    "\n",
    "def pin_icons(factor, stroke, background, missing=None):\n",
    "    stroke_width = factor / 8 \n",
    "    margin = factor / 4\n",
    "    width = height = factor * 3 + margin\n",
    "\n",
    "    icons = Icons(width, height, background)\n",
    "\n",
    "    icons.append(\"pin\", pin(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"help\", help(width, height, margin, stroke, stroke_width))\n",
    "    \n",
    "    return icons\n",
    "\n",
    "theme = \"light\"\n",
    "stroke = \"#333\"\n",
    "background = \"#fff\"\n",
    "missing = \"#ddd\"\n",
    "icons = pin_icons(32, stroke, background, missing )\n",
    "icons.show(theme, \"pin\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.837417Z",
     "iopub.status.busy": "2023-10-02T20:04:23.837245Z",
     "iopub.status.idle": "2023-10-02T20:04:23.851599Z",
     "shell.execute_reply": "2023-10-02T20:04:23.851315Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.837403Z"
    },
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_measure_light {\n",
       "        display: inline-block;\n",
       "        width: 104.0px;\n",
       "        height: 104.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_measure_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<path d=\"M8.0,-20.0 L8.0,-84.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"6.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M96.0,-20.0 L96.0,-84.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"6.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M16.0,-52.0 L88.0,-52.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M16.0,-52.0 L27.2,-64.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M16.0,-52.0 L27.2,-40.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M88.0,-52.0 L76.8,-64.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M88.0,-52.0 L76.8,-40.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_measure_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<path d=\"M16.0,-86.4 L88.0,-86.4 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"8.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M36.8,-67.2 L83.2,-67.2 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"5.6\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"24.0\" cy=\"-67.2\" rx=\"3.2\" ry=\"3.2\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"4.0\" />\n",
       "<path d=\"M36.8,-51.2 L83.2,-51.2 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"5.6\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"24.0\" cy=\"-51.2\" rx=\"3.2\" ry=\"3.2\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"4.0\" />\n",
       "<path d=\"M36.8,-35.2 L83.2,-35.2 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"5.6\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"24.0\" cy=\"-35.2\" rx=\"3.2\" ry=\"3.2\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"4.0\" />\n",
       "<path d=\"M36.8,-19.2 L83.2,-19.2 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"5.6\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"24.0\" cy=\"-19.2\" rx=\"3.2\" ry=\"3.2\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"4.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_measure_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<path d=\"M9.6,-15.36 L94.4,-15.36 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"5.8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M9.6,-15.36 L56.0,-91.52 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"5.8\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M71.2317524531366,-25.121510618510406 A62.4,62.4,0,0,0,48.86959240150986,-63.85390799491498\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"8.0\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def measure(width, height, margin, stroke, stroke_width):\n",
    "    m = margin\n",
    "    d = 2\n",
    "    d2 = 3.4\n",
    "    s1 = stroke_width * 1.5\n",
    "    s2 = stroke_width * 1.7\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_lines(m, 2.5 * m, m, 10.5 * m, stroke_width=s1)\n",
    "    icon.add_lines(width - m, 2.5 * m, width - m, 10.5 * m, stroke_width=s1)\n",
    "\n",
    "    icon.add_lines(d * m, 6.5 * m, width - d * m, 6.5 * m, stroke_width=s2, stroke=blue)\n",
    "\n",
    "    icon.add_lines(d * m, 6.5 * m, d2 * m, 8.0 * m, stroke_width=s2, stroke=blue)\n",
    "    icon.add_lines(d * m, 6.5 * m, d2 * m, 5.0 * m, stroke_width=s2, stroke=blue)\n",
    "\n",
    "    icon.add_lines(\n",
    "        width - d * m, 6.5 * m, width - d2 * m, 8.0 * m, stroke_width=s2, stroke=blue\n",
    "    )\n",
    "    icon.add_lines(\n",
    "        width - d * m, 6.5 * m, width - d2 * m, 5.0 * m, stroke_width=s2, stroke=blue\n",
    "    )\n",
    "    return icon\n",
    "\n",
    "\n",
    "def size(width, height, margin, stroke, stroke_width):\n",
    "    m = margin\n",
    "    r = width - 2 * m\n",
    "    d = 2\n",
    "    d2 = 3.1\n",
    "    s1 = stroke_width * 1.45\n",
    "    s2 = stroke_width * 1.7\n",
    "\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_rect(m, m, r, r, stroke=stroke, stroke_width=s1)\n",
    "\n",
    "    icon.add_lines(d * m, 6.5 * m, width - d * m, 6.5 * m, stroke_width=s2, stroke=blue)\n",
    "    icon.add_lines(6.5 * m, d * m, 6.5 * m, width - d * m, stroke_width=s2, stroke=blue)\n",
    "\n",
    "    icon.add_lines(d * m, 6.5 * m, d2 * m, 8.0 * m, stroke_width=s2, stroke=blue)\n",
    "    icon.add_lines(d * m, 6.5 * m, d2 * m, 5.0 * m, stroke_width=s2, stroke=blue)\n",
    "    icon.add_lines(\n",
    "        width - d * m, 6.5 * m, width - d2 * m, 8.0 * m, stroke_width=s2, stroke=blue\n",
    "    )\n",
    "    icon.add_lines(\n",
    "        width - d * m, 6.5 * m, width - d2 * m, 5.0 * m, stroke_width=s2, stroke=blue\n",
    "    )\n",
    "\n",
    "    icon.add_lines(6.5 * m, d * m, 8.0 * m, d2 * m, stroke_width=s2, stroke=blue)\n",
    "    icon.add_lines(6.5 * m, d * m, 5.0 * m, d2 * m, stroke_width=s2, stroke=blue)\n",
    "    icon.add_lines(\n",
    "        6.5 * m, width - d * m, 8.0 * m, width - d2 * m, stroke_width=s2, stroke=blue\n",
    "    )\n",
    "    icon.add_lines(\n",
    "        6.5 * m, width - d * m, 5.0 * m, width - d2 * m, stroke_width=s2, stroke=blue\n",
    "    )\n",
    "\n",
    "    return icon\n",
    "\n",
    "\n",
    "from math import cos, radians, sin, acos, asin\n",
    "\n",
    "\n",
    "def rotate(xorigin, yorigin, x, y, angle):\n",
    "    x1 = (\n",
    "        xorigin\n",
    "        + (x - xorigin) * cos(radians(angle))\n",
    "        - (y - yorigin) * sin(radians(angle))\n",
    "    )\n",
    "    y1 = (\n",
    "        yorigin\n",
    "        + (x - xorigin) * sin(radians(angle))\n",
    "        + (y - yorigin) * cos(radians(angle))\n",
    "    )\n",
    "    return x1, y1\n",
    "\n",
    "\n",
    "def angle2(width, height, margin, stroke, stroke_width):\n",
    "    m = margin * 2\n",
    "    xcenter = width / 2\n",
    "    ycenter = 1.5 * m\n",
    "    alpha = 45\n",
    "    f = 0.8  # lower factor of the arc\n",
    "    r = 0.6 * width \n",
    "\n",
    "    x1 = -cos(radians(alpha)) * r + xcenter\n",
    "    y1 = sin(radians(alpha)) * r + ycenter\n",
    "    x2 = xcenter\n",
    "    y2 = ycenter\n",
    "    x3 = cos(radians(alpha)) * r + xcenter\n",
    "    y3 = y1\n",
    "\n",
    "    s1 = stroke_width * 1.45\n",
    "    s2 = stroke_width * 1.7\n",
    "\n",
    "    arrow_len = width * 0.15\n",
    "    arrow_angle = 30\n",
    "\n",
    "    #left side\n",
    "    xa2 = -cos(radians(alpha)) * r * f + xcenter\n",
    "    ya2 = sin(radians(alpha)) * r * f + ycenter\n",
    "    xa1 = xa2 + arrow_len\n",
    "    ya1 = ya2\n",
    "    xa3 = xa1\n",
    "    ya3 = ya1\n",
    "    xa1, ya1 = rotate(xa2, ya2, xa1, ya1, alpha + arrow_angle)\n",
    "    xa3, ya3 = rotate(xa2, ya2, xa3, ya3, alpha-1.5*arrow_angle)\n",
    "    arrow_pts1 = [xa1, ya1, xa2, ya2, xa3, ya3]\n",
    "\n",
    "    #right side\n",
    "    xa2 = cos(radians(alpha)) * r * f + xcenter\n",
    "    ya2 = sin(radians(alpha)) * r * f + ycenter\n",
    "    xa1 = xa2 - arrow_len\n",
    "    ya1 = ya2\n",
    "    xa3 = xa1\n",
    "    ya3 = ya1\n",
    "    xa1, ya1 = rotate(xa2, ya2, xa1, ya1, -alpha - arrow_angle)\n",
    "    xa3, ya3 = rotate(xa2, ya2, xa3, ya3, -alpha+1.5*arrow_angle)\n",
    "\n",
    "    arrow_pts2 = [xa1, ya1, xa2, ya2, xa3, ya3]\n",
    "\n",
    "    pts = [x1, y1, x2, y2, x3, y3]\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_arc(\n",
    "        xcenter,\n",
    "        ycenter,\n",
    "        f * r,\n",
    "        alpha,\n",
    "        180 - alpha,\n",
    "        stroke_width=s2,\n",
    "        stroke=blue,\n",
    "    )\n",
    "\n",
    "    icon.add_lines(*arrow_pts1, close=False, stroke_width=s1, stroke=blue)\n",
    "    icon.add_lines(*arrow_pts2, close=False, stroke_width=s1, stroke=blue)\n",
    "    icon.add_lines(*pts, close=False, stroke_width=s1)\n",
    "\n",
    "    return icon\n",
    "\n",
    "def properties(width, height, margin, stroke, stroke_width):\n",
    "    m = margin\n",
    "    d = 2 * m\n",
    "\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_lines(d, width-1.1*d, width-d, width-1.1*d, stroke_width=2*stroke_width)\n",
    "    \n",
    "    for i in range(2,6):\n",
    "        o = 0.3*d\n",
    "        h = width-i*d-o\n",
    "        icon.add_lines(2.3*d, h, width-d-o, h, stroke=blue, stroke_width=stroke_width*1.4)\n",
    "        icon.add_ellipse(1.2 * d+o, h, 0.8*stroke_width, 0.8*stroke_width, stroke=blue, fill=blue)\n",
    "    return icon\n",
    "\n",
    "def angle(width, height, margin, stroke, stroke_width):\n",
    "    m = margin\n",
    "    d = 1.2 * m\n",
    "    r = 0.6 * width\n",
    "   \n",
    "    a = 21\n",
    "    \n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_lines(d, 1.6*d, width-d, 1.6*d, stroke_width=1.45*stroke_width)\n",
    "    icon.add_lines(d, 1.6*d, width-5*d, width-1.3*d, stroke_width=1.45*stroke_width)\n",
    "    icon.add_arc(d, 1.6*d, r, 9, 51, stroke=blue, stroke_width=2*stroke_width)\n",
    "#    c1, c2 =  m + r * cos(radians(a)), width/2 - (r * sin(radians(a)))\n",
    "#    icon.add_lines(c1, c2, c1-0.6*m, c2+1.3*m, c1, c2, c1+1.1*m, c2+0.7*m, stroke=blue, stroke_width=1.7*stroke_width)\n",
    "#    c1, c2 =  m + r * cos(radians(a)), width/2 + (r * sin(radians(a)))    \n",
    "#    icon.add_lines(c1, c2, c1-0.6*m, c2-1.3*m, c1, c2, c1+1.1*m, c2-0.7*m, stroke=blue, stroke_width=1.7*stroke_width)\n",
    "    return icon\n",
    "    \n",
    "def measure_icons(factor, stroke, background, missing=None):\n",
    "    stroke_width = factor / 8\n",
    "    margin = factor / 4\n",
    "    width = height = factor * 3 + margin\n",
    "\n",
    "    icons = Icons(width, height, background)\n",
    "\n",
    "    icons.append(\"measure\", measure(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"properties\", properties(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"angle\", angle(width, height, margin, stroke, stroke_width))\n",
    "    #icons.append(\"angle2\", angle2(width, height, margin, stroke, stroke_width))\n",
    "\n",
    "    return icons\n",
    "\n",
    "theme = \"light\"\n",
    "stroke = \"#333\"\n",
    "background = \"#fff\"\n",
    "missing = \"#ddd\"\n",
    "blue = \"rgb(48, 142, 225)\"\n",
    "icons = measure_icons(32, stroke, background, missing)\n",
    "icons.show(theme, \"measure\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.852200Z",
     "iopub.status.busy": "2023-10-02T20:04:23.852092Z",
     "iopub.status.idle": "2023-10-02T20:04:23.859467Z",
     "shell.execute_reply": "2023-10-02T20:04:23.859092Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.852191Z"
    },
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_measure_light {\n",
       "        display: inline-block;\n",
       "        width: 104.0px;\n",
       "        height: 104.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_measure_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<rect x=\"32.0\" y=\"-96.0\" width=\"64.0\" height=\"64.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"4.0\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M8.0,-8.0 L8.0,-72.0 L32.0,-96.0 L32.0,-32.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"4.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M8.0,-8.0 L32.0,-32.0 L96.0,-32.0 L72.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"4.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M8.0,-72.0 L32.0,-96.0 L96.0,-96.0 L72.0,-72.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"4.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"0.75\" />\n",
       "<path d=\"M72.0,-8.0 L72.0,-72.0 L96.0,-96.0 L96.0,-32.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"4.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"0.75\" />\n",
       "<rect x=\"8.0\" y=\"-72.0\" width=\"64.0\" height=\"64.0\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"4.0\" stroke-linejoin=\"round\" fill-opacity=\"0.75\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_measure_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<rect x=\"31.333333333333332\" y=\"-94.0\" width=\"62.666666666666664\" height=\"62.666666666666664\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.25\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M10.0,-10.0 L10.0,-72.66666666666666 L31.333333333333332,-94.0 L31.333333333333332,-31.333333333333332 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M10.0,-10.0 L31.333333333333332,-31.333333333333332 L94.0,-31.333333333333332 L72.66666666666666,-10.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M10.0,-72.66666666666666 L31.333333333333332,-94.0 L94.0,-94.0 L72.66666666666666,-72.66666666666666 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M72.66666666666666,-10.0 L72.66666666666666,-72.66666666666666 L94.0,-94.0 L94.0,-31.333333333333332 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"10.0\" y=\"-72.66666666666666\" width=\"62.666666666666664\" height=\"62.666666666666664\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.25\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def transparent(width, height, margin, stroke, stroke_width,\n",
    "         ftop=\"none\", fbottom=\"none\", ffront=\"none\", frear=\"none\", fright=\"none\", fleft=\"none\"):\n",
    "    m = margin\n",
    "    r = 2 * (width - m) / 3   # rect size\n",
    "    o = r / 2                 # offset\n",
    "    \n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_rect(o, o, r,  r, fill=frear)\n",
    "    icon.add_lines(m,m, m,m+r, o,o+r, o,o, fill=fleft)\n",
    "    icon.add_lines(m,m, o,o, o+r,o, r+m,m, fill=fbottom)\n",
    "    icon.add_lines(m,m+r, o,o+r, o+r,o+r, r+m,m+r, fill=blue, opacity=0.75)\n",
    "    icon.add_lines(m+r,m, m+r,m+r, o+r,o+r, o+r,o, fill=blue, opacity=0.75)\n",
    "    icon.add_rect(m, m, r, r, fill=blue, opacity=0.75)\n",
    "    return icon\n",
    "\n",
    "def black_edges(width, height, margin, stroke, stroke_width,\n",
    "         ftop=\"none\", fbottom=\"none\", ffront=\"none\", frear=\"none\", fright=\"none\", fleft=\"none\"):\n",
    "    m = margin*1.25\n",
    "    r = 2 * (width - m) / 3   # rect size\n",
    "    o = r / 2                 # offset\n",
    "    d = 1.25\n",
    "    stroke_width=stroke_width*1.25\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_rect(o, o, r,  r, fill=frear, stroke=blue, stroke_width=d*stroke_width)\n",
    "    icon.add_lines(m,m, m,m+r, o,o+r, o,o, fill=\"none\", stroke=blue, stroke_width=d*stroke_width)\n",
    "    icon.add_lines(m,m, o,o, o+r,o, r+m,m, fill=\"none\", stroke=blue, stroke_width=d*stroke_width)\n",
    "    icon.add_lines(m,m+r, o,o+r, o+r,o+r, r+m,m+r, fill=\"none\", stroke=blue, stroke_width=d*stroke_width)\n",
    "    icon.add_lines(m+r,m, m+r,m+r, o+r,o+r, o+r,o, fill=\"none\", stroke=blue, stroke_width=d*stroke_width)\n",
    "    icon.add_rect(m, m, r, r, fill=\"none\", stroke=blue, stroke_width=d*stroke_width)\n",
    "    return icon\n",
    "\n",
    "def appearance_icons(factor, stroke, background, missing=None):\n",
    "    stroke_width = factor / 8 \n",
    "    margin = factor / 4\n",
    "    width = height = factor * 3 + margin\n",
    "\n",
    "    icons = Icons(width, height, background)\n",
    "\n",
    "    icons.append(\"transparent\", transparent(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"black_edges\", black_edges(width, height, margin, stroke, stroke_width))\n",
    "    \n",
    "    return icons\n",
    "\n",
    "\n",
    "theme = \"light\"\n",
    "stroke = \"#333\"\n",
    "background = \"#fff\"\n",
    "missing = \"#ddd\"\n",
    "blue = \"rgb(48, 142, 225)\"\n",
    "icons = appearance_icons(32, stroke, background, missing )\n",
    "icons.show(theme, \"measure\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.860147Z",
     "iopub.status.busy": "2023-10-02T20:04:23.859986Z",
     "iopub.status.idle": "2023-10-02T20:04:23.865343Z",
     "shell.execute_reply": "2023-10-02T20:04:23.864999Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.860138Z"
    },
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_explode_light {\n",
       "        display: inline-block;\n",
       "        width: 104.0px;\n",
       "        height: 104.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_explode_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<ellipse cx=\"90.0\" cy=\"-52.0\" rx=\"10.0\" ry=\"10.0\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"4.0\" />\n",
       "<path d=\"M52.0,-52.0 L82.0,-52.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"5.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"63.742645786248005\" cy=\"-88.14014761921584\" rx=\"10.0\" ry=\"10.0\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"4.0\" />\n",
       "<path d=\"M52.0,-52.0 L61.270509831248425,-80.53169548885461 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"5.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"21.257354213752002\" cy=\"-74.33583958711398\" rx=\"10.0\" ry=\"10.0\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"4.0\" />\n",
       "<path d=\"M52.0,-52.0 L27.72949016875158,-69.6335575687742 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"5.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"21.257354213751995\" cy=\"-29.664160412886027\" rx=\"10.0\" ry=\"10.0\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"4.0\" />\n",
       "<path d=\"M52.0,-52.0 L27.729490168751575,-34.366442431225806 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"5.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"63.74264578624799\" cy=\"-15.859852380784162\" rx=\"10.0\" ry=\"10.0\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"4.0\" />\n",
       "<path d=\"M52.0,-52.0 L61.27050983124842,-23.46830451114539 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"5.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"52.0\" cy=\"-52.0\" rx=\"8.0\" ry=\"8.0\" fill=\"#333\" stroke=\"#333\" stroke-width=\"7.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from math import sin, cos, radians\n",
    "\n",
    "def explode(width, height, margin, stroke, stroke_width,\n",
    "         ftop=\"none\", fbottom=\"none\", ffront=\"none\", frear=\"none\", fright=\"none\", fleft=\"none\"):\n",
    "    m = margin\n",
    "    o = 5.5*m\n",
    "    l = width/2 - o\n",
    "    r = 4.75*m\n",
    "\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    for a in range(0,360,72):\n",
    "        x = (width)/2 + r*cos(radians(a))\n",
    "        y = (width)/2 + r*sin(radians(a))   \n",
    "\n",
    "        icon.add_ellipse(x,y,1.25*l,1.25*l, stroke=blue, fill=blue, stroke_width=stroke_width)\n",
    "\n",
    "        x = (width)/2 + (r-l)*cos(radians(a))\n",
    "        y = (width)/2 + (r-l)*sin(radians(a))   \n",
    "\n",
    "        icon.add_lines(width/2, width/2, x, y, stroke=blue, stroke_width=stroke_width/0.8)\n",
    "\n",
    "    icon.add_ellipse(width/2, width/2,l,l, fill=stroke, stroke_width=stroke_width*1.75)\n",
    "\n",
    "    return icon\n",
    "\n",
    "def explode_icons(factor, stroke, background, missing=None):\n",
    "    stroke_width = factor / 8 \n",
    "    margin = factor / 4\n",
    "    width = height = factor * 3 + margin\n",
    "\n",
    "    icons = Icons(width, height, background)\n",
    "\n",
    "    icons.append(\"explode\", explode(width, height, margin, stroke, stroke_width))\n",
    "    \n",
    "    return icons\n",
    "\n",
    "\n",
    "theme = \"light\"\n",
    "stroke = \"#333\"\n",
    "background = \"#fff\"\n",
    "missing = \"#ddd\"\n",
    "blue = \"rgb(48, 142, 225)\"\n",
    "icons = explode_icons(32, stroke, background, missing )\n",
    "icons.show(theme, \"explode\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.865956Z",
     "iopub.status.busy": "2023-10-02T20:04:23.865848Z",
     "iopub.status.idle": "2023-10-02T20:04:23.875098Z",
     "shell.execute_reply": "2023-10-02T20:04:23.874760Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.865937Z"
    },
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_axes_light {\n",
       "        display: inline-block;\n",
       "        width: 104.0px;\n",
       "        height: 104.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_axes_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<path d=\"M26.4,-40.0 L77.6,-12.0 Z\" fill=\"none\" stroke=\"#f00\" stroke-width=\"8.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M26.4,-40.0 L77.6,-68.0 Z\" fill=\"none\" stroke=\"rgb(0,128,0)\" stroke-width=\"8.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M26.4,-40.0 L26.4,-96.0 Z\" fill=\"none\" stroke=\"#00f\" stroke-width=\"8.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_axes_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<path d=\"M26.4,-40.0 L77.6,-12.0 Z\" fill=\"none\" stroke=\"#f00\" stroke-width=\"8.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M26.4,-40.0 L77.6,-68.0 Z\" fill=\"none\" stroke=\"rgb(0,128,0)\" stroke-width=\"8.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M26.4,-40.0 L26.4,-96.0 Z\" fill=\"none\" stroke=\"#00f\" stroke-width=\"8.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"26.4\" cy=\"-40.0\" rx=\"12.0\" ry=\"15.2\" fill=\"none\" stroke=\"#fff\" stroke-width=\"9.6\" />\n",
       "<ellipse cx=\"26.4\" cy=\"-40.0\" rx=\"8.0\" ry=\"12.0\" fill=\"#fff\" stroke=\"#333\" stroke-width=\"5.6\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_axes_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<path d=\"M9.6,-8.0 L94.4,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"6.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M9.6,-37.33333333333333 L94.4,-37.33333333333333 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"6.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M9.6,-66.66666666666666 L94.4,-66.66666666666666 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"6.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M9.6,-96.0 L94.4,-96.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"6.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M8.0,-9.6 L8.0,-94.4 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"6.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M37.33333333333333,-9.6 L37.33333333333333,-94.4 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"6.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M66.66666666666666,-9.6 L66.66666666666666,-94.4 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"6.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M96.0,-9.6 L96.0,-94.4 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"6.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_axes_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"104.0\" height=\"104.0\" viewBox=\"0 -104.0 104.0 104.0\">\n",
       "<rect x=\"56.0\" y=\"-96.0\" width=\"40.0\" height=\"40.0\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"6.0\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M8.0,-8.0 L56.0,-56.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"3.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M72.0,-72.0 L96.0,-96.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"3.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M72.0,-8.0 L96.0,-56.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"3.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M8.0,-72.0 L56.0,-96.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"3.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"8.0\" y=\"-72.0\" width=\"64.0\" height=\"64.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"7.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import numpy as np\n",
    "\n",
    "def axes(width, height, margin, stroke, stroke_width):\n",
    "    m = margin\n",
    "    w = stroke_width*2\n",
    "    d = 3.3*m\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_lines(d,5* m, width-d, width/2-5*m, stroke=xcolor, stroke_width=w)\n",
    "    icon.add_lines(d,5* m, width-d, width/2+2*m, stroke=ycolor, stroke_width=w)\n",
    "    icon.add_lines(d,5* m, d, height-m, stroke=zcolor, stroke_width=w)\n",
    "    \n",
    "    return icon\n",
    "\n",
    "def axes0(width, height, margin, stroke, stroke_width):\n",
    "    m = margin\n",
    "    w = stroke_width*2\n",
    "    d = 3.3*m\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_lines(d,5* m, width-d, width/2-5*m, stroke=xcolor, stroke_width=w)\n",
    "    icon.add_lines(d,5* m, width-d, width/2+2*m, stroke=ycolor, stroke_width=w)\n",
    "    icon.add_lines(d,5* m, d, height-m, stroke=zcolor, stroke_width=w)\n",
    "\n",
    "    icon.add_ellipse(d,5* m, m+m/2,1.4*m+m/2,stroke=background, stroke_width=w*1.2)\n",
    "    icon.add_ellipse(d,5* m, m,1.5*m,fill=background,stroke_width=stroke_width*1.4)\n",
    "    \n",
    "    return icon\n",
    "\n",
    "def grid(width, height, margin, stroke, stroke_width):\n",
    "    m = margin\n",
    "    w = stroke_width*2\n",
    "    d = 1.2*m\n",
    "    \n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    for x in np.linspace(m, width-m, 4):\n",
    "        icon.add_lines(d, x, width-d, x, stroke_width=stroke_width*1.5)\n",
    "    for y in np.linspace(m, width-m, 4):\n",
    "        icon.add_lines(y, d, y, width-d, stroke_width=stroke_width*1.5)\n",
    "    \n",
    "    return icon\n",
    "\n",
    "def perspective(width, height, margin, stroke, stroke_width):\n",
    "    m = margin\n",
    "    w = stroke_width*2\n",
    "    d = 1.2*m\n",
    "    w = stroke_width*1.5\n",
    "    icon = Icon(width, height, stroke, stroke_width)\n",
    "    icon.add_rect(width-6*m, width-6*m, 5*m, 5*m, stroke=blue, stroke_width=w)\n",
    "    icon.add_lines(m,m, width-6*m, width-6*m, stroke=blue, stroke_width=stroke_width*0.75)\n",
    "    icon.add_lines(9*m, 9*m, width-m,width-m, stroke=blue, stroke_width=stroke_width*0.75)\n",
    "    icon.add_lines(9*m, m, width-m,width-6*m, stroke=blue, stroke_width=stroke_width*0.75)\n",
    "    icon.add_lines(m, 9*m, width-6*m,width-m, stroke=blue, stroke_width=stroke_width*0.75)\n",
    "    icon.add_rect(m, m, 8*m, 8*m, stroke=stroke, stroke_width=w*1.25)\n",
    "    \n",
    "    return icon\n",
    "\n",
    "def axes_icons(factor, stroke, background, missing=None):\n",
    "    stroke_width = factor / 8 \n",
    "    margin = factor / 4\n",
    "    width = height = factor * 3 + margin\n",
    "\n",
    "    icons = Icons(width, height, background)\n",
    "\n",
    "    icons.append(\"axes\", axes(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"axes0\", axes0(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"grid\", grid(width, height, margin, stroke, stroke_width))\n",
    "    icons.append(\"perspective\", perspective(width, height, margin, stroke, stroke_width))    \n",
    "\n",
    "    \n",
    "    return icons\n",
    "\n",
    "xcolor = \"#f00\";\n",
    "ycolor = \"rgb(0,128,0)\";\n",
    "zcolor = \"#00f\";\n",
    "theme = \"light\"\n",
    "stroke = \"#333\"\n",
    "background = \"#fff\"\n",
    "missing = \"#ddd\"\n",
    "blue = \"rgb(48, 142, 225)\"\n",
    "icons = axes_icons(32, stroke, background, missing )\n",
    "icons.show(theme, \"axes\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Show icons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.875823Z",
     "iopub.status.busy": "2023-10-02T20:04:23.875722Z",
     "iopub.status.idle": "2023-10-02T20:04:23.893490Z",
     "shell.execute_reply": "2023-10-02T20:04:23.893120Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.875815Z"
    },
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_nav_light {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_nav_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M22.0,-7.5 L22.0,-18.5 L13.0,-13.0 L13.0,-2.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L13.0,-2.0 L4.0,-7.5 L4.0,-18.5 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M22.0,-18.5 L13.0,-24.0 L4.0,-18.5 L13.0,-13.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M18.0,-21.660254037844386 A10.0,10.0,0,1,0,23.0,-12.999999999999998\" stroke=\"#333\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M16.0,-18.196152422706632 A6.0,6.0,0,1,0,19.0,-12.999999999999998\" stroke=\"#333\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M17.0,-13.0 L21.0,-17.0 L25.0,-13.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"2.0\" y=\"-24.0\" width=\"22.0\" height=\"22.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-6.0 L10.0,-10.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-20.0 L16.0,-16.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-6.0 L16.0,-10.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-20.0 L10.0,-16.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-6.0 L6.0,-10.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-6.0 L10.0,-6.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-20.0 L20.0,-16.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-20.0 L16.0,-20.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-20.0 L6.0,-16.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-20.0 L10.0,-20.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-6.0 L20.0,-10.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-6.0 L16.0,-6.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M2.0,-5.0 L4.4,-13.0 L24.0,-13.0 L21.0,-5.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M13.0,-9.5 L13.0,-19.5 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"2.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M11.0,-17.5 L13.0,-19.5 L15.0,-17.5 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"2.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_ani_light {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_ani_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M5.0,-4.0 L5.0,-22.0 L21.0,-13.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_ani_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"5.2\" y=\"-22.0\" width=\"5.6\" height=\"18.0\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"15.2\" y=\"-22.0\" width=\"5.6\" height=\"18.0\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_ani_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"4.0\" y=\"-22.0\" width=\"18.0\" height=\"18.0\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_tree_light {\n",
       "        display: inline-block;\n",
       "        width: 25.2px;\n",
       "        height: 16.2px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_tree_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<ellipse cx=\"12.6\" cy=\"-8.1\" rx=\"5.04\" ry=\"5.04\" fill=\"rgb(48, 142, 225)\" stroke=\"none\" stroke-width=\"1.25\" />\n",
       "<ellipse cx=\"12.6\" cy=\"-8.1\" rx=\"2.1\" ry=\"2.1\" fill=\"#333\" stroke=\"#333\" stroke-width=\"1.25\" />\n",
       "<path d=\"M21.77986928011505,-8.399999999999999 A10.6,10.6,0,0,0,3.42013071988495,-8.399999999999999\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M3.42013071988495,-7.800000000000001 A10.6,10.6,0,0,0,21.77986928011505,-7.800000000000001\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M12.6,-13.14 A5.04,5.04,0,0,0,12.599999999999998,-3.0599999999999996\" stroke=\"none\" stroke-width=\"1.25\" fill=\"rgb(48, 142, 225)\" stroke-linecap=\"round\" />\n",
       "<path d=\"M12.6,-10.2 A2.1,2.1,0,0,0,12.6,-6.0\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"#333\" stroke-linecap=\"round\" />\n",
       "<path d=\"M21.77986928011505,-8.399999999999999 A10.6,10.6,0,0,0,15.69914007006101,-13.236830413208175\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M15.69914007006101,-2.9631695867918246 A10.6,10.6,0,0,0,21.77986928011505,-7.800000000000001\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M12.6,-13.7 A10.6,10.6,0,0,0,3.42013071988495,-8.399999999999999\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M3.42013071988495,-7.800000000000001 A10.6,10.6,0,0,0,12.6,-2.5\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M21.77986928011505,-8.399999999999999 A10.6,10.6,0,0,0,3.42013071988495,-8.399999999999999\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M3.42013071988495,-7.800000000000001 A10.6,10.6,0,0,0,21.77986928011505,-7.800000000000001\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<ellipse cx=\"12.6\" cy=\"-8.1\" rx=\"5.04\" ry=\"5.04\" fill=\"#ddd\" stroke=\"none\" stroke-width=\"1.25\" />\n",
       "<path d=\"M21.77986928011505,-8.399999999999999 A10.6,10.6,0,0,0,3.42013071988495,-8.399999999999999\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M3.42013071988495,-7.800000000000001 A10.6,10.6,0,0,0,21.77986928011505,-7.800000000000001\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M6.0,-2.0 L2.0,-6.066666666666666 L2.0,-10.133333333333333 L6.0,-14.2 L14.6,-14.2 L10.6,-10.133333333333333 L10.6,-6.066666666666666 L14.6,-2.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M14.6,-2.0 L10.6,-6.066666666666666 L10.6,-10.133333333333333 L14.6,-14.2 L23.2,-14.2 L19.2,-10.133333333333333 L19.2,-6.066666666666666 L23.2,-2.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-6.066666666666666 L2.0,-10.133333333333333 L10.6,-10.133333333333333 L19.2,-10.133333333333333 L19.2,-6.066666666666666 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M6.0,-14.2 L12.6,-14.2 L8.6,-10.133333333333333 L8.6,-6.066666666666666 L12.6,-2.0 L6.0,-2.0 L2.0,-6.066666666666666 L2.0,-10.133333333333333 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.25\" stroke-linejoin=\"square\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M16.6,-14.2 L23.2,-14.2 L19.2,-10.133333333333333 L19.2,-6.066666666666666 L23.2,-2.0 L16.6,-2.0 L12.6,-6.066666666666666 L12.6,-10.133333333333333 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M10.6,-10.133333333333333 L2.0,-10.133333333333333 L2.0,-6.066666666666666 L10.6,-6.066666666666666\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M14.6,-14.2 L6.0,-14.2 L2.0,-10.133333333333333 L2.0,-6.066666666666666 L6.0,-2.0 L14.6,-2.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M6.0,-2.0 L2.0,-6.066666666666666 L2.0,-10.133333333333333 L6.0,-14.2 L14.6,-14.2 L10.6,-10.133333333333333 L10.6,-6.066666666666666 L14.6,-2.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M14.6,-2.0 L10.6,-6.066666666666666 L10.6,-10.133333333333333 L14.6,-14.2 L23.2,-14.2 L19.2,-10.133333333333333 L19.2,-6.066666666666666 L23.2,-2.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M6.0,-2.0 L2.0,-6.066666666666666 L2.0,-10.133333333333333 L6.0,-14.2 L14.6,-14.2 L10.6,-10.133333333333333 L10.6,-6.066666666666666 L14.6,-2.0 Z\" fill=\"#ddd\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M14.6,-2.0 L10.6,-6.066666666666666 L10.6,-10.133333333333333 L14.6,-14.2 L23.2,-14.2 L19.2,-10.133333333333333 L19.2,-6.066666666666666 L23.2,-2.0 Z\" fill=\"#ddd\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-6.066666666666666 L2.0,-10.133333333333333 L10.6,-10.133333333333333 L19.2,-10.133333333333333 L19.2,-6.066666666666666 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_pin_light {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_pin_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"10.0\" y=\"-23.0\" width=\"6.0\" height=\"11.0\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.25\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M13.0,-3.0 L13.0,-10.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"2.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M17.330127018922195,-21.5 A5.0,5.0,0,0,0,8.669872981077805,-21.5\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"rgb(48, 142, 225)\" stroke-linecap=\"round\" />\n",
       "<path d=\"M21.66025403784439,-10.2 A10.0,10.0,0,0,0,4.339745962155613,-10.2\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"rgb(48, 142, 225)\" stroke-linecap=\"round\" />\n",
       "<path d=\"M4.5,-10.2 L21.5,-10.2 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M8.8,-21.4 L17.2,-21.4 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_pin_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M23.0,-13.0 A10.0,10.0,0,1,0,22.998476951563912,-12.825475935627155\" stroke=\"#333\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<text x=\"7.0\" y=\"-6.0\" font-size=\"20.0\" fill=\"rgb(48, 142, 225)\" font-family=\"sans-serif\" font-weight=\"bold\" dy=\"0em\">?</text>\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_measure_light {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_measure_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M2.0,-5.0 L2.0,-21.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M24.0,-5.0 L24.0,-21.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M4.0,-13.0 L22.0,-13.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M4.0,-13.0 L6.8,-16.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M4.0,-13.0 L6.8,-10.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M22.0,-13.0 L19.2,-16.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M22.0,-13.0 L19.2,-10.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_measure_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M4.0,-21.6 L22.0,-21.6 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M9.2,-16.8 L20.8,-16.8 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.4\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"6.0\" cy=\"-16.8\" rx=\"0.8\" ry=\"0.8\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M9.2,-12.8 L20.8,-12.8 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.4\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"6.0\" cy=\"-12.8\" rx=\"0.8\" ry=\"0.8\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M9.2,-8.8 L20.8,-8.8 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.4\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"6.0\" cy=\"-8.8\" rx=\"0.8\" ry=\"0.8\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M9.2,-4.8 L20.8,-4.8 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.4\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"6.0\" cy=\"-4.8\" rx=\"0.8\" ry=\"0.8\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_measure_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M2.4,-3.84 L23.6,-3.84 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.45\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.4,-3.84 L14.0,-22.88 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.45\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M17.80793811328415,-6.280377654627602 A15.6,15.6,0,0,0,12.217398100377466,-15.963476998728744\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"2.0\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_appearance_light {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_appearance_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.0\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"0.75\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"0.75\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"rgb(48, 142, 225)\" stroke=\"#333\" stroke-width=\"1.0\" stroke-linejoin=\"round\" fill-opacity=\"0.75\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_appearance_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"7.833333333333333\" y=\"-23.5\" width=\"15.666666666666666\" height=\"15.666666666666666\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.5,-2.5 L2.5,-18.166666666666664 L7.833333333333333,-23.5 L7.833333333333333,-7.833333333333333 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.5,-2.5 L7.833333333333333,-7.833333333333333 L23.5,-7.833333333333333 L18.166666666666664,-2.5 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.5,-18.166666666666664 L7.833333333333333,-23.5 L23.5,-23.5 L18.166666666666664,-18.166666666666664 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.166666666666664,-2.5 L18.166666666666664,-18.166666666666664 L23.5,-23.5 L23.5,-7.833333333333333 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.5\" y=\"-18.166666666666664\" width=\"15.666666666666666\" height=\"15.666666666666666\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_explode_light {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_explode_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<ellipse cx=\"22.5\" cy=\"-13.0\" rx=\"2.5\" ry=\"2.5\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L20.5,-13.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"15.935661446562001\" cy=\"-22.03503690480396\" rx=\"2.5\" ry=\"2.5\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L15.317627457812106,-20.132923872213652 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"5.3143385534380005\" cy=\"-18.583959896778495\" rx=\"2.5\" ry=\"2.5\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L6.932372542187895,-17.40838939219355 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"5.314338553437999\" cy=\"-7.416040103221507\" rx=\"2.5\" ry=\"2.5\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L6.932372542187894,-8.591610607806452 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"15.935661446561998\" cy=\"-3.9649630951960404\" rx=\"2.5\" ry=\"2.5\" fill=\"rgb(48, 142, 225)\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L15.317627457812105,-5.867076127786348 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"13.0\" cy=\"-13.0\" rx=\"2.0\" ry=\"2.0\" fill=\"#333\" stroke=\"#333\" stroke-width=\"1.75\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_light\"><style>\n",
       "    .btn_axes_light {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #fff; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_light {\n",
       "        background-color: #fff;     \n",
       "    }\n",
       "    </style><div class=\"btn_axes_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M6.6,-10.0 L19.4,-3.0 Z\" fill=\"none\" stroke=\"#f00\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.6,-10.0 L19.4,-17.0 Z\" fill=\"none\" stroke=\"rgb(0,128,0)\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.6,-10.0 L6.6,-24.0 Z\" fill=\"none\" stroke=\"#00f\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_axes_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M6.6,-10.0 L19.4,-3.0 Z\" fill=\"none\" stroke=\"#f00\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.6,-10.0 L19.4,-17.0 Z\" fill=\"none\" stroke=\"rgb(0,128,0)\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.6,-10.0 L6.6,-24.0 Z\" fill=\"none\" stroke=\"#00f\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"6.6\" cy=\"-10.0\" rx=\"3.0\" ry=\"3.8\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.4\" />\n",
       "<ellipse cx=\"6.6\" cy=\"-10.0\" rx=\"2.0\" ry=\"3.0\" fill=\"#fff\" stroke=\"#333\" stroke-width=\"1.4\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_axes_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M2.4,-2.0 L23.6,-2.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.4,-9.333333333333332 L23.6,-9.333333333333332 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.4,-16.666666666666664 L23.6,-16.666666666666664 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.4,-24.0 L23.6,-24.0 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.4 L2.0,-23.6 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M9.333333333333332,-2.4 L9.333333333333332,-23.6 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M16.666666666666664,-2.4 L16.666666666666664,-23.6 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M24.0,-2.4 L24.0,-23.6 Z\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_axes_light\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"14.0\" y=\"-24.0\" width=\"10.0\" height=\"10.0\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"1.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L14.0,-14.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"0.75\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-18.0 L24.0,-24.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"0.75\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L24.0,-14.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"0.75\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L14.0,-24.0 Z\" fill=\"none\" stroke=\"rgb(48, 142, 225)\" stroke-width=\"0.75\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#333\" stroke-width=\"1.875\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_dark\"><style>\n",
       "    .btn_nav_dark {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #444; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_dark {\n",
       "        background-color: #444;     \n",
       "    }\n",
       "    </style><div class=\"btn_nav_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M22.0,-7.5 L22.0,-18.5 L13.0,-13.0 L13.0,-2.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L13.0,-2.0 L4.0,-7.5 L4.0,-18.5 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M22.0,-18.5 L13.0,-24.0 L4.0,-18.5 L13.0,-13.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.2\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M18.0,-21.660254037844386 A10.0,10.0,0,1,0,23.0,-12.999999999999998\" stroke=\"#ddd\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M16.0,-18.196152422706632 A6.0,6.0,0,1,0,19.0,-12.999999999999998\" stroke=\"#ddd\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M17.0,-13.0 L21.0,-17.0 L25.0,-13.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"2.0\" y=\"-24.0\" width=\"22.0\" height=\"22.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-6.0 L10.0,-10.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-20.0 L16.0,-16.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-6.0 L16.0,-10.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-20.0 L10.0,-16.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-6.0 L6.0,-10.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-6.0 L10.0,-6.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-20.0 L20.0,-16.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-20.0 L16.0,-20.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-20.0 L6.0,-16.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.0,-20.0 L10.0,-20.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-6.0 L20.0,-10.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M20.0,-6.0 L16.0,-6.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_nav_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M2.0,-5.0 L4.4,-13.0 L24.0,-13.0 L21.0,-5.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M13.0,-9.5 L13.0,-19.5 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"2.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M11.0,-17.5 L13.0,-19.5 L15.0,-17.5 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"2.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_dark\"><style>\n",
       "    .btn_ani_dark {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #444; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_dark {\n",
       "        background-color: #444;     \n",
       "    }\n",
       "    </style><div class=\"btn_ani_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M5.0,-4.0 L5.0,-22.0 L21.0,-13.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_ani_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"5.2\" y=\"-22.0\" width=\"5.6\" height=\"18.0\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"15.2\" y=\"-22.0\" width=\"5.6\" height=\"18.0\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_ani_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"4.0\" y=\"-22.0\" width=\"18.0\" height=\"18.0\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_dark\"><style>\n",
       "    .btn_tree_dark {\n",
       "        display: inline-block;\n",
       "        width: 25.2px;\n",
       "        height: 16.2px;\n",
       "        background-color: #444; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_dark {\n",
       "        background-color: #444;     \n",
       "    }\n",
       "    </style><div class=\"btn_tree_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<ellipse cx=\"12.6\" cy=\"-8.1\" rx=\"5.04\" ry=\"5.04\" fill=\"rgb(83,160,227)\" stroke=\"none\" stroke-width=\"1.25\" />\n",
       "<ellipse cx=\"12.6\" cy=\"-8.1\" rx=\"2.1\" ry=\"2.1\" fill=\"#ddd\" stroke=\"#ddd\" stroke-width=\"1.25\" />\n",
       "<path d=\"M21.77986928011505,-8.399999999999999 A10.6,10.6,0,0,0,3.42013071988495,-8.399999999999999\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M3.42013071988495,-7.800000000000001 A10.6,10.6,0,0,0,21.77986928011505,-7.800000000000001\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M12.6,-13.14 A5.04,5.04,0,0,0,12.599999999999998,-3.0599999999999996\" stroke=\"none\" stroke-width=\"1.25\" fill=\"rgb(83,160,227)\" stroke-linecap=\"round\" />\n",
       "<path d=\"M12.6,-10.2 A2.1,2.1,0,0,0,12.6,-6.0\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"#ddd\" stroke-linecap=\"round\" />\n",
       "<path d=\"M21.77986928011505,-8.399999999999999 A10.6,10.6,0,0,0,15.69914007006101,-13.236830413208175\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M15.69914007006101,-2.9631695867918246 A10.6,10.6,0,0,0,21.77986928011505,-7.800000000000001\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M12.6,-13.7 A10.6,10.6,0,0,0,3.42013071988495,-8.399999999999999\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M3.42013071988495,-7.800000000000001 A10.6,10.6,0,0,0,12.6,-2.5\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M21.77986928011505,-8.399999999999999 A10.6,10.6,0,0,0,3.42013071988495,-8.399999999999999\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M3.42013071988495,-7.800000000000001 A10.6,10.6,0,0,0,21.77986928011505,-7.800000000000001\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<ellipse cx=\"12.6\" cy=\"-8.1\" rx=\"5.04\" ry=\"5.04\" fill=\"#666\" stroke=\"none\" stroke-width=\"1.25\" />\n",
       "<path d=\"M21.77986928011505,-8.399999999999999 A10.6,10.6,0,0,0,3.42013071988495,-8.399999999999999\" stroke=\"#666\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<path d=\"M3.42013071988495,-7.800000000000001 A10.6,10.6,0,0,0,21.77986928011505,-7.800000000000001\" stroke=\"#666\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M6.0,-2.0 L2.0,-6.066666666666666 L2.0,-10.133333333333333 L6.0,-14.2 L14.6,-14.2 L10.6,-10.133333333333333 L10.6,-6.066666666666666 L14.6,-2.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M14.6,-2.0 L10.6,-6.066666666666666 L10.6,-10.133333333333333 L14.6,-14.2 L23.2,-14.2 L19.2,-10.133333333333333 L19.2,-6.066666666666666 L23.2,-2.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-6.066666666666666 L2.0,-10.133333333333333 L10.6,-10.133333333333333 L19.2,-10.133333333333333 L19.2,-6.066666666666666 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M6.0,-14.2 L12.6,-14.2 L8.6,-10.133333333333333 L8.6,-6.066666666666666 L12.6,-2.0 L6.0,-2.0 L2.0,-6.066666666666666 L2.0,-10.133333333333333 Z\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.25\" stroke-linejoin=\"square\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M16.6,-14.2 L23.2,-14.2 L19.2,-10.133333333333333 L19.2,-6.066666666666666 L23.2,-2.0 L16.6,-2.0 L12.6,-6.066666666666666 L12.6,-10.133333333333333 Z\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M10.6,-10.133333333333333 L2.0,-10.133333333333333 L2.0,-6.066666666666666 L10.6,-6.066666666666666\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M14.6,-14.2 L6.0,-14.2 L2.0,-10.133333333333333 L2.0,-6.066666666666666 L6.0,-2.0 L14.6,-2.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M6.0,-2.0 L2.0,-6.066666666666666 L2.0,-10.133333333333333 L6.0,-14.2 L14.6,-14.2 L10.6,-10.133333333333333 L10.6,-6.066666666666666 L14.6,-2.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M14.6,-2.0 L10.6,-6.066666666666666 L10.6,-10.133333333333333 L14.6,-14.2 L23.2,-14.2 L19.2,-10.133333333333333 L19.2,-6.066666666666666 L23.2,-2.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_tree_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"25.2\" height=\"16.2\" viewBox=\"0 -16.2 25.2 16.2\">\n",
       "<path d=\"M6.0,-2.0 L2.0,-6.066666666666666 L2.0,-10.133333333333333 L6.0,-14.2 L14.6,-14.2 L10.6,-10.133333333333333 L10.6,-6.066666666666666 L14.6,-2.0 Z\" fill=\"#666\" stroke=\"#666\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M14.6,-2.0 L10.6,-6.066666666666666 L10.6,-10.133333333333333 L14.6,-14.2 L23.2,-14.2 L19.2,-10.133333333333333 L19.2,-6.066666666666666 L23.2,-2.0 Z\" fill=\"#666\" stroke=\"#666\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-6.066666666666666 L2.0,-10.133333333333333 L10.6,-10.133333333333333 L19.2,-10.133333333333333 L19.2,-6.066666666666666 Z\" fill=\"none\" stroke=\"#666\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"square\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_dark\"><style>\n",
       "    .btn_pin_dark {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #444; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_dark {\n",
       "        background-color: #444;     \n",
       "    }\n",
       "    </style><div class=\"btn_pin_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"10.0\" y=\"-23.0\" width=\"6.0\" height=\"11.0\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M13.0,-3.0 L13.0,-10.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"2.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M17.330127018922195,-21.5 A5.0,5.0,0,0,0,8.669872981077805,-21.5\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"rgb(83,160,227)\" stroke-linecap=\"round\" />\n",
       "<path d=\"M21.66025403784439,-10.2 A10.0,10.0,0,0,0,4.339745962155613,-10.2\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"rgb(83,160,227)\" stroke-linecap=\"round\" />\n",
       "<path d=\"M4.5,-10.2 L21.5,-10.2 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M8.8,-21.4 L17.2,-21.4 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_pin_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M23.0,-13.0 A10.0,10.0,0,1,0,22.998476951563912,-12.825475935627155\" stroke=\"#ddd\" stroke-width=\"1.25\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "<text x=\"7.0\" y=\"-6.0\" font-size=\"20.0\" fill=\"rgb(83,160,227)\" font-family=\"sans-serif\" font-weight=\"bold\" dy=\"0em\">?</text>\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_dark\"><style>\n",
       "    .btn_measure_dark {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #444; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_dark {\n",
       "        background-color: #444;     \n",
       "    }\n",
       "    </style><div class=\"btn_measure_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M2.0,-5.0 L2.0,-21.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M24.0,-5.0 L24.0,-21.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M4.0,-13.0 L22.0,-13.0 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M4.0,-13.0 L6.8,-16.0 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M4.0,-13.0 L6.8,-10.0 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M22.0,-13.0 L19.2,-16.0 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M22.0,-13.0 L19.2,-10.0 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.7\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_measure_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M4.0,-21.6 L22.0,-21.6 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M9.2,-16.8 L20.8,-16.8 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.4\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"6.0\" cy=\"-16.8\" rx=\"0.8\" ry=\"0.8\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M9.2,-12.8 L20.8,-12.8 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.4\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"6.0\" cy=\"-12.8\" rx=\"0.8\" ry=\"0.8\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M9.2,-8.8 L20.8,-8.8 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.4\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"6.0\" cy=\"-8.8\" rx=\"0.8\" ry=\"0.8\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M9.2,-4.8 L20.8,-4.8 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.4\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"6.0\" cy=\"-4.8\" rx=\"0.8\" ry=\"0.8\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_measure_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M2.4,-3.84 L23.6,-3.84 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.45\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.4,-3.84 L14.0,-22.88 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.45\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M17.80793811328415,-6.280377654627602 A15.6,15.6,0,0,0,12.217398100377466,-15.963476998728744\" stroke=\"rgb(83,160,227)\" stroke-width=\"2.0\" fill=\"none\" stroke-linecap=\"round\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_dark\"><style>\n",
       "    .btn_appearance_dark {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #444; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_dark {\n",
       "        background-color: #444;     \n",
       "    }\n",
       "    </style><div class=\"btn_appearance_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"8.0\" y=\"-24.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.0\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L2.0,-18.0 L8.0,-24.0 L8.0,-8.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L8.0,-8.0 L24.0,-8.0 L18.0,-2.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L8.0,-24.0 L24.0,-24.0 L18.0,-18.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"0.75\" />\n",
       "<path d=\"M18.0,-2.0 L18.0,-18.0 L24.0,-24.0 L24.0,-8.0 Z\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"0.75\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"rgb(83,160,227)\" stroke=\"#ddd\" stroke-width=\"1.0\" stroke-linejoin=\"round\" fill-opacity=\"0.75\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_appearance_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"7.833333333333333\" y=\"-23.5\" width=\"15.666666666666666\" height=\"15.666666666666666\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.5,-2.5 L2.5,-18.166666666666664 L7.833333333333333,-23.5 L7.833333333333333,-7.833333333333333 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.5,-2.5 L7.833333333333333,-7.833333333333333 L23.5,-7.833333333333333 L18.166666666666664,-2.5 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.5,-18.166666666666664 L7.833333333333333,-23.5 L23.5,-23.5 L18.166666666666664,-18.166666666666664 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.166666666666664,-2.5 L18.166666666666664,-18.166666666666664 L23.5,-23.5 L23.5,-7.833333333333333 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.5\" y=\"-18.166666666666664\" width=\"15.666666666666666\" height=\"15.666666666666666\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.5625\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_dark\"><style>\n",
       "    .btn_explode_dark {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #444; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_dark {\n",
       "        background-color: #444;     \n",
       "    }\n",
       "    </style><div class=\"btn_explode_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<ellipse cx=\"22.5\" cy=\"-13.0\" rx=\"2.5\" ry=\"2.5\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L20.5,-13.0 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"15.935661446562001\" cy=\"-22.03503690480396\" rx=\"2.5\" ry=\"2.5\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L15.317627457812106,-20.132923872213652 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"5.3143385534380005\" cy=\"-18.583959896778495\" rx=\"2.5\" ry=\"2.5\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L6.932372542187895,-17.40838939219355 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"5.314338553437999\" cy=\"-7.416040103221507\" rx=\"2.5\" ry=\"2.5\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L6.932372542187894,-8.591610607806452 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"15.935661446561998\" cy=\"-3.9649630951960404\" rx=\"2.5\" ry=\"2.5\" fill=\"rgb(83,160,227)\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.0\" />\n",
       "<path d=\"M13.0,-13.0 L15.317627457812105,-5.867076127786348 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.25\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"13.0\" cy=\"-13.0\" rx=\"2.0\" ry=\"2.0\" fill=\"#ddd\" stroke=\"#ddd\" stroke-width=\"1.75\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"all_dark\"><style>\n",
       "    .btn_axes_dark {\n",
       "        display: inline-block;\n",
       "        width: 26.0px;\n",
       "        height: 26.0px;\n",
       "        background-color: #444; \n",
       "        padding: 0px;\n",
       "        margin: 4px;\n",
       "        border: solid 1px #222;\n",
       "    }\n",
       "    .all_dark {\n",
       "        background-color: #444;     \n",
       "    }\n",
       "    </style><div class=\"btn_axes_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M6.6,-10.0 L19.4,-3.0 Z\" fill=\"none\" stroke=\"rgb(255, 69, 0)\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.6,-10.0 L19.4,-17.0 Z\" fill=\"none\" stroke=\"rgb(50, 205, 50)\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.6,-10.0 L6.6,-24.0 Z\" fill=\"none\" stroke=\"rgb(59, 158, 255)\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_axes_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M6.6,-10.0 L19.4,-3.0 Z\" fill=\"none\" stroke=\"rgb(255, 69, 0)\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.6,-10.0 L19.4,-17.0 Z\" fill=\"none\" stroke=\"rgb(50, 205, 50)\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M6.6,-10.0 L6.6,-24.0 Z\" fill=\"none\" stroke=\"rgb(59, 158, 255)\" stroke-width=\"2.0\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<ellipse cx=\"6.6\" cy=\"-10.0\" rx=\"3.0\" ry=\"3.8\" fill=\"none\" stroke=\"#444\" stroke-width=\"2.4\" />\n",
       "<ellipse cx=\"6.6\" cy=\"-10.0\" rx=\"2.0\" ry=\"3.0\" fill=\"#444\" stroke=\"#ddd\" stroke-width=\"1.4\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_axes_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<path d=\"M2.4,-2.0 L23.6,-2.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.4,-9.333333333333332 L23.6,-9.333333333333332 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.4,-16.666666666666664 L23.6,-16.666666666666664 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.4,-24.0 L23.6,-24.0 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.4 L2.0,-23.6 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M9.333333333333332,-2.4 L9.333333333333332,-23.6 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M16.666666666666664,-2.4 L16.666666666666664,-23.6 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M24.0,-2.4 L24.0,-23.6 Z\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.5\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "<div class=\"btn_axes_dark\"><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"26.0\" height=\"26.0\" viewBox=\"0 -26.0 26.0 26.0\">\n",
       "<rect x=\"14.0\" y=\"-24.0\" width=\"10.0\" height=\"10.0\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"1.5\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-2.0 L14.0,-14.0 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"0.75\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-18.0 L24.0,-24.0 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"0.75\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M18.0,-2.0 L24.0,-14.0 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"0.75\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<path d=\"M2.0,-18.0 L14.0,-24.0 Z\" fill=\"none\" stroke=\"rgb(83,160,227)\" stroke-width=\"0.75\" stroke-linejoin=\"round\" stroke-linecap=\"round\" fill-opacity=\"1.0\" />\n",
       "<rect x=\"2.0\" y=\"-18.0\" width=\"16.0\" height=\"16.0\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1.875\" stroke-linejoin=\"round\" fill-opacity=\"1.0\" />\n",
       "</svg>\n",
       "</div>\n",
       "</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "factor = 8\n",
    "for theme in [\"light\", \"dark\"]:\n",
    "\n",
    "    if theme == \"light\":\n",
    "        blue = \"rgb(48, 142, 225)\"\n",
    "        stroke = \"#333\"\n",
    "        background = \"#fff\"\n",
    "        missing = \"#ddd\"\n",
    "        xcolor = \"#f00\";\n",
    "        ycolor = \"rgb(0,128,0)\";\n",
    "        zcolor = \"#00f\";\n",
    "    else:\n",
    "        blue = \"rgb(83,160,227)\"\n",
    "        stroke = \"#ddd\"\n",
    "        background = \"#444\"\n",
    "        missing = \"#666\"\n",
    "        xcolor = \"rgb(255, 69, 0)\";\n",
    "        ycolor = \"rgb(50, 205, 50)\";\n",
    "        zcolor = \"rgb(59, 158, 255)\";        \n",
    "        \n",
    "    icons = nav_icons(factor, stroke, background)\n",
    "    icons.show(theme, \"nav\")\n",
    "\n",
    "    icons = ani_icons(factor, stroke, background)\n",
    "    icons.show(theme, \"ani\")\n",
    "    \n",
    "    icons = tree_icons(factor, stroke, background, missing)\n",
    "    icons.show(theme, \"tree\")\n",
    "    \n",
    "    icons = pin_icons(factor, stroke, background, missing)\n",
    "    icons.show(theme, \"pin\")\n",
    "    \n",
    "    icons = measure_icons(factor, stroke, background, missing)\n",
    "    icons.show(theme, \"measure\") \n",
    "    \n",
    "    icons = appearance_icons(factor, stroke, background, missing)\n",
    "    icons.show(theme, \"appearance\")  \n",
    "    \n",
    "    icons = explode_icons(factor, stroke, background, missing)\n",
    "    icons.show(theme, \"explode\")      \n",
    "    \n",
    "    \n",
    "    icons = axes_icons(factor, stroke, background, missing)\n",
    "    icons.show(theme, \"axes\")      "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": []
   },
   "source": [
    "## Install icons"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-10-02T20:04:23.894052Z",
     "iopub.status.busy": "2023-10-02T20:04:23.893938Z",
     "iopub.status.idle": "2023-10-02T20:04:23.907035Z",
     "shell.execute_reply": "2023-10-02T20:04:23.906722Z",
     "shell.execute_reply.started": "2023-10-02T20:04:23.894043Z"
    },
    "tags": []
   },
   "outputs": [],
   "source": [
    "import os\n",
    "import base64\n",
    "\n",
    "template = \"\"\".btn_{mode}_{name} {{\n",
    "  background:\n",
    "    url(data:image/svg+xml;base64,{b64})\n",
    "    no-repeat\n",
    "    center center;\n",
    "}}\n",
    "\"\"\"\n",
    "\n",
    "for theme in  [\"light\", \"dark\"]:\n",
    "    if theme == \"light\":\n",
    "        blue = \"rgb(83,160,227)\"\n",
    "        stroke = \"#444\"\n",
    "        background = \"#fff\"\n",
    "        missing = \"#ddd\"\n",
    "        xcolor = \"#f00\";\n",
    "        ycolor = \"rgb(0,128,0)\";\n",
    "        zcolor = \"#00f\";        \n",
    "    else:\n",
    "        blue = \"rgb(48, 142, 225)\"\n",
    "        stroke = \"#ddd\"\n",
    "        background = \"#444\"\n",
    "        missing = \"#666\"\n",
    "        xcolor = \"rgb(255, 69, 0)\";\n",
    "        ycolor = \"rgb(50, 205, 50)\";\n",
    "        zcolor = \"rgb(59, 158, 255)\";        \n",
    "\n",
    "    for icons in [\n",
    "        nav_icons(factor, stroke, background, missing), \n",
    "        tree_icons(factor, stroke, background, missing), \n",
    "        ani_icons(factor, stroke, background, missing), \n",
    "        pin_icons(factor, stroke, background, missing),\n",
    "        measure_icons(factor, stroke, background, missing),\n",
    "        appearance_icons(factor, stroke, background, missing),\n",
    "        explode_icons(factor, stroke, background, missing),\n",
    "        axes_icons(factor, stroke, background, missing),\n",
    "    ]:\n",
    "        icons.save(theme)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.6"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {},
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}