SVG mobile tab bar

index.html

<svg viewBox="0 0 100 100" class="group1">
  <defs>
    <filter
            style="color-interpolation-filters:sRGB"
            id="filter1846"
            x="-0.021012745"
            width="1.0420255"
            y="-0.12623684"
            height="1.2524737">
      <feGaussianBlur
                      stdDeviation="0.85085682"
                      id="feGaussianBlur1848" />
    </filter>
  </defs>
  <rect
        class="bgGrey"
        width="100"
        height="21.2938"
        x="0"
        y="78.7062"
        ry="0.223214" />
  <rect
        ry="1.6590897"
        y="81.8"
        x="1.6357809"
        height="16.17639"
        width="97.181801"
        id="shadow"
        style="display:inline;opacity:0.1;fill:#0e232e;fill-opacity:1;stroke:none;stroke-width:0.53255808;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter:url(#filter1846)" />
  <rect
        class="bgWhite"
        width="94.442955"
        height="14.672462"
        x="3.0052037"
        y="81.792"
        ry="1.5048432" />
  <g class="option1">
    <g
       class="icon icon1">
      <rect
            class="icon1__document"
            ry="0.22321428"
            y="85.432495"
            x="12.166473"
            height="4.1477313"
            width="4.1107459"
            id="rect1577" />
      <rect
            class="icon1__document-image"
            ry="0"
            y="86.890625"
            x="12.745703"
            height="1.211792"
            width="1.0777903"
            id="rect1579" />
      <path
            d="m 12.714286,86.330357 h 3.037946" />
      <path
            d="m 12.714286,88.741072 h 3.037946" />
      <path
            d="m 14.1875,87.904019 h 1.564732" />
      <path
            d="m 14.1875,87.089286 h 1.564732" />
    </g>
    <g
       aria-label="Read"
       class="text text1">
      <path
            d="m 12.46396,95.131546 -0.339015,-0.712121 h -0.263257 v 0.712121 h -0.439394 v -1.939394 h 0.73106 q 0.338069,0 0.524622,0.166667 0.1875,0.166666 0.1875,0.439394 0,0.1875 -0.08617,0.325757 -0.08523,0.138258 -0.228219,0.215909 l 0.382575,0.772728 v 0.01894 z m -0.602272,-1.575758 v 0.503788 h 0.291666 q 0.139205,0 0.207387,-0.06534 0.06913,-0.06534 0.06913,-0.184659 0,-0.122159 -0.07008,-0.1875 -0.07008,-0.06629 -0.20644,-0.06629 z" />
      <path
            d="m 13.696915,95.158061 q -0.225379,0 -0.385417,-0.09754 -0.160037,-0.09754 -0.245265,-0.263257 -0.08523,-0.16572 -0.08523,-0.370265 0,-0.221591 0.0767,-0.394887 0.0767,-0.174242 0.226325,-0.273674 0.149622,-0.100379 0.367425,-0.100379 0.301136,0 0.46875,0.192235 0.167613,0.192235 0.167613,0.516098 v 0.181819 h -0.886363 q 0.02746,0.129735 0.112689,0.196022 0.08523,0.06534 0.20928,0.06534 0.09375,0 0.155303,-0.03504 0.0625,-0.03598 0.125,-0.112689 l 0.246212,0.238636 q -0.06534,0.09659 -0.207386,0.177084 -0.141098,0.08049 -0.345644,0.08049 z m -0.04924,-1.155303 q -0.107008,0 -0.16572,0.07292 -0.05871,0.07197 -0.07955,0.192235 h 0.480113 q 0,-0.0625 -0.02462,-0.123106 -0.02462,-0.06155 -0.07671,-0.101326 -0.05208,-0.04072 -0.133522,-0.04072 z" />
      <path
            d="m 15.267464,95.131546 v -0.125 h -0.01136 q -0.03409,0.05682 -0.116478,0.104167 -0.08144,0.04735 -0.220644,0.04735 -0.130681,0 -0.239583,-0.0483 -0.107954,-0.04924 -0.173295,-0.145834 -0.06439,-0.09754 -0.06439,-0.241477 0,-0.128788 0.06345,-0.231061 0.06345,-0.103219 0.207386,-0.16856 0.143939,-0.06629 0.38447,-0.08523 l 0.147727,-0.01136 v -0.06818 q 0,-0.08807 -0.04261,-0.132576 -0.04261,-0.04545 -0.139204,-0.04545 -0.08523,0 -0.132576,0.03788 -0.0464,0.03693 -0.07197,0.113636 l -0.409091,-0.05682 q 0.05682,-0.207387 0.232955,-0.311553 0.176136,-0.105114 0.403409,-0.105114 0.166667,0 0.302083,0.05587 0.136364,0.05587 0.21591,0.167614 0.08049,0.111742 0.08049,0.280303 v 0.969697 z m -0.02273,-0.632576 -0.06439,0.0038 q -0.127841,0.0085 -0.223485,0.06913 -0.0947,0.05966 -0.0947,0.139204 0,0.05966 0.04167,0.09659 0.04261,0.03598 0.113636,0.03598 0.08523,0 0.15625,-0.05019 0.07102,-0.05114 0.07102,-0.127841 z" />
      <path
            d="m 17.203544,95.131546 h -0.42803 v -0.05682 h -0.01042 q -0.05208,0.03977 -0.120265,0.06155 -0.06724,0.02178 -0.153409,0.02178 -0.181818,0 -0.322917,-0.09659 -0.141098,-0.09659 -0.221591,-0.266098 -0.08049,-0.169508 -0.08049,-0.387311 0,-0.215909 0.08049,-0.385417 0.08049,-0.169507 0.220644,-0.267045 0.140152,-0.09754 0.320076,-0.09754 0.08428,0 0.150568,0.02178 0.06724,0.02178 0.118371,0.06155 h 0.01136 v -0.549242 h 0.435606 z m -0.924242,-0.723485 q 0,0.173296 0.05871,0.287879 0.05871,0.113636 0.206439,0.113636 0.08144,0 0.128788,-0.0322 0.04829,-0.03314 0.07197,-0.0786 0.02462,-0.0464 0.03409,-0.08617 0.0076,-0.04167 0.0142,-0.102273 0.0076,-0.06155 0.0085,-0.107008 -0.0019,-0.08523 -0.01894,-0.169507 -0.0057,-0.02652 -0.02651,-0.08144 -0.02083,-0.05587 -0.07102,-0.102272 -0.05019,-0.04735 -0.144887,-0.04735 -0.09659,0 -0.154356,0.05492 -0.05682,0.05492 -0.08239,0.146781 -0.02462,0.09186 -0.02462,0.203598 z" />
    </g>
    <rect class="option__padding" width="12" height="12" y="83.5" x="8.5"/>
  </g>
  <g class="option2">
    <g class="icon icon2">
      <path
            class="icon2__pen"
            id="path1614"
            d="m 51.344293,84.775651 -1.970663,3.00916 -0.112356,1.481354 1.305559,-0.681514 1.903589,-3.028751 z" />
      <path
            id="path1616"
            d="m 50.972332,85.3513 1.028306,0.766237" />
      <path
            class="icon2__pen-edge-sharpened"
            id="path1618"
            d="m 49.37363,87.784811 c 0,0 0.413698,-0.14052 0.779529,0.108467 0.365832,0.248988 0.413674,0.691373 0.413674,0.691373" />
      <path
            d="m 49.360531,88.726972 0.340712,0.202462" />
      <path
            d="m 48.870767,89.393839 h -1.230635" />
    </g>
    <g
       aria-label="Respond"
       class="text text2">
      <path
            d="m 45.900521,95.131607 -0.339015,-0.712121 h -0.263258 v 0.712121 h -0.439394 v -1.939394 h 0.731061 c 0.225379,0 0.400252,0.05556 0.524621,0.166667 0.125,0.111111 0.1875,0.257575 0.1875,0.439394 0,0.125 -0.02872,0.233586 -0.08617,0.325757 -0.05682,0.09217 -0.132893,0.164142 -0.22822,0.215909 l 0.382576,0.772728 v 0.01894 z m -0.602273,-1.575758 v 0.503788 h 0.291667 c 0.0928,0 0.161931,-0.02178 0.207386,-0.06534 0.04609,-0.04356 0.06913,-0.105113 0.06913,-0.184659 0,-0.08144 -0.02336,-0.143939 -0.07008,-0.1875 -0.04672,-0.04419 -0.115533,-0.06629 -0.206439,-0.06629 z" />
      <path
            d="m 47.133475,95.158122 c -0.150252,0 -0.278724,-0.03251 -0.385416,-0.09754 -0.106692,-0.06503 -0.188447,-0.152779 -0.245265,-0.263257 -0.05682,-0.11048 -0.08523,-0.233902 -0.08523,-0.370265 0,-0.147727 0.02557,-0.279356 0.0767,-0.394887 0.05113,-0.116161 0.126575,-0.207386 0.226326,-0.273674 0.09975,-0.06692 0.222222,-0.100379 0.367424,-0.100379 0.200757,0 0.357007,0.06408 0.46875,0.192235 0.111743,0.128157 0.167614,0.30019 0.167614,0.516099 v 0.181818 h -0.886364 c 0.01831,0.08649 0.05587,0.151831 0.112689,0.196022 0.05682,0.04356 0.12658,0.06534 0.209281,0.06534 0.0625,0 0.114268,-0.01168 0.155303,-0.03504 0.04167,-0.02399 0.08333,-0.06155 0.125,-0.112689 l 0.246212,0.238636 c -0.04356,0.06439 -0.112689,0.123421 -0.207387,0.177084 -0.09407,0.05366 -0.20928,0.08049 -0.345644,0.08049 z m -0.04924,-1.155303 c -0.07134,0 -0.126579,0.02431 -0.16572,0.07292 -0.03914,0.04798 -0.06566,0.112058 -0.07955,0.192235 h 0.480114 c 0,-0.04167 -0.0082,-0.0827 -0.02462,-0.123106 -0.01641,-0.04103 -0.04198,-0.07481 -0.0767,-0.101326 -0.03472,-0.02715 -0.07923,-0.04072 -0.133523,-0.04072 z" />
      <path
            d="m 47.912358,94.086152 c 0,-0.07702 0.02083,-0.148043 0.0625,-0.213068 0.0423,-0.06503 0.104169,-0.11711 0.185606,-0.15625 0.08207,-0.03914 0.182449,-0.05871 0.301136,-0.05871 0.115531,0 0.222854,0.02052 0.32197,0.06155 0.09912,0.04041 0.176136,0.103222 0.231061,0.188447 l -0.299243,0.215909 c -0.01137,-0.01515 -0.0363,-0.03788 -0.07481,-0.06818 -0.03788,-0.0303 -0.08996,-0.04545 -0.15625,-0.04545 -0.04735,0 -0.08396,0.0088 -0.109849,0.02652 -0.02525,0.01767 -0.03788,0.03788 -0.03788,0.06061 0,0.03788 0.01736,0.06282 0.05208,0.07481 0.03472,0.01199 0.08049,0.02746 0.13731,0.0464 l 0.07576,0.02652 c 0.13447,0.04735 0.234849,0.113003 0.301136,0.19697 0.06692,0.08397 0.100379,0.172349 0.100379,0.265152 0,0.07955 -0.02304,0.153725 -0.06913,0.222538 -0.04545,0.06818 -0.109532,0.123421 -0.192235,0.165719 -0.08207,0.04167 -0.17803,0.0625 -0.287878,0.0625 -0.06692,0 -0.136995,-0.0088 -0.210228,-0.02652 -0.0726,-0.01768 -0.142361,-0.04704 -0.20928,-0.08807 -0.06629,-0.04103 -0.12342,-0.09627 -0.171401,-0.16572 l 0.314394,-0.23106 c 0.0101,0.01515 0.02525,0.03441 0.04545,0.05777 0.02083,0.02336 0.04798,0.04419 0.08144,0.0625 0.03409,0.01831 0.07639,0.02746 0.126894,0.02746 0.04356,0 0.08018,-0.0085 0.109849,-0.02557 0.0303,-0.01705 0.04545,-0.03883 0.04545,-0.06534 0,-0.03788 -0.02241,-0.06787 -0.06723,-0.08996 -0.04419,-0.02273 -0.105115,-0.04829 -0.182766,-0.0767 l -0.08333,-0.0303 c -0.123106,-0.04545 -0.210858,-0.107006 -0.263257,-0.184659 -0.05177,-0.07765 -0.07765,-0.15625 -0.07765,-0.235796 z" />
      <path
            d="m 49.228646,95.677062 v -2 h 0.42803 v 0.06439 h 0.01894 c 0.03409,-0.02651 0.07324,-0.04703 0.117424,-0.06155 0.04483,-0.01452 0.09533,-0.02178 0.151515,-0.02178 0.119949,0 0.226641,0.03251 0.320076,0.09754 0.09343,0.06503 0.166983,0.154042 0.220644,0.267046 0.05366,0.113005 0.08049,0.241477 0.08049,0.385416 0,0.145202 -0.02683,0.274306 -0.08049,0.387311 -0.05366,0.113005 -0.127524,0.201704 -0.221591,0.266098 -0.09407,0.06439 -0.201704,0.09659 -0.322917,0.09659 -0.05745,0 -0.108899,-0.0073 -0.154356,-0.02178 -0.04482,-0.01452 -0.08459,-0.03504 -0.119318,-0.06155 h -0.0028 v 0.602273 z m 0.424243,-1.064394 c 0.0063,0.02651 0.01738,0.05524 0.03314,0.08617 0.01641,0.0303 0.0404,0.0565 0.07197,0.0786 0.0322,0.02147 0.07545,0.0322 0.129735,0.0322 0.09848,0 0.167298,-0.03788 0.206439,-0.113636 0.03914,-0.07639 0.05871,-0.172348 0.05871,-0.287879 0,-0.07449 -0.0085,-0.142361 -0.02557,-0.203598 -0.01641,-0.06124 -0.04388,-0.110167 -0.08239,-0.146781 -0.03788,-0.03661 -0.08902,-0.05492 -0.153409,-0.05492 -0.06313,0 -0.111429,0.01578 -0.144886,0.04735 -0.03346,0.03093 -0.05713,0.06502 -0.07102,0.102272 -0.01389,0.03661 -0.02272,0.06376 -0.02651,0.08144 -0.01137,0.05619 -0.01768,0.112689 -0.01894,0.169507 6.31e-4,0.03031 0.0032,0.06598 0.0076,0.107008 0.0051,0.04041 0.01012,0.0745 0.01515,0.102273 z" />
      <path
            d="m 51.378741,95.154334 c -0.11995,0 -0.229799,-0.02652 -0.329546,-0.07955 -0.09975,-0.05366 -0.179608,-0.135731 -0.239583,-0.246212 -0.05997,-0.111111 -0.08996,-0.252526 -0.08996,-0.424243 0,-0.164141 0.03093,-0.301452 0.0928,-0.411932 0.06187,-0.111111 0.142675,-0.194444 0.242424,-0.25 0.09975,-0.05619 0.206439,-0.08428 0.320076,-0.08428 0.113636,0 0.220328,0.02809 0.320075,0.08428 0.09975,0.05555 0.180556,0.138887 0.242425,0.25 0.06187,0.11048 0.0928,0.247791 0.0928,0.411932 0,0.171717 -0.02967,0.313132 -0.08902,0.424243 -0.05871,0.110479 -0.137628,0.19255 -0.236743,0.246212 -0.09849,0.05303 -0.20707,0.07955 -0.325757,0.07955 z m -0.0038,-0.344697 c 0.07386,0 0.133207,-0.03157 0.17803,-0.0947 0.04545,-0.06313 0.06818,-0.166669 0.06818,-0.310606 0,-0.143939 -0.02304,-0.246843 -0.06913,-0.308712 -0.04609,-0.06187 -0.105114,-0.0928 -0.177083,-0.0928 -0.07197,0 -0.129735,0.03093 -0.173296,0.0928 -0.04356,0.06187 -0.06534,0.164771 -0.06534,0.308712 0,0.145833 0.02115,0.25 0.06345,0.3125 0.04293,0.06187 0.101323,0.0928 0.17519,0.0928 z" />
      <path
            d="m 52.664252,94.35888 v 0.772727 h -0.435606 v -1.454545 h 0.401515 v 0.155303 h 0.01515 c 0.04167,-0.05303 0.09627,-0.09533 0.163826,-0.126894 0.06755,-0.03157 0.142992,-0.04735 0.226325,-0.04735 0.08207,0 0.160354,0.01799 0.234849,0.05398 0.07449,0.03535 0.135416,0.09438 0.182765,0.177084 0.04735,0.08207 0.210845,0.323776 0.07102,0.333333 v 0.909091 h -0.435606 v -0.893939 c 0,-0.07765 -0.0202,-0.136049 -0.06061,-0.17519 -0.03977,-0.03977 -0.08902,-0.05966 -0.147728,-0.05966 -0.08144,0 -0.137942,0.03378 -0.169507,0.101326 -0.03093,0.06755 -0.0464,0.152462 -0.0464,0.254735 z" />
      <path
            d="m 55.041146,95.131607 h -0.42803 v -0.05682 h -0.01042 c -0.03472,0.02651 -0.07481,0.04703 -0.120265,0.06155 -0.04482,0.01452 -0.09596,0.02178 -0.153409,0.02178 -0.121213,0 -0.228852,-0.0322 -0.322917,-0.09659 -0.09407,-0.06439 -0.16793,-0.153093 -0.221591,-0.266098 -0.05366,-0.113005 -0.08049,-0.242109 -0.08049,-0.387311 0,-0.143939 0.02683,-0.272411 0.08049,-0.385416 0.05366,-0.113005 0.127208,-0.202021 0.220644,-0.267046 0.09343,-0.06503 0.200126,-0.09754 0.320076,-0.09754 0.05619,0 0.106376,0.0073 0.150568,0.02178 0.04482,0.01452 0.08428,0.03504 0.118371,0.06155 h 0.01136 v -0.549242 h 0.435606 z m -0.924243,-0.723485 c 0,0.115531 0.01957,0.21149 0.05871,0.287879 0.03914,0.07576 0.107953,0.113636 0.206439,0.113636 0.05429,0 0.09722,-0.01073 0.128788,-0.0322 0.0322,-0.02209 0.05619,-0.04829 0.07197,-0.0786 0.01641,-0.03093 0.02778,-0.05966 0.03409,-0.08617 0.0051,-0.02778 0.0098,-0.06187 0.0142,-0.102273 0.0051,-0.04103 0.0079,-0.0767 0.0085,-0.107008 -0.0013,-0.05682 -0.0076,-0.113322 -0.01894,-0.169507 -0.0038,-0.01768 -0.01264,-0.04483 -0.02651,-0.08144 -0.01389,-0.03725 -0.03756,-0.07134 -0.07102,-0.102272 -0.03346,-0.03157 -0.08176,-0.04735 -0.144886,-0.04735 -0.06439,0 -0.115845,0.01831 -0.154356,0.05492 -0.03788,0.03661 -0.06534,0.08554 -0.08239,0.146781 -0.01641,0.06124 -0.02462,0.129106 -0.02462,0.203598 z" />
    </g>
    <rect class="option__padding" width="12" height="12" y="83.5" x="44"/>
  </g>
  <g class="option2">
    <g
       class="icon icon3">
      <path
            class="icon3__bell-inner"
            id="path1747"
            d="m 87.053039,89.221875 c 0.261935,-0.434098 -0.701572,-1.18993 -1.140625,-1.46875 -0.439052,-0.27882 -1.515824,-0.785258 -1.8125,-0.421875 -0.296676,0.363383 0.405847,1.248609 0.945313,1.609375 0.539466,0.360766 1.745877,0.715348 2.007812,0.28125 z" />
      <path
            class="icon3__bell-pendulum"
            id="path1749"
            d="m 86.342102,88.89375 c 0.098,-0.147598 -0.07447,-0.349489 -0.203125,-0.460937 -0.128648,-0.111448 -0.394445,-0.267683 -0.53125,-0.140625 -0.136806,0.127058 -3.64e-4,0.430728 0.148437,0.554687 0.148801,0.123959 0.487936,0.194473 0.585938,0.04687 z" />
      <circle
              class="icon3__bell-top"
              transform="scale(-1,1)"
              r="0.47192642"
              cy="85.261365"
              cx="-87.45909"
              id="path1741" />
      <path
            class="icon3__bell-outer"
            d="m 85.88994,85.68149 c -0.394882,0.189082 -0.631815,0.726319 -0.959662,1.031046 -0.327847,0.304728 -0.891907,0.268875 -0.97301,0.898217 -0.0811,0.629342 0.673438,1.145698 1.233027,1.448558 0.559589,0.30286 1.396886,0.628268 1.900133,0.241757 0.503247,-0.386511 0.188673,-0.856077 0.287263,-1.29268 0.09859,-0.436603 0.443876,-0.911513 0.408796,-1.347922 -0.03508,-0.436409 -0.18198,-0.79548 -0.541379,-1.005417 -0.359399,-0.209937 -0.960285,-0.162641 -1.355168,0.02644 z"
            id="path1745" />
    </g>
    <rect class="option__padding" width="12" height="12" y="83.5" x="81.5"/>
  </g>
  <g
     aria-label="Notifications"
     class="text text3">
    <path
          d="m 80.024973,93.192091 v 1.939394 h -0.431819 l -0.689393,-1.193182 h -0.01515 v 1.193182 h -0.439394 v -1.939394 h 0.435606 l 0.685606,1.193182 h 0.01515 v -1.193182 z"
          id="path1767" />
    <path
          d="m 80.88056,95.154212 q -0.179924,0 -0.329546,-0.07954 -0.149621,-0.08049 -0.239583,-0.246212 -0.08996,-0.166667 -0.08996,-0.424243 0,-0.246212 0.0928,-0.411932 0.0928,-0.166666 0.242424,-0.25 0.149621,-0.08428 0.320076,-0.08428 0.170454,0 0.320076,0.08428 0.149621,0.08333 0.242424,0.25 0.0928,0.16572 0.0928,0.411932 0,0.257576 -0.08902,0.424243 -0.08807,0.165719 -0.236743,0.246212 -0.147727,0.07954 -0.325757,0.07954 z m -0.0038,-0.344697 q 0.110795,0 0.17803,-0.0947 0.06818,-0.0947 0.06818,-0.310606 0,-0.215909 -0.06913,-0.308712 -0.06913,-0.0928 -0.177083,-0.0928 -0.107955,0 -0.173296,0.0928 -0.06534,0.0928 -0.06534,0.308712 0,0.21875 0.06345,0.3125 0.06439,0.0928 0.175189,0.0928 z"
          id="path1769" />
    <path
          d="m 82.50698,93.676939 v 0.303031 h -0.227273 v 0.693182 q 0,0.08239 0.0483,0.107954 0.0483,0.02462 0.08807,0.02462 h 0.109849 v 0.333334 q -0.08807,0.0142 -0.140152,0.0161 -0.05114,0.0028 -0.102273,0.0028 -0.111742,0 -0.212121,-0.05398 -0.100379,-0.05492 -0.163826,-0.151515 -0.06345,-0.09754 -0.06345,-0.226326 v -0.746212 h -0.17803 v -0.303031 h 0.17803 v -0.310606 h 0.435606 v 0.310606 z"
          id="path1771" />
    <path
          d="m 82.934064,93.597394 q -0.09659,0 -0.16572,-0.06345 -0.06913,-0.06439 -0.06913,-0.152462 0,-0.08807 0.06913,-0.151515 0.06913,-0.06439 0.16572,-0.06439 0.09659,0 0.163825,0.06439 0.06724,0.06345 0.06724,0.151515 0,0.08807 -0.06724,0.152462 -0.06723,0.06345 -0.163825,0.06345 z m 0.215909,0.07955 v 1.454546 h -0.435606 v -1.454546 z"
          id="path1773" />
    <path
          d="m 83.956791,95.131485 h -0.435606 v -1.151515 h -0.17803 v -0.303031 h 0.17803 v -0.02273 q 0,-0.164773 0.0767,-0.272727 0.07765,-0.108902 0.200758,-0.161932 0.124053,-0.05398 0.264205,-0.05398 0.04545,0 0.108901,0.0047 0.06345,0.0047 0.09186,0.01042 v 0.333334 q -0.02273,-0.0028 -0.05208,-0.0047 -0.02936,-0.0028 -0.05777,-0.0028 -0.07955,0 -0.138258,0.0303 -0.05871,0.02936 -0.05871,0.117424 v 0.02273 h 0.268939 v 0.303031 h -0.268939 z"
          id="path1775" />
    <path
          d="m 84.652814,93.597394 q -0.09659,0 -0.16572,-0.06345 -0.06913,-0.06439 -0.06913,-0.152462 0,-0.08807 0.06913,-0.151515 0.06913,-0.06439 0.16572,-0.06439 0.09659,0 0.163825,0.06439 0.06724,0.06345 0.06724,0.151515 0,0.08807 -0.06724,0.152462 -0.06723,0.06345 -0.163825,0.06345 z m 0.215909,0.07955 v 1.454546 h -0.435606 v -1.454546 z"
          id="path1777" />
    <path
          d="m 86.368249,94.161788 -0.386363,0.07197 q -0.0057,-0.02651 -0.02652,-0.08144 -0.02083,-0.05587 -0.07102,-0.102272 -0.05019,-0.04735 -0.144887,-0.04735 -0.09659,0 -0.154356,0.05492 -0.05682,0.05492 -0.08239,0.146781 -0.02462,0.09186 -0.02462,0.203598 0,0.173296 0.05871,0.287879 0.05871,0.113636 0.206439,0.113636 0.08144,0 0.128788,-0.0322 0.0483,-0.03314 0.07197,-0.0786 0.02462,-0.0464 0.03409,-0.08617 l 0.390151,0.06818 q -0.03125,0.224432 -0.200757,0.351326 -0.169508,0.125947 -0.416667,0.125947 -0.219697,0 -0.373106,-0.09659 -0.152462,-0.09659 -0.232955,-0.266098 -0.07954,-0.169508 -0.07954,-0.387311 0,-0.215909 0.07954,-0.385417 0.07955,-0.169507 0.232008,-0.267045 0.152462,-0.09754 0.370265,-0.09754 0.183712,0 0.314394,0.06723 0.131629,0.06629 0.208333,0.180871 0.07765,0.113637 0.09849,0.255682 z"
          id="path1779" />
    <path
          d="m 87.341261,95.131485 v -0.125 h -0.01136 q -0.03409,0.05682 -0.116477,0.104167 -0.08144,0.04735 -0.220644,0.04735 -0.130682,0 -0.239583,-0.04829 -0.107955,-0.04924 -0.173296,-0.145834 -0.06439,-0.09754 -0.06439,-0.241477 0,-0.128788 0.06345,-0.231061 0.06345,-0.103219 0.207387,-0.16856 0.143939,-0.06629 0.384469,-0.08523 l 0.147728,-0.01136 v -0.06818 q 0,-0.08807 -0.04261,-0.132576 -0.04261,-0.04545 -0.139205,-0.04545 -0.08523,0 -0.132575,0.03788 -0.0464,0.03693 -0.07197,0.113636 l -0.409091,-0.05682 q 0.05682,-0.207387 0.232955,-0.311553 0.176136,-0.105114 0.403409,-0.105114 0.166666,0 0.302083,0.05587 0.136364,0.05587 0.215909,0.167614 0.08049,0.111742 0.08049,0.280303 v 0.969697 z m -0.02273,-0.632576 -0.06439,0.0038 q -0.127841,0.0085 -0.223485,0.06913 -0.0947,0.05966 -0.0947,0.139204 0,0.05966 0.04167,0.09659 0.04261,0.03598 0.113637,0.03598 0.08523,0 0.15625,-0.05019 0.07102,-0.05114 0.07102,-0.127841 z"
          id="path1781" />
    <path
          d="m 88.730939,93.676939 v 0.303031 h -0.227273 v 0.693182 q 0,0.08239 0.0483,0.107954 0.04829,0.02462 0.08807,0.02462 h 0.109849 v 0.333334 q -0.08807,0.0142 -0.140152,0.0161 -0.05114,0.0028 -0.102273,0.0028 -0.111742,0 -0.212121,-0.05398 -0.100379,-0.05492 -0.163826,-0.151515 -0.06345,-0.09754 -0.06345,-0.226326 v -0.746212 h -0.17803 v -0.303031 h 0.17803 v -0.310606 h 0.435606 v 0.310606 z"
          id="path1783" />
    <path
          d="m 89.158023,93.597394 q -0.09659,0 -0.16572,-0.06345 -0.06913,-0.06439 -0.06913,-0.152462 0,-0.08807 0.06913,-0.151515 0.06913,-0.06439 0.16572,-0.06439 0.09659,0 0.163825,0.06439 0.06723,0.06345 0.06723,0.151515 0,0.08807 -0.06723,0.152462 -0.06723,0.06345 -0.163825,0.06345 z m 0.215909,0.07955 v 1.454546 h -0.435606 v -1.454546 z"
          id="path1785" />
    <path
          d="m 90.229518,95.154212 q -0.179924,0 -0.329545,-0.07954 -0.149621,-0.08049 -0.239583,-0.246212 -0.08996,-0.166667 -0.08996,-0.424243 0,-0.246212 0.0928,-0.411932 0.0928,-0.166666 0.242424,-0.25 0.149621,-0.08428 0.320076,-0.08428 0.170454,0 0.320075,0.08428 0.149622,0.08333 0.242425,0.25 0.0928,0.16572 0.0928,0.411932 0,0.257576 -0.08902,0.424243 -0.08807,0.165719 -0.236742,0.246212 -0.147727,0.07954 -0.325758,0.07954 z m -0.0038,-0.344697 q 0.110795,0 0.17803,-0.0947 0.06818,-0.0947 0.06818,-0.310606 0,-0.215909 -0.06913,-0.308712 -0.06913,-0.0928 -0.177083,-0.0928 -0.107955,0 -0.173296,0.0928 -0.06534,0.0928 -0.06534,0.308712 0,0.21875 0.06345,0.3125 0.06439,0.0928 0.17519,0.0928 z"
          id="path1787" />
    <path
          d="m 91.51503,94.358758 v 0.772727 h -0.435606 v -1.454546 h 0.401515 v 0.155304 h 0.01515 q 0.0625,-0.07955 0.163825,-0.126894 0.101326,-0.04735 0.226326,-0.04735 0.123106,0 0.234849,0.05398 0.111742,0.05303 0.182765,0.177084 0.07102,0.123106 0.07102,0.333333 v 0.909091 h -0.435606 v -0.893939 q 0,-0.116478 -0.06061,-0.17519 -0.05966,-0.05966 -0.147727,-0.05966 -0.122159,0 -0.169507,0.101326 -0.0464,0.101326 -0.0464,0.254735 z"
          id="path1789" />
    <path
          d="m 92.580844,94.08603 q 0,-0.11553 0.0625,-0.213068 0.06345,-0.09754 0.185606,-0.15625 0.123106,-0.05871 0.301137,-0.05871 0.173295,0 0.321969,0.06155 0.148675,0.06061 0.231061,0.188447 l -0.299243,0.215909 q -0.01705,-0.02273 -0.07481,-0.06818 -0.05682,-0.04545 -0.15625,-0.04545 -0.07102,0 -0.109849,0.02652 -0.03788,0.02652 -0.03788,0.06061 0,0.05682 0.05208,0.07481 0.05208,0.01799 0.137311,0.0464 l 0.07576,0.02652 q 0.201705,0.07102 0.301136,0.19697 0.100379,0.125947 0.100379,0.265152 0,0.119318 -0.06913,0.222537 -0.06818,0.102273 -0.192234,0.16572 -0.123106,0.0625 -0.287879,0.0625 -0.100379,0 -0.210227,-0.02652 -0.108902,-0.02652 -0.209281,-0.08807 -0.09943,-0.06155 -0.171401,-0.16572 l 0.314394,-0.231061 q 0.01515,0.02273 0.04545,0.05777 0.03125,0.03504 0.08144,0.0625 0.05114,0.02746 0.126894,0.02746 0.06534,0 0.109848,-0.02557 0.04546,-0.02557 0.04546,-0.06534 0,-0.05682 -0.06723,-0.08996 -0.06629,-0.03409 -0.182765,-0.07671 l -0.08333,-0.0303 q -0.184659,-0.06818 -0.263257,-0.184659 -0.07765,-0.116477 -0.07765,-0.235796 z"
          id="path1791" />
  </g>
  <path
        d="m 50.129808,91.655244 c -2.349798,0 -4.254686,-1.904888 -4.254686,-4.254686 0,-2.349798 1.904888,-4.254686 4.254686,-4.254686 2.349798,0 4.254686,1.904888 4.254686,4.254686 0,2.349798 -1.905035,4.254686 -4.254833,4.250743 l -35.942853,0.0038 c -2.351552,0.0073 -4.2579934,-1.899386 -4.2579944,-4.250938 0,-2.351552 1.9063104,-4.257862 4.2578624,-4.257862 2.351552,0 4.257861,1.90631 4.257861,4.257862 0,2.351552 -1.906309,4.257861 -4.257861,4.257861"
        class="connector connector12" />
  <path
        class="connector connector23"
        d="m 86.075808,91.655244 c -2.349798,0 -4.254686,-1.904888 -4.254686,-4.254686 0,-2.349798 1.904888,-4.254686 4.254686,-4.254686 2.349798,0 4.254686,1.904888 4.254686,4.254686 0,2.349798 -1.905035,4.254686 -4.254833,4.250743 l -35.942853,0.0038 c -2.351552,0.0073 -4.257993,-1.899386 -4.257994,-4.250938 0,-2.351552 1.90631,-4.257862 4.257862,-4.257862 2.351552,0 4.257861,1.90631 4.257861,4.257862 0,2.351552 -1.906309,4.257861 -4.257861,4.257861" />
  <path
        d="m 86.072615,91.655244 c -2.349798,0 -4.254686,-1.904888 -4.254686,-4.254686 0,-2.349798 1.904888,-4.254686 4.254686,-4.254686 2.349798,0 4.254686,1.904888 4.254686,4.254686 0,2.349798 -1.905035,4.254686 -4.254833,4.250743 l -71.88566,0.0038 c -2.351552,0.0073 -4.2579934,-1.899386 -4.2579944,-4.250938 0,-2.351552 1.9063104,-4.257862 4.2578624,-4.257862 2.351552,0 4.257861,1.90631 4.257861,4.257862 0,2.351552 -1.906309,4.257861 -4.257861,4.257861"
        class="connector connector13" />

