JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<!--<svg style='background-color:transparent;' width="400px" height="250px" viewBox="0 0 400 250" id='pws-logo'>-->
<svg style='transform: rotateX(-33deg) rotateY(40deg) rotateZ(0deg);background-color:transparent;' width="160px" height="90px" viewBox="0 0 300 250" id='pws-logo'>
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="2" dy="2" result="offsetBlur"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path class="main-path" style="filter:url(#drop-shadow);stroke: #4169E1;fill:transparent"
d='M25 200L325 200A110 50 0 0 0 330 140A110 50 0 0 0 305 90A110 50 0 0 0 45 90A110 50 0 0 0 25 140A110 50 0 0 0 25.7 200.7'>
</path>
<text x="65" y="150"
style="fill: #4169E1; font-size:30px;font-family:Calibri;">
Pritish Web Studio 
</text>
</svg>

<figure class="cube__outer1" style="position:relative;display: block;-webkit-transform-style: preserve-3d; width: 120px; height: 120px; transform: rotateX(-33deg) rotateY(-40deg) rotateZ(90deg); background-color: red;"></figure>

CSS

.main-path {
  stroke-dasharray: 1000;
  stroke-width:3;
  animation: logo 2s linear;
}

@keyframes logo {
  from {
    stroke-width:1;
    stroke-dashoffset: 1000;
  }
  to {
    stroke-width:3;
    stroke-dashoffset: 0;
  }
  
}
 .cube__outer .cube__face {
    background: rgba(141, 214, 249, 0.5);
}

.cube__face {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #ffffff;
}