Cacher is the code snippet organizer for pro developers

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style -->
<div>
  <div>


    <p>
      hello
    </p>
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <style>
        /* <![CDATA[ */
        
        .shape {
          fill: cyan;
          stroke: black;
          stroke-width: 0.05px;
          /* Note: The value of a pixel depends
                             on the view box */
        }
        /* ]]> */

      </style>

      <polygon points="0,0 10,10 60,60 10,60 50,100" style="fill:lime;stroke:purple;stroke-width:1" />
    </svg>
  </div>
</div>
<div>
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 1,1 2,2 3,3 4,4 10,10 100, 10" stroke="black" fill="transparent" />
  </svg>
</div>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <polygon points="0,0 1,1 2,2 3,3 4,4 10,10" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <style>
    /* <![CDATA[ */
    
    .shape {
      fill: cyan;
      stroke: black;
      stroke-width: 0.05px;
      /* Note: The value of a pixel depends
                             on the view box */
    }
    /* ]]> */

  </style>

  <circle class="shape" cx="100" cy="200" r="100" />
</svg>