</svg>

script.js

const svg = document.querySelector('svg'),
      ops = document.querySelectorAll('.option__padding'),
      connectors = document.querySelectorAll('.connector'),
      findOldIndex = () => parseInt(svg.classList[0].slice(-1)),
      findNextConnector = (oldIx, newIx) => {
        let ret ='connector';
        ret += oldIx > newIx ?
          `${newIx}${oldIx}` : `${oldIx}${newIx}`
        return ret;
      };
ops.forEach((op, i) => {
  op.addEventListener('click', function(e) {
    const newIndex = i + 1, oldIndex = findOldIndex();
    newKlass = `group${newIndex}`,
      nextConnector = findNextConnector(oldIndex, newIndex);
    // change?
    if (!svg.classList.contains(newKlass)) {
      // clear all selected groups
      ops.forEach((_, j) => {
        svg.classList.remove(`group${j + 1}`)
      });
      // clear all displayed connector
      connectors.forEach((connector) => {
        connector.style.visibility = 'hidden';

        if (connector.classList.contains(nextConnector)) {
          connector.style.visibility = 'visible';
        }
      });

      // Which connector to show?
      svg.classList.toggle(newKlass);
    }
  });
});

style.css

body {
  margin: 0;
}
svg {
  bottom: 0;
  height: 100vmin;
  left: calc(50% - 50vmin);
  position: absolute;
  width: 100vmin;
  -moz-user-select: none;
  user-select: none;
}
path {
  -moz-user-select: none;
  user-select: none;
}
.option__padding {
  fill: white;
  opacity: 0;
}
.icon,
.text {
  stroke-width: 0.4;
  transition: transform 400ms 100ms, stroke 400ms, fill 400ms;
}
.icon1 {
  stroke: #8c8b9c;
  transform: translateY(0.5px);
}
.icon1__document {
  fill: white;
}
.icon1__document-image {
  fill: #8c8b9c;
  stroke: none;
  transition: fill 400ms;
}
.text1 {
  fill: #8c8b9c;
  transform: translateY(-1px);
}
.icon2 {
  stroke: #8c8b9c;
  transform: translateY(0.5px);
}
.icon2__pen {
  fill: white;
}
.icon2__pen-edge-sharpened {
  fill: none;
}
.text2 {
  fill: #8c8b9c;
  transform: translateY(-1px);
}
.icon3 {
  stroke: #8c8b9c;
  transform: translateY(0.5px);
}
.icon3__bell-inner {
  fill: #8c8b9c;
  stroke-width: 0.4;
  transition: fill 400ms;
}
.icon3__bell-pendulum {
  fill: white;
  stroke-width: 0;
}
.icon3__bell-top {
  fill: none;
  stroke-width: 0.4;
}
.icon3__bell-outer {
  fill: none;
  stroke-width: 0.4;
}
.text3 {
  fill: #8c8b9c;
  transform: translateY(-1px);
}
.group1 .icon1 {
  stroke: #b22;
  transform: translateY(0);
}
.group1 .icon1 .icon1__document-image {
  fill: #b22;
}
.group1 .text1 {
  fill: #b22;
  transform: translateY(0);
}
.group2 .icon2 {
  stroke: #b22;
  transform: translateY(0);
}
.group2 .text2 {
  fill: #b22;
  transform: translateY(0);
}
.group2 .connector12 {
  stroke-dashoffset: 0px;
}
.group3 .icon3 {
  stroke: #b22;
  transform: translateY(0);
}
.group3 .icon3__bell-inner {
  fill: #b22;
}
.group3 .text3 {
  fill: #b22;
  transform: translateY(0);
}
.group3 .connector23 {
  stroke-dashoffset: 0px;
}
.group3 .connector13 {
  stroke-dashoffset: 0px;
}
.connector {
  fill: none;
  stroke: #b22;
  stroke-width: 0.5;
  transition: stroke-dashoffset 400ms;
}
.connector12,
.connector23 {
  stroke-dasharray: 27 75.94;
  stroke-dashoffset: -62.5px;
}
.connector13 {
  stroke-dasharray: 27 125.37;
  stroke-dashoffset: -98.5px;
}
.connector23 {
  visibility: hidden;
}
.connector13 {
  visibility: hidden;
}
.bgGrey {
  fill: #eef1f4;
}
.bgWhite {
  fill: white;
}

svg-mobile-tab-bar.markdown

SVG mobile tab bar

Your hybrid/web app tab bar doesn't need to be plain. You can make it playful and vibrant with SVG and CSS animations. This is one example how.

A Pen by Mikael Ainalem on CodePen.

License.