<h1 class="site__title">
  <a href="https://bitsofco.de" target="_blank">
<svg id="logo" width="94px" height="15px" viewBox="0 0 94 15" aria-hidden="true">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g class="fill" fill-rule="nonzero" fill="#3C3C3C">

            <!-- B itsofcode -->
            <path class="logo-letter-b logo-placement-1 logo-section-left" d="M8.39551451,4.83471074 C7.58944591,4.33884298 6.68416887,4.10330579 5.67968338,4.10330579 C4.30316623,4.10330579 3.16226913,4.54958678 2.25699208,5.45454545 L2.25699208,2.15702479 L2.25699208,0.917355372 C2.25699208,0.384297521 1.99656992,0.123966942 1.46332454,0.123966942 L0.793667546,0.123966942 C0.260422164,0.123966942 0,0.384297521 0,0.917355372 L0,13.8471074 C0,14.3801653 0.260422164,14.6404959 0.793667546,14.6404959 L1.46332454,14.6404959 C1.99656992,14.6404959 2.25699208,14.3801653 2.25699208,13.8471074 L2.25699208,13.5247934 C3.16226913,14.4297521 4.30316623,14.8760331 5.67968338,14.8760331 C6.67176781,14.8760331 7.57704485,14.6280992 8.39551451,14.1446281 C9.20158311,13.6487603 9.83403694,13.0041322 10.2804749,12.1735537 C10.7269129,11.3553719 10.9501319,10.4628099 10.9501319,9.48347107 C10.9501319,8.51652893 10.7269129,7.62396694 10.2804749,6.79338843 C9.84643799,5.98760331 9.21398417,5.33057851 8.39551451,4.83471074 Z M7.6762533,11.8760331 C7.03139842,12.5206612 6.22532982,12.8553719 5.2828496,12.8553719 C4.62559367,12.8553719 4.01794195,12.6942149 3.47229551,12.3595041 C2.92664908,12.0247934 2.5298153,11.5785124 2.25699208,11.0082645 L2.25699208,7.99586777 C2.5298153,7.43801653 2.93905013,6.97933884 3.48469657,6.6446281 C4.03034301,6.29752066 4.62559367,6.13636364 5.2828496,6.13636364 C6.22532982,6.13636364 7.01899736,6.45867769 7.6762533,7.11570248 C8.32110818,7.76033058 8.65593668,8.5661157 8.65593668,9.49586777 C8.65593668,10.4380165 8.33350923,11.231405 7.6762533,11.8760331 Z"></path>

            <!-- b I tsofcode -->
            <path class="logo-letter-i logo-placement-2 logo-section-left" d="M13.8643799,4.33884298 L13.1823219,4.33884298 C12.6490765,4.33884298 12.3886544,4.59917355 12.3886544,5.1322314 L12.3886544,13.8471074 C12.3886544,14.3801653 12.6490765,14.6404959 13.1823219,14.6404959 L13.8643799,14.6404959 C14.3976253,14.6404959 14.6580475,14.3801653 14.6580475,13.8471074 L14.6580475,5.1322314 C14.6580475,4.59917355 14.3976253,4.33884298 13.8643799,4.33884298 Z"></path>

            <!-- bi T sofcode -->
            <path class="logo-letter-t logo-placement-3 logo-section-left" d="M20.9453826,12.9049587 C20.9329815,12.892562 20.9329815,12.8677686 20.9205805,12.8553719 C20.8585752,12.7933884 20.7965699,12.7438017 20.7097625,12.7066116 L20.7097625,12.7066116 C20.6229551,12.6694215 20.5237467,12.6570248 20.4121372,12.6446281 L20.4121372,12.6446281 C20.4121372,12.6322314 20.362533,12.6322314 20.3005277,12.6322314 L20.2881266,12.6322314 C20.0773087,12.6322314 19.6804749,12.6570248 19.6432718,12.6570248 C19.3704485,12.6570248 19.0852243,12.6446281 18.8496042,12.4834711 C18.353562,12.1363636 18.3783641,11.553719 18.3783641,11.0082645 L18.3783641,10.9586777 L18.3783641,9.68181818 L18.3783641,9.26033058 L18.3783641,6.33471074 L20.1889182,6.33471074 C20.7221636,6.33471074 20.9825858,6.07438017 20.9825858,5.54132231 L20.9825858,5.1446281 C20.9825858,4.61157025 20.7221636,4.35123967 20.1889182,4.35123967 L18.3783641,4.35123967 L18.3783641,2.19421488 C18.3783641,1.9338843 18.3039578,1.7231405 18.1675462,1.58677686 C18.0311346,1.45041322 17.8203166,1.40082645 17.5598945,1.42561983 L16.8778364,1.48760331 C16.3693931,1.52479339 16.121372,1.80991736 16.121372,2.31818182 L16.121372,4.33884298 L16.121372,6.32231405 L16.121372,6.99173554 L16.121372,9.24793388 L16.121372,10.5495868 C16.121372,11.3057851 16.0841689,12.0867769 16.3073879,12.8181818 C16.4437995,13.2892562 16.6918206,13.7231405 17.0638522,14.0578512 C17.907124,14.7768595 18.9984169,14.6280992 20.0153034,14.6280992 L20.2013193,14.6280992 C20.2633245,14.6280992 20.3377309,14.6280992 20.4121372,14.6157025 L20.4245383,14.6157025 C20.4741425,14.6157025 20.5113456,14.6157025 20.5733509,14.6033058 C20.9329815,14.5785124 21.1189974,14.3057851 21.1189974,13.785124 L21.1189974,13.4132231 C21.1189974,13.2892562 21.1065963,13.177686 21.0693931,13.0909091 C21.0197889,13.0165289 20.9825858,12.9669421 20.9453826,12.9049587 Z"></path>

            <!-- bit S ofcode -->
            <path class="logo-letter-s logo-placement-4 logo-section-left" class="logo__letter-s" d="M26.7366755,8.45454545 C25.521372,8.20661157 24.9013193,7.73553719 24.9013193,7.04132231 C24.9013193,6.73140496 25.0501319,6.49586777 25.3353562,6.30991736 C25.6205805,6.13636364 25.9926121,6.03719008 26.4390501,6.03719008 C26.9350923,6.03719008 27.4435356,6.2107438 27.976781,6.54545455 C28.423219,6.84297521 28.7952507,6.79338843 29.105277,6.39669421 L29.328496,6.11157025 C29.4897098,5.91322314 29.5641161,5.71487603 29.551715,5.50413223 C29.539314,5.30578512 29.4153034,5.1322314 29.2044855,4.99586777 C28.2992084,4.38842975 27.3195251,4.09090909 26.2654354,4.09090909 C25.1741425,4.09090909 24.2936675,4.36363636 23.6364116,4.90909091 C22.9791557,5.45454545 22.6443272,6.14876033 22.6443272,6.99173554 C22.6443272,7.85950413 22.9171504,8.55371901 23.4627968,9.08677686 C24.0084433,9.61983471 24.851715,10.0041322 26.0050132,10.2272727 C26.7242744,10.3760331 27.2327177,10.5619835 27.530343,10.785124 C27.8279683,11.0082645 27.976781,11.3057851 27.976781,11.677686 C27.976781,12.0495868 27.8155673,12.3595041 27.4931398,12.5826446 C27.1707124,12.8057851 26.7490765,12.9173554 26.2034301,12.9173554 C25.4469657,12.9173554 24.7525066,12.6818182 24.1200528,12.1983471 C23.6860158,11.8636364 23.3139842,11.8760331 23.0039578,12.2603306 L22.7435356,12.5702479 C22.3963061,12.9917355 22.4211082,13.3636364 22.7931398,13.6859504 C23.7480211,14.4793388 24.9385224,14.8636364 26.3522427,14.8636364 C27.5427441,14.8636364 28.4852243,14.5661157 29.1920844,13.9834711 C29.8865435,13.4008264 30.2337731,12.6446281 30.2337731,11.7272727 C30.2337731,10.8471074 29.9485488,10.1404959 29.3905013,9.60743802 C28.8200528,9.08677686 27.9395778,8.70247934 26.7366755,8.45454545 Z"></path>


            <!-- bits O fcode (opening) -->
            <path class="logo-letter-o-opening logo-placement-5 logo-section-left" d="M35.3182058,14.6652893 C35.2313984,14.6652893 35.13219,14.6528926 35.0453826,14.6280992 C32.7015831,14.0206612 31.0770449,11.9008264 31.0770449,9.48347107 C31.0770449,7.0661157 32.7139842,4.94628099 35.0453826,4.33884298 C35.6406332,4.19008264 36.2358839,4.53719008 36.3846966,5.11983471 C36.5335092,5.70247934 36.1862797,6.30991736 35.6034301,6.45867769 C34.2269129,6.81818182 33.2720317,8.05785124 33.2720317,9.48347107 C33.2720317,10.9090909 34.2269129,12.1487603 35.6034301,12.5082645 C36.1862797,12.6570248 36.5459103,13.2644628 36.3846966,13.8471074 C36.248285,14.3429752 35.801847,14.6652893 35.3182058,14.6652893 Z"></path>

            <!-- bits O fcode (closing) -->
            <path class="logo-letter-o-closing logo-placement-6 logo-section-middle" d="M38.0712401,14.6280992 C37.5875989,14.6280992 37.1411609,14.3057851 37.0171504,13.8099174 C36.8683377,13.2272727 37.2155673,12.6322314 37.7984169,12.4710744 C39.174934,12.1115702 40.1298153,10.8719008 40.1298153,9.44628099 C40.1298153,8.02066116 39.174934,6.78099174 37.7984169,6.4214876 C37.2155673,6.27272727 36.8559367,5.66528926 37.0171504,5.08264463 C37.1659631,4.5 37.7612137,4.15289256 38.3564644,4.30165289 C40.7002639,4.90909091 42.3248021,7.02892562 42.3248021,9.44628099 C42.3248021,11.8636364 40.6878628,13.9834711 38.3564644,14.5909091 C38.2572559,14.6157025 38.1580475,14.6280992 38.0712401,14.6280992 Z"></path>

            <!-- bitso F code -->
            <path class="logo-letter-f logo-placement-7 logo-section-middle" d="M46.1567282,2.26859504 C46.3799472,2.10743802 46.6775726,2.09504132 46.9503958,2.09504132 C46.9875989,2.09504132 47.3844327,2.11983471 47.5952507,2.11983471 L47.6076517,2.11983471 C47.669657,2.11983471 47.7192612,2.11983471 47.7192612,2.10743802 L47.7192612,2.10743802 C47.8308707,2.09504132 47.9300792,2.08264463 48.0168865,2.04545455 L48.0168865,2.04545455 C48.1036939,2.00826446 48.1656992,1.95867769 48.2277045,1.89669421 C48.2401055,1.88429752 48.2525066,1.85950413 48.2525066,1.84710744 C48.2897098,1.79752066 48.3269129,1.73553719 48.351715,1.66115702 C48.3765172,1.56198347 48.4013193,1.46280992 48.4013193,1.33884298 L48.4013193,0.966942149 C48.4013193,0.446280992 48.2153034,0.173553719 47.8556728,0.148760331 C47.8060686,0.148760331 47.7564644,0.148760331 47.7068602,0.136363636 L47.6944591,0.136363636 C47.6200528,0.136363636 47.5456464,0.123966942 47.4836412,0.123966942 L47.2976253,0.123966942 C46.2683377,0.123966942 45.1770449,-0.0247933884 44.3461741,0.694214876 C43.9617414,1.01652893 43.7261214,1.45041322 43.5897098,1.9338843 C43.3788918,2.66528926 43.4036939,3.44628099 43.4036939,4.20247934 L43.4036939,5.50413223 L43.4036939,9.06198347 L43.4036939,9.73140496 L43.4036939,11.714876 L43.4036939,13.7355372 C43.4036939,14.2561983 43.651715,14.5289256 44.1601583,14.5661157 L44.8422164,14.6280992 C45.1026385,14.6528926 45.3134565,14.6033058 45.4498681,14.4669421 C45.5862797,14.3305785 45.660686,14.1322314 45.660686,13.8595041 L45.660686,6.29752066 L47.4960422,6.29752066 C48.0292876,6.29752066 48.2897098,6.03719008 48.2897098,5.50413223 L48.2897098,5.10743802 C48.2897098,4.57438017 48.0292876,4.31404959 47.4960422,4.31404959 L45.6854881,4.31404959 L45.6854881,3.79338843 L45.6854881,3.74380165 C45.6854881,3.2107438 45.660686,2.62809917 46.1567282,2.26859504 Z"></path>

            <!-- bitsof C ode -->
            <path class="logo-letter-c logo-placement-8 logo-section-middle" d="M57.6525066,12.3471074 C57.3548813,11.9752066 56.9828496,11.9380165 56.5364116,12.2231405 C55.8915567,12.6446281 55.2094987,12.8553719 54.5026385,12.8553719 C53.5601583,12.8553719 52.7664908,12.5330579 52.1092348,11.8760331 C51.4643799,11.231405 51.1295515,10.4256198 51.1295515,9.48347107 C51.1295515,8.54132231 51.4519789,7.74793388 52.1092348,7.10330579 C52.7540897,6.45867769 53.5601583,6.12396694 54.5026385,6.12396694 C55.1474934,6.12396694 55.8047493,6.32231405 56.4496042,6.70661157 C56.8960422,6.97933884 57.2680739,6.91735537 57.5532982,6.49586777 L57.8509235,6.04958678 C58.1485488,5.59090909 58.0741425,5.23140496 57.6401055,4.95867769 C56.7224274,4.37603306 55.6683377,4.09090909 54.5026385,4.09090909 C53.4361478,4.09090909 52.4688654,4.32644628 51.6007916,4.80991736 C50.7327177,5.29338843 50.0506596,5.93801653 49.5670185,6.76859504 C49.0833773,7.59917355 48.8353562,8.50413223 48.8353562,9.48347107 C48.8353562,10.4752066 49.0833773,11.3801653 49.5670185,12.1983471 C50.0506596,13.0289256 50.7327177,13.6735537 51.6007916,14.1570248 C52.4688654,14.6404959 53.4361478,14.8760331 54.5026385,14.8760331 C55.8047493,14.8760331 56.9456464,14.5289256 57.9377309,13.8347107 C58.3097625,13.5619835 58.3221636,13.2024793 57.9873351,12.768595 L57.6525066,12.3471074 Z"></path>

            <!-- bitsofc O de (opening) -->
            <path class="logo-letter-o-opening logo-placement-9 logo-section-middle" d="M62.5013193,14.6280992 C62.4145119,14.6280992 62.3153034,14.6157025 62.228496,14.5909091 C59.8846966,13.9834711 58.2601583,11.8636364 58.2601583,9.44628099 C58.2601583,7.02892562 59.8970976,4.90909091 62.228496,4.30165289 C62.8113456,4.15289256 63.4189974,4.5 63.56781,5.08264463 C63.7166227,5.66528926 63.3693931,6.27272727 62.7865435,6.4214876 C61.4100264,6.78099174 60.4551451,8.02066116 60.4551451,9.44628099 C60.4551451,10.8719008 61.4100264,12.1115702 62.7865435,12.4710744 C63.3693931,12.6198347 63.7290237,13.2272727 63.56781,13.8099174 C63.4437995,14.3057851 62.9973615,14.6280992 62.5013193,14.6280992 Z"></path>

            <!-- bitsofc O de (closing) -->
            <path class="logo-letter-o-closing logo-placement-10 logo-section-right" d="M65.2791557,14.6280992 C64.7955145,14.6280992 64.3490765,14.3057851 64.225066,13.8099174 C64.0762533,13.2272727 64.4234828,12.6322314 65.0063325,12.4710744 C66.3828496,12.1115702 67.3377309,10.8719008 67.3377309,9.44628099 C67.3377309,8.02066116 66.3828496,6.78099174 65.0063325,6.4214876 C64.4234828,6.27272727 64.0638522,5.66528926 64.225066,5.08264463 C64.3738786,4.5 64.9691293,4.15289256 65.5643799,4.30165289 C67.9081794,4.90909091 69.5327177,7.02892562 69.5327177,9.44628099 C69.5327177,11.8636364 67.8957784,13.9834711 65.5643799,14.5909091 C65.4651715,14.6157025 65.3659631,14.6280992 65.2791557,14.6280992 Z"></path>

            <!-- bitsofco D e -->
            <path class="logo-letter-d logo-placement-11 logo-section-right" d="M80.8176781,0.123966942 L80.1356201,0.123966942 C79.6023747,0.123966942 79.3419525,0.384297521 79.3419525,0.917355372 L79.3419525,5.45454545 C78.4366755,4.54958678 77.2957784,4.10330579 75.9192612,4.10330579 C74.9271768,4.10330579 74.0218997,4.35123967 73.2034301,4.83471074 C72.3849604,5.33057851 71.7649077,5.98760331 71.3184697,6.80578512 C70.8720317,7.62396694 70.6488127,8.51652893 70.6488127,9.49586777 C70.6488127,10.4628099 70.8720317,11.3553719 71.3184697,12.1859504 C71.7649077,13.0041322 72.3973615,13.661157 73.2034301,14.1570248 C74.0094987,14.6528926 74.9147757,14.8884298 75.9192612,14.8884298 C77.2957784,14.8884298 78.4366755,14.4421488 79.3419525,13.5371901 L79.3419525,13.8595041 C79.3419525,14.392562 79.6023747,14.6528926 80.1356201,14.6528926 L80.8176781,14.6528926 C81.3509235,14.6528926 81.6113456,14.392562 81.6113456,13.8595041 L81.6113456,0.917355372 C81.6113456,0.384297521 81.3509235,0.123966942 80.8176781,0.123966942 Z M79.3419525,10.9958678 C79.0691293,11.5661157 78.6598945,12.0123967 78.1266491,12.3471074 C77.5810026,12.6818182 76.985752,12.8429752 76.316095,12.8429752 C75.3736148,12.8429752 74.5799472,12.5206612 73.9226913,11.8636364 C73.2778364,11.2190083 72.9430079,10.4132231 72.9430079,9.47107438 C72.9430079,8.52892562 73.2654354,7.73553719 73.9226913,7.09090909 C74.5675462,6.44628099 75.3736148,6.11157025 76.316095,6.11157025 C76.9733509,6.11157025 77.5686016,6.28512397 78.114248,6.61983471 C78.6598945,6.96694215 79.0691293,7.41322314 79.3419525,7.97107438 L79.3419525,10.9958678 Z"></path>

            <!-- bitsofcod E -->
            <path class="logo-letter-e logo-placement-12 logo-section-right" d="M91.3585752,4.80991736 C90.5401055,4.33884298 89.6100264,4.10330579 88.5931398,4.10330579 C87.8118734,4.10330579 87.0802111,4.23966942 86.385752,4.52479339 C85.6912929,4.80991736 85.1084433,5.18181818 84.6248021,5.66528926 C84.1411609,6.14876033 83.7567282,6.71900826 83.471504,7.37603306 C83.1862797,8.03305785 83.0498681,8.73966942 83.0498681,9.48347107 C83.0498681,10.2272727 83.1862797,10.9214876 83.471504,11.5909091 C83.7443272,12.2479339 84.1287599,12.8181818 84.6248021,13.3016529 C85.1208443,13.785124 85.716095,14.1694215 86.4353562,14.4545455 C87.1546174,14.7396694 87.9234828,14.8760331 88.7667546,14.8760331 C90.3168865,14.8760331 91.6313984,14.4421488 92.7226913,13.5743802 C93.1319261,13.2272727 93.1319261,12.8429752 92.7102902,12.446281 L92.3258575,12.0743802 C91.978628,11.7520661 91.6065963,11.7520661 91.1973615,12.0619835 C90.428496,12.6322314 89.5976253,12.9173554 88.7047493,12.9173554 C87.8614776,12.9173554 87.1174142,12.6694215 86.4973615,12.161157 C85.8773087,11.6528926 85.505277,11.0082645 85.3688654,10.214876 L93.107124,10.214876 C93.3551451,10.214876 93.5659631,10.1528926 93.7147757,10.0289256 C93.8635884,9.90495868 93.9379947,9.71900826 93.9503958,9.48347107 C93.9627968,9.4338843 93.9627968,9.37190083 93.9627968,9.28512397 C93.9627968,8.34297521 93.7395778,7.47520661 93.2807388,6.69421488 C92.8218997,5.91322314 92.1894459,5.28099174 91.3585752,4.80991736 Z M85.4556728,8.3553719 C85.6664908,7.68595041 86.0633245,7.12809917 86.6461741,6.69421488 C87.2290237,6.26033058 87.8738786,6.04958678 88.5931398,6.04958678 C89.3248021,6.04958678 89.9572559,6.26033058 90.4905013,6.69421488 C91.0237467,7.12809917 91.3833773,7.67355372 91.5693931,8.3553719 L85.4556728,8.3553719 Z"></path>

        </g>
    </g>
