Testing WebKit Filters on Giraffes

by achudars

HTML

<div>
    <p>Original:</p>
    <img class="original" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSPbzqU6xzbhoqkBQFmlmQN7dO3OYsIUWsc-uTLBQ-GPCXlNSk" />
    <br>
    <p>With effect:</p>
    <img class="affected" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSPbzqU6xzbhoqkBQFmlmQN7dO3OYsIUWsc-uTLBQ-GPCXlNSk" />
</div>
<div>
    <p>Original:</p>
    <img class="original" src="http://clipartsy.com/SVG/animals/colors/GIRAFFE/giraffe_tomato_3.svg" />
    <br>
    <p>With effect:</p>
    <img class="affected" src="http://clipartsy.com/SVG/animals/colors/GIRAFFE/giraffe_tomato_3.svg" />
</div>
<div>
    <p>Original:</p>
    <img class="original" src="http://openclipart.org/people/papapishu/Giraffe_.svg" />
    <br>
    <p>With effect:</p>
    <img class="affected" src="http://openclipart.org/people/papapishu/Giraffe_.svg" />
</div>

CSS

.affected {
    -webkit-filter: brightness(0.6) contrast(5) grayscale(1);
}
div {
    height: 150px;
    display:inline-block;
}
img {
    height: 150px;
}

JavaScript

var polys = document.querySelectorAll('polygon,polyline');
[].forEach.call(polys, convertPolyToPath);

function convertPolyToPath(poly) {
    var svgNS = poly.ownerSVGElement.namespaceURI;
    var path = document.createElementNS(svgNS, 'path');
    var points = poly.getAttribute('points').split(/\s+|,/);
    var x0 = points.shift(),
        y0 = points.shift();
    var pathdata = 'M' + x0 + ',' + y0 + 'L' + points.join(' ');
    if (poly.tagName == 'polygon') pathdata += 'z';
    path.setAttribute('d', pathdata);
    poly.parentNode.replaceChild(path, poly);
}