#anim-1{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    font-family:sans-serif;
    letter-spacing:3.5px;
    font-size:3.5rem;
    font-weight:700;
    position:relative;
    transform-style:preserve-3d;
    perspective:100px;
    -webkit-transform-style:preserve-3d;
    -webkit-perspective:100px;
 }
 #anim-1>b{
    height:3.5rem;
    box-shadow:0 .4rem .3rem -.3rem #aaa;
    color:#979c9f;
    background:linear-gradient(#aaf,#acf,#afc);
    background-clip:text;
    text-fill-color:transparent;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    transform-origin:bottom;
    transform:rotateX(-85deg);
    -webkit-transform-origin:bottom;
    -webkit-transform:rotateX(-85deg);
    animation:getUp 7s infinite;
 }
 #anim-1>b:nth-child(2){
    animation-delay:.25s;
 }
 #anim-1>b:nth-child(3){
    animation-delay:.5s;
 }
 #anim-1>b:nth-child(4){
    animation-delay:.75s;
 }
 #anim-1>b:nth-child(5){
    animation-delay:1s;
 }
 #anim-1>b:nth-child(6){
    animation-delay:1.25s;
 }
 #anim-1>b:nth-child(7){
    animation-delay:1.5s;
 }
 #anim-1>b:nth-child(8){
    animation-delay:1.75s;
 }
 @keyframes getUp{
    10%,50%{
       transform:rotateX(0);
    }
    0%,60%,100%{
       transform:rotateX(-85deg);
    }
 }




 
figure.animated {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
  }
  
  figure.animated svg {
    padding: 5vw;
    width: 90vw;
  }
  
  figure.animated svg > * {
    fill: #1c1c1c;
    stroke: #1c1c1c;
    stroke-width: 0.85px;
  }







  
  /** 3 **/
  svg.text-animated-stroke {
    font-family: sans-serif;
    font-size: 6em;
    line-height: 1;
    text-transform: uppercase;
    width: 100%;
    text-shadow: 0px 1px 3px rgb(0, 0, 0,0.1);
}
svg.text-animated-stroke .text {
    fill: rgba(255, 255, 255, 0.8);
    stroke-width: 4;
    stroke-linejoin: round;
    stroke-dasharray: 70 330;
    stroke-dashoffset: 0;
    animation: animated-stroke 10s infinite linear;
}
svg.text-animated-stroke .text:nth-child(5n + 1) {
    stroke: #cd6155;
    animation-delay: -1.2s;
}
svg.text-animated-stroke .text:nth-child(5n + 2) {
    stroke: #48c88a;
    animation-delay: -2.4s;
}
svg.text-animated-stroke .text:nth-child(5n + 3) {
    stroke: #e7ee16;
    animation-delay: -3.6s;
}
svg.text-animated-stroke .text:nth-child(5n + 4) {
    stroke: #1e91e9;
    animation-delay: -4.8s;
}
svg.text-animated-stroke .text:nth-child(5n + 5) {
    stroke: #3ffbe5;
    animation-delay: -6s;
}

@keyframes animated-stroke {
    100% {
        stroke-dashoffset: -400;
   }
}


svg.text-animated-2-stroke {
    font-family: sans-serif;
    font-size: 4em;
    line-height: 1;
    text-transform: uppercase;
    width: 100%;
    text-shadow: 0px 1px 5px rgb(0, 0, 0,0.1);
}
svg.text-animated-2-stroke .text {
    fill: #fff;
    fill-opacity: 0.9;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-dasharray: 70 330;
    stroke-dashoffset: 0;
    animation: animated-stroke-2 10s infinite linear;
}
svg.text-animated-2-stroke .text:nth-child(5n + 1) {
    stroke: #f2385a;
    animation-delay: -1.2s;
}
svg.text-animated-2-stroke .text:nth-child(5n + 2) {
    stroke: #f5a503;
    animation-delay: -2.4s;
}
svg.text-animated-2-stroke .text:nth-child(5n + 3) {
    stroke: #e9f1df;
    animation-delay: -3.6s;
}
svg.text-animated-2-stroke .text:nth-child(5n + 4) {
    stroke: #56d9cd;
    animation-delay: -4.8s;
}
svg.text-animated-2-stroke .text:nth-child(5n + 5) {
    stroke: #3aa1bf;
    animation-delay: -6s;
}
@keyframes animated-stroke-2 {
    100% {
        stroke-dashoffset: -400;
   }
}