</svg>
  </a>
</h1>

body { 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #ffdb3a;
}

#logo {
  height: 40px;
  width: auto; 
  overflow: visible;
 
  margin: 50px auto;
  
  .fill { fill: #fff; }
}

const logoSectionLeftKeyframes = [
  { transform: 'none' },
  { offset: 0.125, transform: 'translateX(-15px)' },
  { offset: 0.25, transform: 'none' },
  { offset: 0.5, transform: 'none' },
  { offset: 0.625, transform: 'translateX(-15px)' },
  { offset: 0.67, transform: 'translateX(-15px) rotate(-10deg)' },
  { offset: 0.72, transform: 'translateX(-15px) rotate(-10deg)' },
  { offset: 0.82, transform: 'translateX(-15px) rotate(-15deg)' },
  { offset: 0.875, transform: 'translateX(-15px)' },
  { transform: 'none' }
];

const logoSectionMiddleKeyframes = [
  { transform: 'none' },
  { offset: 0.125, transform: 'translateX(-15px)' },
  { offset: 0.25, transform: 'none' },
  { offset: 0.375, transform: 'translateX(15px)' },
  { offset: 0.5, transform: 'none' },
  { offset: 0.625, transform: 'none' },
  { offset: 0.67, transform: 'rotate(7deg)' },
  { offset: 0.72, transform: 'rotate(7deg)' },
  { offset: 0.82, transform: 'rotate(12deg)' },
  { offset: 0.875, transform: 'none' },
  { transform: 'none' }
];

