Subvisual - Animated Logo

index.html

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg class="NavLogo NavLogo--color" id="NavLogo-color" width="442px" height="90px" viewBox="0 0 2210 446" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
  <title>Group + SUBVISUAL 52 Copy 66</title>
  <desc>Created with Sketch.</desc>
  <defs>
    <linearGradient x1="72.2712425%" y1="39.1519547%" x2="-4.60414488%" y2="39.1519547%" id="NavLogo-linearGradient-1">
      <stop stop-color="#517F96" offset="0%"></stop>
      <stop stop-color="#466D81" offset="100%"></stop>
  </linearGradient>
  <linearGradient x1="62.4153985%" y1="36.0411028%" x2="50%" y2="62.3041236%" id="NavLogo-linearGradient-2">
    <stop stop-color="#09DFF3" offset="0%"></stop>
    <stop stop-color="#44BEFF" offset="100%"></stop>
  </linearGradient>
  </defs>
  <g id="stickers" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-9242.000000, -692.000000)">
      <g id="Group-+-SUBVISUAL-52-Copy-66" sketch:type="MSLayerGroup" transform="translate(9293.000000, 694.000000)">
        <g id="Group" sketch:type="MSShapeGroup">
          <path class="NavLogo-piece" d="M0,90 L150,0 L300,90 L300,170 L150,80 L0,170 L0,90 Z" id="Rectangle-165" stroke="#5889A2" stroke-width="8" fill="#5889A2"></path>
          <path class="NavLogo-piece" d="M0,362 L150,272 L300,362 L300,442 L150,352 L0,442 L0,362 Z" id="Rectangle-165-Copy-13" stroke="#5889A2" stroke-width="8" fill="#5889A2" transform="translate(150.000000, 357.000000) scale(1, -1) translate(-150.000000, -357.000000) "></path>
          <path class="NavLogo-shadow" d="M0,90 L100,110 L0,170 L0,90 Z" id="Rectangle-165-Copy-6" fill="url(#NavLogo-linearGradient-1)"></path>
          <path class="NavLogo-shadow" d="M200,272 L300,292 L200,352 L200,272 Z" id="Rectangle-165-Copy-14" fill="url(#NavLogo-linearGradient-1)" transform="translate(250.000000, 312.000000) scale(-1, -1) translate(-250.000000, -312.000000) "></path>
          <path class="NavLogo-piece" d="M0,91 L150,181 L300,271 L300,351 L150,261 L0,171 L0,91 Z" id="Rectangle-165-Copy-5" stroke="url(#NavLogo-linearGradient-2)" stroke-width="8" fill="url(#NavLogo-linearGradient-2)"></path>
        </g>
        <g transform="translate(-30.0, 0.0)">
          <path class="NavLogo-name" d="M692.377064,158.143385 L670.616785,170.865278 C666.548705,163.898492 662.672574,159.355004 658.988276,157.234678 C655.150465,154.811448 650.199763,153.599851 644.136022,153.599851 C636.690669,153.599851 630.511886,155.682283 625.599488,159.84721 C620.68709,163.93641 618.230928,169.085696 618.230928,175.295223 C618.230928,183.852253 624.678354,190.74321 637.573398,195.968299 L655.303996,203.124364 C669.734165,208.879535 680.287987,215.90301 686.965778,224.195 C693.643569,232.486989 696.982414,242.653043 696.982414,254.693467 C696.982414,270.823091 691.532804,284.150655 680.633421,294.67656 C669.657282,305.27819 656.033258,310.578926 639.760939,310.578926 C624.33294,310.578926 611.591599,306.073301 601.536534,297.061915 C591.634982,288.050528 585.456199,275.366625 583,259.009823 L610.171565,253.10323 C611.399665,263.401957 613.548807,270.520088 616.619055,274.457836 C622.145503,282.03043 630.204785,285.81667 640.797143,285.81667 C649.163571,285.81667 656.109905,283.052715 661.636352,277.524721 C667.1628,271.996728 669.925982,264.992185 669.925982,256.51088 C669.925982,253.103213 669.446263,249.979565 668.48681,247.139843 C667.527358,244.30012 666.030634,241.687615 663.996594,239.302248 C661.962554,236.916881 659.333693,234.682999 656.109932,232.600536 C652.886171,230.518073 649.048418,228.530297 644.596557,226.637149 L627.441628,219.594672 C603.109907,209.447397 590.944229,194.605337 590.944229,175.068046 C590.944229,161.891734 596.048441,150.873776 606.257018,142.013841 C616.465595,133.078181 629.168558,128.610418 644.36629,128.610418 C664.8602,128.610418 680.863631,138.454642 692.377064,158.143385 L692.377064,158.143385 Z M804.391737,132.018068 L804.391737,237.655217 C804.391737,252.724678 806.886277,263.742636 811.875431,270.709422 C819.320784,280.780971 829.797851,285.81667 843.306945,285.81667 C856.892796,285.81667 867.40824,280.780971 874.853593,270.709422 C879.842747,263.969813 882.337287,252.951855 882.337287,237.655217 L882.337287,132.018068 L909.163451,132.018068 L909.163451,244.92487 C909.163451,263.401998 903.330066,278.622682 891.663121,290.58738 C878.537808,303.915144 862.419244,310.578926 843.306945,310.578926 C824.194647,310.578926 808.114461,303.915144 795.065903,290.58738 C783.398958,278.622682 777.565573,263.401998 777.565573,244.92487 L777.565573,132.018068 L804.391737,132.018068 Z M999.993514,307.398453 L999.993514,132.018068 L1026.70454,132.018068 C1038.60176,132.018068 1048.08101,132.926766 1055.14258,134.744188 C1062.28091,136.561611 1068.30618,139.628465 1073.21858,143.944843 C1078.20773,148.412673 1082.16062,153.978446 1085.07736,160.642328 C1088.07085,167.381936 1089.56757,174.197168 1089.56757,181.088228 C1089.56757,193.658733 1084.69363,204.298067 1074.94559,213.006549 C1084.3866,216.187038 1091.83184,221.752811 1097.28153,229.704034 C1102.80798,237.579531 1105.57116,246.742231 1105.57116,257.19241 C1105.57116,270.898804 1100.65884,282.484698 1090.83404,291.95044 C1084.92382,297.781336 1078.2845,301.832613 1070.91591,304.104391 C1062.8565,306.300443 1052.76321,307.398453 1040.63573,307.398453 L999.993514,307.398453 Z M1026.81968,207.327132 L1035.22444,207.327132 C1045.20275,207.327132 1052.51367,205.150044 1057.15742,200.795803 C1061.80117,196.441562 1064.12301,190.023885 1064.12301,181.542581 C1064.12301,173.288454 1061.74361,167.022227 1056.98472,162.743712 C1052.22584,158.465197 1045.31788,156.325971 1036.26065,156.325971 L1026.81968,156.325971 L1026.81968,207.327132 Z M1026.81968,282.522608 L1043.39894,282.522608 C1055.52642,282.522608 1064.43001,280.175139 1070.10997,275.480131 C1076.09695,270.406494 1079.0904,263.969886 1079.0904,256.170115 C1079.0904,248.597522 1076.21209,242.236639 1070.45537,237.087275 C1064.85217,232.013638 1054.83563,229.476857 1040.40546,229.476857 L1026.81968,229.476857 L1026.81968,282.522608 Z M1189.8386,132.018068 L1239.00072,253.557583 L1288.85363,132.018068 L1318.21274,132.018068 L1238.42505,320.574699 L1160.4795,132.018068 L1189.8386,132.018068 Z M1415.37516,132.018068 L1415.37516,307.398453 L1388.54899,307.398453 L1388.54899,132.018068 L1415.37516,132.018068 Z M1606.83212,158.143385 L1585.07184,170.865278 C1581.00376,163.898492 1577.12763,159.355004 1573.44333,157.234678 C1569.60552,154.811448 1564.65482,153.599851 1558.59108,153.599851 C1551.14572,153.599851 1544.96694,155.682283 1540.05454,159.84721 C1535.14214,163.93641 1532.68598,169.085696 1532.68598,175.295223 C1532.68598,183.852253 1539.13341,190.74321 1552.02845,195.968299 L1569.75905,203.124364 C1584.18922,208.879535 1594.74304,215.90301 1601.42083,224.195 C1608.09862,232.486989 1611.43747,242.653043 1611.43747,254.693467 C1611.43747,270.823091 1605.98786,284.150655 1595.08848,294.67656 C1584.11234,305.27819 1570.48831,310.578926 1554.21599,310.578926 C1538.78799,310.578926 1526.04665,306.073301 1515.99159,297.061915 C1506.09004,288.050528 1499.91125,275.366625 1497.45505,259.009823 L1524.62662,253.10323 C1525.85472,263.401957 1528.00386,270.520088 1531.07411,274.457836 C1536.60056,282.03043 1544.65984,285.81667 1555.2522,285.81667 C1563.61863,285.81667 1570.56496,283.052715 1576.09141,277.524721 C1581.61785,271.996728 1584.38104,264.992185 1584.38104,256.51088 C1584.38104,253.103213 1583.90132,249.979565 1582.94186,247.139843 C1581.98241,244.30012 1580.48569,241.687615 1578.45165,239.302248 C1576.41761,236.916881 1573.78875,234.682999 1570.56499,232.600536 C1567.34123,230.518073 1563.50347,228.530297 1559.05161,226.637149 L1541.89668,219.594672 C1517.56496,209.447397 1505.39928,194.605337 1505.39928,175.068046 C1505.39928,161.891734 1510.5035,150.873776 1520.71207,142.013841 C1530.92065,133.078181 1543.62361,128.610418 1558.82134,128.610418 C1579.31525,128.610418 1595.31869,138.454642 1606.83212,158.143385 L1606.83212,158.143385 Z M1718.84679,132.018068 L1718.84679,237.655217 C1718.84679,252.724678 1721.34133,263.742636 1726.33049,270.709422 C1733.77584,280.780971 1744.25291,285.81667 1757.762,285.81667 C1771.34785,285.81667 1781.86329,280.780971 1789.30865,270.709422 C1794.2978,263.969813 1796.79234,252.951855 1796.79234,237.655217 L1796.79234,132.018068 L1823.61851,132.018068 L1823.61851,244.92487 C1823.61851,263.401998 1817.78512,278.622682 1806.11818,290.58738 C1792.99286,303.915144 1776.8743,310.578926 1757.762,310.578926 C1738.6497,310.578926 1722.56951,303.915144 1709.52096,290.58738 C1697.85401,278.622682 1692.02063,263.401998 1692.02063,244.92487 L1692.02063,132.018068 L1718.84679,132.018068 Z M2011.27605,264.802828 L1935.17264,264.802828 L1915.36964,307.398453 L1886.47107,307.398453 L1974.43325,121 L2059.28683,307.398453 L2029.92772,307.398453 L2011.27605,264.802828 Z M2000.33835,239.926984 L1973.97272,180.293109 L1946.34062,239.926984 L2000.33835,239.926984 Z M2156.56438,132.018068 L2156.56438,282.522608 L2208.8351,282.522608 L2208.8351,307.398453 L2129.73822,307.398453 L2129.73822,132.018068 L2156.56438,132.018068 Z" id="SUBVISUAL-52-Copy-66" fill="#40C8F9" sketch:type="MSShapeGroup"></path>
        </g>
      </g>
    </g>
  </g>
