Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="controls">
  <button id="unscramble">UNSCRAMBLE</button>
  <button id="draw">DRAW</button>
</div>
<div class="stage">
    <svg id="scrambled" xmlns="http://www.w3.org/2000/svg" width="114" height="540" viewBox="0 0 114 540">
    <!-- T -> TWO -->
    <path d="M 4.467567567567562 310.18898749495764L 24.135135135135133 311.3104354354354L 26.8609203798393 312.0579985390796L 27.75993640699523 313.21303656597775L 27.865486175831013 315.65520065520064L 26.834066624764297 317.48271527341296L 24.135135135135133 318.6811108629291L 19 317.9134404674945L 18.22402402402402 318.1227331227331L 17.917995444191348 318.8918918918919L 18.078275744098534 329.16216216216213L 20.79427662957075 361L 21.121034077555812 369.2162162162162L 21.821303656597777 375.3783783783784L 21.991569551202566 388.7297297297297L 21.627772600186407 390.3304753028891L 20.716978516978518 391.47373527373526L 18.88108108108109 392.5108242570929L 16.945945945945944 392.62505599522166L 15.220540540540533 391.48216216216207L 14.334362934362932 390.31428571428563L 14.239590942293649 376.40540540540536L 13.307335907335904 365.7135941912061L 12.631852191174218 349.7027027027027L 12.254930606281945 348.30285079600145L 11.577395577395585 330.18918918918916L 11.213389860448682 328.8461538461538L 10.929214929214943 318.8918918918919L 10.603923720674997 318.00062131096615L 3.5945945945945943 316.7253539253539L 1.068868868868873 315.25022522522517L 0.5260940227532634 313.7567567567567L 0.8095933771609417 311.97486486486486L 1.8363689776733305 310.99475203358696L 4.467567567567562 310.18898749495764" stroke="#000000" stroke-width="4" fill="#ffffff"></path>
    <!-- W -> TWO -->
    <path d="M 69.96621621621621 309.1391469594594L 71.5184275184275 309.1655655655656L 74.09225426543861 310.01585384266946L 74.7565867754547 311.7027027027027L 74.82327072835548 316.8378378378378L 73.63490347490348 321.97297297297297L 73.15876355397315 326.08108108108104L 73.12174870795559 338.40540540540536L 72.11241916763389 353.8108108108108L 69.40863251311013 376.40540540540536L 68.98420498420498 389.7567567567567L 67.77184160905091 394.36106893410266L 65.9595341197551 396.6314496314496L 62.13513513513513 396.8451629199293L 60.494475607683164 395.50552439231683L 59.87913756453083 392.8378378378378L 59.87509543441746 386.6756756756757L 59.03285395487229 375.3783783783784L 54.59021591423826 343.63251311012505L 54.26726726726727 343.63251311012505L 53.6428861293726 355.86486486486484L 50.59583721652686 380.5135135135135L 48.44144144144143 389.68736303871435L 46.28859060402684 394.45075276618905L 45.21581581581581 395.432032032032L 42.97313384813384 395.55577124085414L 40.74729729729731 392.8378378378378L 38.67588411033142 386.6756756756757L 36.648937707761235 373.3243243243243L 34.8350114820703 353.7557915057915L 34.20346188885516 342.5135135135135L 32.25335258923047 323L 30.766795366795364 314.22625482625483L 31.648116096391963 313.0535215017974L 33.55465913674869 312.0848522941546L 36.053720387053716 312.1084417751084L 38.11272247857615 314.1575477916941L 39.21136521136521 317.86486486486484L 39.61318391562293 331.2162162162162L 43.262003179650236 358.0845684394072L 44.022652710513995 368.05278716216213L 44.33455598455598 368.05278716216213L 45.601556101556106 362.02702702702703L 48.57779813712016 333.27027027027026L 49.09979209979211 321.125466930345L 49.991803278688515 320.23645384514947L 52.89189189189189 319.1066856330014L 54.455425574828546 319.38241226300926L 56.68092364208867 321.2027027027027L 59.89347747747746 336.35135135135135L 61.74848966613672 349.8683522231909L 63.451325111519296 367.14031052328926L 63.90334176541072 367.14031052328926L 65.19501611703446 353.8108108108108L 65.35188521855187 333.27027027027026L 67.2490701710885 317.86486486486484L 67.10738157512351 311.7027027027027L 67.73643856622579 310.1148169446042L 69.96621621621621 309.1391469594594" stroke="#000000" stroke-width="4" fill="#ffffff"></path>
    <!-- O -> TWO  -->
    <path d="M 91.91891891891892 309.0054423023706L 96.87250887250887 309.99099099099095L 99.1081081081081 310.87275383491595L 102.86843986843988 313.0775060775061L 105.94391165358907 316.1641964545191L 108.0227027027027 319.1589189189189L 111.06726726726727 326.2385585585585L 112.26045557752875 331.2162162162162L 113.22213337597952 338.40540540540536L 113.38997930645263 367.16216216216213L 112.14095107765993 377.4324324324324L 110.21966647498563 384.6216216216216L 106.94872586872586 390.4081853281853L 104.94162162162162 392.5091891891891L 101.16216216216216 394.69095182138665L 96.02702702702702 395.3445445445445L 92.15561655405405 394.55823844148716L 90.21825050857308 393.5114792211566L 87.16816816816818 390.3993993993994L 85.05352150179736 386.52895752895756L 81.9342807853446 377.4324324324324L 81.11583011583011 371.82805219012107L 79.9545658615426 356.8918918918919L 80.3530870319861 350.7297297297297L 80.02141102141103 349.46166574738004L 80.42743583920056 332.2432432432432L 81.81627223078 320.94594594594594L 82.95170846522198 316.8378378378378L 85.06002987912535 312.01023056955256L 87.07331799884992 309.96164736164735L 89.21054925893637 309.0749301025163L 91.91891891891892 309.0054423023706M 92.94594594594594 316.93790713790713L 91.11456589332694 318.0974820974821L 89.94594594594592 319.9189189189189L 88.98108108108106 323L 88.56416895937855 327.10810810810807L 88.58705216844751 339.4324324324324L 87.8834541858932 346.6216216216216L 88.17462207970684 363.05405405405406L 90.06125105275248 377.4324324324324L 91.18892421833597 381.4110458284371L 93.1958252895753 385.51612903225805L 95.30380642422526 388.4216216216216L 97.05405405405405 388.9099336803822L 98.08108108108108 388.6382821177342L 99.81933805463217 387.3827649639168L 102.125 383.5945945945946L 104.04192260442261 377.4324324324324L 105.28877526174823 369.2162162162162L 105.64499634769905 363.05405405405406L 105.24794359576968 345.5945945945946L 104.67284931990814 342.3566066066066L 103.88349366315467 325.14885654885654L 101.97175553932311 321.0460649328574L 98.9835279066048 318.0849420849421L 97.05405405405405 316.9573512131057L 92.94594594594594 316.93790713790713" stroke="#000000" stroke-width="4" fill="#ffffff"></path>
    <!-- E -> ONE -->
    <path d="M 102.18918918918918 156.86798937665986L 110.1447583947584 159.0162442234981L 112.06586826347305 160.09629389868908L 113.0453473607836 161.17086885543262L 113.2444858651755 163.8108108108108L 112.12410369553226 165.52950910093767L 110.36300520704191 166.60360360360357L 108.35135135135134 166.8023803620134L 102.18918918918918 164.93064148485834L 100.5179913641452 165.2142017794192L 100.10910449620125 187.43243243243242L 100.41091091091089 188.19164619164619L 107.32432432432432 188.54485008926923L 110.02546477112952 189.86642712076235L 110.65456580841196 192.56756756756755L 110.09825713564032 194.34553908747458L 109.08494208494209 195.324856876581L 106.29729729729729 195.98209898209893L 101.16216216216216 195.6796365330848L 100.42645530145529 195.94619853498358L 100.49894640403116 211.05405405405403L 100.20211515863689 213.1081081081081L 100.17484684684685 232.6216216216216L 100.50512002685916 233.26948460087993L 110.93197434722858 233.12337528368064L 113.09289529050008 234.04223984463505L 114.110263637871 235.95945945945945L 114.06020503261884 237.3716216216216L 112.97695369788393 239.30127802220824L 109.37837837837837 240.68063982349693L 97.05405405405405 240.68063982349693L 94.35291360724885 239.4308701765349L 93.40883136657786 238.32089836315185L 92.97986825093885 236.7297297297297L 92.68918918918918 222.35135135135133L 92.34573534573535 221.04922779922776L 92.07611693325978 209L 92.34573534573535 197.97779922779924L 92.68918918918918 196.67567567567568L 92.95970077220078 185.37837837837836L 92.34852499558382 163.06388206388203L 93.2545362263672 159.7615427927928L 94.36656416895937 158.04223984463505L 96.02702702702702 156.83440346423768L 102.18918918918918 156.86798937665986" stroke="#000000" stroke-width="4" fill="#ffffff"></path>
    <!-- N -> ONE -->
    <path d="M 47.75675675675675 156.3555845001628L 50.4900614900615 156.969397969398L 52.538506248183666 159.0290613193839L 54.797984425103074 162.78378378378378L 58.86831512363428 172.02702702702703L 63.835803545480964 186.49942900647125L 73.77205777205776 221.19296040226268L 75.02099941668286 222.10486486486485L 76.65078940326465 194.6216216216216L 77.06450976523968 159.33590733590736L 77.86433231260818 157.97244042071628L 79.23374726077428 157.1760673717195L 81.27467685076381 157.0512276982865L 83.1619574119574 158.19091891891892L 84.27642124883505 160.13146155864604L 84.43674349195821 182.2972972972973L 84.03222114622764 184.35135135135135L 83.38155298155299 210.027027027027L 82.39964288612936 225.43243243243242L 81.21045045045044 234.36036036036032L 80.30862290862291 237.54617927279796L 79.37777777777778 238.4647074258725L 76.02656104380243 239.30905714875178L 73.8888888888889 239.35435435435434L 71.74764652292743 237.40783090783088L 70.58903474903475 233.64864864864865L 69.1842751842752 225.43243243243242L 62.99291968024363 206.94594594594594L 50.33626649905719 173.54986020503262L 50.022440622440634 174.08108108108107L 49.87779083431257 230.56756756756755L 50.72691891891891 232.6216216216216L 51.040308880308885 235.70270270270268L 50.37818937818937 237.2971082971083L 49.26061776061777 238.23983983983982L 47.75675675675675 238.7484060260678L 44.98324887387386 238.46315095583387L 42.865799517096356 235.70270270270268L 42.392561657867766 231.59459459459458L 42.370262154045946 198.7297297297297L 42.02420067125949 197.4144144144144L 42.06409266409266 186.82694634933438L 42.41967810507137 185.37837837837836L 42.836415362731145 163.8108108108108L 44.007827499630764 160.03400174367914L 46.729729729729726 156.66863342215453L 47.75675675675675 156.3555845001628" stroke="#000000" stroke-width="4" fill="#ffffff"></path>
    <!-- O -> ONE -->
    <path d="M 13.864864864864865 154.9513882483166L 18.81845481845483 155.93693693693692L 24.814385814385822 159.02345202345202L 27.889857599535016 162.110142400465L 29.968648648648653 165.10486486486485L 33.01321321321321 172.18450450450447L 34.20640152347469 177.16216216216216L 35.16807932192547 184.35135135135135L 35.33592525239858 213.1081081081081L 34.08689702360588 223.37837837837836L 32.16561242093158 230.56756756756755L 28.89467181467181 236.35413127413128L 26.887567567567572 238.45513513513512L 23.108108108108105 240.63689776733253L 17.972972972972972 241.2904904904905L 14.1015625 240.5041843874331L 12.164196454519034 239.45742516710254L 9.114114114114125 236.34534534534532L 6.999467447743316 232.47490347490344L 3.880226731290554 223.37837837837836L 3.061776061776065 217.7739981360671L 1.9005118074885572 202.83783783783784L 2.2990329779320566 196.67567567567568L 1.967356967356971 195.40761169332598L 2.3733817851464862 178.1891891891892L 3.762218176725951 166.89189189189187L 4.897654411167921 162.78378378378378L 7.005975825071296 157.95617651549853L 9.019263944795867 155.9075933075933L 11.156495204882312 155.02087604846224L 13.864864864864865 154.9513882483166M 14.891891891891891 162.88385308385307L 13.060511839272893 164.04342804342804L 11.891891891891879 165.86486486486487L 10.927027027027014 168.94594594594594L 10.510114905324494 173.05405405405403L 10.532998114393461 185.37837837837836L 9.829400131839147 192.56756756756755L 10.120568025652785 209L 12.007196998698426 223.37837837837836L 13.13487016428192 227.35699177438303L 15.141771235521247 231.46207497820401L 17.24975237017121 234.36756756756753L 19 234.85587962632815L 20.027027027027025 234.5842280636801L 21.765284000578113 233.32871090986274L 24.070945945945944 229.54054054054052L 25.987868550368557 223.37837837837836L 27.23472120769417 215.16216216216216L 27.590942293645 209L 27.193889541715627 191.54054054054052L 26.618795265854086 188.30255255255256L 25.82943960910062 171.0948024948025L 23.917701485269063 166.99201087880334L 20.92947385255076 164.03088803088804L 19 162.90329715905165L 14.891891891891891 162.88385308385307" stroke="#000000" stroke-width="4" fill="#ffffff"></path>
    <!-- last T -> TEST -->
    <path d="M 109.37837837837837 3.528571428571426L 110.8088803088803 4.22138314785375L 111.4602225755167 5.648648648648648L 111.13091991073642 8.491312741312736L 108.88785800726097 10.293263412666388L 107.32432432432432 10.603579833131274L 103.21621621621621 9.82678132678132L 101.75099099099097 10.47947947947947L 101.55358155358155 11.81081081081081L 101.93840351979887 13.864864864864865L 102.25616921269095 28.243243243243242L 104.93015093015092 59.05405405405405L 105.62524941048432 80.62162162162161L 104.66047297297297 83.08724165341812L 102.83766458766458 84.3407964177195L 101.16216216216216 84.61425061425062L 98.67471727046195 83.10295027852278L 98.09366159032083 81.64864864864865L 98.0948359073359 68.29729729729729L 97.48366013071895 63.9090909090909L 96.8249940903002 50.83783783783784L 96.47114682249816 49.46294681778552L 95.77104597044175 32.35135135135135L 95.4296060766649 31.044226044226036L 94.670074219297 10.017181467181471L 86.27027027027026 8.216216216216216L 84.14984372127228 6.23497377974991L 84.22806652806652 4.1631274131274L 85.1992277992278 3.037065637065635L 88.27764127764128 2.0422942025995394L 109.37837837837837 3.528571428571426" stroke="#000000" stroke-width="4" fill="#ffffff"></path>
    <!-- E -> TEST -->
    <path d="M 43.648648648648646 2.907686907686915L 50.83783783783784 4.830412830412827L 53.67321867321866 6.889868478103781L 54.248437362443866 8.72972972972973L 53.27621961584226 11.156608663457982L 50.83783783783784 12.744148305349237L 48.78378378378378 12.663081930097643L 42.62162162162162 10.808888888888886L 41.79361179361178 11.019956665526275L 41.492372934995885 11.81081081081081L 41.01073676416142 33.05159705159706L 41.7048582324656 34.16691168155603L 49.41711711711712 34.80865528104791L 51.5037125037125 36.73392357875117L 51.743308525917215 38.51351351351351L 51.2720841647016 39.918297607952766L 49.81081081081081 41.40323164988044L 47.75675675675675 41.89883927814963L 42.62162162162162 41.58015847172473L 41.721462639109696 41.84199584199583L 41.34602428515473 42.62162162162162L 41.334817170111286 67.27027027027027L 40.962162162162166 69.32432432432432L 40.97707834416696 78.26205952788231L 41.86276276276277 79.21096979332273L 51.52842497670085 79.0116873630387L 53.696396396396395 79.88037602820212L 54.92254844772831 81.64864864864865L 54.6172972972973 84.41393264922675L 53.61607761607761 85.44074844074842L 50.83783783783784 86.57300275482092L 38.51351351351351 86.65446375470826L 36.90357925493059 86.33966398831265L 34.67383292383291 84.52084287677506L 33.80519480519481 82.44031531531532L 33.149318414624524 59.05405405405405L 33.75914690200404 20.027027027027025L 33.39095888761814 9.756756756756756L 33.75831901265426 6.881081081081069L 34.701485269052846 4.886319308999724L 37.486486486486484 2.652958197377331L 43.648648648648646 2.907686907686915" stroke="#000000" stroke-width="4" fill="#ffffff"></path>
    <!-- first T -> TEST -->
    <path d="M 4.467567567567562 2.0808793868495354L 24.135135135135133 3.202327327327314L 26.8609203798393 3.949890430971508L 27.75993640699523 5.104928457869632L 27.865486175831013 7.547092547092542L 26.834066624764297 9.37460716530484L 24.135135135135133 10.573002754820928L 19 9.805332359386407L 18.22402402402402 10.014625014625L 17.917995444191348 10.783783783783782L 18.078275744098534 21.054054054054053L 20.79427662957075 52.89189189189189L 21.121034077555812 61.108108108108105L 21.821303656597777 67.27027027027027L 21.991569551202566 80.62162162162161L 21.627772600186407 82.222367194781L 20.716978516978518 83.36562716562716L 18.88108108108109 84.4027161489848L 16.945945945945944 84.51694788711362L 15.220540540540533 83.37405405405406L 14.334362934362932 82.2061776061776L 14.239590942293649 68.29729729729729L 13.307335907335904 57.605486083098015L 12.631852191174218 41.59459459459459L 12.254930606281945 40.19474268789337L 11.577395577395585 22.08108108108108L 11.213389860448682 20.738045738045724L 10.929214929214943 10.783783783783782L 10.603923720674997 9.89251320285804L 3.5945945945945943 8.617245817245818L 1.068868868868873 7.14211711711713L 0.5260940227532634 5.648648648648648L 0.8095933771609417 3.8667567567567427L 1.8363689776733305 2.886643925478891L 4.467567567567562 2.0808793868495354" stroke="#000000" stroke-width="4" fill="#ffffff"></path>
    <!-- S -> TEST -->
    <path d="M 72.30109797297297 0.8807187075343532L 74.97297297297297 2.054054054054054L 77.01900337837837 4.1295045045045145L 77.12187984162505 7.2926051051051175L 76.2106722106722 8.4137214137214L 73.43243243243244 8.948982690555711L 70.35135135135135 8.682110682110673L 68.6172350360832 10.05899613899613L 67.59320144887154 11.975522692503821L 66.50155610155609 15.918918918918918L 66.14814814814815 19L 66.4144144144144 24.135135135135133L 68.37257676524693 30.297297297297295L 78.24849120965624 48.8421375921376L 80.1834234234234 55.295730513121825L 80.694264996704 60.08108108108108L 80.35263835263835 70.35135135135135L 78.38918918918918 76.51351351351352L 74.85815007554137 82.04054054054052L 72.07732732732731 84.38916118190728L 70.10065971483294 85.41618820893432L 65.21621621621621 86.54178316247281L 63.32620120120121 86.41242937853107L 61.38441487172452 85.45662100456619L 59.41323290503617 83.41157693126198L 59.22616572616573 80.62162162162161L 60.43637691745799 78.92286340394448L 62.13513513513513 78.79052161405102L 64.18918918918918 79.43403868985264L 67.27027027027027 79.4597462183669L 70.07339449541283 77.28124163767727L 72.28378378378378 72.4054054054054L 73.50475827940616 66.24324324324324L 73.56970832218357 60.08108108108108L 72.33390352377695 53.91891891891892L 70.26940770557792 48.78378378378378L 63.35966735966734 36.45945945945946L 60.44025993206319 29.123552123552127L 59.26884779516357 24.135135135135133L 59.26683589667016 13.864864864864865L 60.41989412092504 9.91722972972973L 62.460529836767456 5.94377135756445L 64.75178855325915 3.1294555424990325L 66.49358108108109 1.8535392535392523L 69.32432432432432 0.7576914089882522L 72.30109797297297 0.8807187075343532" stroke="#000000" stroke-width="4" fill="#ffffff"></path>
  </svg>
  <svg id="unscrambled" xmlns="http://www.w3.org/2000/svg" width="114" height="540" viewBox="0 0 114 540"></svg>
