New

@import url(‘https://fonts.googleapis.com/css?family=Audiowide&display=swap’);

html,
body{
margin: 0px;
overflow: hidden;
}

div{
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
margin: 0px;
background: radial-gradient(circle, #240015 0%, #12000b 100%);
overflow: hidden;
}

.wrap{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

h2{
position: absolute;
top: 50%;
left: 50%;
margin-top: 150px;
font-size: 32px;
text-transform: uppercase;
transform: translate(-50%, -50%);
display: block;
color: #12000a;
font-weight: 300;
font-family: Audiowide;
text-shadow: 0px 0px 4px #12000a;
animation: fadeInText 3s ease-in 3.5s forwards, flicker4 5s linear 7.5s infinite, hueRotate 6s ease-in-out 3s infinite;
}

#svgWrap_1,
#svgWrap_2{
position: absolute;
height: auto;
width: 600px;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#svgWrap_1,
#svgWrap_2,
div{
animation: hueRotate 6s ease-in-out 3s infinite;
}

#id1_1,
#id2_1,
#id3_1{
stroke: #ff005d;
stroke-width: 3px;
fill: transparent;
filter: url(#glow);
}

#id1_2,
#id2_2,
#id3_2{
stroke: #12000a;
stroke-width: 3px;
fill: transparent;
filter: url(#glow);
}

#id3_1{
stroke-dasharray: 940px;
stroke-dashoffset: -940px;
animation: drawLine3 2.5s ease-in-out 0s forwards, flicker3 4s linear 4s infinite;
}

#id2_1{
stroke-dasharray: 735px;
stroke-dashoffset: -735px;
animation: drawLine2 2.5s ease-in-out 0.5s forwards, flicker2 4s linear 4.5s infinite;
}

#id1_1{
stroke-dasharray: 940px;
stroke-dashoffset: -940px;
animation: drawLine1 2.5s ease-in-out 1s forwards, flicker1 4s linear 5s infinite;
}

@keyframes drawLine1 {
0% {stroke-dashoffset: -940px;}
100%{stroke-dashoffset: 0px;}
}

@keyframes drawLine2 {
0% {stroke-dashoffset: -735px;}
100%{stroke-dashoffset: 0px;}
}

@keyframes drawLine3 {
0% {stroke-dashoffset: -940px;}
100%{stroke-dashoffset: 0px;}
}

@keyframes flicker1{
0% {stroke: #ff005d;}
1% {stroke: transparent;}
3% {stroke: transparent;}
4% {stroke: #ff005d;}
6% {stroke: #ff005d;}
7% {stroke: transparent;}
13% {stroke: transparent;}
14% {stroke: #ff005d;}
100%{stroke: #ff005d;}
}

@keyframes flicker2{
0% {stroke: #ff005d;}
50% {stroke: #ff005d;}
51% {stroke: transparent;}
61% {stroke: transparent;}
62% {stroke: #ff005d;}
100%{stroke: #ff005d;}
}

@keyframes flicker3{
0% {stroke: #ff005d;}
1% {stroke: transparent;}
10% {stroke: transparent;}
11% {stroke: #ff005d;}
40% {stroke: #ff005d;}
41% {stroke: transparent;}
45% {stroke: transparent;}
46% {stroke: #ff005d;}
100%{stroke: #ff005d;}
}

@keyframes flicker4{
0% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
30% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
31% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
32% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
36% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
37% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
41% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
42% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
85% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
86% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
95% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
96% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
100%{color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
}

@keyframes fadeInText{
1% {color: #12000a;text-shadow:0px 0px 4px #12000a;}
70% {color: #ff005d;text-shadow:0px 0px 14px #ff005d;}
100%{color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
}

@keyframes hueRotate{
0% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(-120deg);
}
100% {
filter: hue-rotate(0deg);
}
}

fitur belum tersedia