Dynamic VML in IE8

by ntoniazzi

HTML

<!DOCTYPE html>
<html>
  
  <head>
    <title>IE8 dynamic shapes test</TITLE>
    <script type="text/javascript">
      
    </script>
  </head>
  
  <body>
    <button onclick="addShape()">Add Shape</button>
  </body>

</html>

JavaScript

var colors = ["#d7ff56", "#ffba19", "#a3ffac", "#ffafde", "#8999bc", "#bcbcbc", "#4283bc", "#ff6d6d"];
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
document.createStyleSheet().cssText =
  'vml\\:fill, vml\\:path, vml\\:shape, vml\\:stroke' +
  '{ behavior:url(#default#VML); display: inline-block; } ';

function addShape() {
  var o = document.createElement("<vml:shape />");
  document.body.appendChild(o);
  with(o.style) {
    position = "absolute";
    width = "100px";
    height = "100px";
    top = (Math.random() * 300 + 100) + "px";
    left = (Math.random() * 300 + 100) + "px";
  }
  o.stroked = false;
  o.coordSize.x = 100;
  o.coordSize.y = 100;
  o.fillcolor = colors[Math.floor(Math.random() * colors.length)];
  o.path =
    "M 17,86 C 68,131 128,55 85,13 41,-28 -33,42 17,86 z " +
    "M 64,40 C 74,50 90,34 80,25 69,15 53,29 64,40 z " +
    "M 50,17 C 60,23 50,49 36,37 29,32 39,10 50,17 z " +
    "M 17,60 C 30,79 58,83 75,68 56,93 23,89 17,60 z";
}