Tactycon Unit Colors

by mgoetzke

HTML

<div class="unit warrior "></div>
<div class="unit warrior player-1 "></div>
<div class="unit warrior player-2 "></div>
<svg width="0" height="0">
    <defs>
        <filter id="RedFilter">
            <feComponentTransfer>
                <feFuncR id="funcR" type="table" tableValues="0.6039215686274509 1"></feFuncR>
                <feFuncG id="funcG" type="table" tableValues="0.1568627450980392 1"></feFuncG>
                <feFuncB id="funcB" type="table" tableValues="0.047058823529411764 1"></feFuncB>
            </feComponentTransfer>
            <filter>
    </defs>
</svg>
<svg width="0" height="0">
    <defs>
        <filter id="BlueFilter">
            <feComponentTransfer>
                <feFuncR id="funcR" type="table" tableValues="0.047058823529411764 1"></feFuncR>
                <feFuncG id="funcG" type="table" tableValues="0.11764705882352941 1"></feFuncG>
                <feFuncB id="funcB" type="table" tableValues="0.6039215686274509 1"></feFuncB>
            </feComponentTransfer>
            <filter></filter>
        </filter>
    </defs>
</svg>

CSS

.unit.player-1 {
    -webkit-filter: url(#BlueFilter);
    filter: url(#BlueFilter);
}
.unit.player-2 {
    -webkit-filter: url(#RedFilter);
    filter: url(#RedFilter);
}
.unit {
    width: 48px;
    height: 48px;
    background-size:contain;
    background-attachment:scroll;
    background-color:transparent;
    background-position:center center;
    background-repeat:no-repeat;
    image-rendering: pixelated;
}
.warrior {
    background-image:...