<html>
<head>
<script language="javascript">
<!--

SVG_NS = 'http://www.w3.org/2000/svg';

function pathFromStar (radius, innerRadius, sides) {
    var path = [];
    for (var i = 0; i < sides * 2; ++i) {
        var theta = Math.PI * i / sides + (Math.PI / 2);
        var r = (i % 2) ? radius : innerRadius;
        var x = r * Math.cos(theta);
        var y = r * Math.sin(theta);
        path.push((i ? 'L' : 'M'), x, y);
    }
    path.push('Z');
    return path.join(' ');
}

function newSvgElement (tagName, parentNode, attrs) {
    var node = document.createElementNS(SVG_NS, tagName);
    if (attrs) {
        for (var k in attrs) {
            node.setAttribute(k, attrs[k]);
        }
    }
    if (parentNode) {
        parentNode.appendChild(node);
    }
    return node;
}

function setCenterPosition (node, x, y) {
    node.setAttribute('transform', 'translate($1, $2)'
        .replace('$1', x)
        .replace('$2', y));
}

var armed = null;

window.addEventListener('load', function () {

    var svgContainer = newSvgElement('svg', document.body);
    svgContainer.setAttribute('width', '100%');
    svgContainer.setAttribute('height', '100%');
    var shapes = [
        { pos: [ 100, 100 ], size: 60, hasStroke: false },
        { pos: [ 250, 100 ], size: 60, hasStroke: true },
        { pos: [ 400, 100 ], size: 50, hasStroke: true }
    ];
    svgContainer.style.WebkitSvgShadow = '5px 5px 5px red';
    svgContainer.style.opacity = '0.5';
    for (var i = 0; i < shapes.length; ++i) {
        var shape = shapes[i];
        var group = newSvgElement('g', svgContainer);
        var node = newSvgElement('path', group, {
            d: pathFromStar(shape.size, shape.size / 2, 5),
            fill: '#999',
            stroke: 'black',
            'stroke-width': 10,
        });
        setCenterPosition(node, shape.pos[0], shape.pos[1]);
        if (shapes[i].hasStroke) {
            node.setAttribute('stroke-dasharray', 20);
        }
        node.addEventListener('mousedown', function (ev) {
            var e = ev || event;
            armed = { node: e.target || e.srcElement };
        });
        node.addEventListener('mouseup', function () {
            armed = null;
        });
    }
    window.addEventListener('mousemove', function (ev) {
        if (armed) {
            var e = ev || event;
            setCenterPosition(armed.node, e.clientX, e.clientY);
        }
    });
});

//-->
</script>
</head>
<body>

</body>
</html>