Edit on
<svg 
    version="1.1" 
    id="lanecrawford-logo" 
    class="logo lane-crawford-logo__svg"  
    viewBox="0 0 236 64"
    xml:space="preserve"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <g>
        <path class="l" 
              d="M20.188,40.547H0.194l0.334-1.001h1.665c1.555,0,2.111-0.834,2.389-1.607l9.833-31.551 c0.053-0.218,0.104-0.393,0.104-0.556c0-0.777-0.495-1.276-1.499-1.276h-2.055L11.3,3.558h11.276l-0.329,0.997h-1.613 c-1.556,0-2.164,0.834-2.39,1.614L8.359,37.716c-0.055,0.223-0.112,0.388-0.112,0.553c0,0.778,0.5,1.277,1.503,1.277h2.22 c4.889,0,8.218-3.442,9.999-7.388h0.83L20.188,40.547z" />
        
        <path class="a" 
              d="M36.573,15.997c-2.885,0-8.495,13.995-8.495,19.938c0,1.556,0.438,2.556,1.387,2.556 c4.444,0,8.721-15.607,8.721-19.941C38.185,17.499,37.96,15.997,36.573,15.997 M36.851,36.598c-0.108,0.339-0.17,0.729-0.17,1.062 c0,0.608,0.226,1.053,0.84,1.053c2.163,0,4.163-4.169,4.44-5.776h0.891c-0.782,3.385-3.281,7.945-6.943,7.945 c-1.947,0-2.447-1.388-2.447-2.891c0-0.723,0.278-1.829,0.39-2.335c-1.389,3.335-3.997,5.279-6.108,5.279 c-1.839,0-3.277-1.441-3.277-4.723c0-7.608,7.718-21.718,12.493-21.718c1.672,0,2.116,2.062,2.116,3.278v0.775l1.051-3.271h3.446 L36.851,36.598z" />
        
        <path class="n" 
              d="M56.617,40.882c-1.886,0-2.503-1.499-2.503-3.113c0-0.776,0.17-1.607,0.387-2.275l4.945-15.887 c0.114-0.336,0.169-0.723,0.169-1.058c0-0.775-0.391-1.385-1.663-1.385c-2.282,0-5.389,3.611-7.557,10.553l-3.996,12.83h-3.447 l7.5-24.271h-3.554l0.334-0.997h3.441c2.503,0,3.555-0.613,3.555-0.613h0.168l-1.89,5.999c2.278-4.057,5.445-6.114,7.939-6.114 c1.89,0,2.781,1.506,2.781,3.002c0,0.389,0,0.997-0.166,1.389L57.56,36.598c-0.111,0.281-0.168,0.729-0.168,1.118 c0,0.553,0.168,0.996,0.838,0.996c2.163,0,4.163-4.168,4.44-5.775h0.886C62.778,36.321,60.28,40.882,56.617,40.882" />
        
        <path class="e" 
              d="M77.443,15.775c-2.724,0-5.609,5.942-7.112,11.831c5.166-1.667,9.054-7.057,9.054-9.944 C79.385,16.605,78.834,15.775,77.443,15.775 M70.052,28.548c-0.496,2.168-0.773,4.278-0.773,6.054c0,2.556,0.609,4.333,2.111,4.333 c2.554,0,4.663-3.832,4.999-5.999h0.941c-0.772,3.276-3.163,7.945-7.052,7.945c-3.276,0-4.662-2.835-4.662-6.667 c0-7.83,5.883-19.72,13.161-19.72c1.721,0,2.998,1.443,2.998,3.337C81.775,21.219,78.329,26.213,70.052,28.548" />
        
        <path class="c" 
              d="M114.986,13.11c-1.164,0-1.829-0.947-1.829-2.056c0-0.726,0.169-1.168,0.33-1.666 c0.335-0.836,0.5-1.667,0.5-2.5c0-3.223-2.277-5.997-5.831-5.997c-8.272,0-19.826,25.772-19.826,41.324 c0,6.716,2.389,11.605,7.829,11.605c6.392,0,10.719-6.389,12.501-11.332h0.994c-2.884,8.447-8.664,13.11-14.938,13.11 c-5.443,0-10.163-4.386-10.163-14.438C84.552,24.716,96.215,0,108.382,0c5.053,0,8.772,4.666,8.772,9.721 C117.154,12.277,116.042,13.11,114.986,13.11" />
        
        <path class="r" 
              d="M126.6,18.883c-2.059,0-1.56-2-2.728-2c-3.607,0-6.495,8.336-7.218,10.667l-4.058,12.997h-3.441l7.5-24.271 H113.1l0.335-0.997h3.441c2.498,0,3.555-0.613,3.555-0.613h0.168l-1.723,5.663c1.999-4,4.943-5.779,7.443-5.779 c1.607,0,2.276,1.003,2.276,2.056C128.595,17.72,127.981,18.883,126.6,18.883" />
        
        <path class="a2"
              d="M136.202,15.997c-2.888,0-8.494,13.995-8.494,19.938c0,1.556,0.444,2.556,1.387,2.556 c4.444,0,8.721-15.607,8.721-19.941C137.815,17.499,137.593,15.997,136.202,15.997 M136.481,36.598 c-0.107,0.339-0.164,0.729-0.164,1.062c0,0.608,0.22,1.053,0.829,1.053c2.167,0,4.167-4.169,4.439-5.776h0.897 c-0.779,3.385-3.281,7.945-6.945,7.945c-1.947,0-2.445-1.388-2.445-2.891c0-0.723,0.276-1.829,0.39-2.335 c-1.391,3.335-3.996,5.279-6.107,5.279c-1.834,0-3.277-1.441-3.277-4.723c0-7.608,7.717-21.718,12.491-21.718 c1.671,0,2.112,2.062,2.112,3.278v0.775l1.057-3.271h3.445L136.481,36.598z" />
        
        <path class="w" 
              d="M161.558,40.94c-2.396,0-3.96-2.564-3.96-5.631c0-0.278,0.058-0.556,0.058-0.835 c-1.674,3.901-4.963,6.355-7.583,6.355c-2.172,0-3.845-1.675-3.845-5.631c0-5.076,5.296-14.553,8.196-18.34 c-1.335,0.894-2.344,1.224-3.513,1.224c-1.116,0-2.119-0.446-2.954-0.446c-0.782,0-1.564,0.78-1.564,2.011 c0,0.666,0.448,1.39,1.115,2.115c0.449,0.5,0.952,1.003,0.952,1.954c0,1.224-0.952,2.002-1.898,2.002 c-1.004,0-1.951-0.834-1.951-2.898c0-4.174,2.676-7.86,6.806-7.86c0.942,0,2.117,0.335,3.008,0.335c0.611,0,1.229-0.111,1.78-0.609 l0.447,0.223c-2.564,3.401-7.639,13.151-7.639,19.061c0,2.229,0.839,3.737,2.846,3.737c6.801,0,8.475-13.987,9.03-19.341 c0.169-1.671,0.242-3.516,1.785-3.516c1.004,0,1.252,0.884,1.139,1.823c-0.288,2.379-4.274,12.023-4.54,16.741 c-0.153,2.708,1.112,4.294,3.788,4.294c4.401,0,7.639-7.921,7.639-13.549c0-1.446-0.222-2.732-0.67-3.731 c-0.503-1.117-1.504-1.896-1.504-3.293c0-1.45,1.057-2.225,2.064-2.225c1.113,0,2.174,1.055,2.174,3.896 C172.764,24.327,169.362,40.94,161.558,40.94" />
        
        <path class="f" 
              d="M190.896,6.831c-0.722,0-1.441-0.385-1.61-1.331c-0.219-1.389-0.832-1.611-1.444-1.611 c-1.334,0-2.111,1.112-2.72,3.055l-2.61,8.334h3.554l-0.274,0.997h-3.56l-8.162,26.383c-1.778,5.722-4.443,12.828-10.722,12.828 c-1.997,0-2.944-1.223-2.944-2.332c0-1.277,1.06-2.058,2.002-2.058c0.722,0,1.442,0.393,1.612,1.337 c0.218,1.387,0.778,1.608,1.443,1.608c1.328,0,2.109-1.111,2.719-3.106l10.721-34.66h-3.664l0.278-0.997h3.724 c1.717-5.78,4.384-12.831,10.717-12.831c1.997,0,2.944,1.167,2.944,2.33C192.898,6.058,191.839,6.831,190.896,6.831" />
        
        <path class="o" 
              d="M193.951,15.495c-4.61,0-7.944,11.945-7.944,19.049c0,3.061,0.614,5.39,2.06,5.39 c4.55,0,7.883-11.94,7.883-19.051C195.949,17.832,195.341,15.495,193.951,15.495 M187.676,40.882c-3.667,0-5.165-3.113-5.165-7.167 c0-7.831,5.496-19.166,11.773-19.166c3.662,0,5.169,3.114,5.169,7.223C199.453,29.548,193.951,40.882,187.676,40.882" />
        
        <path class="r2"
              d="M215.781,18.883c-2.06,0-1.561-2-2.726-2c-3.61,0-6.494,8.336-7.222,10.667l-4.054,12.997h-3.441 l7.495-24.271h-3.553l0.334-0.997h3.444c2.496,0,3.553-0.613,3.553-0.613h0.167l-1.725,5.663c2.003-4,4.945-5.779,7.447-5.779 c1.608,0,2.276,1.003,2.276,2.056C217.778,17.72,217.167,18.883,215.781,18.883" />
        
        <path class="d" 
              d="M225.384,15.997c-2.889,0-8.495,13.995-8.495,19.938c0,1.556,0.443,2.556,1.387,2.556 c4.445,0,8.72-15.607,8.72-19.941C226.995,17.499,226.773,15.997,225.384,15.997 M225.665,36.598 c-0.113,0.339-0.17,0.729-0.17,1.062c0,0.608,0.219,1.053,0.836,1.053c2.165,0,4.162-4.169,4.44-5.776h0.892 c-0.777,3.385-3.278,7.945-6.944,7.945c-1.942,0-2.442-1.388-2.442-2.891c0-0.501,0.279-1.829,0.387-2.335 c-1.386,3.335-4.002,5.279-6.109,5.279c-1.833,0-3.271-1.441-3.271-4.723c0-7.608,7.717-21.718,12.493-21.718 c1.664,0,2.107,2.062,2.107,3.278v0.775l4.389-13.994h-4.055l0.333-0.997H236L225.665,36.598z" />
        
    </g>
