title: Create small polygons inside large polygons in SVG using javascript
body: <p>I am very new to SVG graphics.I am trying to create multiple SVG polygons inside a svg rectangle.</p>
  
  <p>I am facing challenge in creating smaller polygon inside big polygon.</p>
  
  <p>My polygons are multi sided and not just triangles and rectangles. How do I get points of inner polygon , I have points of parent polygon and spacing distance between parent and child polygon</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="120" height="120" viewBox="0 0 120 120"
       xmlns="http://www.w3.org/2000/svg"&gt;
      
    &lt;polygon id="poly_depth1" points="60,20 100,40 100,80 60,100 20,80 20,40" fill="blue"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Consider above example , I have a polygon with id poly_depth1, I want to create another polygon 10px inside this polygon.I want to create this child polygon  using plain JavaScript or D3.The polygon should retain the same shape.</p>