graphics

How to convert paper drawings to SVG using Figma

This post demonstrates the process of taking a paper based drawing and turning it into vector graphic using free & open source tools.

Post Image

The process is really simple and can be done by anyone. Drawing however isn't anyone's piece of cake. I hope this post helps the talented people who can draw amazing stuff on paper to digitize and even animate their content.

TLDR; Tracing using Figma

Step 1: Draw

Of course you need a source image. Draw the shape you're looking to vectorize on paper. I can't draw, so I asked @smearthelove to help me out with this part

Step 2: Take a picture

Next up, take a picture using your phone and send that to your workstation.
A trick to take better pictures without using a scanner would be via the Office Lens app(optional).

Step 3: Place the image in Figma

Figma is a free design tool that runs in the browser. Open a new document then drag and drop your image. It's ideal to separate each drawing on it's own layer before proceeding. Duplicate the layers and crop every shape until they're on different layers. You don't have to do this if you have just one image of course.

Bitmap images cropped in Figma

Step 4: Image Tracer Plugin for Figma

Install the Image Tracer plugin by navigating to figma.com/c

Select an image and apply the Image Tracer plugin by selecting it from the menu.

Image Tracer for Figma
The plugin does what you would normally require a license and installation of Adobe Illustrator to achieve this. This right here, works in the browser and accessible within seconds to anyone. Open Source is amazing ! Image Tracer was created by David Williames.

You now have a vectorized version of the previously bitmap image at your disposal.

Step 5: Export to SVG

Export the image as SVG using the export feature of figma at the bottom right corner.

You can now use the SVG in a webpage via an img tag or by adding the SVG inline.

Here's how the inline SVG looks like :

