<script>
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    var elemento1 = document.querySelector('.iniciar');
    if (elemento1) {
      elemento1.classList.add('iniciarativo');
      setTimeout(function() {
        elemento1.classList.add('iniciarativo2');
        var elemento2 = document.querySelector('.iniciar2');
        if (elemento2) {
          setTimeout(function() {
            elemento2.classList.add('iniciarativocontainer');
            setTimeout(function() {
              elemento2.classList.add('iniciarativocontainer2');
            }, 3000);
          }, 1000);
        }
      }, 1200);
    }
  }, 100);
});

</script>
<style>
.iniciar path{
    stroke: #fff;
    stroke-width: 30;
  stroke-dasharray: 20000;
  stroke-dashoffset: 30000;
  stroke-linecap: round;
  transition: 1.5s;
fill: transparent;
}
svg:not(:root) {
    overflow: visible !important;
    display: inline;
}

.iniciarativo path{
 stroke-dashoffset: 40000;
     transition: 1.5s;
}

.iniciarativo2 path{
     transition: 1.5s;
     stroke-width: 0;
     fill: white;
}

.iniciar2{
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none !important;
    z-index: 9999999999;
}
.iniciar2{
    transition: 1s;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.iniciarativocontainer{
    transition: 1s !important;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.iniciarativocontainer2{
display: none;
}
</style>