<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG Path Playground</title>
  <script src="../../blockly_uncompressed.js"></script>

  <style>
    html, body {
      height: 100%;
    }
    body {
      background-color: #fff;
      font-family: sans-serif;
      overflow: hidden;
    }
    .pathDebugClass {
      stroke-width: 1px;
      stroke: black;
      fill: none;
    }
    .lineStartMarker {
      fill: blue;
    }
  </style>

<script>
'use strict';
var svgSpace;

function addPathAt(path, x, y) {
  var group = Blockly.utils.createSvgElement('g', {}, svgSpace);
  Blockly.utils.createSvgElement('path', {
    'd': 'm ' + (x + 50) + ',' + y + ' ' + path,
    'marker-start': 'url(#startDot)',
    'marker-end': 'url(#endDot)',
    'class': 'pathDebugClass'
  },
  group);


  return group;
}

function start() {
  svgSpace = document.getElementById('workspace');
  addPathAt(Blockly.BlockSvg.TAB_PATH_DOWN, 0, 0);
  addPathAt(Blockly.BlockSvg.START_HAT_PATH, 0, 40);
  addPathAt(Blockly.BlockSvg.NOTCH_PATH_LEFT, 0, 60);
  addPathAt(Blockly.BlockSvg.NOTCH_PATH_RIGHT, 0, 70);
  addPathAt(Blockly.BlockSvg.INNER_TOP_LEFT_CORNER, 0, 90);
}
</script>

</head>

<body onload="start()">

  <svg xmlns="http://www.w4.org/2000/svg" version="1.1" width="1000px" height="1000px" viewBox="0 0 200 200" id="workspace">

    <defs>
      <!-- Background grid -->
      <pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10">
        <line stroke="#ccc" stroke-width="2" x1="0" y1="1" x2="2" y2="1"></line>
      </pattern>
      <!-- simple dot marker definitions -->
      <marker id="startDot" viewBox="0 0 10 10" refX="5" refY="5"
          markerWidth="5" markerHeight="5">
        <circle cx="5" cy="5" r="2" fill="red" />
      </marker>
      <marker id="endDot" viewBox="0 0 10 10" refX="5" refY="5"
          markerWidth="5" markerHeight="5">
        <circle cx="5" cy="5" r="2" fill="blue" />
      </marker>
    </defs>
    <rect x="0" y="0" width="1000" height="1000" style="fill:url(#grid);"></rect>
  </svg>
</body>

Add a playgound for debugging SVG paths
Add a playgound for debugging SVG paths
