SVG Atom Logo Animation
HTML
<svg class="atom-logo" width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
<defs>
<linearGradient x1="50%" y1="3.961%" x2="50%" y2="100%" id="a">
<stop stop-color="#FDFDFD" offset="0%"/>
<stop stop-color="#CBCBCB" offset="100%"/>
</linearGradient>
<linearGradient x1="50%" y1="3.961%" x2="50%" y2="100%" id="b">
<stop stop-color="#B2E198" offset="0%"/>
<stop stop-color="#04A171" offset="100%"/>
</linearGradient>
</defs>
<circle fill="url(#a)" cx="128" cy="128" r="127.858"/>
<circle fill="url(#b)" cx="127.858" cy="128.142" r="116.907"/>
<path d="M100.453 110.097c-1.376 2.12-2.705 4.25-3.988 6.382-1.403-3.87-2.635-7.67-3.684-11.38 3.73-.54 7.7-.96 11.88-1.25-1.42 2.03-2.82 4.11-4.2 6.24zm103.138 7.475c-4.13-3.967-10.04-7.602-17.55-10.804-14.92-6.356-34.92-10.474-56.29-11.595-2.58-.136-5.09-.228-7.53-.277 16.32-19.48 32.08-29.846 41.26-30.196 1.95-.07 3.58.31 4.86 1.15 4.3 2.79 5.49 11.452 3.19 23.165-.45 2.313 1.05 4.555 3.37 5.01 2.32.45 4.56-1.053 5.01-3.366 3.96-20.14-1.57-28.5-6.91-31.97-2.78-1.81-6.09-2.66-9.83-2.52-14.12.53-33.9 15.59-51.95 38.8-7.14.24-14.03.86-20.48 1.82-.702-3.29-1.25-6.47-1.62-9.53-1.62-13.345.368-22.817 5.31-25.338.797-.408 1.665-.64 2.657-.716 4.42-.33 10.65 2.637 17.54 8.36 1.816 1.504 4.507 1.255 6.01-.558 1.508-1.816 1.26-4.506-.554-6.01-8.85-7.35-16.8-10.82-23.635-10.306-2.11.155-4.092.7-5.89 1.62-4.592 2.34-7.73 6.825-9.33 13.33-1.37 5.57-1.56 12.51-.575 20.634.39 3.21.96 6.554 1.69 10-5.04 1.06-9.71 2.352-13.897 3.87-18.32 6.617-22.547 15.337-22.87 21.49-.31 5.872 2.7 14.62 18.773 22.91 2.09 1.08 4.665.254 5.745-1.84s.26-4.67-1.84-5.748c-9.247-4.77-14.41-10.194-14.165-14.88.344-6.606 11.415-13.597 30.272-17.536 1.74 6.31 3.99 12.86 6.68 19.505-6.78 12.726-11.727 25.265-14.29 36.42-1.834 7.97-2.37 14.89-1.59 20.567.904 6.63 3.56 11.416 7.88 14.226 2.204 1.433 5.175 2.553 9.08 2.553 5.656 0 13.273-2.36 23.34-9.54 1.916-1.37 2.363-4.037.994-5.956-1.366-1.92-4.03-2.365-5.95-.997-9.924 7.08-18.453 9.617-22.815 6.78-4.65-3.02-5.63-12.64-2.62-25.73 1.99-8.674 5.55-18.29 10.38-28.21 1.05 2.25 2.14 4.49 3.28 6.73 9.715 19.09 21.61 35.7 33.49 46.767 5.987 5.573 11.71 9.497 17.01 11.663 3.22 1.31 6.24 1.97 9.05 1.97 2.59 0 5.01-.565 7.21-1.69 4.43-2.26 7.51-6.52 9.16-12.668 1.41-5.267 1.727-11.83.94-19.516-1.54-15.11-7.25-33.54-16.075-51.89-1.02-2.12-3.57-3.02-5.695-1.997-2.12 1.02-3.017 3.57-1.996 5.694 8.41 17.483 13.838 34.906 15.28 49.06 1.27 12.445-.78 21.31-5.483 23.71-4.94 2.52-13.755-1.44-23.58-10.59-11.17-10.405-22.43-26.17-31.705-44.39-2.12-4.165-4.076-8.34-5.853-12.48 2.21-3.947 4.598-7.905 7.15-11.838 2.605-4.006 5.24-7.785 7.88-11.33.7-.01 1.41-.017 2.12-.02 3.664-.01 7.59.09 11.69.306 20.403 1.07 39.37 4.95 53.4 10.92 12.34 5.257 19.53 11.705 19.24 17.25-.245 4.71-5.966 9.576-15.695 13.35-2.195.856-3.285 3.33-2.432 5.525.656 1.69 2.27 2.726 3.98 2.726.51 0 1.03-.095 1.54-.29 16.906-6.565 20.82-14.97 21.13-20.86.27-5.15-2.04-10.11-6.864-14.746z" fill="#F2F8F6"/>
<path d="M119.194 129.133c0 5.153 4.174 9.33 9.323 9.33 5.15 0 9.323-4.177 9.323-9.33 0-5.154-4.174-9.33-9.323-9.33-5.15 0-9.323 4.176-9.323 9.33" fill="#F1F8F3"/>
</svg>
SCSS
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #76daff, #b9f);
overflow: hidden;
}
path {
stroke: #fff;
stroke-width: 3px;
stroke-dasharray: 1470;
animation: 6s draw ease-in-out forwards;
}
@keyframes draw {
0% {
fill-opacity: 0;
stroke-dashoffset: 1470;
}
70% {
fill-opacity: 0;
stroke: #fff;
}
100% {
stroke-dashoffset: 1;
stroke: none;
}
}
JAVASCRIPT
var total = document.querySelector(".atom-logo path");
console.log(total.getTotalLength());