<svg width="434" height="721" viewBox="0 0 434 721" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M232.762 1.04728C230.546 3.26334 229.465 3.3044 173.777 3.31466C134.806 3.32081 126.688 4.37137 123.098 9.87867C122.404 10.9436 122.308 30.7014 122.883 53.7853C123.935 96.0155 123.745 97.9258 116.07 122.51C114.439 127.74 113.102 133.974 113.102 136.36C113.102 138.748 112.181 140.702 111.055 140.702C109.929 140.702 109.008 142.548 109.008 144.806C109.008 147.063 108.087 148.909 106.961 148.909C105.835 148.909 104.914 150.756 104.914 153.013C104.914 155.27 103.993 157.117 102.867 157.117C101.742 157.117 100.82 158.071 100.82 159.237C100.82 162.647 86.9439 175.584 83.288 175.584C81.4498 175.584 77.3641 178.354 74.2097 181.74C71.0553 185.125 67.0985 187.896 65.4199 187.896C63.7394 187.896 61.8357 189.281 61.1868 190.973C60.54 192.666 58.145 194.051 55.8687 194.051C53.5905 194.051 50.5773 195.898 49.1711 198.155C47.7648 200.412 44.9932 202.259 43.0117 202.259C41.0323 202.259 39.4111 203.182 39.4111 204.311C39.4111 205.439 36.6476 206.363 33.2701 206.363C29.8926 206.363 27.1292 207.286 27.1292 208.415C27.1292 209.543 24.8263 210.466 22.0118 210.466C19.1972 210.466 16.8943 211.39 16.8943 212.518C16.8943 213.647 14.352 214.57 11.2467 214.57C0.422274 214.57 -0.394474 218.754 0.111129 271.627C0.700659 333.318 -1.97268 329.477 40.3424 329.477C58.8266 329.477 70.1157 328.699 70.1157 327.425C70.1157 326.159 80.6188 325.373 97.5309 325.373C127.748 325.373 127.431 325.229 127.431 338.879C127.431 342.736 128.352 345.892 129.478 345.892C130.794 345.892 131.525 366.354 131.525 403.175C131.525 439.66 132.27 460.706 133.578 461.143C134.839 461.564 135.67 475.268 135.732 496.627C135.785 515.765 136.642 532.404 137.635 533.604C138.628 534.802 139.922 545.922 140.507 558.309C142.311 596.333 144.742 619.612 147.405 624.302C148.804 626.769 149.948 630.692 149.948 633.023C149.948 635.354 150.869 637.262 151.995 637.262C153.121 637.262 154.042 639.109 154.042 641.366C154.042 643.623 154.963 645.47 156.089 645.47C157.215 645.47 158.136 646.516 158.136 647.794C158.136 649.073 159.755 651.611 161.732 653.437C163.71 655.261 166.575 659.193 168.098 662.172C169.621 665.152 173.07 668.769 175.76 670.214C178.452 671.656 180.652 673.492 180.652 674.295C180.652 675.095 183.416 676.899 186.793 678.3C190.171 679.702 192.934 681.727 192.934 682.8C192.934 685.857 198.451 690.611 202 690.611C203.769 690.611 205.216 691.535 205.216 692.663C205.216 693.792 206.598 694.715 208.287 694.715C209.975 694.715 211.357 695.639 211.357 696.767C211.357 697.896 213.199 698.819 215.451 698.819C217.703 698.819 219.545 699.742 219.545 700.871C219.545 702 221.387 702.923 223.639 702.923C225.891 702.923 227.733 703.846 227.733 704.975C227.733 706.103 229.901 707.027 232.552 707.027C235.202 707.027 239.855 709.335 242.891 712.156C245.998 715.041 250.876 717.286 254.041 717.286C257.134 717.286 260.687 718.31 261.934 719.56C263.289 720.918 267.78 721.37 273.09 720.682C296.1 717.703 324.389 711.364 327.183 708.564C328.027 707.718 330.866 707.027 333.494 707.027C336.12 707.027 338.27 706.103 338.27 704.975C338.27 703.846 341.033 702.923 344.411 702.923C347.788 702.923 350.552 702 350.552 700.871C350.552 699.742 352.394 698.819 354.646 698.819C356.897 698.819 358.74 697.896 358.74 696.767C358.74 695.639 361.042 694.715 363.857 694.715C366.672 694.715 368.974 693.792 368.974 692.663C368.974 691.535 370.817 690.611 373.068 690.611C375.32 690.611 377.162 689.688 377.162 688.56C377.162 687.431 379.005 686.508 381.256 686.508C383.508 686.508 385.35 685.685 385.35 684.677C385.35 683.672 387.653 682.268 390.468 681.561C393.282 680.853 395.585 679.367 395.585 678.261C395.585 677.153 397.008 676.248 398.748 676.248C403.722 676.248 411.961 666.711 411.961 660.951C411.961 658.079 412.737 655.729 413.686 655.729C414.634 655.729 417.146 652.497 419.269 648.548C421.391 644.598 423.837 641.366 424.707 641.366C425.577 641.366 426.29 638.596 426.29 635.21C426.29 631.825 427.123 629.054 428.138 629.054C430.91 629.054 432.658 611.445 433.718 572.826C434.341 550.149 433.927 537.398 432.527 535.995C431.348 534.813 430.384 527.116 430.384 518.89C430.384 507.705 429.495 502.895 426.859 499.807C424.92 497.538 422.572 495.681 421.643 495.681C419.185 495.681 399.679 515.619 399.679 518.133C399.679 521.264 353.194 567.497 350.046 567.497C348.57 567.497 346.034 569.344 344.411 571.601C342.787 573.858 339.897 575.705 337.989 575.705C336.079 575.705 334.159 576.778 333.723 578.089C333.203 579.655 326.518 580.511 314.222 580.586C297.371 580.691 295.121 580.25 291.576 576.152C289.41 573.649 286.53 571.601 285.173 571.601C280.813 571.601 277.01 566.073 274.363 555.888C272.943 550.424 270.621 544.732 269.203 543.242C267.786 541.75 266.626 536.495 266.626 531.564C266.626 526.632 265.704 522.027 264.579 521.33C263.453 520.632 262.532 514.115 262.532 506.845C262.532 499.403 261.637 493.629 260.485 493.629C259.179 493.629 258.438 476.53 258.438 446.435C258.438 416.34 257.697 399.241 256.391 399.241C255.265 399.241 254.344 402.473 254.344 406.423C254.344 410.373 253.423 413.605 252.297 413.605C249.073 413.605 249.574 478.65 252.808 479.965C254.741 480.749 254.616 481.584 252.297 483.369C249.977 485.155 249.853 485.99 251.785 486.773C253.39 487.426 254.344 491.961 254.344 498.929C254.344 505.044 255.189 510.044 256.223 510.044C257.257 510.044 258.552 516.278 259.103 523.894C260.734 546.453 262.562 553.698 270.363 568.521C274.238 575.886 281.925 583.913 285.102 583.913C286.358 583.913 288.702 585.232 290.311 586.843C296.9 593.448 324.643 592.606 333.05 585.546C334.121 584.647 336.653 583.913 338.679 583.913C340.706 583.913 342.364 582.989 342.364 581.861C342.364 580.732 344.206 579.809 346.458 579.809C348.709 579.809 350.552 578.885 350.552 577.757C350.552 576.628 351.933 575.705 353.622 575.705C355.311 575.705 356.693 574.782 356.693 573.653C356.693 572.525 358.115 571.601 359.855 571.601C362.862 571.601 373.068 562.885 373.068 560.316C373.068 558.707 382.765 549.03 384.378 549.03C385.07 549.03 389.487 544.779 394.193 539.581C398.899 534.384 404.821 527.961 407.355 525.31C409.889 522.659 411.961 519.062 411.961 517.318C411.961 511.638 414.99 513.973 417.83 521.843C421.604 532.307 423.252 595.303 420.178 611.613C418.902 618.385 417.351 626.925 416.732 630.593C416.114 634.262 414.786 637.262 413.785 637.262C412.782 637.262 411.961 639.109 411.961 641.366C411.961 643.623 411.04 645.47 409.914 645.47C408.788 645.47 407.867 646.855 407.867 648.548C407.867 650.24 406.946 651.625 405.82 651.625C404.694 651.625 403.773 652.969 403.773 654.611C403.773 657.929 394.457 668.041 391.399 668.041C390.324 668.041 389.444 668.964 389.444 670.092C389.444 671.221 388.294 672.146 386.885 672.146C385.479 672.148 381.651 674.457 378.378 677.276C375.107 680.097 369.865 682.404 366.729 682.404C363.593 682.404 360.459 683.327 359.763 684.456C359.067 685.584 355.79 686.508 352.478 686.508C349.166 686.508 346.458 687.431 346.458 688.56C346.458 689.688 343.289 690.611 339.414 690.611C335.539 690.611 331.801 691.535 331.105 692.663C330.409 693.792 326.672 694.715 322.797 694.715C318.922 694.715 315.753 695.639 315.753 696.767C315.753 698.004 307.223 698.819 294.26 698.819C281.296 698.819 272.766 698.004 272.766 696.767C272.766 695.581 266.284 694.715 257.414 694.715C248.545 694.715 242.062 693.849 242.062 692.663C242.062 691.535 240.68 690.611 238.991 690.611C237.303 690.611 235.921 689.688 235.921 688.56C235.921 687.431 234.079 686.508 231.827 686.508C229.575 686.508 227.733 685.755 227.733 684.835C227.733 683.916 224.74 681.614 221.08 679.718C211.296 674.652 207.245 671.812 200.021 664.963C196.449 661.577 191.553 657.449 189.137 655.789C186.722 654.129 184.746 651.129 184.746 649.12C184.746 647.113 183.825 645.47 182.699 645.47C181.574 645.47 180.652 643.689 180.652 641.511C180.652 639.336 179.271 636.17 177.582 634.478C175.893 632.785 174.512 630.002 174.512 628.295C174.512 626.59 173.59 624.622 172.465 623.925C171.339 623.227 170.418 618.095 170.418 612.518C170.418 606.941 169.496 602.38 168.371 602.38C167.187 602.38 166.324 595.881 166.324 586.99C166.324 578.1 165.46 571.601 164.277 571.601C163.057 571.601 162.23 563.736 162.23 552.108C162.23 540.48 161.403 532.615 160.183 532.615C158.901 532.615 158.136 520.098 158.136 499.169C158.136 480.774 157.307 464.845 156.293 463.774C155.282 462.701 153.921 435.396 153.272 403.093C152.124 345.999 150.509 331.724 145.541 334.799C143.786 335.887 143.551 349.873 144.63 388.787C146.824 468.007 149.332 518.346 151.534 527.485C152.623 531.999 153.671 542.792 153.864 551.468C154.058 560.145 155.092 572.611 156.164 579.169C157.235 585.729 158.117 594.558 158.123 598.789C158.13 603.022 159.057 606.484 160.183 606.484C161.309 606.484 162.23 611.562 162.23 617.769C162.23 623.976 163.151 629.054 164.277 629.054C165.403 629.054 166.324 630.901 166.324 633.158C166.324 635.415 167.245 637.262 168.371 637.262C169.496 637.262 170.418 639.031 170.418 641.196C170.418 643.358 171.429 645.465 172.665 645.878C173.902 646.292 174.479 648.909 173.949 651.693L172.985 656.755L171.462 652.138C170.624 649.6 169.126 647.522 168.131 647.522C167.138 647.522 166.324 646.137 166.324 644.444C166.324 642.751 165.403 641.366 164.277 641.366C163.151 641.366 162.23 639.519 162.23 637.262C162.23 635.005 161.534 633.158 160.682 633.158C159.057 633.158 155.466 625.416 153.069 616.743C150.955 609.089 148.204 568.507 146.02 512.726C144.951 485.423 143.095 461.246 141.895 458.999C140.491 456.37 139.713 433.26 139.713 394.247C139.713 355.171 138.984 333.581 137.666 333.581C136.54 333.581 135.619 331.734 135.619 329.477C135.619 327.22 134.698 325.373 133.572 325.373C132.446 325.373 131.525 323.456 131.525 321.113C131.525 317.044 130.768 316.909 114.637 318.105C105.348 318.795 85.5438 319.839 70.6275 320.424C53.7829 321.087 43.505 322.305 43.505 323.639C43.505 325.714 39.7242 325.496 17.4061 322.145L8.7064 320.838V272.971C8.7064 226.908 8.85992 225.058 12.8004 223.804C15.052 223.088 16.8943 221.641 16.8943 220.589C16.8943 219.536 19.1972 218.674 22.0118 218.674C24.8263 218.674 27.1292 217.751 27.1292 216.622C27.1292 215.494 29.8926 214.57 33.2701 214.57C36.6476 214.57 39.4111 213.647 39.4111 212.518C39.4111 211.39 41.2533 210.466 43.505 210.466C45.7567 210.466 47.599 209.543 47.599 208.415C47.599 207.286 49.4412 206.363 51.6929 206.363C53.9446 206.363 55.7869 205.439 55.7869 204.311C55.7869 203.182 57.6292 202.259 59.8808 202.259C62.1325 202.259 63.9748 201.335 63.9748 200.207C63.9748 199.078 64.9348 198.155 66.1078 198.155C67.2807 198.155 69.3543 197.213 70.7135 196.062C81.9432 186.56 85.769 183.796 87.7013 183.794C90.696 183.792 109.008 166.33 109.008 163.476C109.008 162.236 109.704 161.221 110.554 161.221C111.405 161.221 113.155 158.221 114.447 154.552C115.737 150.883 118.4 143.267 120.363 137.624C122.326 131.981 124.719 125.762 125.681 123.802C126.643 121.843 127.431 117.917 127.431 115.082C127.431 112.244 128.352 109.923 129.478 109.923C130.784 109.923 131.525 92.6298 131.525 62.1488V14.3764L141.248 13.9435C146.597 13.7055 154.195 12.5338 158.136 11.3376C162.076 10.1434 180.2 8.73987 198.412 8.22074L231.524 7.27481L232.654 25.2556C233.274 35.1458 234.576 65.397 235.544 92.4821C236.619 122.503 238.283 144.11 239.808 147.83C241.184 151.185 242.164 157.187 241.986 161.167C241.81 165.146 241.755 174.086 241.863 181.034C242.045 192.613 242.404 193.577 246.156 192.594C249.003 191.848 250.25 192.531 250.25 194.837C250.25 198.766 249.568 198.666 258.452 196.044C262.384 194.884 277.577 193.017 292.213 191.897C306.849 190.776 321.587 189.48 324.964 189.016C328.342 188.552 343.846 187.998 359.415 187.789C388.4 187.395 393.254 188.54 390.717 195.163C389.637 197.991 388.038 198.299 381.746 196.887C377.537 195.943 369.486 195.332 363.857 195.529C326.358 196.838 300.124 198.789 298.456 200.392C297.387 201.418 293.011 202.259 288.733 202.259C282.32 202.259 280.954 202.979 280.954 206.363C280.954 209.555 282.32 210.466 287.095 210.466C290.473 210.466 293.236 209.543 293.236 208.415C293.236 207.183 301.424 206.363 313.706 206.363C325.988 206.363 334.176 205.542 334.176 204.311C334.176 203.073 342.706 202.259 355.669 202.259H377.162V214.57C377.162 221.409 378.071 226.882 379.209 226.882C380.403 226.882 381.256 233.721 381.256 243.297C381.256 259.279 381.387 259.712 386.194 259.712C390.341 259.712 391.348 260.999 392.486 267.749C393.231 272.169 393.207 280.018 392.433 285.191C391.334 292.538 390.183 294.594 387.164 294.594C385.041 294.594 383.303 295.518 383.303 296.646C383.303 297.843 376.481 298.698 366.927 298.698C357.374 298.698 350.552 299.554 350.552 300.75C350.552 302.043 336.945 302.802 313.827 302.802C291.552 302.802 276.605 303.608 275.837 304.854C275.141 305.982 270.021 306.906 264.458 306.906C258.894 306.906 254.344 305.982 254.344 304.854C254.344 303.725 253.423 302.802 252.297 302.802C250.995 302.802 250.25 318.875 250.25 346.918C250.25 389.665 250.377 391.034 254.344 391.034C257.832 391.034 258.438 389.665 258.438 381.8C258.438 376.722 257.516 372.567 256.391 372.567C255.265 372.567 254.344 370.72 254.344 368.463C254.344 366.206 255.265 364.359 256.391 364.359C257.545 364.359 258.438 358.546 258.438 351.022C258.438 343.497 257.545 337.684 256.391 337.684C255.265 337.684 254.344 334.914 254.344 331.529C254.344 328.143 255.265 325.373 256.391 325.373C257.516 325.373 258.438 324.01 258.438 322.346C258.438 320.106 259.969 319.628 264.331 320.502C267.682 321.173 270.824 320.709 271.616 319.424C272.382 318.181 276.238 317.165 280.187 317.165C284.133 317.165 289.202 316.178 291.449 314.974C293.695 313.769 306.3 312.304 319.46 311.72C332.62 311.135 346.611 309.817 350.552 308.792C354.492 307.768 366.764 306.924 377.819 306.918C391.194 306.91 398.785 306.044 400.492 304.333C402.244 302.576 402.817 296.876 402.295 286.379C401.878 277.919 400.887 250.684 400.095 225.856L398.656 180.714L368.463 180.145C348.808 179.776 338.27 180.314 338.27 181.684C338.27 183.033 327.241 183.792 307.686 183.792C289.505 183.792 276.588 184.625 275.837 185.844C275.141 186.972 270.097 187.896 264.628 187.896C259.16 187.896 254.36 188.872 253.963 190.064C253.566 191.259 251.693 191.638 249.799 190.91C246.852 189.775 246.207 185.119 245.306 158.475C244.727 141.365 244.281 123.671 244.313 119.157C244.569 83.3634 243.515 36.1984 242.14 21.9993C240.502 5.07106 236.867 -3.05036 232.762 1.04728ZM141.121 62.0031C140.345 62.7788 139.713 69.669 139.713 77.3144C139.713 84.9598 138.792 91.7844 137.666 92.4821C136.54 93.1797 135.619 101.082 135.619 110.044C135.619 119.538 134.765 126.338 133.572 126.338C132.446 126.338 131.525 129.57 131.525 133.52C131.525 137.47 130.604 140.702 129.478 140.702C128.352 140.702 127.431 143.472 127.431 146.857C127.431 150.243 126.69 153.013 125.785 153.013C124.883 153.013 121.55 157.821 118.385 163.697C115.219 169.574 109.972 176.869 106.724 179.91C103.477 182.95 100.82 186.34 100.82 187.444C100.82 188.546 98.0917 190.584 94.7572 191.967C91.4206 193.352 85.904 197.158 82.4938 200.424C79.0262 203.744 74.0295 206.363 71.1576 206.363C68.3328 206.363 66.0136 207.054 66.0054 207.902C65.9972 208.749 63.9236 210.44 61.3997 211.661C51.0113 216.69 36.2956 225.568 35.659 227.194C35.2823 228.15 32.6847 228.934 29.8824 228.934C25.2787 228.934 18.9413 233.009 18.9413 235.97C18.9413 236.614 24.4681 237.141 31.2231 237.141C38.0457 237.141 43.505 236.23 43.505 235.089C43.505 233.961 45.8365 233.037 48.6859 233.037C51.7789 233.037 54.3744 231.589 55.1236 229.447C56.9557 224.212 64.2982 218.773 69.604 218.719C72.1381 218.695 74.2097 217.751 74.2097 216.622C74.2097 215.494 75.8493 214.57 77.8513 214.57C79.8553 214.57 82.8213 212.724 84.4446 210.466C86.0678 208.209 88.1455 206.363 89.0625 206.363C91.7891 206.363 115.149 184.532 115.149 181.986C115.149 180.519 117.425 177.392 125.345 167.976C126.494 166.613 127.431 164.073 127.431 162.333C127.431 160.593 128.352 159.169 129.478 159.169C130.604 159.169 131.525 156.861 131.525 154.039C131.525 151.218 132.446 148.909 133.572 148.909C134.698 148.909 135.619 146.656 135.619 143.901C135.619 141.145 136.54 138.322 137.666 137.624C138.792 136.926 139.713 134.103 139.713 131.347C139.713 128.591 140.53 126.338 141.529 126.338C145.459 126.338 148.568 62.629 144.703 61.326C143.506 60.9218 141.895 61.2275 141.121 62.0031ZM388.844 213.007C388.355 215.559 387.936 213.955 387.913 209.44C387.891 204.926 388.292 202.837 388.803 204.799C389.315 206.761 389.334 210.454 388.844 213.007ZM390.979 223.974C389.029 225.93 385.117 222.763 386.572 220.406C387.436 219.004 388.58 219.039 390.05 220.513C391.256 221.721 391.673 223.279 390.979 223.974ZM392.889 245.735C392.236 247.37 391.751 246.884 391.653 244.493C391.565 242.33 392.048 241.12 392.728 241.801C393.407 242.482 393.481 244.253 392.889 245.735Z" fill="black"/>
</svg>

