JSFiddle - React, Tailwind, and code Playground
by Alexandru Gatea
CSS
#ml * {
fill: none
}
.mlln,
.mlpgb,
.mlpl {
stroke: #38324e;
stroke-width: 3px
}
.mlpgc {
fill: #38324e
}
.mlpgd {
fill: #3e3953
}
.mlpge {
fill: #0e0727
}
.mltk {
stroke: #3e3953;
stroke-width: 38px;
clip-path: url(#a)
}
.mltk.ln1 {
animation-delay: 50ms
}
.mltk.ln2 {
animation-delay: .1s
}
.mltk.ln3 {
animation-delay: 150ms
}
.mlln.ln1 {
animation-delay: 50ms
}
.mlln.ln2 {
animation-delay: .1s
}
.mlln.ln3 {
animation-delay: 150ms
}
.mlln.ln4 {
animation-delay: .2s
}
.mlln.ln5 {
animation-delay: 250ms
}
.mlln.ln6 {
animation-delay: .3s
}
.mlln.ln7 {
animation-delay: 350ms
}
.mlln.ln8 {
animation-delay: .4s
}
.mlln.ln9 {
animation-delay: 450ms
}
.mlln.ln10 {
animation-delay: .5s
}
.mlln.ln11 {
animation-delay: 550ms
}
.mlln.ln12 {
animation-delay: .6s
}
.mlln.ln13 {
animation-delay: 650ms
}
.mlln.ln14 {
animation-delay: .7s
}
.mlln.ln15 {
animation-delay: 750ms
}
.mlln.ln16 {
animation-delay: .8s
}
.mlpl.pl1 {
animation-delay: 60ms
}
.mlpl.pl2 {
animation-delay: 70ms
}
.mlpl.pl3 {
animation-delay: 80ms
}
.mlpl.pl4 {
animation-delay: 90ms
}
.mlpl.pl5 {
animation-delay: .1s
}
.mlpl.pl6 {
animation-delay: 110ms
}
.mlpl.pl7 {
animation-delay: 120ms
}
.mlpl.pl8 {
animation-delay: 130ms
}
.mlpl.pl9 {
animation-delay: 140ms
}
.mlpl.pl10 {
animation-delay: 150ms
}
.mlpl.pl11 {
animation-delay: 160ms
}
.mlpl.pl12 {
animation-delay: 170ms
}
.mlpl.pl13 {
animation-delay: 180ms
}
.mlpl.pl14 {
animation-delay: 190ms
}
.mlpl.pl15 {
animation-delay: .2s
}
.mlpl.pl16 {
animation-delay: 210ms
}
.mlpl.pl17 {
animation-delay: 220ms
}
.mlpl.pl18 {
animation-delay: 210ms
}
.mlpl.pl19 {
animation-delay: 240ms
}
.mlpl.pl20 {
animation-delay: 250ms
}
.mlpl.pl21 {
animation-delay: 260ms
}
.mlpl.pl22 {
animation-delay: 270ms
}
.mlpl.pl23 {
animation-delay: 220ms
}
.mlpl.pl24 {
animation-delay: 290ms
}
.mlpl.pl25 {
animation-delay:...