</svg>



<svg 
    version="1.1" 
    id="lanecrawford-logo" 
    class="logo2 lane-crawford-logo__svg"  
    viewBox="0 0 236 64"
    xml:space="preserve"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <g>
        <path class="l" 
              d="M20.188,40.547H0.194l0.334-1.001h1.665c1.555,0,2.111-0.834,2.389-1.607l9.833-31.551 c0.053-0.218,0.104-0.393,0.104-0.556c0-0.777-0.495-1.276-1.499-1.276h-2.055L11.3,3.558h11.276l-0.329,0.997h-1.613 c-1.556,0-2.164,0.834-2.39,1.614L8.359,37.716c-0.055,0.223-0.112,0.388-0.112,0.553c0,0.778,0.5,1.277,1.503,1.277h2.22 c4.889,0,8.218-3.442,9.999-7.388h0.83L20.188,40.547z" />
        
        <path class="a" 
              d="M36.573,15.997c-2.885,0-8.495,13.995-8.495,19.938c0,1.556,0.438,2.556,1.387,2.556 c4.444,0,8.721-15.607,8.721-19.941C38.185,17.499,37.96,15.997,36.573,15.997 M36.851,36.598c-0.108,0.339-0.17,0.729-0.17,1.062 c0,0.608,0.226,1.053,0.84,1.053c2.163,0,4.163-4.169,4.44-5.776h0.891c-0.782,3.385-3.281,7.945-6.943,7.945 c-1.947,0-2.447-1.388-2.447-2.891c0-0.723,0.278-1.829,0.39-2.335c-1.389,3.335-3.997,5.279-6.108,5.279 c-1.839,0-3.277-1.441-3.277-4.723c0-7.608,7.718-21.718,12.493-21.718c1.672,0,2.116,2.062,2.116,3.278v0.775l1.051-3.271h3.446 L36.851,36.598z" />
        
        <path class="n" 
              d="M56.617,40.882c-1.886,0-2.503-1.499-2.503-3.113c0-0.776,0.17-1.607,0.387-2.275l4.945-15.887 c0.114-0.336,0.169-0.723,0.169-1.058c0-0.775-0.391-1.385-1.663-1.385c-2.282,0-5.389,3.611-7.557,10.553l-3.996,12.83h-3.447 l7.5-24.271h-3.554l0.334-0.997h3.441c2.503,0,3.555-0.613,3.555-0.613h0.168l-1.89,5.999c2.278-4.057,5.445-6.114,7.939-6.114 c1.89,0,2.781,1.506,2.781,3.002c0,0.389,0,0.997-0.166,1.389L57.56,36.598c-0.111,0.281-0.168,0.729-0.168,1.118 c0,0.553,0.168,0.996,0.838,0.996c2.163,0,4.163-4.168,4.44-5.775h0.886C62.778,36.321,60.28,40.882,56.617,40.882" />
        
        <path class="e" 
              d="M77.443,15.775c-2.724,0-5.609,5.942-7.112,11.831c5.166-1.667,9.054-7.057,9.054-9.944 C79.385,16.605,78.834,15.775,77.443,15.775 M70.052,28.548c-0.496,2.168-0.773,4.278-0.773,6.054c0,2.556,0.609,4.333,2.111,4.333 c2.554,0,4.663-3.832,4.999-5.999h0.941c-0.772,3.276-3.163,7.945-7.052,7.945c-3.276,0-4.662-2.835-4.662-6.667 c0-7.83,5.883-19.72,13.161-19.72c1.721,0,2.998,1.443,2.998,3.337C81.775,21.219,78.329,26.213,70.052,28.548" />
        
        <path class="c" 
              d="M114.986,13.11c-1.164,0-1.829-0.947-1.829-2.056c0-0.726,0.169-1.168,0.33-1.666 c0.335-0.836,0.5-1.667,0.5-2.5c0-3.223-2.277-5.997-5.831-5.997c-8.272,0-19.826,25.772-19.826,41.324 c0,6.716,2.389,11.605,7.829,11.605c6.392,0,10.719-6.389,12.501-11.332h0.994c-2.884,8.447-8.664,13.11-14.938,13.11 c-5.443,0-10.163-4.386-10.163-14.438C84.552,24.716,96.215,0,108.382,0c5.053,0,8.772,4.666,8.772,9.721 C117.154,12.277,116.042,13.11,114.986,13.11" />
        
        <path class="r" 
              d="M126.6,18.883c-2.059,0-1.56-2-2.728-2c-3.607,0-6.495,8.336-7.218,10.667l-4.058,12.997h-3.441l7.5-24.271 H113.1l0.335-0.997h3.441c2.498,0,3.555-0.613,3.555-0.613h0.168l-1.723,5.663c1.999-4,4.943-5.779,7.443-5.779 c1.607,0,2.276,1.003,2.276,2.056C128.595,17.72,127.981,18.883,126.6,18.883" />
        
        <path class="a2"
              d="M136.202,15.997c-2.888,0-8.494,13.995-8.494,19.938c0,1.556,0.444,2.556,1.387,2.556 c4.444,0,8.721-15.607,8.721-19.941C137.815,17.499,137.593,15.997,136.202,15.997 M136.481,36.598 c-0.107,0.339-0.164,0.729-0.164,1.062c0,0.608,0.22,1.053,0.829,1.053c2.167,0,4.167-4.169,4.439-5.776h0.897 c-0.779,3.385-3.281,7.945-6.945,7.945c-1.947,0-2.445-1.388-2.445-2.891c0-0.723,0.276-1.829,0.39-2.335 c-1.391,3.335-3.996,5.279-6.107,5.279c-1.834,0-3.277-1.441-3.277-4.723c0-7.608,7.717-21.718,12.491-21.718 c1.671,0,2.112,2.062,2.112,3.278v0.775l1.057-3.271h3.445L136.481,36.598z" />
        
        <path class="w" 
              d="M161.558,40.94c-2.396,0-3.96-2.564-3.96-5.631c0-0.278,0.058-0.556,0.058-0.835 c-1.674,3.901-4.963,6.355-7.583,6.355c-2.172,0-3.845-1.675-3.845-5.631c0-5.076,5.296-14.553,8.196-18.34 c-1.335,0.894-2.344,1.224-3.513,1.224c-1.116,0-2.119-0.446-2.954-0.446c-0.782,0-1.564,0.78-1.564,2.011 c0,0.666,0.448,1.39,1.115,2.115c0.449,0.5,0.952,1.003,0.952,1.954c0,1.224-0.952,2.002-1.898,2.002 c-1.004,0-1.951-0.834-1.951-2.898c0-4.174,2.676-7.86,6.806-7.86c0.942,0,2.117,0.335,3.008,0.335c0.611,0,1.229-0.111,1.78-0.609 l0.447,0.223c-2.564,3.401-7.639,13.151-7.639,19.061c0,2.229,0.839,3.737,2.846,3.737c6.801,0,8.475-13.987,9.03-19.341 c0.169-1.671,0.242-3.516,1.785-3.516c1.004,0,1.252,0.884,1.139,1.823c-0.288,2.379-4.274,12.023-4.54,16.741 c-0.153,2.708,1.112,4.294,3.788,4.294c4.401,0,7.639-7.921,7.639-13.549c0-1.446-0.222-2.732-0.67-3.731 c-0.503-1.117-1.504-1.896-1.504-3.293c0-1.45,1.057-2.225,2.064-2.225c1.113,0,2.174,1.055,2.174,3.896 C172.764,24.327,169.362,40.94,161.558,40.94" />
        
        <path class="f" 
              d="M190.896,6.831c-0.722,0-1.441-0.385-1.61-1.331c-0.219-1.389-0.832-1.611-1.444-1.611 c-1.334,0-2.111,1.112-2.72,3.055l-2.61,8.334h3.554l-0.274,0.997h-3.56l-8.162,26.383c-1.778,5.722-4.443,12.828-10.722,12.828 c-1.997,0-2.944-1.223-2.944-2.332c0-1.277,1.06-2.058,2.002-2.058c0.722,0,1.442,0.393,1.612,1.337 c0.218,1.387,0.778,1.608,1.443,1.608c1.328,0,2.109-1.111,2.719-3.106l10.721-34.66h-3.664l0.278-0.997h3.724 c1.717-5.78,4.384-12.831,10.717-12.831c1.997,0,2.944,1.167,2.944,2.33C192.898,6.058,191.839,6.831,190.896,6.831" />
        
        <path class="o" 
              d="M193.951,15.495c-4.61,0-7.944,11.945-7.944,19.049c0,3.061,0.614,5.39,2.06,5.39 c4.55,0,7.883-11.94,7.883-19.051C195.949,17.832,195.341,15.495,193.951,15.495 M187.676,40.882c-3.667,0-5.165-3.113-5.165-7.167 c0-7.831,5.496-19.166,11.773-19.166c3.662,0,5.169,3.114,5.169,7.223C199.453,29.548,193.951,40.882,187.676,40.882" />
        
        <path class="r2"
              d="M215.781,18.883c-2.06,0-1.561-2-2.726-2c-3.61,0-6.494,8.336-7.222,10.667l-4.054,12.997h-3.441 l7.495-24.271h-3.553l0.334-0.997h3.444c2.496,0,3.553-0.613,3.553-0.613h0.167l-1.725,5.663c2.003-4,4.945-5.779,7.447-5.779 c1.608,0,2.276,1.003,2.276,2.056C217.778,17.72,217.167,18.883,215.781,18.883" />
        
        <path class="d" 
              d="M225.384,15.997c-2.889,0-8.495,13.995-8.495,19.938c0,1.556,0.443,2.556,1.387,2.556 c4.445,0,8.72-15.607,8.72-19.941C226.995,17.499,226.773,15.997,225.384,15.997 M225.665,36.598 c-0.113,0.339-0.17,0.729-0.17,1.062c0,0.608,0.219,1.053,0.836,1.053c2.165,0,4.162-4.169,4.44-5.776h0.892 c-0.777,3.385-3.278,7.945-6.944,7.945c-1.942,0-2.442-1.388-2.442-2.891c0-0.501,0.279-1.829,0.387-2.335 c-1.386,3.335-4.002,5.279-6.109,5.279c-1.833,0-3.271-1.441-3.271-4.723c0-7.608,7.717-21.718,12.493-21.718 c1.664,0,2.107,2.062,2.107,3.278v0.775l4.389-13.994h-4.055l0.333-0.997H236L225.665,36.598z" />
        
    </g>
