<div class="wrapper">
  <h2 class="title">SVG Drawing Animation</h2>
 
<svg xmlns="http://www.w3.org/2000/svg" width="271" height="242" viewBox="0 0 271 242">
  <g fill="none" fill-rule="evenodd" stroke="#f2f2f2">
    <path d="M2.893 48.563l-.978 6.866-.984 6.374.984 8.336L7.31 82.395l1.47 4.903-.984 6.866 2.941 7.352.984 3.433-1.47 4.417.486 11.277 3.925 12.256 7.357 13.732 9.806 5.882 8.33 3.925 10.79.978 9.806-1.962 10.298-2.941 3.919-1.963 9.32 4.417 5.389 2.941 4.903.492 12.747 5.39 11.282-2.449 5.881-2.454 3.433-4.412 2.941-3.925 1.962-4.411 8.336-2.941 3.919-7.358 3.432-6.86 2.455-5.396 3.919-8.828 5.395-5.39 4.411-7.358 1.47-6.374.492-5.882-.978-7.849-2.941-12.748-3.433-8.336-3.924-7.353-6.374-2.454-5.395-2.941-3.432-1.471-2.941-6.374-1.47-1.962-4.903-4.411-.979-7.85-.984-3.92-2.448-7.357-3.433-8.337-2.941-5.39-4.416 2.941-3.919 4.412-3.433 4.417-8.336 11.763-7.357 1.471-7.352 3.925-5.395 1.962-8.822 2.941-12.26 7.845-3.433 2.946-9.806 1.957-6.865 3.925-4.411 2.449-4.903-1.957-14.709-3.925-11.769.492z" class="svg-elem-1"></path>
    <path d="M53.069 158.253l1.976 6.49 3.465 3 1.981-1.002 1.981 2.994 3.963 1.498h4.95l2.472-2.494 4.95 2.494 2.969-1.993 2.477-3.495 2.473-.501 3.465-2.995v-2.994l1.981-.501-3.962-.501-13.36-7.486-2.974 2.494-11.385 3.996-7.422.996zM132.206897 148.699523l4.443201.4952 4.448587-2.965814 4.443202-.489816 5.43417 2.96043 1.481067 3.945447 3.457619 4.941228 2.962134.489817 4.938686 1.975415 5.43417 2.960431 2.46665.495199-1.481067 4.935845 3.953103 4.935846 4.938685 3.45563 4.938686 8.391476 3.947717 6.4160604.495485 5.9208615-7.405336 5.4310448-3.457619 6.4160608h4.443202l1.481067 5.4310448-2.46665 5.4256622.985583 9.3818743 4.443201 6.9112601 7.90082 3.4502475 6.915238.9903987 10.86834-2.470614 2.46665-3.4556301 8.396304-1.9700321 5.924269-1.4802154 7.906206-4.4460288h5.924268l8.891789-5.4256622 7.405336.9850161 6.419753-4.4406462s2.962134-3.9508294 3.457618-6.4160608c.495485-2.4706141.990969-7.4064595.990969-7.4064595l-.990969-10.3668903-2.962134-3.4556301-6.419753-2.9604308-10.372856-2.9604309-4.938686-2.960431.990969-6.91126.490099-3.950829-.985583-8.386093-.990969-6.91126-4.443201-9.381875-2.46665-12.336922-8.396305-15.302736v-7.896276l-.990968-7.896276-3.457619-3.45563-2.46665-4.440646-5.43417-.990399-9.877372-6.91126-3.457618-5.425662-11.358439-8.886675-26.66998-16.782951-10.862955-5.920862L144.06082 47.512h-2.962135l13.33499 5.431045 6.909852 12.342305 4.448587 14.807536.490099 16.287752-1.971166 7.401077-3.953103 5.926244-4.938686 5.425662-13.33499 27.149842-1.481067 2.465231-8.396304 3.950829z" class="svg-elem-2"></path>
    <path d="M228.103 108.907l7.063 6.959 4.538.498 4.537 4.97 4.038 2.482 3.531 2.981.5 1.989-5.544 3.48-3.031 2.487-.5 3.973-2.019 1.989-2.018 2.981v1.49l-2.52-10.931-8.074-14.91-.501-10.438zM11.1724138 122.1243015c.7773783.9160638 2.2356327 5.2107866 4.4230144 7.4147285 2.4715268 2.4787609 4.975221 4.2246708 7.3770518 5.4317197 2.8307292 1.4225932 4.6428248 4.6665369 6.8838187 6.9189763 1.30814 1.314821 6.9964046 2.2201076 8.8460288 2.9637359 3.4151032 1.3740958 4.2192876 3.2223893 7.8702849 3.9552404 2.6484474.5334724 6.7551492-1.2124375 8.8460288-2.4733724 2.337496-1.4064274 5.3665907-2.3332685 7.8649237-2.963736 3.6027462-.9052866 6.3959468-.4041458 6.3959468-4.9413561 0-3.8797998.5307617-5.7119275 3.4365482-7.9050921 2.1391305-1.6111946 4.9698597-1.8644593 7.3770518-2.4733723 2.9969273-.7490169 4.6535472-2.7320257 7.3716906 0 3.0880682 3.1038398 5.4094806 1.3094324 5.4094806-2.4679838 0-3.0014562-.0268061-5.3670564.9864662-7.9050921 1.6887874-4.2462253 3.2167378-2.3709887 1.9622101-7.4147285-.6862374-2.7697459-2.3857472-5.7550363-3.4419094-8.4008442-1.0186336-2.5595902-.723766-6.1861252.9864662-7.9050921 2.0533509-2.0638379 6.288722 1.1854944 7.864924 1.9776202 2.509055 1.2609349 4.347957 5.6149324 4.916247 7.905092.702321 2.8236321 2.321413 5.7927567 4.423015 7.9050921 2.83609 2.8505752 4.154953 4.0091265 7.870285 4.9413562 3.919058.9861157 4.423014.3718141 4.423014-3.4594882s.327035-4.402495 4.423014-5.4317197c3.034456-.7651827 6.803401 1.8321277 9.339262 2.4679837 3.554495.8945094 6.374502-.1185494 9.832495-.9861157 4.208565-1.0561678 6.508533-1.7081897 8.358157-5.4371084 1.404642-2.8182434 1.592285-4.7527547 3.935142-5.9274719 7.532528-3.7881934 1.474339-18.1973387 1.474339-25.202533 0-2.40332-.889965-5.561046-1.474339-7.905092-.793462-3.195446-1.892514-4.871304-4.423014-7.414728-2.391108-2.397932-5.709709-3.432545-8.358157-5.43172-2.074796-1.562697-5.865185-.474198-8.358157-1.97762-2.905786-1.756687-3.645636-4.779698-4.423014-7.905092-.69696-2.807467-1.790651-5.216176-2.460804-7.910481-.203727-.81368-.327035-1.643526-.493233-2.467984" class="svg-elem-3"></path>
    <path d="M8.37931034 88.0906485c-.07430644-.2883988 4.86976686 6.0781392 5.90582126 7.4820424 2.2868352 3.0907637 3.8221283 3.2703327 7.386585 3.9940503 2.6840789.5441485 4.1603223-4.9463102 4.9226007-6.4862506 1.599711-3.2540083-.5851292-5.1694112 2.4586162-7.4874839 2.925646-2.2201261 6.1089635-2.8350139 9.3513308-3.4934337 3.7416059-.7563665 6.602834-2.1765941 9.8452012-3.4934336 3.1403723-1.2678661 6.9195553-2.5030833 9.8452013-3.9886088.4348208-.2176594 3.4409891-6.9759843 3.9402278-7.9826591 1.4332981-2.9057532 1.9701138-4.5980552 1.9701138-7.9881006 0-3.4879922 3.5322478-4.091997 5.9049735-3.4879922 2.0130592.5060582 4.7830286 5.9638681 5.9103417 7.4820425 2.0345318 2.7533916 4.9118643 5.3108898 6.8873464 7.9826591 1.9862183 2.6826523 2.7699693 5.6754693 4.4340982 8.4832757 1.6265518 2.7533917 3.1725813 4.3912788 3.9348597 7.487484.7032286 2.8350139 1.2454125 4.6742359 2.9578549 6.9814258M100.974439 24.1256468c.742982 2.987098-4.1235481 4.8466867-4.8665298 7.8391284-.7005255 2.8107576-1.79377 5.2528037-2.4359184 7.8391283-.5943854 2.4046406-.8544289 4.9214977-1.4594283 7.3528566-.6633765 2.6825101-.9711832 5.4024258-.9711832 8.33074371 0 1.79546497 4.9196001 1.74202852 5.354775 0 .4723241-1.91836881-.4882451-5.10852531-.4882451-7.35285661 0-2.5756372.3714909-5.4184568.9711832-7.8391283.7058326-2.8374759 1.756621-5.113869 2.4359185-7.8391283.7854381-3.1794693 3.5610051-9.036105 4.3782851-9.3139746.721753-.2404641 3.449557-6.4551241 3.895346-7.3475129 1.236534-2.4901389 3.21605-5.1352436 4.86653-7.3528566" class="svg-elem-4"></path>
    <path d="M33.5172414 54.2028865c.9018721-1.2285475 7.1447716 4.2035054 8.9107128 5.5532549 2.2087767 1.6913187 5.0008001 4.6001665 6.437315 6.0656087 2.5544044 2.6058428 4.8711897 5.2777958 6.9341548 8.0819692.275422.3746243.912673 1.3993321.9936794 1.5150249M84.3294512 29.8368837c2.1656222 2.9226743-4.0942112 6.0902655-5.435604 9.4810031-1.2659732 3.2056893-1.8046852 6.1174784-2.4673009 9.4864456-.6410673 3.2329023 2.6289145 5.3174167 4.9399889 6.487575 3.0006258 1.5184844 2.2787517 3.9894232 7.4072899 3.9894232 3.2969173 0 6.157478 2.9390021 9.8799778 1.9974329 3.4693051-.876258 6.1467041-3.5485729 9.8799781-4.4901421 3.560886-.8980284 7.197192.9252414 10.871208 0 3.1784-.8055043 5.753444-2.2042516 8.888748-2.9934281 3.032948-.7674061 4.352792-2.9226743 6.421446-4.4955846.813456-.6150134 3.943372.8000616 4.939989 1.0014377M68.8965517 69.21058c2.615775-1.906873 3.0119401 5.688925 4.9764849 8.2349436 1.7040526 2.2079581 1.3295951 4.6958725 1.9916793 7.2683021.8465994 3.3013727 3.0119401 5.1026016 5.969611 7.2630199 2.5397982 1.8540509 4.6508697 3.0742382 6.9681642 5.329736 2.3932713 2.3294486 4.2167161 5.6836432-.4992766 3.39117-1.8397256-.8979733-4.8679464-5.2293743-6.4688876-6.78234-2.2196099-2.1604183-5.4106383-3.3277836-7.4620138-5.329736-3.2398707-3.1534712-1.0148339-12.1437693-2.9848055-15.983926-.271346-.5176552-.9985531-.6444279-1.4924028-.9666419-.7434879-.4806798-.667511-1.616352-.9985531-2.4245277zM97.6850628 72.9354927c-2.927642-2.0115064 3.4112942 6.3688859 4.7181862 9.7337807.838674 2.1707286.941579 5.3180197.941579 7.7912704 0 3.9274796-2.33594 4.3998386-4.244824 2.4307914-.7820766-.8067255 0-7.1809188 0-8.2742442 0-3.2269022-.6174289-5.164105-1.8883034-7.7859631-.7357694-1.5232252-.3241501-2.2450322.4733622-3.8956352zM130.552703 85.6507907c-1.442946-2.8366456 5.018479-3.9859311 7.2943-6.2270379 2.074234-2.0425938 3.708158-2.3978275 7.299606-2.3978275 3.644498 0 5.405741 1.650792 8.753162 0 2.43497-1.1963017 5.230676-4.3045966 5.840745-6.7024241.610069-2.4082755 1.331542 4.7799829 1.941611 7.1830344.94428 3.7038338-.222808 4.0068273-3.400471 4.790431-3.071564.7574836-4.668353-.0261201-7.299606 1.9172172-2.021184 1.4888471-7.686867-1.1492855-9.241216-1.9172172-2.673693-1.3164543-6.111298.7470356-7.782356 2.3978275-.641899.632107-3.060954.8880843-3.405775.9559966zM13.103379 120.18521c-.7353062.737695 4.5513843-2.132318 9.355027 1.480776 2.5333176 1.906162 2.8016776 5.147712 5.9039183 5.923104 3.9556253.990774 4.894885.635387 8.3674624-1.976163 2.5816225-1.943855 4.787541-3.316939 6.8914828-5.427717 1.7980115-1.80924 6.3869662-1.976163 8.8558775-1.976163 2.6299273 0 8.4748064.985389 2.9519592.985389-4.3742668 0-4.1864148 2.476934-6.3977006 5.433102-1.9590274 2.62232-5.3081593 3.650786-7.8736802 4.937715-3.1881158 1.599238-5.7482695 3.575401-7.8736801 6.418491-1.6638315 2.229241-6.9827252-.646157-8.3674624-1.480776-2.9251232-1.760777-.9016894-5.352332-2.9519592-7.409265-2.8553496-2.859244-5.9307543-3.96848-8.8612447-6.908493zM119.84 113.5576744c-.733264-.7592908-2.35805-5.9202671-3.38673-8.071591-.701613-1.4635605 5.597073-5.1334654 6.768186-6.0523174 2.584888-2.019274 4.858534-3.57637 6.293411-6.558512 2.569062-5.364554-1.471804-.990379-3.386731 1.006886-2.3475 2.448437-4.204399 4.891373-6.773461 7.570899-2.331675 2.4319313-4.837434 1.85421-4.837434 6.0523177 0 .7317802 4.795231 5.1444701 5.322759 6.0523177zM89.3793103 123.004574c0 3.274553-4.7372633-4.56453-6.7063352-7.181039-.7834504-1.049737-9.6259938.250683-10.5347962.475254-2.6219473.658044-6.3668401 0-9.0984705 0-1.8698349 0-7.2756425-.736383-2.3973582.480477 2.5853863.647599 4.8678384 1.357869 7.6621448 1.916684 2.5227102.501367 4.9148454.955731 7.6673678.955731 2.8622054 0 4.3455381.219348 6.7011123-.955731 1.3161966-.658044 5.7557488 3.739363 6.7063352 4.308624zM185.275862 218.673488c2.539014-1.24902 2.37435-5.215573 4.382189-7.191011 2.273427-2.231513 5.136457-2.268095 7.797641-.956363 2.714301 1.337863 5.396732 2.403972 7.792329 2.874315 2.815224.553958 3.548245-4.536191 5.842919-6.229423 2.783354-2.053828 5.423291-3.867259 8.281009-5.27306 2.416844-1.186308 5.561396 1.029527 7.792329.480795.855191-.209041 4.663712-5.069245 5.35955-5.748629 2.363726-2.330807 3.951938-3.835902 7.30896-3.835902 3.59074 0 6.836215.224719 9.74174-1.917952 2.953329-2.179253 3.261411-3.830677 7.303648-3.830677 2.379661 0 .733021.538281 1.94941 1.437157M195.891541 218.674395c3.161485 0 .442712 6.302764-.479171 8.140852-1.296886 2.610921-.359378 4.475119-2.385437 7.185255-2.489604 3.326313-3.619822.151433-2.864608-2.872013.593755-2.386382.859383-4.882423 1.432304-7.185255.677089-2.72058 1.619806-3.655289 4.296912-5.268839zM215.068966 212.162558c1.182905.821357.912053 4.745619 1.520089 6.976466.652256 2.388019-.646729 4.593515 0 6.971395.57487 2.104094 5.842669 4.248748 7.600445 4.649287 1.14974.263645-3.28892-6.504946-3.54319-6.971396-1.260292-2.311968-1.017077-4.781109-1.017077-7.442915 0-3.118115-.934164-3.518653-4.560267-4.182837zM240.654008 201.960668c0-.557631 4.118899 6.607932 4.867307 8.180452 1.576435 3.312331 4.925694 3.301178 5.843954 7.159987.302548 1.293705-4.384292-.301121-4.384292-4.093014 0-1.745386-5.690026-5.464787-6.815292-6.646966-1.671975-1.756539-.684714-2.542799.488323-4.600459zM255.044602 195.104037c-1.993451-2.003913 5.963649 1.326613 7.656412 3.59361 2.566986 3.442476 3.574848 3.699963 3.574848 8.211566 0 4.002229-2.043566 4.819467-2.043566.514972 0-5.496767-9.967255-8.928049-11.743543-10.265857-.874223-.660508 1.7039-1.371393 2.555849-2.054291z" class="svg-elem-5"></path>
    <path d="M223.974754 202.200069c-2.292133-1.655425 3.64245 4.732118 3.64245 7.487528 0 2.602937 2.547445 5.385575 3.642449 7.492974 1.310601 2.51581 3.024028 4.585091 5.202689 2.494028.340416-.321283-3.682165-6.572689-4.158747-7.487529-1.390031-2.668283-2.280786-5.374684-3.642449-7.993957-.573034-1.094541-.272333-1.045532-.521971-1.993044M207.325218 214.974705c-.227233-.455777-1.939406 6.423277-1.939406 8.749861 0 2.109294 3.683286 5.729012 4.845873 7.287134 1.067466 1.425629-2.906467 3.360032-2.906467-1.457427 0-2.209989-4.359701-3.943002-4.359701-7.287134 0-2.342483.924785-5.172541 1.453234-7.292434M187.687872 69.8591469c.090333-.381022-6.376437 4.5287192-7.800508 5.9874893-2.47087 2.5365182-2.098911 5.3615245-1.944814 5.9929325.722663 2.9719719 5.861009-2.7433587 8.767602-1.9976442 2.895965.7402714 5.255247 4.2130152 8.284054 4.9913888 2.885338.7402714 4.872661 2.7433588 7.795195 3.4945165 1.402816.3592494 2.779064-.2122837 3.900254-.5007718M109.862069 117.279442c.478357.119586 4.332087 5.843397 5.912278 7.974198 1.338325 1.804659 1.526443 4.08766 2.467032 5.97929" class="svg-elem-6"></path>
    <path d="M100.552 136.532l3.343-3.355 2.864-1.437 3.343-.956 3.816-.481 3.822.481 1.432.956-3.343 2.874-.952 5.754-.48 4.312-.479 1.437-5.248-5.749-2.869-1.442z" class="svg-elem-7"></path>
    <path d="M92.1724138 158.68617c.4974878.427077 4.8954916.758624 7.7692775 0 .6456757-.174202 1.2913517-.348405 1.9370267-.516988 2.99022-.79234 5.059557-2.686089 7.769278-4.124664 2.672674-1.416097 4.366249-3.416615 4.366249-6.698365 0-2.877149 5.133651 1.876891 7.763985 2.57932 2.307497.612519 5.641724-.067433 7.763985-.516987 2.498024-.533847 5.086019-3.47281 7.282375-4.636033.322838-.174202.645676-.348405.968513-.516988M133.137931 130.302186c1.142633-.601459 7.559365.038983 10.18319-.512354 4.374804-.918895 8.659678-2.405835 13.097962-3.575339 3.274491-.863205 6.78174-3.263471 9.701803-5.106831.618926-.389835 1.296042-.679426 1.941418-1.019139 5.379898-2.834654 10.897335-5.853086 15.039381-10.213663 2.036638-2.14409 5.453958-3.798102 7.760384-5.619186M135.931034 133.09307c3.246339-3.079916 9.145368-.928541 13.734096-.928541 4.749173 0 9.98503-.867654 14.712811-1.862157 3.674191-.776321 7.278856-1.197463 10.787255-1.862156 3.962992-.750952 7.942029-.740804 11.279286-2.32389 1.246123-.593658 3.144723-.796618 4.417587-1.395349M138.724138 138.673977c1.863207-.962501 10.474532 0 14.200945 0 4.676702 0 9.134518-.508908 13.704446-.508908 3.726414 0 8.654035-1.095259 12.241642-2.02457 1.302643-.337428 2.610625-.680388 3.913268-1.017816 4.121477-1.067601 8.504551-.934843 12.732802-2.030102M87.468645 147.051402c.6496158-.152127-5.3150384 3.534422-11.8165652 5.583069-4.8264844 1.521272-9.4060074 3.853889-14.2754416 5.577997-5.2828261 1.871165-9.9375113 2.510099-15.2632872 4.188569-3.151442.988827-6.6035326 1.090245-9.8462429 1.855952-3.3125037.78092-6.8773376.933047-10.3401657.933047-2.8346871 0-5.7821175.461452-8.8583973.461452-4.1929748 0-8.02624495-.496948-11.81656529-1.394499-.81067758-.187624-1.64283006-.309325-2.45887636-.461453M89.3793103 148.917333c-1.2205406-.308276-9.3628312 6.100608-11.7824995 7.934036-2.7408631 2.076802-8.0941114 3.666855-11.2900006 4.959448-3.4260789 1.384535-6.6166149 2.352628-9.8178574 3.969722-3.4635516 1.746894-7.0984072 3.461338-10.8028551 4.959448-3.8757517 1.568419-7.8532152 3.472155-11.7771462 4.461882-3.5063777.886967-6.9324566 1.130343-10.3103562 1.984861-3.8650453.973501-8.5812571.989726-12.762144.989726-.4122001 0-1.91110963.3894-2.45714096.497567M92.1724138 150.767c-.2035121 0-9.7043148 8.14069-11.7822807 9.946719-3.5293286 3.064284-7.8834169 5.48317-11.7876363 7.462751-3.9845531 2.012123-7.6477713 4.289997-11.7876363 5.965862-2.7206357 1.100973-5.2377593 2.652097-7.856639 3.980857-4.664712 2.359227-8.8152882 4.756419-13.2604214 7.457328-4.2844657 2.603285-8.445753 5.271652-12.7677078 7.462751-.6587366.330834-1.3121176.661668-1.9654986.992502-2.833103 1.431807-5.6447836 2.608709-8.3493526 3.980857-2.4207231 1.22029-5.69298382 1.811453-8.34935256 2.483968-.50342472.124741-.98007153.330834-1.47278509.498963" class="svg-elem-8"></path>
    <path d="M89.3793103 143.325302c-.8562061.214435-3.688687 7.242519-6.9142688 8.850777-3.7748462 1.8763-6.7850302 5.18931-10.3714033 7.864378-4.3025707 3.211154-9.1813305 7.028085-13.8231528 9.338615-4.7172114 2.348055-8.454363 5.451992-12.3476779 8.357577-3.8502354 2.87342-7.9858728 5.007041-11.3568482 8.357578-2.7570916 2.744759-7.6412363 3.677548-10.3714032 6.390142-2.3693757 2.364139-7.878174 3.629301-10.8614333 5.409106-3.2955861 1.967435-6.80656995 3.538166-10.37140327 4.422708-.24232251.06433-2.50399924 1.24908-2.96171953 1.474236M136.994267 134.90167c-1.288764.32383 7.117864-.987684 13.351386-.987684 3.780017 0 8.137012-2.169666 11.372404-3.464989 4.993289-1.996956 9.156161-3.124967 13.84748-5.942294.630901-.377803 1.321118-.658456 1.978981-.987684 3.208431-1.608359 5.764391-3.875175 8.902722-5.445754 3.472654-1.737891 7.026193-3.27069 10.380217-4.949213.469132-.232079.992187-.329228 1.482888-.49654M5.5862069 51.2324651c.11367502 2.1946574 1.80797413 5.4113366 4.4658044 7.3962106 3.1829005 2.3721664 5.6025546.6831409 8.439017 4.4377263 2.2085432 2.9262099 2.7173743 2.9638633 6.9504155 2.9638633 3.7566888 0 6.2304738 2.9154518 8.9316088 4.9326001 2.6199385 1.9472205 4.0923007 2.6142242 7.4484204 3.4479789 4.390021 1.0919496.9094001 5.9438638 6.9504155 4.4431054 2.9447243-.7315525 5.7432951-2.3076177 7.9410121-3.9482317.3735037-.2797112-.6603977-.6562456-.9905966-.9843684" class="svg-elem-9"></path>
  </g>
