fluks jumping logo 2

fluks-jumping-logo-2.markdown

fluks jumping logo 2

A Pen by Ronny-André Bendiksen on CodePen.

License.

index.html

<div class="outer">
  <div class="logo-jump logo">
    <svg viewBox="0 0 1184 1184" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#de3a21" d="M 583.47 0.00 L 600.64 0.00 C 683.99 1.19 767.11 19.94 842.61 55.37 C 906.42 85.21 964.82 126.57 1014.09 176.91 C 1074.22 238.03 1120.81 312.39 1149.55 393.17 C 1171.47 454.50 1182.95 519.47 1184.00 584.57 L 1184.00 598.65 C 1182.73 685.56 1162.45 772.21 1124.32 850.36 C 1092.15 916.52 1047.57 976.63 993.54 1026.54 C 937.20 1078.74 870.59 1119.84 798.58 1146.57 C 759.30 1161.19 718.45 1171.58 676.96 1177.48 C 651.59 1181.31 625.94 1182.64 600.35 1184.00 L 584.57 1184.00 C 562.00 1182.81 539.38 1181.74 516.95 1178.78 C 435.10 1168.56 355.51 1140.82 285.03 1097.96 C 239.71 1070.47 198.13 1036.81 161.73 998.28 C 113.53 947.26 74.43 887.63 47.07 822.99 C 16.91 752.21 1.08 675.47 0.00 598.57 L 0.00 584.40 C 0.59 550.05 3.93 515.74 10.31 481.98 C 23.40 412.19 49.23 344.82 86.19 284.19 C 124.18 221.69 173.88 166.36 231.93 121.86 C 289.50 77.65 355.31 44.18 425.00 23.83 C 476.42 8.72 529.91 0.88 583.47 0.00 M 568.06 151.18 C 507.78 154.31 448.16 170.01 394.23 197.14 C 331.20 228.67 276.07 275.70 234.76 332.78 C 171.04 420.26 140.98 531.81 153.26 639.43 C 161.97 719.97 193.43 797.90 243.13 861.88 C 281.45 911.50 330.50 952.82 385.95 982.10 C 432.01 1006.51 482.48 1022.47 534.15 1029.23 C 583.27 1035.51 633.48 1034.09 682.00 1024.01 C 760.48 1007.91 834.05 969.35 892.49 914.62 C 950.66 860.49 994.05 790.49 1015.96 714.06 C 1028.80 669.96 1034.24 623.81 1032.80 577.92 C 1031.45 525.91 1020.53 474.17 1000.92 425.98 C 979.40 373.04 947.42 324.41 907.51 283.53 C 853.75 228.31 785.39 187.29 711.12 166.57 C 664.73 153.51 616.16 148.47 568.06 151.18 Z" />