</svg>

<div class="DarkBG">
  <svg class="NavLogo NavLogo--mono" id="NavLogo-mono" xmlns="http://www.w3.org/2000/svg" width="442px" height="90px"  viewBox="0 0 2220 455">
    <title>logo-white</title><g id="stickers" fill="none" fill-rule="evenodd">
    <g id="Artboard-1" fill="#FFF">
      <g id="logo-white">
        <g id="Rectangle-165-Copy-12-+-Rectangle-165-Copy-4-+-Rectangle-165-Copy-11" stroke="#FFF" stroke-width="8">
          <path class="NavLogo-piece" id="Rectangle-165-Copy-12" d="M156.572052 450l145.742358-87.445415-97.159807-19.432314-48.58255 29.14848L5 284.82533v77.729257L156.572052 450z"/>
          <path class="NavLogo-piece" id="Rectangle-165-Copy-4" d="M157.543668 5L309.11572 92.445415v77.729257L157.54367 82.729258l-48.580786 29.14896L11.80131 92.445416 157.543668 5z"/>
          <path class="NavLogo-piece" id="Rectangle-165-Copy-11" d="M157.543668 188.63537l151.572053 87.445416v77.729258L157.54367 266.36463 5 178.919213v-77.729258l152.543668 87.445415z"/>
        </g>
        <path class="NavLogo-name" id="SUBVISUAL-52-Copy-66-Copy" d="M702.627768 167.48094L680.868 180.202534c-4.067984-6.966623-7.944024-11.510004-11.628235-13.63028-3.83772-2.423173-8.788307-3.63474-14.851905-3.63474-7.445178 0-13.623816 2.082382-18.536098 6.24721-4.912283 4.089105-7.368387 9.23827-7.368387 15.44765 0 8.55683 6.447274 15.447624 19.342015 20.67259l17.73018 7.155897c14.42983 5.75504 24.983405 12.77835 31.66104 21.07015 6.677633 8.2918 10.0164 18.45761 10.0164 30.49775 0 16.12925-5.449482 29.4565-16.34861 39.98216-10.97588 10.60138-24.599584 15.90199-40.87152 15.90199-15.427637 0-28.168678-4.50552-38.223507-13.51669-9.90132-9.011173-16.079957-21.69478-18.536098-38.051195l27.170926-5.906456c1.22808 10.298485 3.37717 17.41645 6.44734 21.354104 5.52632 7.572417 13.58541 11.358568 24.17752 11.358568 8.36623 0 15.3124-2.76389 20.83872-8.291753 5.52632-5.527863 8.28944-12.53224 8.28944-21.013347 0-3.407586-.47971-6.53116-1.43914-9.370815-.95943-2.839656-2.45611-5.4521-4.49011-7.83741-2.03399-2.38531-4.66279-4.61914-7.88647-6.701555s-7.06135-4.07014-11.5131-5.96324l-17.15453-7.042318c-24.33115-10.147037-36.49654-24.988748-36.49654-44.52558 0-13.176 5.10409-24.1937 15.312428-33.053428 10.208335-8.93545 22.911-13.40311 38.108374-13.40311 20.49343 0 36.49648 9.843993 48.00964 29.532273zm112.01204-26.124703v105.634666c0 15.069106 2.49448 26.086805 7.483518 33.053428 7.445178 10.07132 17.921998 15.1069 31.430775 15.1069 13.58554 0 24.10073-5.03558 31.54591-15.10689 4.98904-6.73945 7.48352-17.75715 7.48352-33.05342V141.35624h26.82554v112.90415c0 18.47669-5.83325 33.69702-17.49992 45.661434-13.125 13.327454-29.24319 19.99108-48.35504 19.99108-19.11184 0-35.19165-6.663626-48.2399-19.991077-11.66667-11.964416-17.49992-27.184742-17.49992-45.661435V141.35624h26.825536zM1010.23699 316.7325V141.356236h26.71039c11.89694 0 21.37597.908677 28.43738 2.726056 7.13816 1.81738 13.16329 4.884162 18.07557 9.20044 4.98903 4.467724 8.94183 10.033366 11.8585 16.69709 2.99342 6.73945 4.49011 13.554522 4.49011 20.44542 0 12.57021-4.87383 23.209294-14.62164 31.91757 9.44079 3.180415 16.88585 8.746057 22.33542 16.697093 5.52632 7.875312 8.28943 17.037797 8.28943 27.48773 0 13.706072-4.9122 25.291694-14.73677 34.757213-5.91008 5.830758-12.54925 9.88194-19.91766 12.153664-8.05923 2.196-18.15228 3.293985-30.27947 3.293985h-40.64126zm26.82553-100.06897h8.40456c9.97808 0 17.28883-2.177036 21.93247-6.531175 4.64364-4.35414 6.96542-10.771665 6.96542-19.25277 0-8.253932-2.37934-14.520012-7.13812-18.798426-4.75877-4.27842-11.66656-6.4176-20.72358-6.4176h-9.44075v50.99996zm0 75.19371h16.57887c12.1272 0 21.03058-2.347415 26.7104-7.042313 5.98684-5.073517 8.98022-11.509974 8.98022-19.309562 0-7.572415-2.87824-13.933148-8.63482-19.08239-5.60307-5.07352-15.61938-7.61024-30.04921-7.61024h-13.58546v53.044504zm163.01509-150.501003l49.16096 121.536658 49.85174-121.536658h29.35842l-79.78581 188.552198-77.94372-188.552198h29.35841zm225.53126 0V316.7325h-26.82554V141.356236h26.82554zm191.45246 26.124703l-21.75977 12.721594c-4.06799-6.966623-7.94403-11.510004-11.62824-13.63028-3.83772-2.423173-8.7883-3.63474-14.8519-3.63474-7.44518 0-13.62382 2.082382-18.5361 6.24721-4.91229 4.089105-7.36839 9.23827-7.36839 15.44765 0 8.55683 6.44728 15.447624 19.34201 20.67259l17.73019 7.155897c14.42983 5.75504 24.9834 12.77835 31.66103 21.07015 6.67764 8.2918 10.01641 18.45761 10.01641 30.49775 0 16.12925-5.44948 29.4565-16.34861 39.98216-10.97588 10.60138-24.59959 15.90199-40.87153 15.90199-15.42763 0-28.16867-4.50552-38.2235-13.51669-9.90132-9.011173-16.07996-21.69478-18.5361-38.051195l27.17093-5.906456c1.22807 10.298485 3.37716 17.41645 6.44734 21.354104 5.52632 7.572417 13.58541 11.358568 24.17752 11.358568 8.36623 0 15.3124-2.76389 20.83872-8.291753 5.52631-5.527863 8.28943-12.53224 8.28943-21.013347 0-3.407586-.4797-6.53116-1.43914-9.370815-.95943-2.839656-2.45611-5.4521-4.49011-7.83741-2.03399-2.38531-4.66279-4.61914-7.88647-6.701555-3.22369-2.08241-7.06135-4.07014-11.51311-5.96324l-17.15453-7.042314c-24.33114-10.147036-36.49654-24.988747-36.49654-44.52558 0-13.176 5.1041-24.1937 15.31243-33.053427 10.20834-8.93545 22.911-13.40311 38.10838-13.40311 20.49342 0 36.49649 9.843993 48.00965 29.532273zm112.01203-26.124703v105.634666c0 15.069106 2.49448 26.086805 7.48353 33.053428 7.44517 10.07132 17.922 15.1069 31.43077 15.1069 13.58553 0 24.10072-5.03558 31.54591-15.10689 4.98903-6.73945 7.48351-17.75715 7.48351-33.05342V141.35624h26.82554v112.90415c0 18.47669-5.83325 33.69702-17.49992 45.661434-13.12501 13.327454-29.24319 19.99108-48.35504 19.99108-19.11185 0-35.19166-6.663626-48.23991-19.991077-11.66667-11.964416-17.49992-27.184742-17.49992-45.661435V141.35624h26.82553zm292.42239 132.781638h-76.10162l-19.80254 42.594624h-28.89789l87.96011-186.39408 84.85159 186.39407h-29.35842l-18.65123-42.59463zm-10.93744-24.87526l-26.36501-59.632472-27.63145 59.632473h53.99646zm156.22235-107.906378V291.85724h52.26949v24.87526h-79.09502V141.356236h26.82553z"/>
      </g>
    </g>
  </svg>

