JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<div id="logo">
  <div class="container">
    <div class="slice" id="one">
      <svg height="200" width="200">
        <filter id="MyFilter" height="300%">
          <feFlood flood-color="black" />
          <feComposite operator="out" in2="SourceGraphic" />
          <feGaussianBlur stdDeviation="4" />
          <feComposite operator="atop" in2="SourceGraphic" />
        </filter>
        <polygon points="0,200 100,100 200,200" style="fill:rgb(8, 149, 55)" filter="url(#MyFilter)" />
      </svg>
    </div>
    <div class="slice" id="two">
      <svg height="200" width="200">
        <filter id="MyFilter" height="300%">
          <feFlood flood-color="black" />
          <feComposite operator="out" in2="SourceGraphic" />
          <feGaussianBlur stdDeviation="4" />
          <feComposite operator="atop" in2="SourceGraphic" />
        </filter>
        <polygon points="0,0 100,100 0,200" style="fill:rgb(39, 50, 137)" filter="url(#MyFilter)" />
        <text x="0" y="0" font-family="Verdana" font-size="34"   transform="translate(30,168)rotate(-90)" style="fill:#ddd">
    haberler
  </text>
      </svg>
    </div>
    <div class="slice" id="three">
      <svg height="200" width="200">
        <filter id="MyFilter" height="300%">
          <feFlood flood-color="black" />
          <feComposite operator="out" in2="SourceGraphic" />
          <feGaussianBlur stdDeviation="4" />
          <feComposite operator="atop" in2="SourceGraphic" />
        </filter>
        <polygon points="0,0 100,100 200,0" style="fill:rgb(227, 8, 16)" filter="url(#MyFilter)" />
      </svg>
    </div>
    <div class="slice" id="four">
      <svg height="200" width="200">
        <filter id="MyFilter" height="300%">
          <feFlood flood-color="black" />
          <feComposite operator="out" in2="SourceGraphic" />
          <feGaussianBlur stdDeviation="4" />
          <feComposite operator="atop" in2="SourceGraphic" />
        </filter>
        <polygon points="200,0 100,100 200,200"...

CSS

#logo {
  position: relative;
  height: 330px;
  width: 330px
}

#logo .container {
  margin: 63px 63px 63px 63px
}

#logo .container,
#logo .slice {
  position: absolute;
  height: 200px;
  width: 200px
}

#logo .slice {
  transition: all .5s;
}

#logo .container:hover .slice {
  transform: scale(1.5);
}

#logo .container:hover #one {
  padding-top: 20px
}

#logo #two {
  left: 0px
}

#logo .container:hover #two {
  left: -20px
}

#logo #three {
  top: 0px
}

#logo .container:hover #three {
  top: -20px
}

#logo .container:hover #four {
  padding-left: 20px
}