nycJSorg/angular-presentation

<svg width="90vw" height="60vh" viewBox="0 0 780 540">
  <style>
    /* TODO: Use proper fonts */
    .parent {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 50px;
      fill: white;
    }

    .child-first {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 30px;
      font-weight: bold;
      fill: white;
    }
  </style>

  <g>
    <rect
      x="0"
      y="0"
      width="780"
      height="540"
      style="fill:rgb(100%,100%,100%);"
    />
    <path
      style="fill:rgb(0%,19.999695%,55.299377%);"
      d="M 110.039062 288.71875 L 529.199219 288.71875 L 529.199219 263.640625 L 110.039062 263.640625 Z M 110.039062 288.71875 "
    />
    <path
      style="fill:rgb(0%,19.999695%,55.299377%);"
      d="M 183.839844 124.921875 L 183.839844 93.371094 C 183.839844 75.941406 197.96875 61.808594 215.390625 61.808594 L 509.851562 61.808594 L 509.851562 52.800781 L 527.878906 70.828125 L 509.851562 88.859375 L 509.851562 79.851562 L 215.390625 79.851562 C 207.921875 79.851562 201.871094 85.898438 201.871094 93.371094 L 201.871094 124.921875 Z M 183.839844 124.921875 "
    />
    <path
      style="fill:rgb(0%,19.999695%,55.299377%);"
      d="M 183.839844 429.359375 L 183.839844 458.550781 C 183.839844 474.671875 196.910156 487.738281 213.03125 487.738281 L 511.199219 487.738281 L 511.199219 496.078125 L 527.878906 479.398438 L 511.199219 462.71875 L 511.199219 471.058594 L 213.03125 471.058594 C 206.121094 471.058594 200.519531 465.460938 200.519531 458.550781 L 200.519531 429.359375 Z M 183.839844 429.359375 "
    />
    <path
      style="fill:rgb(0%,14.898682%,41.598511%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,19.999695%,55.299377%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 0 263.820312 C 0 364.320312 81.476562 445.800781 181.980469 445.800781 C 282.480469 445.800781 363.960938 364.320312 363.960938 263.820312 C 363.960938 163.320312 282.480469 81.839844 181.980469 81.839844 C 81.476562 81.839844 0 163.320312 0 263.820312 Z M 0 263.820312 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(0%,36.898804%,72.198486%);"
      d="M 563.761719 43.679688 L 665.160156 43.679688 L 665.160156 33.601562 L 563.761719 33.601562 Z M 563.761719 43.679688 "
    />
    <path
      style="fill:rgb(41.999817%,63.09967%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 643.679688 502.859375 C 643.679688 514.820312 653.378906 524.519531 665.339844 524.519531 C 677.300781 524.519531 687 514.820312 687 502.859375 C 687 490.898438 677.300781 481.199219 665.339844 481.199219 C 653.378906 481.199219 643.679688 490.898438 643.679688 502.859375 Z M 643.679688 502.859375 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(0%,36.898804%,72.198486%);"
      d="M 563.761719 107.878906 L 665.160156 107.878906 L 665.160156 97.679688 L 563.761719 97.679688 Z M 563.761719 107.878906 "
    />
    <path
      style="fill:rgb(41.999817%,63.09967%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 643.679688 436.859375 C 643.679688 448.820312 653.378906 458.519531 665.339844 458.519531 C 677.300781 458.519531 687 448.820312 687 436.859375 C 687 424.898438 677.300781 415.199219 665.339844 415.199219 C 653.378906 415.199219 643.679688 424.898438 643.679688 436.859375 Z M 643.679688 436.859375 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(0%,36.898804%,72.198486%);"
      d="M 563.761719 249.121094 L 665.160156 249.121094 L 665.160156 238.441406 L 563.761719 238.441406 Z M 563.761719 249.121094 "
    />
    <path
      style="fill:rgb(41.999817%,63.09967%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 643.679688 296.039062 C 643.679688 308.039062 653.378906 317.761719 665.339844 317.761719 C 677.300781 317.761719 687 308.039062 687 296.039062 C 687 284.039062 677.300781 274.320312 665.339844 274.320312 C 653.378906 274.320312 643.679688 284.039062 643.679688 296.039062 Z M 643.679688 296.039062 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(0%,36.898804%,72.198486%);"
      d="M 563.761719 313.558594 L 665.160156 313.558594 L 665.160156 302.878906 L 563.761719 302.878906 Z M 563.761719 313.558594 "
    />
    <path
      style="fill:rgb(41.999817%,63.09967%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 643.679688 231.660156 C 643.679688 243.621094 653.378906 253.320312 665.339844 253.320312 C 677.300781 253.320312 687 243.621094 687 231.660156 C 687 219.699219 677.300781 210 665.339844 210 C 653.378906 210 643.679688 219.699219 643.679688 231.660156 Z M 643.679688 231.660156 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(0%,36.898804%,72.198486%);"
      d="M 563.761719 446.160156 L 665.160156 446.160156 L 665.160156 435.601562 L 563.761719 435.601562 Z M 563.761719 446.160156 "
    />
    <path
      style="fill:rgb(41.999817%,63.09967%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 643.679688 99 C 643.679688 111 653.378906 120.71875 665.339844 120.71875 C 677.300781 120.71875 687 111 687 99 C 687 87.003906 677.300781 77.28125 665.339844 77.28125 C 653.378906 77.28125 643.679688 87.003906 643.679688 99 Z M 643.679688 99 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(0%,36.898804%,72.198486%);"
      d="M 563.761719 510.359375 L 665.160156 510.359375 L 665.160156 499.679688 L 563.761719 499.679688 Z M 563.761719 510.359375 "
    />
    <path
      style="fill:rgb(41.999817%,63.09967%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 643.679688 34.859375 C 643.679688 46.824219 653.378906 56.519531 665.339844 56.519531 C 677.300781 56.519531 687 46.824219 687 34.859375 C 687 22.898438 677.300781 13.199219 665.339844 13.199219 C 653.378906 13.199219 643.679688 22.898438 643.679688 34.859375 Z M 643.679688 34.859375 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(13.299561%,44.699097%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 581.941406 27.238281 C 555.960938 3 513.898438 3 487.921875 27.238281 C 581.941406 114.960938 581.941406 114.960938 581.941406 114.960938 C 607.921875 90.722656 607.921875 51.476562 581.941406 27.238281 Z M 581.941406 27.238281 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(13.299561%,44.699097%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 468.238281 66.898438 C 468.238281 103.851562 498.378906 133.800781 535.558594 133.800781 C 572.738281 133.800781 602.878906 103.851562 602.878906 66.898438 C 602.878906 29.953125 572.738281 0 535.558594 0 C 498.378906 0 468.238281 29.953125 468.238281 66.898438 Z M 468.238281 66.898438 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(13.299561%,44.699097%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 581.941406 433.441406 C 555.960938 409.199219 513.898438 409.199219 487.921875 433.441406 C 581.941406 521.160156 581.941406 521.160156 581.941406 521.160156 C 607.921875 496.921875 607.921875 457.679688 581.941406 433.441406 Z M 581.941406 433.441406 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(13.299561%,44.699097%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 468.238281 473.101562 C 468.238281 510.050781 498.378906 540 535.558594 540 C 572.738281 540 602.878906 510.050781 602.878906 473.101562 C 602.878906 436.148438 572.738281 406.199219 535.558594 406.199219 C 498.378906 406.199219 468.238281 436.148438 468.238281 473.101562 Z M 468.238281 473.101562 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(13.299561%,44.699097%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 581.941406 224.160156 C 555.960938 199.921875 513.898438 199.921875 487.921875 224.160156 C 581.941406 311.878906 581.941406 311.878906 581.941406 311.878906 C 607.921875 287.640625 607.921875 248.398438 581.941406 224.160156 Z M 581.941406 224.160156 "
      transform="matrix(1,0,0,-1,0,540)"
    />
    <path
      style="fill:rgb(13.299561%,44.699097%,100%);stroke-width:0.72;stroke-linecap:butt;stroke-linejoin:round;stroke:rgb(0%,9.799194%,27.799988%);stroke-opacity:1;stroke-miterlimit:10;"
      d="M 468.238281 263.820312 C 468.238281 300.769531 498.378906 330.71875 535.558594 330.71875 C 572.738281 330.71875 602.878906 300.769531 602.878906 263.820312 C 602.878906 226.871094 572.738281 196.921875 535.558594 196.921875 C 498.378906 196.921875 468.238281 226.871094 468.238281 263.820312 Z M 468.238281 263.820312 "
      transform="matrix(1,0,0,-1,0,540)"
    />
  </g>

  <text x="495" y="79" class="child-first">Child</text>
  <text x="495" y="288" class="child-first">Child</text>
  <text x="495" y="487" class="child-first">Child</text>

  <text x="110" y="290" class="parent">Parent</text>
</svg>