body {
  overflow: hidden;
  margin: 0;
  padding: 0;
 
}
#svg1{
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left 0;
}
#svg2{
  width: 380px;
  position: absolute;
  top: 45%;
  left: 50%;
  margin-left: -190px;
}
#svg3{
  position: absolute;
  top: 45%;
  left: 50%;
  margin-left: -60px;
}
#Sparkle > *{
  stroke-width:3;
  stroke: inherit;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-miterlimit: 3;
  stroke-dashoffset: inherit;
  stroke-dasharray: 10, 150;
  fill: none;
  vector-effect:non-scaling-stroke;
  transform: inherit;
}

use.s1{animation: anim1 9.2s infinite;}
use.s2{animation: anim1 7.6s infinite;}
use.s3{animation: anim1 8.7s infinite;}
use.s4{animation: anim1 11s infinite;}

use.c1 {stroke: #11D7CD;}
use.c2 {stroke: #FDE91C;}
use.c3 {stroke: #02C2EF;}
use.c4 {stroke: #DBE5D6;}
use.c5 {stroke: #22EEBD;}
use.c6 {stroke: #F33D3B;}

use.d1  {animation-delay: -0.1s;}
use.d2  {animation-delay: -0.5s;}
use.d3  {animation-delay: -1.1s;}
use.d4  {animation-delay: -2.3s;}
use.d5  {animation-delay: -3.5s;}
use.d6  {animation-delay: -4.1s;}
use.d7  {animation-delay: -4.9s;}
use.d8  {animation-delay: -5.2s;}
use.d9  {animation-delay: -5.9s;}
use.d10 {animation-delay: -7.2s;}
use.d11 {animation-delay: -7.8s;}
use.d12 {animation-delay: -8.0s;}
use.d13 {animation-delay: -8.9s;}
use.d14 {animation-delay: -9.2s;}
use.d15 {animation-delay: -9.5s;}
use.d16 {animation-delay: -10.1s;}

@keyframes anim1 {
  0%    {stroke-dashoffset: 150; }
  20%   {stroke-dashoffset: 30; }
  100%   {stroke-dashoffset: 30; }
}

#HNY{
  animation: txtanimg 18s -1s infinite;
  vector-effect: non-scaling-stroke;
}
#HNY path{
  stroke-width:3;
  stroke: inherit;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke: #D81C3E;
  stroke-miterlimit: 3;
  fill: none;
  vector-effect:non-scaling-stroke;
  transform: inherit;
  stroke-dashoffset: 100;
  stroke-dasharray: 0.1, 100000;
  animation-fill-mode: none;
  animation: txtanim 18s infinite;
}

path#t1{animation-delay: 0.0s;}
path#t2{animation-delay: 3.2s;}
path#t3{animation-delay: 4.0s;}
path#t4{animation-delay: 4.8s;}

@keyframes txtanim {
  0%   {stroke-dasharray: 0, 100000;}
  35%  {stroke-dasharray: 940, 100000; }
  65%  {stroke-dasharray: 940, 100000; }
  65.5%{stroke-dasharray: 0, 100000; }
}
@keyframes txtanimg {
  0%    {opacity: 1 }
  68%   {opacity: 1 }
  71%   {opacity: 0 }
  100%  {opacity: 0 }
}

#n2018{
  animation: txtanimg 18s -11.8s infinite;
  vector-effect: non-scaling-stroke;
}
#n2018 path{
  stroke-width:3;
  stroke: inherit;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke: #D81C3E;
  stroke-miterlimit: 3;
  fill: none;
  vector-effect:non-scaling-stroke;
  transform: inherit;
  stroke-dashoffset: 10;
  stroke-dasharray: 0.1, 10000;
  animation-fill-mode: none;
  animation: numanim 18s infinite;
}

path#n1{animation-delay: 12.0s;}
path#n2{animation-delay: 12.4s;}
path#n3{animation-delay: 12.8s;}
path#n4{animation-delay: 13.2s;}

@keyframes numanim {
  0%   {stroke-dasharray: 0, 100000;}
  5%  {stroke-dasharray: 200, 100000; }
  55%  {stroke-dasharray: 200, 100000; }
  55.5%{stroke-dasharray: 0, 100000; }
}