[HTML + CSS + JS] animated-origamid

Bom Galera eu vi isso em um anuncio achei lindo demais e vim trazer a voces 

HTML :

Código:

<div class="container">

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302 404"><style>.st0{fill:none;stroke:#8844EE;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}</style><path class="st0" d="M300 2l-90.2 37.6-11.7-14.1-47.1-7.8-47 7.8-11.8 14.1L2 2l30.1 74L2 158.9l23.5 70.6L49 292.2l23.5 31.4 39.2 54.9L151 402l39.2-23.5 39.2-54.9 23.5-31.4 23.5-62.7 23.5-70.6-30-82.9L300 2zm-54.9 203.9l-15.7 39.2-15.7 23.5-23.5 70.6-23.5 23.5h-31.4l-23.5-23.5-23.5-70.6-15.7-23.5-15.7-39.2v-78.4l54.9-7.8 39.2 23.5 39.2-23.5 54.9 7.8v78.4z"/><path class="st0" d="M182.4 205.9l15.7 7.9v-13.1l7.8-2.6h7.9l15.7-23.6v-15.6l-39.3 15.6z"/><path class="st0" d="M151 229.5l-15.7-7.9-15.7 78.4 7.9 23.6 7.8 15.7h7.9l7.8 7.8 7.9-7.8h7.8l7.8-15.7 7.9-23.6-15.7-78.4z"/><path class="st0" d="M111.8 174.5l-39.2-15.6v15.6l15.7 23.6h7.8l7.9 2.6v13.1l15.6-7.9z"/><path class="st0" d="M151 49.1l-94.1 78.4 54.9-7.9 39.2 23.6 39.2-23.6 54.9 7.9z"/><path class="st0" d="M213.8 198.1h-7.9l23.6-39.2v15.6z"/><path class="st0" d="M205.9 41.2L300 2l-62.7 70.6z"/><path class="st0" d="M198.1 213.8v-15.7l-15.7 7.8z"/><path class="st0" d="M229.5 323.6l-39.3 15.7 62.8-47.1z"/><path class="st0" d="M268.7 72.6l-23.6 54.9 31.4 102 23.5-70.6z"/><path class="st0" d="M245.1 127.5v78.4l-15.6 39.2 47-15.6z"/><path class="st0" d="M229.5 245.1l-15.7 23.6 39.2 23.5 23.5-62.7z"/><path class="st0" d="M213.8 268.7l-23.6 70.6 62.8-47.1z"/><path class="st0" d="M190.2 339.3l-23.5 23.5L151 402l39.2-23.5 39.3-54.9z"/><path class="st0" d="M237.3 72.6l-39.2-47.1L151 49.1l94.1 78.4 23.1-47.2L300 2z"/><path class="st0" d="M190.2 174.5l-7.8 31.4 23.5-7.8 23.6-39.2z"/><path class="st0" d="M151 229.5l15.7-7.9 7.8 102z"/><path class="st0" d="M158.9 339.3l-7.9-15.7h23.5z"/><path class="st0" d="M158.9 339.3h7.8l7.8-15.7z"/><path class="st0" d="M151 347.1v-23.5l7.9 15.7z"/><path class="st0" d="M182.4 300l-15.7-78.4 7.8 102z"/><path class="st0" d="M88.3 198.1h7.8l-23.5-39.2v15.6z"/><path class="st0" d="M96.1 41.2L2 2l62.7 70.6z"/><path class="st0" d="M104 213.8v-15.7l15.6 7.8z"/><path class="st0" d="M72.6 323.6l39.2 15.7-62.7-47.1z"/><path class="st0" d="M151 17.7l-47 7.8 47 23.6 47.1-23.6z"/><path class="st0" d="M33.4 72.6L2 158.9l23.5 70.6 31.4-102z"/><path class="st0" d="M56.9 205.9v-78.4l-31.4 102 47.1 15.6z"/><path class="st0" d="M72.6 245.1l15.7 23.6-39.2 23.5-23.6-62.7z"/><path class="st0" d="M88.3 268.7l23.5 70.6-62.7-47.1z"/><path class="st0" d="M111.8 339.3l23.5 23.5L151 402l-39.2-23.5-39.2-54.9z"/><path class="st0" d="M151 362.8h-15.7L151 402l15.7-39.2z"/><path class="st0" d="M104 25.5L64.7 72.6 2 2l31.8 78.3 23.1 47.2L151 49.1z"/><path class="st0" d="M111.8 174.5l7.8 31.4-23.5-7.8-23.5-39.2z"/><path class="st0" d="M151 229.5l-15.7-7.9-7.8 102z"/><path class="st0" d="M151 229.5l-23.5 94.1h47z"/><path class="st0" d="M143.2 339.3l7.8-15.7h-23.5z"/><path class="st0" d="M143.2 339.3h-7.9l-7.8-15.7z"/><path class="st0" d="M143.2 339.3l7.8 7.8v-23.5z"/><path class="st0" d="M119.6 300l15.7-78.4-7.8 102z"/></svg>
</div>

<footer>
   <a id="origamid" href="https://www.origamid.com" target="_blank">mais em origamid.com</a>
</footer>

CSS :

Código:

/*
Utiliza o keyframe svg-animate
Anima em 4s cada path
forwards faz com que a animação termine e matenha o estado final dela (ou seja, o objeto totalmen preenchido)
remova o ininite para a animação acontecer apenas uma vez */
svg.animate path {
   animation: svg-animate 4s forwards infinite;
}

/* Função principal da animação, levar o dashoffset até 0. Nesse caso ele vai do dashoffset que foi definido com jQuery até 0. Por isso o from está vazio. */
@keyframes svg-animate {
   from {}
   to {
      stroke-dashoffset: 0;
   }
}

.container {
   width: 240px;
   margin: 40px auto;
}

body {
   background: #0A0A0A;
}

h1 {
   text-align: center;
   font-size: 2em;
   margin: 40px 0;
   font-family: monaco;
   color: #8844ee;
}

footer {
   text-align: center;
   margin: 40px;
}

#origamid {
   font-family: monaco;
   text-decoration: none;
   color: #8844ee;
   display: inline-block;
}

#origamid::after, #origamid::before {
   content: '';
   display: block;
   background: #8844ee;
   width: 0;
   height: 2px;
   border-radius: 4px;
   margin: 6px auto 6px auto;
   transition: all .2s ease;
}

#origamid:hover::after, #origamid:hover::before {
   width: 100%;
}


JavaScript :

Código:

// Basta adiciona a classe animate ao SVG
// Ai você adicionar como quiser, pode ser baseado no scroll, em algum clique ou qualquer outra ação do usuário
$('svg').addClass('animate');

// Função para determinar o comprimento de cada path
$('svg.animate path').each(function(){
   var comprimento = $(this).get(0).getTotalLength();
   var comprimentoArredondado = Math.round(comprimento);
   $(this).attr('stroke-dasharray', comprimentoArredondado);
   $(this).attr('stroke-dashoffset', comprimentoArredondado);
});

[infos=DEMO :] Aqui :)  [/infos]

[sucesso=CREDITOS :] origamid.com [/sucesso]