<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<script>
    <![CDATA[
var blendModes = ["normal", "multiply", "screen", "darken", "lighten", "overlay", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
var svgElement = document.rootElement;
var svgns = 'http://www.w3.org/2000/svg';
for (var i = 0; i <= blendModes.length; i++) {
    var filter = document.createElementNS(svgns, 'filter');
    filter.setAttribute('id', 'f'+i);
    filter.setAttribute('x', '0%');
    filter.setAttribute('y', '0%');
    filter.setAttribute('width', '100%');
    filter.setAttribute('height', '100%');
    var floodA = document.createElementNS(svgns, 'feFlood');
    floodA.setAttribute('result', 'a');
    floodA.setAttribute('flood-color', 'rgb(255,0,0)');
    floodA.setAttribute('flood-opacity', '0.5');
    var floodB = document.createElementNS(svgns, 'feFlood');
    floodB.setAttribute('result', 'b');
    floodB.setAttribute('flood-color', 'rgb(0,255,0)');
    floodB.setAttribute('flood-opacity', '0.5');
    var blend = document.createElementNS(svgns, 'feBlend');
    blend.setAttribute('in', 'a');
    blend.setAttribute('in2', 'b');
    blend.setAttribute('mode', blendModes[i]);
    filter.appendChild(floodA);
    filter.appendChild(floodB);
    filter.appendChild(blend);
    svgElement.appendChild(filter);
    var rect =  document.createElementNS(svgns, 'rect');
    rect.setAttribute('x', (i%8)*50);
    rect.setAttribute('y', (i > 8 ? 50: 0));
    rect.setAttribute('width', '50');
    rect.setAttribute('height', '50');
    rect.setAttribute('filter', 'url(#f'+i+')');
    svgElement.appendChild(rect);
}]]>
</script>
</svg>