JSFiddle - React, Tailwind, and code Playground

by maros_urbanec

HTML

<h3>CSS filters (webkit only)</h3>
<div class="original">No filter</div>

<div class="hue360 original">
  Hue +360deg
</div>

<div class="hue">
    <div class="original hue-reverse">Hue +180 and -180deg</div>
</div>

<div class="hue90">
    <div class="hue90">
        <div class="hue90">
              <div class="hue90 original">Hue 4 * +90</div>  
        </div>
    </div>
</div>

<div class="original hue">Hue +180deg</div>

<div class="hue90">
    <div class="hue90 original">Hue +90 +90</div>
</div>

<h3>SVG filters</h3>

<svg width="500" height="280">
    <defs>
        <filter id="hue180">
            <feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
        </filter>
        <filter id="hue90">
            <feColorMatrix in="SourceGraphic" type="hueRotate" values="90" />
        </filter>
        <filter id="hueReverse">
            <feColorMatrix in="SourceGraphic" type="hueRotate" values="-180" />
        </filter>
    </defs>
    <rect width="100" height="100" fill="#E51922" />
    <text x="0" y="20">Original</text>
   <g transform="translate(0, 120)">
    <rect width="100" height="100" filter=url(#hue180) fill="#E51922" />
    <text x="0" y="20">Hue +180</text>
    
    <g filter=url(#hueReverse)>
        <rect width="100" height="100" x="120" fill="#E51922" filter="url(#hue180)" />
        <text x="120" y="20">Hue +180 -180</text>
    </g>
    
    <g filter="url(#hue90)">
        <rect x="240" width="100" height="100" fill="#E51922" filter="url(#hue90)"/>
        <text x="240" y="20">Hue +90 +90</text>
    </g>
   </g>
</svg>

CSS

.original {
  width: 150px;
  height: 50px;
  background-color: #E51922;
  margin-bottom: 10px;
}

.hue {
    -webkit-filter: hue-rotate(180deg);
}

.hue90 {
    -webkit-filter: hue-rotate(90deg);
}

.hue360 {
    -webkit-filter: hue-rotate(360deg);
}

.hue-reverse {
   -webkit-filter: hue-rotate(-180deg);
}