</svg>


<hr>
<label><input type="checkbox"> Toggle Loading Animation</label>

.lane-crawford-logo__svg {
    
    max-width: 380px;
    overflow: visible;
    
    path {
        
        fill: #2b2b2b;
        
    }
    
}



$lanecrawford: "l","a","n","e","c","r","a2","w","f","o","r2","d";


.logo2 {
    
    &.loading path {
        animation: breathe 2.6s ease infinite;
    }

    @each $letter in $lanecrawford {
        $i: index($lanecrawford, $letter);
        $t: 0.03s * $i;

        &.loading path.#{$letter} {
            animation-delay: $t;
        }
    }
    
}

@-webkit-keyframes breathe {
    
    15% { fill: #d0b17b; }
    21% { transform: translateY(-3px); }
    
}




.logo {
    
    &.loading path {
        
        fill: #ccc;
        transition: all 0.3s ease;
        animation: pulse 4s ease infinite;
    
    }        

    @each $letter in $lanecrawford {
        $i: index($lanecrawford, $letter);
        $t: 0.035s * $i;

        &.loading path.#{$letter} {
            animation-delay: $t;
        }
    }
    
}

@-webkit-keyframes pulse {
    
    10% { 
        
        fill: #2b2b2b; 
        transform: translateY(-3px); 
    
    }
    
}

























