Мне любопытно, можно ли как-то отредактировать значения дизайна Figma, в частности диаграммы, которую я могу экспортировать либо в SVG, либо в CSS. Что мне нужно, это изменить значения графика в соответствии с данными, которые я получаю от сервера, а не просто иметь значения, жестко запрограммированные из Figma, поскольку это не имеет смысла в моем сценарии ...
Когда Я экспортирую график как SVG, я получаю что-то вроде ниже:
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M256 128C256 198.692 198.692 256 128 256C57.3076 256 0 198.692 0 128C0 57.3076 57.3076 0 128 0C198.692 0 256 57.3076 256 128ZM38.4 128C38.4 177.485 78.5153 217.6 128 217.6C177.485 217.6 217.6 177.485 217.6 128C217.6 78.5153 177.485 38.4 128 38.4C78.5153 38.4 38.4 78.5153 38.4 128Z" fill="#E6E5E6"/>
<path d="M238.328 63.1015C251.67 85.7839 257.697 112.028 255.588 138.259C253.479 164.49 243.336 189.434 226.541 209.693C209.745 229.952 187.114 244.542 161.728 251.476C136.342 258.411 109.436 257.352 84.6738 248.444L97.6716 212.311C115.005 218.546 133.84 219.287 151.61 214.433C169.38 209.579 185.222 199.366 196.979 185.185C208.735 171.003 215.835 153.543 217.312 135.181C218.788 116.819 214.569 98.4488 205.229 82.571L238.328 63.1015Z" fill="#007AFF"/>
<path d="M37.4903 37.4903C51.463 23.5176 68.4811 12.9697 87.2113 6.67283C105.942 0.375952 125.875 -1.49888 145.451 1.19521C165.027 3.8893 183.713 11.0791 200.046 22.2015C216.379 33.3239 229.915 48.0768 239.594 65.3044L206.116 84.1131C199.341 72.0537 189.866 61.7267 178.432 53.9411C166.999 46.1554 153.919 41.1225 140.216 39.2366C126.513 37.3508 112.559 38.6632 99.4479 43.071C86.3367 47.4788 74.4241 54.8623 64.6432 64.6432L37.4903 37.4903Z" fill="#9013FE"/>
<path d="M85.7981 248.843C68.8847 242.936 53.3996 233.545 40.3445 221.277L66.6412 193.294C75.7797 201.881 86.6193 208.455 98.4586 212.59L85.7981 248.843Z" fill="#FB8832"/>
<path d="M95.6735 130.96C95.6735 124.912 86.8175 126.496 86.8175 123.712C86.8175 122.944 87.5135 122.56 88.5695 122.56C89.9615 122.56 92.2175 123.352 93.9935 124.36L95.6495 120.88C94.2335 119.968 92.3615 119.296 90.3935 119.08V115.576H87.2015V119.104C84.1295 119.608 82.2095 121.456 82.2095 124.12C82.2095 130.072 91.0655 128.344 91.0655 131.2C91.0655 132.088 90.2495 132.568 88.9535 132.568C87.2015 132.568 84.5855 131.512 82.8575 130.024L81.1535 133.456C82.7615 134.776 84.9455 135.712 87.2015 136.024V139.72H90.3935V136.048C93.4175 135.64 95.6735 133.912 95.6735 130.96ZM102.189 125.272V122.704H109.461V119.152H98.1572V128.752C99.2132 128.68 101.973 128.656 102.861 128.656C104.541 128.656 105.501 129.376 105.501 130.648C105.501 132.016 104.541 132.784 102.837 132.784C101.301 132.784 99.7652 132.064 98.4452 130.672L96.6932 134.08C98.5172 135.352 101.109 136.192 103.365 136.192C107.517 136.192 110.229 133.888 110.229 130.336C110.229 127.336 107.661 125.248 103.701 125.248C103.365 125.248 102.549 125.248 102.189 125.272ZM120.266 126.088L119.426 125.968L123.962 121.744V119.2H112.202L112.226 122.584H118.706L114.77 126.352V128.704H117.602C119.474 128.704 120.506 129.4 120.506 130.744C120.506 132.064 119.474 132.832 117.626 132.832C116.018 132.832 114.434 132.112 113.114 130.744L111.338 134.128C112.97 135.376 115.514 136.192 117.962 136.192C122.138 136.192 124.802 133.936 124.802 130.696C124.802 128.128 122.93 126.496 120.266 126.088ZM133.326 119.056C129.054 119.056 126.726 122.08 126.726 127.576C126.726 133.072 129.054 136.12 133.326 136.12C137.55 136.12 139.902 133.072 139.902 127.576C139.902 122.08 137.55 119.056 133.326 119.056ZM133.326 122.128C135.006 122.128 135.702 123.712 135.702 127.576C135.702 131.416 135.006 133.024 133.326 133.024C131.622 133.024 130.926 131.416 130.926 127.576C130.926 123.712 131.622 122.128 133.326 122.128ZM143.651 132.04C142.451 132.04 141.611 132.88 141.611 134.104C141.611 135.328 142.451 136.192 143.651 136.192C144.851 136.192 145.715 135.328 145.715 134.104C145.715 132.88 144.851 132.04 143.651 132.04ZM148.813 119.176V122.776H152.053V136H156.445V119.176H148.813ZM167.082 119.152L162.09 129.4V132.352H169.698V136H173.73V132.352H175.89V129.016H173.73V125.464H169.698L169.722 129.016H166.578L171.258 119.152H167.082Z" fill="black"/>
<path d="M69.2233 150.186V151.67H71.3373V160H72.9893V150.186H69.2233ZM80.9419 150.116C78.9539 150.116 77.6939 151.068 77.6939 152.594C77.6939 153.546 78.2679 154.33 79.2059 154.75C77.9879 155.156 77.2179 156.08 77.2179 157.27C77.2179 159.006 78.6599 160.07 80.9559 160.07C83.2519 160.07 84.6939 158.992 84.6939 157.242C84.6939 156.066 83.9519 155.156 82.7759 154.75C83.6579 154.358 84.2039 153.602 84.2039 152.664C84.2039 151.082 82.9579 150.116 80.9419 150.116ZM80.9559 151.306C82.1319 151.306 82.8039 151.838 82.8039 152.748C82.8039 153.658 82.1319 154.19 80.9559 154.19C79.7799 154.19 79.0939 153.658 79.0939 152.748C79.0939 151.838 79.7799 151.306 80.9559 151.306ZM80.9419 155.478C82.3279 155.478 83.1399 156.08 83.1399 157.102C83.1399 158.166 82.3279 158.768 80.9559 158.768C79.5699 158.768 78.7719 158.166 78.7719 157.088C78.7719 156.066 79.5699 155.478 80.9419 155.478ZM88.3065 153.798V151.67H92.9965V150.186H86.7805V155.38C87.4805 155.296 88.8525 155.24 89.4825 155.24C90.8265 155.24 91.6525 155.856 91.6525 156.864C91.6525 157.956 90.8265 158.628 89.4545 158.628C88.5305 158.628 87.5085 158.25 86.6825 157.592L86.0105 158.936C87.0185 159.608 88.4325 160.056 89.6365 160.056C91.9325 160.056 93.4165 158.754 93.4165 156.752C93.4165 155.044 91.9885 153.784 89.7625 153.784C89.3845 153.784 88.7405 153.784 88.3065 153.798ZM98.3965 150.2V151.684H101.491V160H103.143V151.684H106.251V150.2H98.3965ZM108.895 154.036V152.552H107.285V160H108.895V156.108C109.021 154.834 109.973 153.952 111.471 154.036V152.496C110.295 152.496 109.399 153.028 108.895 154.036ZM118.792 160L118.778 155.114C118.764 153.476 117.686 152.496 115.768 152.496C114.354 152.496 113.598 152.818 112.562 153.434L113.22 154.554C113.962 154.05 114.704 153.798 115.418 153.798C116.594 153.798 117.196 154.358 117.196 155.296V155.52H114.942C113.15 155.534 112.128 156.402 112.128 157.76C112.128 159.076 113.136 160.07 114.746 160.07C115.824 160.07 116.678 159.748 117.21 159.09V160H118.792ZM115.082 158.796C114.186 158.796 113.64 158.362 113.64 157.69C113.64 156.976 114.13 156.696 115.18 156.696H117.196V157.382C117.112 158.194 116.23 158.796 115.082 158.796ZM125.551 152.496C124.291 152.496 123.339 152.944 122.807 153.98V152.552H121.197V160H122.807V156.038C122.919 154.876 123.689 154.022 124.921 154.008C126.041 154.008 126.713 154.694 126.713 155.814V160H128.323V155.366C128.323 153.588 127.287 152.496 125.551 152.496ZM134.972 154.428L135.56 153.238C134.888 152.762 133.894 152.482 132.956 152.482C131.528 152.482 130.212 153.126 130.212 154.638C130.198 157.326 134.118 156.472 134.118 157.998C134.118 158.558 133.586 158.796 132.9 158.796C132.088 158.796 131.052 158.446 130.408 157.872L129.834 159.02C130.576 159.692 131.738 160.056 132.83 160.056C134.328 160.056 135.686 159.37 135.686 157.844C135.7 155.142 131.738 155.884 131.738 154.512C131.738 153.98 132.2 153.77 132.83 153.77C133.488 153.77 134.314 154.022 134.972 154.428ZM143.604 160L143.59 155.114C143.576 153.476 142.498 152.496 140.58 152.496C139.166 152.496 138.41 152.818 137.374 153.434L138.032 154.554C138.774 154.05 139.516 153.798 140.23 153.798C141.406 153.798 142.008 154.358 142.008 155.296V155.52H139.754C137.962 155.534 136.94 156.402 136.94 157.76C136.94 159.076 137.948 160.07 139.558 160.07C140.636 160.07 141.49 159.748 142.022 159.09V160H143.604ZM139.894 158.796C138.998 158.796 138.452 158.362 138.452 157.69C138.452 156.976 138.942 156.696 139.992 156.696H142.008V157.382C141.924 158.194 141.042 158.796 139.894 158.796ZM151.259 154.75L152.141 153.714C151.455 152.93 150.405 152.496 149.061 152.496C146.849 152.496 145.309 154.036 145.309 156.29C145.309 158.53 146.849 160.056 149.061 160.056C150.475 160.056 151.553 159.552 152.225 158.67L151.329 157.774C150.825 158.362 150.069 158.67 149.131 158.67C147.843 158.67 146.919 157.704 146.919 156.29C146.919 154.876 147.843 153.91 149.131 153.91C150.027 153.896 150.741 154.218 151.259 154.75ZM157.97 158.292C157.536 158.502 157.186 158.614 156.85 158.614C156.346 158.614 156.052 158.376 156.052 157.606V154.036H158.25V152.832H156.052V150.788H154.456V152.832H153.406V154.036H154.456V157.9C154.456 159.426 155.422 160.07 156.542 160.07C157.172 160.07 157.788 159.874 158.376 159.524L157.97 158.292ZM160.911 149.444C160.379 149.444 159.973 149.85 159.973 150.424C159.973 150.984 160.379 151.39 160.911 151.39C161.443 151.39 161.849 150.984 161.849 150.424C161.849 149.85 161.443 149.444 160.911 149.444ZM160.113 152.552V160H161.709V152.552H160.113ZM167.533 152.496C165.223 152.496 163.641 154.022 163.641 156.276C163.641 158.516 165.223 160.056 167.533 160.056C169.829 160.056 171.411 158.516 171.411 156.276C171.411 154.022 169.829 152.496 167.533 152.496ZM167.533 153.882C168.863 153.882 169.801 154.862 169.801 156.29C169.801 157.732 168.863 158.712 167.533 158.712C166.189 158.712 165.251 157.732 165.251 156.29C165.251 154.862 166.189 153.882 167.533 153.882ZM177.695 152.496C176.435 152.496 175.483 152.944 174.951 153.98V152.552H173.341V160H174.951V156.038C175.063 154.876 175.833 154.022 177.065 154.008C178.185 154.008 178.857 154.694 178.857 155.814V160H180.467V155.366C180.467 153.588 179.431 152.496 177.695 152.496ZM187.117 154.428L187.705 153.238C187.033 152.762 186.039 152.482 185.101 152.482C183.673 152.482 182.357 153.126 182.357 154.638C182.343 157.326 186.263 156.472 186.263 157.998C186.263 158.558 185.731 158.796 185.045 158.796C184.233 158.796 183.197 158.446 182.553 157.872L181.979 159.02C182.721 159.692 183.883 160.056 184.975 160.056C186.473 160.056 187.831 159.37 187.831 157.844C187.845 155.142 183.883 155.884 183.883 154.512C183.883 153.98 184.345 153.77 184.975 153.77C185.633 153.77 186.459 154.022 187.117 154.428Z" fill="#9C9C9C"/>
<path d="M110.673 94.2V95.684H113.767V104H115.419V95.684H118.527V94.2H110.673ZM122.302 96.496C119.992 96.496 118.41 98.022 118.41 100.276C118.41 102.516 119.992 104.056 122.302 104.056C124.598 104.056 126.18 102.516 126.18 100.276C126.18 98.022 124.598 96.496 122.302 96.496ZM122.302 97.882C123.632 97.882 124.57 98.862 124.57 100.29C124.57 101.732 123.632 102.712 122.302 102.712C120.958 102.712 120.02 101.732 120.02 100.29C120.02 98.862 120.958 97.882 122.302 97.882ZM131.918 102.292C131.484 102.502 131.134 102.614 130.798 102.614C130.294 102.614 130 102.376 130 101.606V98.036H132.198V96.832H130V94.788H128.404V96.832H127.354V98.036H128.404V101.9C128.404 103.426 129.37 104.07 130.49 104.07C131.12 104.07 131.736 103.874 132.324 103.524L131.918 102.292ZM140.109 104L140.095 99.114C140.081 97.476 139.003 96.496 137.085 96.496C135.671 96.496 134.915 96.818 133.879 97.434L134.537 98.554C135.279 98.05 136.021 97.798 136.735 97.798C137.911 97.798 138.513 98.358 138.513 99.296V99.52H136.259C134.467 99.534 133.445 100.402 133.445 101.76C133.445 103.076 134.453 104.07 136.063 104.07C137.141 104.07 137.995 103.748 138.527 103.09V104H140.109ZM136.399 102.796C135.503 102.796 134.957 102.362 134.957 101.69C134.957 100.976 135.447 100.696 136.497 100.696H138.513V101.382C138.429 102.194 137.547 102.796 136.399 102.796ZM142.584 93.612V104H144.194V93.612H142.584Z" fill="#9C9C9C"/>
</svg>
Я знаю, что, возможно, я могу поиграть со значениями внутри, но это слишком сложно для моих глаз, я не уверен, какие значения сделать динамическими c et c ... Есть ли более простой способ справиться с этим?