Step 6 : Optimizing your SVG

As you can imaging that's a lot of data and has a filesize of 17KB on disk.

Jake Archibald's tool called SVGOMG is my go-to when i need to optimize SVG for web. You only need to copy past the the SVG code and it will do the rest.

The new file on disk is now only 7KB and it's a lot less code.

<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 434 721">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M232.8 1c-2.3 2.3-3.3 2.3-59 2.3-39 0-47.1 1-50.7 6.6-.7 1-.8 20.8-.2 43.9 1 42.2.8 44.1-6.8 68.7-1.7 5.2-3 11.5-3 13.9 0 2.3-1 4.3-2 4.3-1.2 0-2 1.8-2 4.1s-1 4.1-2.1 4.1c-1.2 0-2 1.9-2 4.1 0 2.3-1 4.1-2.1 4.1a2 2 0 00-2 2.1c0 3.4-14 16.4-17.6 16.4-1.9 0-6 2.8-9 6.1-3.2 3.4-7.2 6.2-8.9 6.2-1.7 0-3.6 1.4-4.2 3-.7 1.8-3 3.2-5.3 3.2s-5.3 1.8-6.7 4c-1.4 2.3-4.2 4.2-6.2 4.2s-3.6.9-3.6 2-2.8 2-6.1 2c-3.4 0-6.2 1-6.2 2.1s-2.3 2-5 2c-2.9 0-5.2 1-5.2 2.1s-2.5 2-5.7 2c-10.8 0-11.6 4.3-11 57.1.5 61.7-2.2 57.9 40.1 57.9 18.5 0 29.8-.8 29.8-2 0-1.3 10.5-2.1 27.4-2.1 30.2 0 30-.2 30 13.5 0 3.8.9 7 2 7 1.3 0 2 20.5 2 57.3 0 36.5.8 57.5 2 58 1.3.4 2.2 14 2.2 35.4 0 19.2 1 35.8 2 37 1 1.2 2.2 12.3 2.8 24.7 1.8 38 4.2 61.3 7 66 1.3 2.5 2.4 6.4 2.4 8.7 0 2.4 1 4.3 2 4.3 1.2 0 2.1 1.8 2.1 4 0 2.3 1 4.2 2 4.2 1.2 0 2.1 1 2.1 2.3 0 1.3 1.7 3.8 3.6 5.6 2 1.9 4.9 5.8 6.4 8.8 1.5 3 5 6.6 7.7 8 2.7 1.5 4.9 3.3 4.9 4 0 .9 2.7 2.7 6 4.1 3.5 1.4 6.2 3.4 6.2 4.5 0 3 5.6 7.8 9.1 7.8 1.8 0 3.2 1 3.2 2 0 1.2 1.4 2.1 3 2.1 1.8 0 3.2 1 3.2 2 0 1.2 1.8 2.1 4 2.1 2.3 0 4.1 1 4.1 2 0 1.2 1.9 2.1 4.1 2.1 2.3 0 4.1 1 4.1 2 0 1.2 2.2 2.1 4.9 2.1 2.6 0 7.3 2.3 10.3 5.2 3.1 2.8 8 5 11.1 5 3.1 0 6.7 1.1 8 2.4 1.3 1.3 5.8 1.8 11 1 23.1-2.9 51.4-9.2 54.2-12 .8-.9 3.7-1.6 6.3-1.6 2.6 0 4.8-.9 4.8-2 0-1.2 2.7-2 6.1-2 3.4 0 6.2-1 6.2-2.1 0-1.2 1.8-2 4-2 2.3 0 4.1-1 4.1-2.1 0-1.2 2.3-2 5.2-2 2.8 0 5-1 5-2.1 0-1.2 2-2 4.2-2s4-1 4-2.1c0-1.2 1.9-2 4.2-2 2.2 0 4-1 4-2s2.4-2.3 5.2-3c2.8-.7 5-2.2 5-3.3 0-1.1 1.5-2 3.2-2 5 0 13.3-9.6 13.3-15.3 0-3 .7-5.3 1.7-5.3s3.4-3.2 5.6-7.2c2-3.9 4.5-7.1 5.4-7.1.9 0 1.6-2.8 1.6-6.2 0-3.4.8-6.1 1.8-6.1 2.8 0 4.6-17.7 5.6-56.3.6-22.7.2-35.4-1.2-36.8a44.6 44.6 0 01-2.1-17.1c0-11.2-.9-16-3.5-19-2-2.4-4.3-4.2-5.3-4.2-2.4 0-22 20-22 22.4 0 3.2-46.4 49.4-49.6 49.4-1.4 0-4 1.8-5.6 4.1-1.6 2.3-4.5 4.1-6.4 4.1-2 0-3.8 1-4.3 2.4-.5 1.6-7.2 2.4-19.5 2.5-16.8 0-19-.4-22.6-4.4-2.2-2.6-5-4.6-6.4-4.6-4.4 0-8.2-5.5-10.8-15.7a40 40 0 00-5.2-12.7c-1.4-1.5-2.6-6.7-2.6-11.6 0-5-.9-9.6-2-10.3-1.1-.7-2-7.2-2-14.5 0-7.4-1-13.2-2.1-13.2-1.3 0-2-17-2-47.2 0-30-.8-47.2-2.1-47.2-1.1 0-2 3.3-2 7.2 0 4-1 7.2-2.1 7.2-3.2 0-2.7 65 .5 66.4 2 .7 1.8 1.6-.5 3.4-2.3 1.8-2.4 2.6-.5 3.4 1.6.6 2.5 5.2 2.5 12.1 0 6.1.9 11.1 2 11.1 1 0 2.3 6.3 2.8 13.9 1.6 22.6 3.5 29.8 11.3 44.6 3.8 7.4 11.5 15.4 14.7 15.4 1.3 0 3.6 1.3 5.2 3 6.6 6.5 34.3 5.7 42.8-1.4 1-.9 3.6-1.6 5.6-1.6 2 0 3.7-1 3.7-2 0-1.2 1.8-2 4-2 2.3 0 4.2-1 4.2-2.1 0-1.2 1.3-2 3-2s3-1 3-2.1c0-1.2 1.5-2.1 3.3-2.1 3 0 13.2-8.7 13.2-11.3 0-1.6 9.7-11.3 11.3-11.3.7 0 5-4.2 9.8-9.4a954 954 0 0113.2-14.3c2.5-2.6 4.6-6.2 4.6-8 0-5.7 3-3.3 5.8 4.5 3.8 10.5 5.5 73.5 2.4 89.8l-3.5 19c-.6 3.7-2 6.7-3 6.7s-1.7 1.8-1.7 4c0 2.3-1 4.2-2 4.2-1.2 0-2.1 1.4-2.1 3 0 1.7-1 3.1-2 3.1-1.2 0-2.1 1.4-2.1 3 0 3.3-9.3 13.4-12.4 13.4-1 0-2 1-2 2 0 1.2-1.1 2.1-2.5 2.1s-5.2 2.4-8.5 5.2a21.7 21.7 0 01-11.7 5.1c-3.1 0-6.2 1-7 2-.6 1.2-4 2.1-7.2 2.1-3.3 0-6 1-6 2 0 1.2-3.2 2.1-7 2.1-4 0-7.7 1-8.4 2-.7 1.2-4.4 2.1-8.3 2.1-3.9 0-7 1-7 2 0 1.3-8.6 2.1-21.5 2.1-13 0-21.5-.8-21.5-2s-6.5-2-15.4-2-15.3-1-15.3-2.1c0-1.2-1.4-2-3.1-2-1.7 0-3-1-3-2.1 0-1.2-2-2-4.2-2s-4-.8-4-1.8c0-.9-3-3.2-6.7-5-9.8-5.1-13.9-8-21-14.8-3.7-3.4-8.5-7.6-11-9.2-2.4-1.7-4.4-4.7-4.4-6.7s-.9-3.6-2-3.6-2-1.8-2-4-1.4-5.3-3.1-7c-1.7-1.7-3-4.5-3-6.2 0-1.7-1-3.7-2.1-4.4-1.2-.7-2-5.8-2-11.4 0-5.6-1-10.1-2.1-10.1-1.2 0-2-6.5-2-15.4s-1-15.4-2.1-15.4c-1.2 0-2-7.9-2-19.5s-.9-19.5-2.1-19.5c-1.3 0-2-12.5-2-33.4 0-18.4-.9-34.4-2-35.4-1-1.1-2.3-28.4-3-60.7-1-57.1-2.7-71.4-7.7-68.3-1.7 1-2 15-.9 54 2.2 79.2 4.7 129.5 7 138.7 1 4.5 2 15.3 2.3 24 .2 8.6 1.2 21.1 2.3 27.7 1 6.5 2 15.4 2 19.6 0 4.2.9 7.7 2 7.7s2 5 2 11.3c0 6.2 1 11.3 2 11.3 1.2 0 2.1 1.8 2.1 4 0 2.3 1 4.2 2 4.2 1.2 0 2.1 1.7 2.1 3.9s1 4.3 2.3 4.7c1.2.4 1.8 3 1.2 5.8l-1 5-1.4-4.6c-.9-2.5-2.4-4.6-3.4-4.6s-1.8-1.4-1.8-3c0-1.7-.9-3.1-2-3.1s-2-1.9-2-4.1c0-2.3-.8-4.1-1.6-4.1-1.6 0-5.2-7.8-7.6-16.5-2.1-7.6-4.9-48.2-7-104-1.1-27.3-3-51.5-4.2-53.7-1.4-2.6-2.2-25.7-2.2-64.8 0-39-.7-60.6-2-60.6-1.2 0-2-1.9-2-4.1 0-2.3-1-4.1-2.1-4.1-1.2 0-2-2-2-4.3 0-4-.8-4.2-17-3-9.3.7-29 1.7-44 2.3-16.8.7-27 2-27 3.2 0 2.1-3.9 1.9-26.2-1.5l-8.7-1.3V273c0-46 .2-48 4.1-49.2 2.3-.7 4-2.2 4-3.2s2.4-2 5.2-2c2.8 0 5.1-.8 5.1-2 0-1.1 2.8-2 6.2-2 3.3 0 6.1-1 6.1-2 0-1.2 1.9-2.1 4.1-2.1 2.3 0 4.1-1 4.1-2 0-1.2 1.8-2.1 4-2.1 2.3 0 4.2-1 4.2-2 0-1.2 1.8-2.1 4-2.1 2.3 0 4.2-1 4.2-2 0-1.2 1-2.1 2.1-2.1 1.2 0 3.3-1 4.6-2.1 11.2-9.5 15-12.3 17-12.3 3 0 21.3-17.5 21.3-20.3 0-1.3.7-2.3 1.6-2.3.8 0 2.6-3 3.8-6.6l6-17c2-5.6 4.3-11.8 5.3-13.8s1.7-5.9 1.7-8.7c0-2.9 1-5.2 2-5.2 1.4 0 2.1-17.3 2.1-47.8V14.4l9.7-.5c5.4-.2 13-1.4 17-2.6 3.9-1.2 22-2.6 40.2-3l33.1-1 1.2 18c.6 9.8 1.9 40.1 2.8 67.2 1.1 30 2.8 51.6 4.3 55.3 1.4 3.4 2.4 9.4 2.2 13.4-.2 4-.2 12.9-.1 19.8.1 11.6.5 12.6 4.3 11.6 2.8-.8 4 0 4 2.2 0 4-.6 3.9 8.3 1.2 3.9-1.1 19-3 33.7-4.1 14.6-1.1 29.4-2.4 32.8-2.9 3.3-.4 18.8-1 34.4-1.2 29-.4 33.9.7 31.3 7.4-1 2.8-2.7 3.1-9 1.7-4.2-1-12.2-1.6-17.8-1.4-37.5 1.3-63.8 3.3-65.4 4.9-1.1 1-5.5 1.9-9.8 1.9-6.4 0-7.7.7-7.7 4s1.3 4.2 6.1 4.2c3.4 0 6.1-1 6.1-2 0-1.3 8.2-2.1 20.5-2.1s20.5-.9 20.5-2c0-1.3 8.5-2.1 21.5-2.1h21.5v12.3c0 6.8.9 12.3 2 12.3 1.2 0 2 6.8 2 16.4 0 16 .2 16.4 5 16.4 4.1 0 5.1 1.3 6.3 8a67 67 0 010 17.5c-1.2 7.3-2.3 9.4-5.3 9.4-2.2 0-3.9 1-3.9 2 0 1.2-6.8 2.1-16.4 2.1-9.5 0-16.3.9-16.3 2 0 1.3-13.7 2.1-36.8 2.1-22.2 0-37.2.8-38 2-.7 1.2-5.8 2.1-11.3 2.1-5.6 0-10.2-1-10.2-2 0-1.2-.9-2.1-2-2.1-1.3 0-2 16-2 44.1 0 42.8 0 44.1 4 44.1 3.5 0 4.1-1.3 4.1-9.2 0-5-.9-9.2-2-9.2s-2-1.9-2-4.1c0-2.3.9-4.1 2-4.1s2-5.9 2-13.4-.9-13.3-2-13.3-2-2.8-2-6.2c0-3.4.9-6.1 2-6.1s2-1.4 2-3c0-2.3 1.6-2.8 6-1.9 3.3.7 6.4.2 7.2-1 .8-1.3 4.6-2.3 8.6-2.3s9-1 11.2-2.2c2.3-1.2 14.9-2.7 28-3.3 13.2-.6 27.2-1.9 31.2-3 3.9-1 16.2-1.8 27.2-1.8 13.4 0 21-.9 22.7-2.6 1.7-1.7 2.3-7.4 1.8-18-.4-8.4-1.4-35.6-2.2-60.4l-1.4-45.2-30.2-.6c-19.7-.3-30.2.2-30.2 1.6 0 1.3-11 2-30.6 2-18.2 0-31.1 1-31.9 2.1-.7 1.2-5.7 2.1-11.2 2.1-5.4 0-10.2 1-10.6 2.2-.4 1.2-2.3 1.5-4.2.8-3-1.1-3.6-5.8-4.5-32.4-.6-17.1-1-34.8-1-39.3.3-35.8-.8-83-2.2-97.2-1.6-17-5.2-25-9.3-21zM141 62c-.8.8-1.4 7.7-1.4 15.3 0 7.7-1 14.5-2 15.2-1.2.7-2 8.6-2 17.5 0 9.5-1 16.3-2.1 16.3-1.2 0-2 3.3-2 7.2 0 4-1 7.2-2.1 7.2s-2 2.8-2 6.2c0 3.3-.8 6.1-1.7 6.1-1 0-4.3 4.8-7.4 10.7a77 77 0 01-11.7 16.2c-3.2 3-5.9 6.4-5.9 7.5 0 1.1-2.7 3.2-6 4.6a49.2 49.2 0 00-12.3 8.4c-3.5 3.3-8.5 6-11.3 6-2.9 0-5.2.7-5.2 1.5s-2 2.5-4.6 3.8c-10.4 5-25.1 13.9-25.7 15.5-.4 1-3 1.7-5.8 1.7-4.6 0-11 4.1-11 7 0 .7 5.6 1.2 12.3 1.2 6.8 0 12.3-.9 12.3-2s2.3-2 5.2-2c3 0 5.7-1.5 6.4-3.7 1.9-5.2 9.2-10.6 14.5-10.7 2.5 0 4.6-1 4.6-2 0-1.2 1.6-2.1 3.7-2.1 2 0 5-1.9 6.5-4.1 1.7-2.3 3.7-4.1 4.7-4.1 2.7 0 26-21.9 26-24.4 0-1.5 2.3-4.6 10.2-14 1.2-1.4 2.1-4 2.1-5.7 0-1.7 1-3.1 2-3.1 1.2 0 2.1-2.3 2.1-5.2 0-2.8 1-5 2-5 1.2 0 2.1-2.3 2.1-5.1s1-5.6 2-6.3c1.2-.7 2.1-3.5 2.1-6.3 0-2.7.8-5 1.8-5 4 0 7-63.7 3.2-65-1.2-.4-2.8 0-3.6.7zm247.7 151c-.4 2.6-.9 1-.9-3.6 0-4.5.4-6.6.9-4.6s.5 5.7 0 8.2zm2.2 11c-2 2-5.9-1.2-4.4-3.6.8-1.4 2-1.4 3.4.1 1.3 1.2 1.7 2.8 1 3.5zm1.9 21.7c-.7 1.7-1.1 1.2-1.2-1.2-.1-2.2.3-3.4 1-2.7.7.7.8 2.5.2 4z" fill="#000"/>
</svg>

Step 7: use currentColor for the fill

Because SVG supports fill="currentColor" we have access to the fill color of the svg simply by changing the text color of the parent element. This opens a lot of doors, including animations that can only be limited by your imagination.

Demo (hover on it!)

Technologist, Mauritian, who loves front-end, UX design, Linux, & nature.

© 2020 | Sandeep Ramgolam