const logoSectionRightKeyframes = [
  { transform: 'none' },
  { offset: 0.25, transform: 'none' },
  { offset: 0.375, transform: 'translateX(15px)' },
  { offset: 0.5, transform: 'none' },
  { offset: 0.625, transform: 'translateX(15px)' },
  { offset: 0.67, transform: 'translateX(15px) rotate(-7deg)' },
  { offset: 0.72, transform: 'translateX(15px) rotate(-7deg)' },
  { offset: 0.82, transform: 'translateX(15px) rotate(-12deg)' },
  { offset: 0.875, transform: 'translateX(15px)' },
  { transform: 'none' }
];

const logoSectionTiming = {
  duration: 3000,
  iterations: Infinity
};

const animations = [];

function playLogoAnimation() {
  animations.map((animation) => animation.play())
}

function pauseLogoAnimation() {

  animations.map((animation) => {
    animation.pause()
      animation.currentTime = 0;
  })
}

function createLogoAnimation() {
  const logoSectionLeftEls = Array.from( document.querySelectorAll('.logo-section-left') );
  logoSectionLeftEls.forEach((el) => animations.push(el.animate(logoSectionLeftKeyframes, logoSectionTiming)))

  const logoSectionMiddleEls = Array.from( document.querySelectorAll('.logo-section-middle') );
  logoSectionMiddleEls.forEach((el) => animations.push(el.animate(logoSectionMiddleKeyframes, logoSectionTiming)))

  const logoSectionRightEls = Array.from( document.querySelectorAll('.logo-section-right') );
  logoSectionRightEls.forEach((el) => animations.push(el.animate(logoSectionRightKeyframes, logoSectionTiming)))
  
  pauseLogoAnimation();
}

createLogoAnimation();

const siteTitleLink = document.querySelector('.site__title a');
siteTitleLink.addEventListener('mouseover', playLogoAnimation);
siteTitleLink.addEventListener('mouseout', pauseLogoAnimation);

siteTitleLink.addEventListener('keyup', (e) => {
  if ( e.keyCode === 9 ) playLogoAnimation();
});

siteTitleLink.addEventListener('keydown', (e) => {
  if ( e.keyCode === 9 ) pauseLogoAnimation();
});