</svg>

  <div class="controls">
    <button class="btn-draw">Draw</button>
    <button class="btn-erase">Erase</button>
  </div>
</div>
/*****************************************
 * Basic styling, scroll down for the
 * SVG stroke animation code
 *****************************************/

body * {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  color: #fff;
}

.wrapper {
  background: #1177C3;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1em;
}

.title {
  margin: 0 0 1em;
  padding: 0;
  font: normal 1.2em sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.controls {
  margin: 1rem 0 0;
}

button {
  font: bold .875em sans-serif;
  background-color: hsl(200,30%,90%);
  color: #454545;
  padding: .4em .6em .3em;
  border: none;
  text-transform: uppercase;
  border-radius: .4em;
  margin: 0 .5em;
  box-shadow: 0px 2px 10px hsla(0,0%,0%,.3);
}

button:hover {
  background-color: #fff;
}

button:active {
  background-color: hsl(200,30%,90%);
  transform: translateY(2px);
  box-shadow: 0px 0px 2px hsla(0,0%,0%,.3);
}

/***************************************************
 * Generated by SVG Artista on 8/14/2019, 7:25:55 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://www.svgartista.net
 ***************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 541.6063842773438px;
  stroke-dasharray: 541.6063842773438px;
  -webkit-transition: stroke-dashoffset 1s ease 0s;
          transition: stroke-dashoffset 1s ease 0s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
}

svg .svg-elem-2 {
  stroke-dashoffset: 691.4946899414062px;
  stroke-dasharray: 691.4946899414062px;
  -webkit-transition: stroke-dashoffset 1s ease .1s;
          transition: stroke-dashoffset 1s ease .1s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
}

svg .svg-elem-3 {
  stroke-dashoffset: 408.0810852050781px;
  stroke-dasharray: 408.0810852050781px;
  -webkit-transition: stroke-dashoffset 1s ease .2s;
          transition: stroke-dashoffset 1s ease .2s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
}

svg .svg-elem-4 {
  stroke-dashoffset: 230.76832580566406px;
  stroke-dasharray: 230.76832580566406px;
  -webkit-transition: stroke-dashoffset 1s ease .30000000000000004s;
          transition: stroke-dashoffset 1s ease .30000000000000004s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
}

svg .svg-elem-5 {
  stroke-dashoffset: 844.267333984375px;
  stroke-dasharray: 844.267333984375px;
  -webkit-transition: stroke-dashoffset 1s ease .4s;
          transition: stroke-dashoffset 1s ease .4s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
}

svg .svg-elem-6 {
  stroke-dashoffset: 151.95425415039062px;
  stroke-dasharray: 151.95425415039062px;
  -webkit-transition: stroke-dashoffset 1s ease .5s;
          transition: stroke-dashoffset 1s ease .5s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
}

svg .svg-elem-7 {
  stroke-dashoffset: 55.696048736572266px;
  stroke-dasharray: 55.696048736572266px;
  -webkit-transition: stroke-dashoffset 1s ease .6000000000000001s;
          transition: stroke-dashoffset 1s ease .6000000000000001s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
}

svg .svg-elem-8 {
  stroke-dashoffset: 513.3313903808594px;
  stroke-dasharray: 513.3313903808594px;
  -webkit-transition: stroke-dashoffset 1s ease .7000000000000001s;
          transition: stroke-dashoffset 1s ease .7000000000000001s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
}

svg .svg-elem-9 {
  stroke-dashoffset: 242.9443359375px;
  stroke-dasharray: 242.9443359375px;
  -webkit-transition: stroke-dashoffset 1s ease .8s;
          transition: stroke-dashoffset 1s ease .8s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 0;
}
var wrapper = document.querySelector('.wrapper svg')
var btnDraw = document.querySelector('.btn-draw')
var btnErase = document.querySelector('.btn-erase')

// We are only adding and removing the 'active' class,
// the entire animation is defined in the CSS code
function draw() {
  wrapper.classList.add('active')
}

function erase() {
  wrapper.classList.remove('active')
}

// Add handlers to our buttons
btnDraw.addEventListener('click', draw, false)
btnErase.addEventListener('click', erase, false)

// Play draw animation once
setTimeout(draw, 300)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.