<path fill="#fbfbfb" d="M 568.06 151.18 C 616.16 148.47 664.73 153.51 711.12 166.57 C 785.39 187.29 853.75 228.31 907.51 283.53 C 947.42 324.41 979.40 373.04 1000.92 425.98 C 1020.53 474.17 1031.45 525.91 1032.80 577.92 C 1034.24 623.81 1028.80 669.96 1015.96 714.06 C 994.05 790.49 950.66 860.49 892.49 914.62 C 834.05 969.35 760.48 1007.91 682.00 1024.01 C 633.48 1034.09 583.27 1035.51 534.15 1029.23 C 482.48 1022.47 432.01 1006.51 385.95 982.10 C 330.50 952.82 281.45 911.50 243.13 861.88 C 193.43 797.90 161.97 719.97 153.26 639.43 C 140.98 531.81 171.04 420.26 234.76 332.78 C 276.07 275.70 331.20 228.67 394.23 197.14 C 448.16 170.01 507.78 154.31 568.06 151.18 M 789.60 314.81 C 766.71 317.76 744.10 325.76 725.57 339.72 C 682.15 371.42 650.29 419.28 639.62 472.14 C 629.64 516.65 625.20 562.43 626.90 608.02 C 628.21 644.69 633.48 681.18 642.17 716.82 C 649.25 744.55 662.46 770.55 679.73 793.30 C 696.01 814.61 715.98 833.24 738.96 847.14 C 752.46 854.37 767.06 859.61 782.15 862.29 C 804.76 866.39 828.40 864.00 849.88 855.91 C 869.07 848.74 886.52 837.38 901.65 823.65 C 928.11 799.51 947.95 768.56 960.56 735.14 C 968.30 715.26 972.06 694.17 975.50 673.20 C 985.09 613.13 984.27 551.45 973.26 491.62 C 971.05 480.00 968.90 468.33 965.44 457.01 C 953.22 416.42 929.85 379.02 897.76 351.21 C 885.15 340.53 871.58 330.57 856.08 324.54 C 835.18 315.83 812.12 312.11 789.60 314.81 M 243.57 391.19 C 243.39 420.46 243.57 449.73 243.48 479.00 C 243.45 480.34 243.57 481.68 243.85 483.01 C 245.40 483.21 246.68 482.27 247.95 481.58 C 265.27 471.53 282.69 461.67 299.98 451.59 C 300.09 584.78 299.87 717.97 300.09 851.16 C 302.69 851.71 305.36 851.45 308.01 851.50 C 334.02 851.50 360.02 851.50 386.03 851.50 C 388.65 851.45 391.31 851.71 393.90 851.18 C 394.13 790.46 393.94 729.74 394.00 669.02 C 393.94 554.95 394.12 440.88 393.91 326.81 C 391.31 326.29 388.66 326.54 386.03 326.50 C 359.65 326.48 333.27 326.54 306.89 326.48 C 285.73 348.00 264.77 369.71 243.57 391.19 M 435.10 391.16 C 434.89 421.16 435.03 451.16 435.02 481.17 C 434.75 482.69 436.43 483.74 437.61 482.60 C 455.59 472.30 473.55 461.95 491.51 451.61 C 491.49 574.07 491.50 696.54 491.50 819.00 C 491.72 829.81 491.06 840.68 491.83 851.45 C 522.97 851.50 554.11 851.58 585.24 851.41 C 585.82 839.29 585.33 827.13 585.50 815.00 C 585.50 704.99 585.50 594.98 585.50 484.98 C 585.40 432.21 585.68 379.44 585.36 326.68 C 556.30 326.33 527.21 326.51 498.15 326.58 C 477.22 348.19 456.19 369.71 435.10 391.16 Z" />
<path fill="#fbfbfb" d="M 798.43 408.67 C 815.00 406.29 832.30 414.89 840.84 429.22 C 854.00 445.79 857.91 467.00 863.62 486.83 C 866.52 500.48 870.35 513.97 871.72 527.90 C 881.66 593.91 875.32 662.26 853.73 725.41 C 848.43 739.44 840.63 753.21 828.39 762.29 C 820.89 768.08 811.22 770.02 801.93 769.71 C 788.90 769.46 776.83 762.04 769.28 751.66 C 761.82 741.37 756.45 729.71 752.25 717.76 C 742.85 690.74 738.98 662.26 734.63 634.10 C 728.04 574.71 735.04 514.08 753.26 457.25 C 758.77 443.72 764.95 429.86 775.70 419.61 C 781.85 413.61 790.04 410.11 798.43 408.67 Z" />
<path fill="#010101" style="--char-index:0;" class="char" d="M 789.60 314.81 C 812.12 312.11 835.18 315.83 856.08 324.54 C 871.58 330.57 885.15 340.53 897.76 351.21 C 929.85 379.02 953.22 416.42 965.44 457.01 C 968.90 468.33 971.05 480.00 973.26 491.62 C 984.27 551.45 985.09 613.13 975.50 673.20 C 972.06 694.17 968.30 715.26 960.56 735.14 C 947.95 768.56 928.11 799.51 901.65 823.65 C 886.52 837.38 869.07 848.74 849.88 855.91 C 828.40 864.00 804.76 866.39 782.15 862.29 C 767.06 859.61 752.46 854.37 738.96 847.14 C 715.98 833.24 696.01 814.61 679.73 793.30 C 662.46 770.55 649.25 744.55 642.17 716.82 C 633.48 681.18 628.21 644.69 626.90 608.02 C 625.20 562.43 629.64 516.65 639.62 472.14 C 650.29 419.28 682.15 371.42 725.57 339.72 C 744.10 325.76 766.71 317.76 789.60 314.81 M 798.43 408.67 C 790.04 410.11 781.85 413.61 775.70 419.61 C 764.95 429.86 758.77 443.72 753.26 457.25 C 735.04 514.08 728.04 574.71 734.63 634.10 C 738.98 662.26 742.85 690.74 752.25 717.76 C 756.45 729.71 761.82 741.37 769.28 751.66 C 776.83 762.04 788.90 769.46 801.93 769.71 C 811.22 770.02 820.89 768.08 828.39 762.29 C 840.63 753.21 848.43 739.44 853.73 725.41 C 875.32 662.26 881.66 593.91 871.72 527.90 C 870.35 513.97 866.52 500.48 863.62 486.83 C 857.91 467.00 854.00 445.79 840.84 429.22 C 832.30 414.89 815.00 406.29 798.43 408.67 Z" />
<path fill="#010101" style="--char-index:1;" class="char" d="M 243.57 391.19 C 264.77 369.71 285.73 348.00 306.89 326.48 C 333.27 326.54 359.65 326.48 386.03 326.50 C 388.66 326.54 391.31 326.29 393.91 326.81 C 394.12 440.88 393.94 554.95 394.00 669.02 C 393.94 729.74 394.13 790.46 393.90 851.18 C 391.31 851.71 388.65 851.45 386.03 851.50 C 360.02 851.50 334.02 851.50 308.01 851.50 C 305.36 851.45 302.69 851.71 300.09 851.16 C 299.87 717.97 300.09 584.78 299.98 451.59 C 282.69 461.67 265.27 471.53 247.95 481.58 C 246.68 482.27 245.40 483.21 243.85 483.01 C 243.57 481.68 243.45 480.34 243.48 479.00 C 243.57 449.73 243.39 420.46 243.57 391.19 Z" />
<path fill="#010101" style="--char-index:2;" class="char" d="M 435.10 391.16 C 456.19 369.71 477.22 348.19 498.15 326.58 C 527.21 326.51 556.30 326.33 585.36 326.68 C 585.68 379.44 585.40 432.21 585.50 484.98 C 585.50 594.98 585.50 704.99 585.50 815.00 C 585.33 827.13 585.82 839.29 585.24 851.41 C 554.11 851.58 522.97 851.50 491.83 851.45 C 491.06 840.68 491.72 829.81 491.50 819.00 C 491.50 696.54 491.49 574.07 491.51 451.61 C 473.55 461.95 455.59 472.30 437.61 482.60 C 436.43 483.74 434.75 482.69 435.02 481.17 C 435.03 451.16 434.89 421.16 435.10 391.16 Z" />
</svg>
  </div>
</div>

style.scss

.outer {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-jump svg {
  height: 50vh;
  overflow: visible;
}

.logo-jump .char {
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: jump;
          animation-name: jump;
  -webkit-animation-timing-function: cubic-bezier(0.165, 0.44, 0.64, 1);
          animation-timing-function: cubic-bezier(0.165, 0.44, 0.64, 1);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  display: inline-block;
  transform-origin: 50% 100%;
  -webkit-animation-delay: calc(var(--char-index) * 0.075s);
          animation-delay: calc(var(--char-index) * 0.075s);
}

@-webkit-keyframes jump {
  2% {
    transform: translateY(2%) scaleY(0.9);
  }
  8% {
    transform: translateY(-100%) scaleY(1.2);
  }
  12% {
    transform: translateY(10%) scaleY(0.8);
  }
  16% {
    transform: translateY(-5%) scaleY(1);
  }
  20%, 100% {
    transform: translateY(0) scaleY(1);
  }
}