JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" xmlns:xlink="http://www.w3.org/1999/xlink" class="reverse">
  <mask id="hexagon">
    <polygon points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
  </mask>
  <g transform="rotate(60, 150, 150)">
  <rect x=0 y=0 width=300 height=300 mask="url(#hexagon)" />
  <rect id="filling" x=0 y=300 width=300 height=300 mask="url(#hexagon)" />
  </g>
  <text x="50%" y="50%" font-size=22 text-anchor="middle">Apixio</text>
</svg>

CSS

body {
  background: white;
}

polygon {
  stroke: #efefef;
  stroke-width: 1px;
  fill: #efefef;
}

rect {
  fill: #efefef;
  stroke: #efefef;
  stroke-width: 1px;
}

.reverse rect {
  fill: #2da6de;
}

#filling {
  transition: y 3s;
  fill: #2da6de;
}

.reverse #filling {
  fill: #efefef;
}

svg:hover #filling {
  y: 0;
}

text {
  transition: fill 3s;
}

svg {
  cursor: pointer;
}

svg:hover text {
  fill: white;
}
svg.reverse:hover text {
  fill: black;
}
svg.reverse text {
  fill: white;
}

* {
  font-family: Georgia;
}

rect {
  transform: rotate(9);
}