Ahora que esta de moda el Capitan America por sus recientes peliculas, os presento este diseño del escudo del mitico heroe de las barras y estrellas. Como podeis ver, es identico al del comic, esta animado como si se 'autodibujara' y realizado usando SVG y CSS3.
ver el codigo utilizado
<div align="center"><svg width="502px" height="502px" viewBox="0 0 502 502" version="1.1">
<circle class="capitanamerica" stroke="#D52120" fill="#D52120" cx="251" cy="251" r="250"></circle>
<circle class="capitanamerica" stroke="#F7F7F7" fill="#F7F7F7" cx="251" cy="251" r="205"></circle>
<path class="capitanamerica" d="M251,411 C339.365564,411 411,339.365564 411,251 C411,162.634436 339.365564,91 251,91 C162.634436,91 91,162.634436 91,251 C91,339.365564 162.634436,411 251,411 Z" stroke="#D52120" fill="#D52120"></path>
<circle class="path" stroke="#4990E2" fill="#4990E2" cx="251" cy="251" r="115"></circle>
<polygon class="capitanamerica" stroke="#F7F7F7" fill="#F7F7F7" points="250.999997 308.5 183.404701 344.036958 196.314251 268.768479 141.6285 215.463048 217.202359 204.481515 251.000001 136 284.797664 204.481532 360.371518 215.463103 305.685744 268.768494 318.595296 344.03696 "></polygon>
</svg></div>
<style>
.capitanamerica {
stroke-dashoffset:1600;
stroke-dasharray:1600;
-webkit-animation: draw 5s linear infinite;
-moz-animation: draw 5s linear infinite;
animation: draw 5s linear infinite;
fill-opacity: 0;
}
@-webkit-keyframes draw {
30%{stroke-dashoffset:0; fill-opacity: 0;}
50%{fill-opacity:1;}
100%{stroke-dashoffset:0; fill-opacity:1;}
}
@-moz-keyframes draw {
30%{stroke-dashoffset:0; fill-opacity: 0;}
50%{fill-opacity:1;}
100%{stroke-dashoffset:0; fill-opacity:1;}
}
@keyframes draw {
30%{stroke-dashoffset:0; fill-opacity: 0;}
50%{fill-opacity:1;}
100%{stroke-dashoffset:0; fill-opacity:1;}
}
</style>