</div>

              
            
!

CSS

              
                .controls
  padding: 5px 0 25px 5px
button
  color: white
  background: green
  border: none
  font-size: 18px
  padding: 4px 10px
  cursor: pointer
.stage
  padding-left: 20px
  svg
    display: inline-block
              
            
!

JS

              
                let scrambled = document.getElementById('scrambled'),
    unscrambled = document.getElementById('unscrambled'),
    sorted = [],
    textArr = ['test','one','two'];

function drawText() {
  
  let paths = unscrambled.getElementsByTagName('path'),
      tl = new TimelineMax();
  
  // paths = paths.reverse();
  
  tl.set(paths,{drawSVG: "0"});
  tl.staggerFromTo(paths, 0.25, {drawSVG: "0% 0%"}, {drawSVG: "100% 0%"},0.25,0);
  
}

function unScramble() {
  
  let paths = scrambled.getElementsByTagName('path'),
      pathArr = [],
      pCnt = 0;
  
  for( let path of paths ) {
    
    pathArr.push({
      path: path.cloneNode(true),
      data: MorphSVGPlugin.pathDataToBezier(path)
    });
  }
  
  // first sort by y position to be sure all the letters are on the right lines
  sorted = _.sortBy(pathArr, function(item) { 
    return item.data[0].y;
  }, ['asc']);
  
  // now add group elements and sort by x position in each group
  for( let g=0; g<textArr.length; g++ ) {
    let word = textArr[g];
    let group = document.createElementNS("http://www.w3.org/2000/svg", 'g');
    group.className = `group g-${g}`;
    unscrambled.appendChild(group);
    let wordArr = sorted.slice(pCnt,word.length+pCnt);
    wordArr = _.sortBy(wordArr, function(item) { 
      return item.data[0].x;
    }, ['asc']);
    for( let l of wordArr ) {
      group.appendChild(l.path);
      pCnt++;
    }
  }
}

$('button#unscramble').on('click', unScramble);
$('button#draw').on('click', drawText);
              
            
!
999px

Console