$reg: "http://media.lanecrawford.com/fonts/lane_crawford_reg-web";
$bld: "http://media.lanecrawford.com/fonts/lane_crawford_bld-web";

@font-face { 
  
  font-family: 'Lane Crawford'; 
  font-style: normal; 
  font-weight: 400; 
  src: url("#{$reg}.eot"); 
  src: 
    url("#{$reg}.eot?#iefix") format("ie9-skip-eot"), 
    url("#{$reg}.woff") format("woff"), 
    url("#{$reg}.svg") format("svg"), 
    url("#{$reg}.ttf") format("truetype"); 
  
}

@font-face { 
  
  font-family: 'Lane Crawford'; 
  font-style: normal; 
  font-weight: 800; 
  src: url("#{$bld}.eot"); 
  src: 
    url("#{$bld}.eot?#iefix") format("ie9-skip-eot"), 
    url("#{$bld}.woff") format("woff"), 
    url("#{$bld}.svg") format("svg"), 
    url("#{$bld}.ttf") format("truetype"); 

}



body {
    
    padding: 30px 0;
    text-align: center;
    
    text-transform: uppercase;
    
    @media screen and (min-width: 500px ) {
        
        padding: 50px 50px;
        
    }
    
}

hr {
    
    border: none;
    background: #2b2b2b;
    height: 1px;
    margin: 5px 0 20px;
    
}
View Compiled
setTimeout(function(){
    $("input").prop("checked", true).trigger("change");
}, 2000 );

$("input").on("change", function() {
    var $this = $(this);
    $(".logo, .logo2").each(function(){
        if($this.is(":checked")) {
            this.classList.add("loading");
        } else {
            this.classList.remove("loading");
        }              
    });
});
Rerun