but theres a number
<div class="controls"> <input type="radio" name="font-type" value="eight" id="type-8"><label class="production custom-cursor-on-hover" for="type-8">8</label> <input type="radio" name="font-type" value="sixteen" id="type-16"><label class="production custom-cursor-on-hover" for="type-16">16</label> <input type="radio" name="font-type" value="twenty-four" id="type-24"><label class="production custom-cursor-on-hover" for="type-24">24</label> <input type="radio" name="font-type" value="thirty-four" id="type-34"><label class="production custom-cursor-on-hover" for="type-34">34</label> <input type="radio" name="font-type" value="forty-three" id="type-43"><label class="production custom-cursor-on-hover" for="type-43">43</label> <input type="radio" name="font-type" value="sixty-six" id="type-66"><label class="production custom-cursor-on-hover" for="type-66">66</label> <input type="radio" name="font-type" value="ninety-three" id="type-93"><label class="production custom-cursor-on-hover" for="type-93">93</label> <button class="show-exp-fonts production">Expr'tal »</button> <button class="hide-exp-fonts experimental">« Produced</button> <input type="radio" name="font-type" value="perm" id="type-perm"><label class="experimental custom-cursor-on-hover" for="type-perm">6</label> <input type="radio" name="font-type" value="1896" id="type-1896"><label class="experimental custom-cursor-on-hover" for="type-1896">21</label> <input type="radio" name="font-type" value="qnsy" id="type-qnsy"><label class="experimental custom-cursor-on-hover" for="type-qnsy">23</label> <input type="radio" name="font-type" value="1958" id="type-1958"><label class="experimental custom-cursor-on-hover" for="type-1958">50</label> <input type="radio" name="font-type" value="brooks" id="type-brooks"><label class="experimental" for="type-brooks">52</label> <input type="radio" name="font-type" value="fifty-five" id="type-55"><label class="experimental" for="type-55">55</label>
<div class="font-credit">A typical eight-segment display
<div class="canvas"> <div class="letters" style="transform: translate(0px, 104.534px) scale(0.561798);"> <svg data-font-type="eight" class="appear-transition production" width="206" height="319" viewBox="-30 -5 267 319" xmlns="http://www.w3.org/2000/svg" data-letter="y"> <path d="M171.932 0H53.0157C40.1178 0 29.1251 8.89208 26.2108 21.1216L59.1474 34.6369C59.9622 33.913 61.0343 33.477 62.2004 33.477H155.528L171.932 0Z" transform="translate(-5)" class="" style="opacity: 0.875361; transition-delay: 119.832ms;"></path> <path d="M164.908 37.0257C165.019 37.5016 165.054 38.0043 165.002 38.5201L156.844 119.825L177.28 144.854L188.55 135.568L199.538 30.3696C200.858 17.7304 193.423 6.36664 182.351 1.95099L164.908 37.0257Z" transform="translate(-5)" style="opacity: 0.954815; transition-delay: 57.607ms;" class="visible"></path> <path d="M142.499 262.77L150.988 178.175L176.115 157.72L185.1 168.594L174.055 274.339C172.774 286.607 163.549 296.293 151.804 298.518L141.867 264.676C142.207 264.111 142.43 263.465 142.499 262.77Z" transform="translate(-5)" style="opacity: 0.850408; transition-delay: 192.259ms;" class="visible"></path> <path d="M142.316 299L133.095 266.899H40.1387C38.7237 266.899 37.4696 266.263 36.6309 265.273L1.25024 279.791C4.75753 290.837 15.1067 299 27.5327 299H142.316Z" transform="translate(-5)" style="opacity: 0.877457; transition-delay: 83.5441ms;" class="visible"></path> <path d="M43.5379 180.852L36.1735 255.709L0 270.305C0.0245563 269.75 0.0658758 269.191 0.124463 268.63L10.8234 166.201L21.6631 156.577L43.5379 180.852Z" transform="translate(-5)" class="" style="opacity: 0.953672; transition-delay: 159.709ms;"></path> <path d="M49.5898 119.337L56.9547 44.4752L24.8894 31.5368L14.1532 134.322L22.4905 143.684L49.5898 119.337Z" transform="translate(-5)" class="visible" style="opacity: 0.891968; transition-delay: 65.4259ms;"></path> <path d="M152.264 165.917L170.261 150.636L155.665 132.972H48.2483L28.5369 150.474L42.8998 165.913L152.264 165.917Z" transform="translate(-5)" class="visible" style="opacity: 0.883829; transition-delay: 127.841ms;"></path> <path d="M222 282.491C222 291.609 214.597 299 205.466 299C196.334 299 188.932 291.609 188.932 282.491C188.932 273.373 196.334 265.982 205.466 265.982C214.597 265.982 222 273.373 222 282.491Z" transform="translate(-5)" style="opacity: 0.993477; transition-delay: 162.374ms;"></path> </svg>
<div class="status"> <input class="typing-mirror" placeholder="Tap here to type" style="display: none;"> <div class="typing-prompt">Just start typing!
<svg data-font-type="eight" class="master" width="206" height="319" viewBox="-30 -5 267 319" xmlns="http://www.w3.org/2000/svg"> <path d="M171.932 0H53.0157C40.1178 0 29.1251 8.89208 26.2108 21.1216L59.1474 34.6369C59.9622 33.913 61.0343 33.477 62.2004 33.477H155.528L171.932 0Z" transform="translate(-5)"></path> <path d="M164.908 37.0257C165.019 37.5016 165.054 38.0043 165.002 38.5201L156.844 119.825L177.28 144.854L188.55 135.568L199.538 30.3696C200.858 17.7304 193.423 6.36664 182.351 1.95099L164.908 37.0257Z" transform="translate(-5)"></path> <path d="M142.499 262.77L150.988 178.175L176.115 157.72L185.1 168.594L174.055 274.339C172.774 286.607 163.549 296.293 151.804 298.518L141.867 264.676C142.207 264.111 142.43 263.465 142.499 262.77Z" transform="translate(-5)"></path> <path d="M142.316 299L133.095 266.899H40.1387C38.7237 266.899 37.4696 266.263 36.6309 265.273L1.25024 279.791C4.75753 290.837 15.1067 299 27.5327 299H142.316Z" transform="translate(-5)"></path> <path d="M43.5379 180.852L36.1735 255.709L0 270.305C0.0245563 269.75 0.0658758 269.191 0.124463 268.63L10.8234 166.201L21.6631 156.577L43.5379 180.852Z" transform="translate(-5)"></path> <path d="M49.5898 119.337L56.9547 44.4752L24.8894 31.5368L14.1532 134.322L22.4905 143.684L49.5898 119.337Z" transform="translate(-5)"></path> <path d="M152.264 165.917L170.261 150.636L155.665 132.972H48.2483L28.5369 150.474L42.8998 165.913L152.264 165.917Z" transform="translate(-5)"></path> <path d="M222 282.491C222 291.609 214.597 299 205.466 299C196.334 299 188.932 291.609 188.932 282.491C188.932 273.373 196.334 265.982 205.466 265.982C214.597 265.982 222 273.373 222 282.491Z" transform="translate(-5)"></path> </svg> <svg data-font-type="twenty-four" class="master" width="231" height="300" viewBox="-10 0 251 300" xmlns="http://www.w3.org/2000/svg"> <path d="M76.0769 64.4344L68.6703 133.088C68.2283 137.185 73.0682 139.672 76.1417 136.927L114.314 102.838C116.166 101.184 116.329 98.3437 114.678 96.4894L83.9122 61.9252C81.3174 59.01 76.4955 60.5542 76.0769 64.4344Z" transform="translate(0.77475 0.284531)"></path> <path d="M65.0579 135.545L71.9845 67.1329C72.3999 63.0303 67.5377 60.5761 64.4837 63.3469L26.6246 97.6952C24.7834 99.3657 24.6456 102.213 26.3169 104.053L57.2494 138.117C59.8683 141.001 64.6655 139.421 65.0579 135.545Z" transform="translate(0.77475 0.284531)"></path> <path d="M21.0262 87.1167L28.7731 12.4565C29.1755 8.57801 33.9841 7.01208 36.5932 9.90984L70.1614 47.1916C71.8216 49.0354 71.6762 51.8751 69.8363 53.5396L28.5212 90.9181C25.4616 93.6862 20.6004 91.2206 21.0262 87.1167Z" transform="translate(0.77475 0.284531)"></path> <path d="M117.884 0.0399762C93.6932 0.0113389 58.0923 -0.0154888 41.4739 0.0105859C37.7369 0.0164494 35.9511 4.08001 38.4547 6.85438L72.8294 44.9457C74.4907 46.7867 77.3284 46.9367 79.1746 45.281L120.87 7.88842C123.941 5.13443 122.009 0.0448592 117.884 0.0399762Z" transform="translate(0.77475 0.284531)"></path> <path d="M216.884 0.0399753C192.693 0.011338 157.092 -0.0154888 140.474 0.0105859C136.737 0.0164494 134.951 4.08001 137.455 6.85438L171.829 44.9457C173.491 46.7867 176.328 46.9367 178.175 45.281L219.87 7.88841C222.941 5.13443 221.009 0.0448583 216.884 0.0399753Z" transform="translate(0.77475 0.284531)"></path> <path d="M175.077 64.4344L167.67 133.088C167.228 137.185 172.068 139.672 175.142 136.927L213.314 102.838C215.166 101.184 215.329 98.3437 213.678 96.4894L182.912 61.9252C180.317 59.01 175.496 60.5542 175.077 64.4344Z" transform="translate(0.77475 0.284531)"></path> <path d="M164.058 135.545L170.985 67.1329C171.4 63.0303 166.538 60.5761 163.484 63.3469L125.625 97.6952C123.783 99.3657 123.646 102.213 125.317 104.053L156.249 138.117C158.868 141.001 163.666 139.421 164.058 135.545Z" transform="translate(0.77475 0.284531)"></path> <path d="M66.077 163.434L58.6703 232.088C58.2283 236.185 63.0682 238.672 66.1418 235.927L104.314 201.838C106.166 200.184 106.329 197.344 104.678 195.489L73.9123 160.925C71.3175 158.01 66.4956 159.554 66.077 163.434Z" transform="translate(0.77475 0.284531)"></path> <path d="M55.058 234.545L61.9846 166.133C62.4 162.03 57.5378 159.576 54.4838 162.347L16.6247 196.695C14.7834 198.366 14.6457 201.213 16.3169 203.053L47.2495 237.117C49.8683 240.001 54.6656 238.421 55.058 234.545Z" transform="translate(0.77475 0.284531)"></path> <path d="M165.077 163.434L157.67 232.088C157.228 236.185 162.068 238.672 165.142 235.927L203.315 201.838C205.166 200.184 205.329 197.344 203.678 195.489L172.912 160.925C170.318 158.01 165.496 159.554 165.077 163.434Z" transform="translate(0.77475 0.284531)"></path> <path d="M154.058 234.545L160.985 166.133C161.4 162.03 156.538 159.576 153.484 162.347L115.625 196.695C113.784 198.366 113.646 201.213 115.317 203.053L146.25 237.117C148.868 240.001 153.666 238.421 154.058 234.545Z" transform="translate(0.77475 0.284531)"></path> <path d="M10.0262 186.117L17.7731 111.456C18.1755 107.578 22.9841 106.012 25.5932 108.91L59.1614 146.192C60.8216 148.035 60.6762 150.875 58.8363 152.54L17.5212 189.918C14.4616 192.686 9.60037 190.221 10.0262 186.117Z" transform="translate(0.77475 0.284531)"></path> <path d="M0.0262064 285.117L7.77307 210.456C8.17551 206.578 12.9841 205.012 15.5932 207.91L49.1614 245.192C50.8216 247.035 50.6762 249.875 48.8363 251.54L7.5212 288.918C4.46156 291.686 -0.399628 289.221 0.0262064 285.117Z" transform="translate(0.77475 0.284531)"></path> <path d="M229.423 14.3511C229.856 10.2527 225.009 7.77721 221.942 10.53L180.346 47.8668C178.495 49.5283 178.343 52.3763 180.006 54.2254L213.71 91.6875C216.316 94.5841 221.121 93.0249 221.53 89.15L229.423 14.3511Z" transform="translate(0.77475 0.284531)"></path> <path d="M219.423 113.351C219.856 109.253 215.009 106.777 211.942 109.53L170.346 146.867C168.495 148.528 168.343 151.376 170.006 153.225L203.71 190.687C206.316 193.584 211.121 192.025 211.53 188.15L219.423 113.351Z" transform="translate(0.77475 0.284531)"></path> <path d="M208.423 211.351C208.856 207.253 204.009 204.777 200.942 207.53L159.346 244.867C157.495 246.528 157.343 249.376 159.006 251.225L192.71 288.687C195.316 291.584 200.121 290.025 200.53 286.15L208.423 211.351Z" transform="translate(0.77475 0.284531)"></path> <path d="M137.884 250.04C113.693 250.011 85.0923 249.985 68.4739 250.011C64.7369 250.016 62.9511 254.08 65.4548 256.854L95.8294 291.946C97.4908 293.787 100.328 293.937 102.175 292.281L140.87 257.888C143.941 255.134 142.009 250.045 137.884 250.04Z" transform="translate(0.77475 0.284531)"></path> <path d="M147.884 151.04C123.693 151.011 95.0923 150.985 78.4739 151.011C74.7369 151.016 72.9511 155.08 75.454