aMBjXO

ambjxo.markdown

aMBjXO

A Pen by Hatem on CodePen.

License.

index.html

<div class="container">
  

  
<svg width="28px" height="27px" viewBox="0 0 28 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Main" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group-12" fill="#FFFFFF">
            <path d="M20.4892271,2.91493252 C18.7466176,4.65848983 17.0038946,6.40193523 15.2612852,8.14538062 C13.1448785,10.2627412 11.0283584,12.3802137 8.91206524,14.4975743 C7.0889107,16.3216001 5.26575616,18.1455139 3.44248817,19.9695396 C2.55206816,20.8604002 1.64372403,21.7367115 0.769639921,22.6438 C0.757161108,22.6565585 0.744455408,22.6688694 0.731863151,22.681628 C-0.208585555,23.6225155 -0.278693794,25.3460396 0.731863151,26.2740566 C1.74536963,27.2050954 3.31906137,27.2781773 4.32269824,26.2740566 C5.05202813,25.5444687 5.78135801,24.8147689 6.51068789,24.085181 C8.25341082,22.3416237 9.9960203,20.5981783 11.7387432,18.854621 C13.8550364,16.7372604 15.9715565,14.6198998 18.0879631,12.5025392 C19.9111177,10.6785134 21.7341588,8.85448769 23.5574268,7.03046195 C24.4478468,6.13960142 25.3561909,5.26329012 26.230275,4.35631352 C26.2427538,4.34344305 26.255573,4.33113216 26.2680518,4.31848553 C27.2086139,3.37748611 27.2787222,1.65396197 26.2680518,0.72594495 C25.2545453,-0.20498192 23.680967,-0.278287654 22.6772167,0.72594495 C21.9478868,1.45564478 21.2186704,2.18523269 20.4892271,2.91493252 Z" id="middle"></path>
            <path d="M12.3975474,7.11248285 C12.6931486,6.81664379 12.9887499,6.52069525 13.2844621,6.22474671 C14.2039872,5.3041639 14.2724247,3.61814408 13.2844621,2.7101525 C12.2932828,1.7994237 10.7547143,1.72781795 9.77340685,2.7101525 C7.71651017,4.76931055 5.65950256,6.82835911 3.60249496,8.88740767 C3.3068937,9.18335621 3.01129245,9.47930475 2.71558027,9.7751438 C1.79605517,10.6958361 1.72750673,12.3818559 2.71558027,13.2898475 C3.70664864,14.2005763 5.24521713,14.2721821 6.22663547,13.2898475 C8.28353216,11.2306895 10.3405398,9.17164089 12.3975474,7.11248285 Z" id="left"></path>
            <path d="M20.6545424,20.9063358 C22.4473969,19.1118805 24.2404762,17.3174251 26.0333307,15.5230807 C26.4470923,15.1088562 26.8609663,14.6946317 27.2748403,14.2804071 C28.206675,13.3477918 28.2761411,11.6394206 27.2748403,10.7195626 C26.2705046,9.79682025 24.711227,9.72415901 23.7167828,10.7195626 C22.5929609,11.8443142 21.4692514,12.9689549 20.3454295,14.0937066 C18.5524626,15.8881619 16.7596081,17.6825063 14.9667536,19.4769616 C14.5528796,19.8911862 14.1390056,20.3052998 13.725244,20.7195243 C12.7932968,21.6522506 12.7238308,23.3605108 13.725244,24.2804798 C14.7294673,25.2032221 16.2886325,25.2757724 17.283189,24.2804798 C18.4068985,23.1557282 19.5307205,22.0310875 20.6545424,20.9063358 Z" id="right"></path>
        </g>
    </g>
</svg>
</div>

style.sass

body 
  background: black
  .container 
    width: 100px
    height: 100px
    overflow: hidden
    svg
      width: 100%
      height: 100%
      path#left
        animation: pulse 1s ease-in-out
      path#middle
        animation: pulseplus 1s ease-in-out
        animation-delay: .5s
      path#right
        animation: pulseplus 1s ease-in-out
        animation-delay: 1s
        
  
@keyframes pulse
  0%
    transform: translateY(-40px) translateX(40px)
  100%
    transform: translateY(0) translateX(0)
  
@keyframes pulseplus
  0%
    transform: translateY(40px) translateX(-40px)
  100%
    transform: translateY(0) translateX(0)