src/ims/arrcomp_anim.svg

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377 81">

  <!-- Left Bracket -->
  <path id="left-bracket" d="M0,47.52L0,0L13.44,0L13.44,5.1L5.76,5.1L5.76,42.48L13.44,42.48L13.44,47.52L0,47.52Z" style="fill:#2b2533;fill-rule:nonzero;opacity:1;">
  </path>

  <path d="M40.66,40.56C38.68,40.56 36.94,40.02 35.32,39.06C33.7,38.1 32.44,36.72 31.48,35.04C30.58,33.3 30.1,31.38 30.1,29.28C30.1,27.3 30.52,25.44 31.3,23.64C32.08,21.9 33.16,20.28 34.54,18.96C35.92,17.58 37.48,16.44 39.22,15.66C40.96,14.88 42.76,14.52 44.62,14.52C46.3,14.52 47.86,14.82 49.3,15.42C50.8,16.08 52,16.98 53.02,18.12L53.74,15L59.5,15L53.26,40.02L47.56,40.02L48.16,37.62C47.14,38.46 46,39.18 44.74,39.72C43.48,40.26 42.1,40.56 40.66,40.56ZM42.46,34.74C43.9,34.74 45.22,34.38 46.42,33.6C47.62,32.82 48.58,31.8 49.3,30.6C50.02,29.34 50.38,28.02 50.38,26.64C50.38,25.44 50.14,24.36 49.6,23.46C49.06,22.5 48.34,21.72 47.44,21.18C46.54,20.64 45.46,20.34 44.2,20.34C42.82,20.34 41.5,20.7 40.3,21.48C39.1,22.26 38.14,23.22 37.42,24.48C36.7,25.68 36.34,27 36.34,28.44C36.34,29.58 36.58,30.6 37.12,31.56C37.6,32.52 38.32,33.3 39.28,33.9C40.24,34.44 41.26,34.74 42.46,34.74Z" style="fill:#2b2533;fill-rule:nonzero;opacity:1;">
    <animate id="fadeIna"
             attributeName="opacity"
             from="0" to="1" dur="0.4s"
             begin="0s;holdOff.end" />
    <animate id="holdOna"
             attributeName="opacity"
             from="1" to="1" dur="8s"
             begin="fadeIna.end" />
    <animate id="fadeOuta"
             attributeName="opacity"
             from="1" to="0" dur="0.1s"
             begin="holdOna.end" />
    <animate id="holdOff"
             attributeName="opacity"
             from="0" to="0" dur="1.4s"
             begin="fadeOuta.end" />

    </path>

  <path d="M59.401,40.02L65.641,15L71.581,15L70.561,19.08C71.821,17.7 73.201,16.62 74.701,15.9C76.261,15.12 77.941,14.76 79.681,14.76L79.681,20.7C79.201,20.52 78.601,20.46 77.941,20.46C75.841,20.46 73.981,21.18 72.301,22.62C70.681,24.06 69.481,26.22 68.761,29.22L65.941,40.02L59.401,40.02Z" style="fill:#2b2533;fill-rule:nonzero;opacity:0;">

    <animate id="fadeInr"
             attributeName="opacity"
             from="0" to="1" dur="0.4s"
             begin="0.4s;holdOff.end+0.4s" />
    <animate id="holdOnr"
             attributeName="opacity"
             from="1" to="1" dur="7.6s"
             begin="fadeInr.end" />
    <animate id="fadeOutr"
             attributeName="opacity"
             from="1" to="0" dur="0.1s"
             begin="holdOnr.end" />
    <animate id="holdOff"
             attributeName="opacity"
             from="0" to="0" dur="1.4s"
             begin="fadeOutr.end" />

    </path>

  <path d="M78.464,40.02L84.704,15L90.644,15L89.624,19.08C90.884,17.7 92.264,16.62 93.764,15.9C95.324,15.12 97.004,14.76 98.744,14.76L98.744,20.7C98.264,20.52 97.664,20.46 97.004,20.46C94.904,20.46 93.044,21.18 91.364,22.62C89.744,24.06 88.544,26.22 87.824,29.22L85.004,40.02L78.464,40.02Z" style="fill:#2b2533;fill-rule:nonzero;opacity:0;">
    <animate id="fadeInrr"
             attributeName="opacity"
             from="0" to="1" dur="0.4s"
             begin="0.8s;holdOff.end+0.8s" />
    <animate id="holdOnrr"
             attributeName="opacity"
             from="1" to="1" dur="7.2s"
             begin="fadeInrr.end" />
    <animate id="fadeOutrr"
             attributeName="opacity"
             from="1" to="0" dur="0.1s"
             begin="holdOnrr.end" />
    <animate id="holdOff"
             attributeName="opacity"
             from="0" to="0" dur="1.4s"
             begin="fadeOutrr.end" />

    </path>

    <path d="M110.553,40.68C108.333,40.68 106.293,40.2 104.433,39.18C102.633,38.22 101.133,36.84 100.053,35.04C98.973,33.3 98.433,31.26 98.433,29.04C98.433,27.12 98.853,25.26 99.693,23.46C100.473,21.72 101.613,20.1 103.053,18.78C104.433,17.4 106.053,16.32 107.913,15.54C109.773,14.7 111.693,14.34 113.733,14.34C115.473,14.34 117.033,14.64 118.473,15.18C119.913,15.72 121.173,16.56 122.193,17.52L118.953,24.18C118.533,22.98 117.813,22.08 116.793,21.3C115.713,20.58 114.453,20.22 112.953,20.22C111.453,20.22 110.073,20.64 108.813,21.42C107.613,22.14 106.593,23.16 105.873,24.42C105.093,25.68 104.733,27 104.733,28.44C104.733,30.24 105.333,31.74 106.533,32.94C107.733,34.14 109.293,34.8 111.213,34.8C113.073,34.8 114.693,34.32 116.013,33.36C117.393,32.4 118.353,31.38 118.953,30.36L118.953,38.04C117.873,38.88 116.613,39.6 115.173,40.02C113.733,40.5 112.173,40.68 110.553,40.68Z" style="fill:#2b2533;fill-rule:nonzero;opacity:0">

    <animate id="fadeInc"
             attributeName="opacity"
             from="0" to="1" dur="0.4s"
             begin="1.2s;holdOffc.end+1.2s" />
    <animate id="holdOnc"
             attributeName="opacity"
             from="1" to="1" dur="6.8s"
             begin="fadeInc.end" />
    <animate id="fadeOutc"
             attributeName="opacity"
             from="1" to="0" dur="0.1s"
             begin="holdOnc.end" />
    <animate id="holdOffc"
             attributeName="opacity"
             from="0" to="0" dur="1.4s"
             begin="fadeOutc.end" />
    </path>

    <path class="path" d="M135.626,40.8C133.466,40.8 131.486,40.26 129.686,39.24C127.886,38.22 126.446,36.84 125.366,35.1C124.286,33.3 123.746,31.26 123.746,29.04C123.746,27.12 124.166,25.26 124.946,23.46C125.786,21.72 126.866,20.1 128.246,18.72C129.686,17.34 131.306,16.26 133.046,15.48C134.846,14.7 136.766,14.28 138.746,14.28C140.966,14.28 143.006,14.76 144.806,15.84C146.546,16.86 147.986,18.24 149.006,19.98C150.086,21.78 150.566,23.76 150.566,25.92C150.566,27.9 150.206,29.76 149.366,31.5C148.526,33.3 147.446,34.92 146.066,36.3C144.686,37.68 143.066,38.76 141.266,39.54C139.466,40.38 137.606,40.8 135.626,40.8ZM136.286,34.86C137.726,34.86 139.046,34.44 140.246,33.66C141.446,32.88 142.406,31.86 143.186,30.6C143.906,29.34 144.266,28.02 144.266,26.64C144.266,24.84 143.726,23.34 142.526,22.08C141.386,20.82 139.886,20.22 138.026,20.22C136.646,20.22 135.326,20.58 134.066,21.36C132.866,22.14 131.906,23.16 131.186,24.42C130.406,25.62 130.046,27 130.046,28.44C130.046,30.24 130.646,31.74 131.786,33C132.986,34.2 134.486,34.86 136.286,34.86Z" style="fill:#2b2533;fill-rule:nonzero;opacity:0;">
    <animate id="fadeIno"
             attributeName="opacity"
             from="0" to="1" dur="0.4s"
             begin="1.6s;holdOffo.end+1.6s" />
    <animate id="holdOno"
             attributeName="opacity"
             from="1" to="1" dur="6.4s"
             begin="fadeIno.end" />
    <animate id="fadeOuto"
             attributeName="opacity"
             from="1" to="0" dur="0.1s"
             begin="holdOno.end" />
    <animate id="holdOffo"
             attributeName="opacity"
             from="0" to="0" dur="1.4s"
             begin="fadeOuto.end" />
    </path>
    <path class="path" d="M152.216,40.02L158.456,15L164.396,15L163.736,17.7C164.816,16.56 166.016,15.66 167.336,15.12C168.656,14.58 170.036,14.28 171.416,14.28C173.216,14.28 174.776,14.64 175.976,15.42C177.176,16.2 178.016,17.22 178.556,18.48C179.756,17.1 181.196,16.02 182.756,15.3C184.316,14.64 185.936,14.28 187.556,14.28C189.896,14.28 191.756,14.82 193.136,15.9C194.456,16.98 195.356,18.42 195.776,20.1C196.196,21.84 196.136,23.7 195.656,25.62L191.996,40.02L185.456,40.02L189.056,25.74C189.476,24.12 189.416,22.68 188.756,21.48C188.156,20.28 186.956,19.68 185.276,19.68C183.956,19.68 182.756,20.16 181.556,21.06C180.416,21.96 179.576,23.34 179.096,25.2L175.376,40.02L168.836,40.02L172.436,25.74C172.856,24.12 172.796,22.68 172.136,21.48C171.536,20.28 170.336,19.68 168.656,19.68C167.336,19.68 166.136,20.16 164.936,21.06C163.736,21.96 162.896,23.34 162.476,25.2L158.756,40.02L152.216,40.02Z" style="fill:#2b2533;fill-rule:nonzero;opacity:0;">
    <animate id="fadeInm"
             attributeName="opacity"
             from="0" to="1" dur="0.4s"
             begin="2.0s;holdOffm.end+2.0s" />
    <animate id="holdOnm"
             attributeName="opacity"
             from="1" to="1" dur="6.0s"
             begin="fadeInm.end" />
    <animate id="fadeOutm"
             attributeName="opacity"
             from="1" to="0" dur="0.1s"
             begin="holdOnm.end" />
    <animate id="holdOffm"
             attributeName="opacity"
             from="0" to="0" dur="1.4s"
             begin="fadeOutm.end" />

      </path>
    <path class="path" d="M194.506,52.5L203.866,15L209.626,15L208.966,17.46C209.986,16.56 211.126,15.84 212.446,15.3C213.706,14.76 215.026,14.52 216.466,14.52C218.446,14.52 220.246,15 221.866,15.96C223.426,16.98 224.686,18.3 225.646,19.98C226.546,21.72 227.026,23.64 227.026,25.74C227.026,27.72 226.666,29.58 225.826,31.38C225.046,33.18 223.966,34.74 222.586,36.12C221.266,37.5 219.706,38.58 217.966,39.36C216.226,40.14 214.426,40.56 212.506,40.56C211.006,40.56 209.626,40.26 208.306,39.78C206.986,39.24 205.846,38.52 204.826,37.62L201.046,52.5L194.506,52.5ZM212.926,34.68C214.366,34.68 215.626,34.32 216.826,33.54C218.026,32.82 218.986,31.8 219.766,30.6C220.486,29.34 220.846,28.02 220.846,26.64C220.846,25.44 220.546,24.36 220.066,23.46C219.526,22.5 218.806,21.72 217.906,21.18C216.946,20.58 215.926,20.28 214.666,20.28C213.286,20.28 211.966,20.7 210.766,21.42C209.566,22.2 208.606,23.22 207.886,24.42C207.106,25.68 206.746,27 206.746,28.44C206.746,29.58 207.046,30.66 207.526,31.62C208.066,32.52 208.786,33.3 209.746,33.84C210.646,34.44 211.726,34.68 212.926,34.68Z" style="fill:#2b2533;fill-rule:nonzero;opacity:0;">

    <animate id="fadeInp"
             attributeName="opacity"
             from="0" to="1" dur="0.4s"
             begin="2.4s;holdOffp.end+2.4s" />
    <animate id="holdOnp"
             attributeName="opacity"
             from="1" to="1" dur="5.6s"
             begin="fadeInp.end" />
    <animate id="fadeOutp"
             attributeName="opacity"
             from="1" to="0" dur="0.1s"
             begin="holdOnp.end" />
    <animate id="holdOffp"
             attributeName="opacity"
             from="0" to="0" dur="1.4s"
             begin="fadeOutp.end" />

    </path>

  <!-- Right Bracket -->
    <path id="right-bracket" d="M243.756,47.52L243.756,42.48L251.436,42.48L251.436,5.1L243.756,5.1L243.756,0L257.196,0L257.196,47.52L243.756,47.52Z" style="fill:#2b2533;fill-rule:nonzero;opacity:1;">

    <animateTransform id="m1" attributeName="transform" type="translate" from="-180,0" to="-160,0" dur="0.32s" begin="0s; m16.end" />
    <animateTransform id="m2" attributeName="transform" type="translate" from="-160,0" to="-160,0" dur="0.08s" begin="m1.end" />

    <animateTransform id="m3" attributeName="transform" type="translate" from="-160,0" to="-140,0" dur="0.32s" begin="m2.end" />
    <animateTransform id="m4" attributeName="transform" type="translate" from="-140,0" to="-140,0" dur="0.08s" begin="m3.end" />

    <animateTransform id="m5" attributeName="transform" type="translate" from="-140,0" to="-120,0" dur="0.32s" begin="m4.end" />
    <animateTransform id="m6" attributeName="transform" type="translate" from="-120,0" to="-120,0" dur="0.08s" begin="m5.end" />

    <animateTransform id="m7" attributeName="transform" type="translate" from="-120,0" to="-100,0" dur="0.32s" begin="m6.end" />
    <animateTransform id="m8" attributeName="transform" type="translate" from="-100,0" to="-100,0" dur="0.08s" begin="m7.end" />

    <animateTransform id="m9" attributeName="transform" type="translate" from="-100,0" to="-78,0" dur="0.32s" begin="m8.end" />
    <animateTransform id="m10" attributeName="transform" type="translate" from="-78,0" to="-78,0" dur="0.08s" begin="m9.end" />

    <animateTransform id="m11" attributeName="transform" type="translate" from="-78,0" to="-40,0" dur="0.32s" begin="m10.end" />
    <animateTransform id="m12" attributeName="transform" type="translate" from="-40,0" to="-40,0" dur="0.08s" begin="m11.end" />

    <animateTransform id="m13" attributeName="transform" type="translate" from="-40,0" to="-2,0" dur="0.5s" begin="m12.end" />

    <animateTransform id="m14" attributeName="transform" type="translate" from="-2,0" to="-2,0" dur="5.7s" begin="m13.end" />
    <animateTransform id="m15" attributeName="transform" type="translate" from="-2,0" to="-180,0" dur="0.3s" begin="m14.end" />
    <animateTransform id="m16" attributeName="transform" type="translate" from="-180,0" to="-180,0" dur="0.9s" begin="m15.end" />

    </path>
</svg>