JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id=logo>
    <div id=logoKougiland></div>
    <svg height="60" width="320">
        <rect class="shape" height="60" width="320" />
        <div class="text">KOUGILAND</div>
    </svg>
</div>

CSS

html, body {
  background: rgb(20,20,20);
  text-align: center;
}

.shape {
  stroke-dasharray: 180 510;
  stroke-dashoffset: -454;
  stroke-width: 8px;
  fill: transparent;
  stroke: #19f6e8;
  border-bottom: 5px solid black;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
  font-family: 'Roboto Condensed';
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 8px;
  color: #fff;
  top: -48px;
  position: relative;
}
#logoKougiland svg{
position: absolute;
bottom: 0;
}
#logo:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}
#logoKougiland {
width: 240px;
height: 240px;
position: relative;
top: -10px;
left: 120px;
overflow: hidden;
border-radius: 100%;
transition: background-color 200ms ease; 
 animation: spin 1s linear infinite;
    animation-play-state: running;
}
#logoKougiland::before {
content: '';
display: block;
width: 240px;
height: 240px;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -120px;
position: absolute;
z-index: 11;
border-radius: 50%;
box-shadow: inset 0 0 15px 1px rgba(0, 0, 0, 0.35);
}
#logoKougiland::after {
content: '';
display: block;
width: 180px;
height: 180px;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -90px;
background-color: transparent;
position: absolute;
z-index: 10;
border-radius: 50%;
box-shadow: 24px 60px 60px 4.8px rgba(0, 235, 255, 0.25), 0 -24px 60px 4.8px rgba(255, 255, 0, 0.55), 24px 0 60px 4.8px rgba(0, 128, 53, 0.35), -24px 60px 60px 4.8px rgba(0, 255, 255, 0.75), 0.54px -0.54px 0 18px rgba(127, 127, 255, 0.25), 0.54px 0.36px 0 18px rgba(127, 255, 127, 0.25), -0.18px 0.54px 0 18px rgba(25, 255, 255, 0.5);
}
@keyframes spin {
	to {
		transform: rotate(4turn);
	}
}