</div>
    
<a class="Run" id="Run" href="#">Run Again</a>

script.js

$(function() {
  var isOverLogo = false;
  
  function pathLength() {
    return this.getTotalLength();
  }
  
  function onLoadAnimation() {
    logoAnimation();
    nameAnimation();
  }
  
  function mouseOverAnimation() {
    if (isOverLogo) { return; }
    isOverLogo = true;
    logoAnimation();
  }
  
  function mouseLeave() {
    setTimeout(function() {
      isOverLogo = false;
    }, 1000);
  }
  
  function logoAnimation(timeline) {
    $('.NavLogo-piece').each(function() {
      TweenLite.set(this, { fillOpacity: 0, strokeDasharray: this.getTotalLength(), strokeDashoffset: this.getTotalLength() });
      TweenLite.to(this, 0.5, { strokeDashoffset: 0 });
      TweenLite.to(this, 0.8, { fillOpacity: 1, delay: 0.5 });
    });
    
    $('.NavLogo-shadow').each(function() {
      TweenLite.fromTo(this, 0.5, { fillOpacity: 0 }, { fillOpacity: 1, delay: 0.8});
    });
  }
  
  function nameAnimation() {
    TweenLite.set('.NavLogo-name', { fillOpacity: 0, x: 100 });
    TweenLite.to('.NavLogo-name', 0.8, { x: 0, delay: 0.5 });
    TweenLite.to('.NavLogo-name', 0.8, { fillOpacity: 1, delay: 0.5 });
  }
  
  $('#Run').on('click', onLoadAnimation);
  $('#NavLogo-color, #NavLogo-mono').on('mouseenter', mouseOverAnimation);
  $('#NavLogo, #NavLogo-mono').on('mouseleave', mouseLeave);
  onLoadAnimation();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenLite.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/plugins/CSSPlugin.min.js"></script>

style.sass

// codepen setup

html,
body
  height: 100%

.NavLogo:not(:root)
  overflow: visible
  
.Run
  color: #36a7d8
  cursor: pointer
  border: 2px solid #36a7d8
  display: inline-block
  font-size: 12px
  font-weight: 600
  letter-spacing: .08em
  margin-top: 80px
  padding: 6px 10px
  text-decoration: none
  text-transform: uppercase
  
  transition: all .15s ease-in-out
  margin-top: 50px
  
  &:hover
    background: #36a7d8
    border-color: #36a7d8
    color: #fff
  
.DarkBG
  margin-top: 50px
  background-color: #45beff
  padding: 20px

body
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

subvisual-animated-logo.markdown

Subvisual - Animated Logo

A Pen by Miguel Palhas on CodePen.

License.