Numbers

<!-- One -->
<svg xmlns="http://www.w3.org/2000/svg" class="number" viewBox="0 0 106 151" height="150px" color="#00D494">
    <title>1</title>
    <defs>
        <mask width="160%" height="160%" x="-20%" y="-20%" id="number-mask--1">
            <path fill="#23d8a0" d="M32 15l9 32 26-6v109h39V0H73z" />
        </mask>
    </defs>
    <path mask="url(#number-mask--1)" class="number-path number-path--1" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="47" d="M28.948,25.88,107.381,9.951c-1.5.306-14.311-13.327-14.311-13.327L87.4-3.188,84.022-1.311V153.312" />
</svg>

<!-- Two -->
<svg xmlns="http://www.w3.org/2000/svg" class="number" viewBox="0 0 106 151" height="150px" color="#00D494">
    <title>2</title>
    <defs>
        <mask width="160%" height="160%" x="-20%" y="-20%" id="number-mask--2">
            <path fill="#23d8a0" d="M105 150v-36H59l20-20c15-16 23-29 23-46q0-22-14-34Q73 1 52 1C30 1 10 13 1 35l32 18c4-10 11-15 19-15 9 0 13 4 13 12 0 6-4 12-14 22L3 123v27z" />
        </mask>
    </defs>
    <path mask="url(#number-mask--2)" class="number-path number-path--2" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="47" d="M13.716,46.179S38.775,7.318,67.775,23.318s.206,47,.206,47l-63,67h108" />
</svg>

<!-- Three -->
<svg xmlns="http://www.w3.org/2000/svg" class="number" viewBox="0 0 106 151" height="150px" color="#00D494">
    <title>3</title>
    <defs>
        <mask width="160%" height="160%" x="-20%" y="-20%" id="number-mask--3">
            <path fill="#23d8a0" d="M98.275,30.641V1.258H3.52V36.893H52.459L29.135,65.442,43.5,86.7h7.914c10.621,0,16.452,5.21,16.452,13.546S62.039,114,51.418,114c-10.2,0-16.868-5-19.992-15.213L-1.061,117.332c8.33,21.673,28.322,32.926,52.479,32.926,15.2,0,27.906-4.168,38.11-12.712s15.411-20.631,15.411-36.26c0-20.006-12.5-34.8-31.03-40.637Z" />
        </mask>
    </defs>
    <path mask="url(#number-mask--3)" class="number-path number-path--3" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="42" d="M-.51,16.317H97.9l-6.757-10.3-58,73.1s10.98-8.276,31.253-3.715S85.514,91.228,86.921,96.86s-.374,28.917-19.8,34.83S21.318,126.054,14,106.064" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="number" viewBox="0 0 106 151" height="150px" color="#00D494">
  <title>{{ number }}</title>
  <defs>
    <mask width="160%" height="160%" x="-20%" y="-20%" id="number-mask--{{ number }}">
      {% if number == 1 %}
        <path fill="#23d8a0" d="M32 15l9 32 26-6v109h39V0H73z"/>
      {% elseif number == 2 %}
        <path fill="#23d8a0" d="M105 150v-36H59l20-20c15-16 23-29 23-46q0-22-14-34Q73 1 52 1C30 1 10 13 1 35l32 18c4-10 11-15 19-15 9 0 13 4 13 12 0 6-4 12-14 22L3 123v27z"/>
      {% elseif number == 3 %}
        <path fill="#23d8a0" d="M98.275,30.641V1.258H3.52V36.893H52.459L29.135,65.442,43.5,86.7h7.914c10.621,0,16.452,5.21,16.452,13.546S62.039,114,51.418,114c-10.2,0-16.868-5-19.992-15.213L-1.061,117.332c8.33,21.673,28.322,32.926,52.479,32.926,15.2,0,27.906-4.168,38.11-12.712s15.411-20.631,15.411-36.26c0-20.006-12.5-34.8-31.03-40.637Z"/>
      {% endif %}
    </mask>
  </defs>
    {% if number == 1 %}
      <path mask="url(#number-mask--1)" class="number-path number-path--1" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="47" d="M28.948,25.88,107.381,9.951c-1.5.306-14.311-13.327-14.311-13.327L87.4-3.188,84.022-1.311V153.312"/>
    {% elseif number == 2 %}
       <path mask="url(#number-mask--2)" class="number-path number-path--2" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="47" d="M13.716,46.179S38.775,7.318,67.775,23.318s.206,47,.206,47l-63,67h108"/>
    {% elseif number == 3 %}
      <path mask="url(#number-mask--3)" class="number-path number-path--3" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="42" d="M-.51,16.317H97.9l-6.757-10.3-58,73.1s10.98-8.276,31.253-3.715S85.514,91.228,86.921,96.86s-.374,28.917-19.8,34.83S21.318,126.054,14,106.064"  />
    {% endif %}
</svg>
/* One */
{
  "number": "1"
}

/* Two */
{
  "number": "2"
}

/* Three */
{
  "number": "3"
}

These are some notes about the component