All
use-svg-maker or creating SVGs with React, A Tutorial
November 2022
SVGs are XML descriptions of vector graphics. React is a highly efficient, supported way to create XML-ish stuff. Indeed while dynamic, it…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDD0DB; fill-opacity:0.5;" d="M 0.1347998660626274 0.5111232671021042 A 0.4610077755265863 0.4610077755265863 0 0 0 -0.3262079094639589 0.9721310426286907 A 0.4610077755265863 0.4610077755265863 0 0 0 0.5958076415892137 0.9721310426286904 A 0.4610077755265863 0.4610077755265863 0 0 0 -0.3262079094639589 0.9721310426286908 A 0.4610077755265863 0.4610077755265863 0 0 0 0.5958076415892137 0.9721310426286903" />
<path style="fill:%23BDCBDB; fill-opacity:0.5;" d="M 0.5120048984947179 -0.056956476004648815 A 0.5556627055110076 0.5556627055110076 0 0 0 -0.04365780701628974 0.49870622950635884 A 0.5556627055110076 0.5556627055110076 0 0 0 1.0676676040057256 0.4987062295063587 A 0.5556627055110076 0.5556627055110076 0 0 0 -0.04365780701628974 0.498706229506359 A 0.5556627055110076 0.5556627055110076 0 0 0 1.0676676040057256 0.4987062295063585" />
<path style="fill:%23BDC6DB; fill-opacity:0.5;" d="M 0.1542946824806195 0.003744657890673242 A 0.43848339696826977 0.43848339696826977 0 0 0 -0.28418871448765026 0.44222805485894306 A 0.43848339696826977 0.43848339696826977 0 0 0 0.5927780794488893 0.4422280548589429 A 0.43848339696826977 0.43848339696826977 0 0 0 -0.28418871448765026 0.4422280548589432 A 0.43848339696826977 0.43848339696826977 0 0 0 0.5927780794488893 0.4422280548589428" />
<path style="fill:%23BDCADB; fill-opacity:0.5;" d="M 0.5476995733104615 0.5842363837455053 A 0.27836802714721176 0.27836802714721176 0 0 0 0.2693315461632497 0.8626044108927171 A 0.27836802714721176 0.27836802714721176 0 0 0 0.8260676004576732 0.862604410892717 A 0.27836802714721176 0.27836802714721176 0 0 0 0.2693315461632497 0.8626044108927172 A 0.27836802714721176 0.27836802714721176 0 0 0 0.8260676004576732 0.862604410892717" />
<path style="fill:%23BDCDDB; fill-opacity:0.5;" d="M 0.30972684323267585 -0.2830741904410431 A 0.466783880217045 0.466783880217045 0 0 0 -0.15705703698436912 0.18370968977600194 A 0.466783880217045 0.466783880217045 0 0 0 0.7765107234497208 0.18370968977600177 A 0.466783880217045 0.466783880217045 0 0 0 -0.15705703698436912 0.18370968977600205 A 0.466783880217045 0.466783880217045 0 0 0 0.7765107234497208 0.18370968977600166" />
<path style="fill:%23BDC4DB; fill-opacity:0.5;" d="M 0.5174836666923632 0.44832635672626375 A 0.4435509930075341 0.4435509930075341 0 0 0 0.07393267368482914 0.8918773497337978 A 0.4435509930075341 0.4435509930075341 0 0 0 0.9610346596998973 0.8918773497337977 A 0.4435509930075341 0.4435509930075341 0 0 0 0.07393267368482914 0.891877349733798 A 0.4435509930075341 0.4435509930075341 0 0 0 0.9610346596998973 0.8918773497337976" />
<path style="fill:%23CABDDB; fill-opacity:0.5;" d="M 0.6805516655671272 0.15563319305121015 A 0.3056775862003217 0.3056775862003217 0 0 0 0.3748740793668055 0.4613107792515319 A 0.3056775862003217 0.3056775862003217 0 0 0 0.9862292517674489 0.4613107792515318 A 0.3056775862003217 0.3056775862003217 0 0 0 0.3748740793668055 0.46131077925153197 A 0.3056775862003217 0.3056775862003217 0 0 0 0.9862292517674489 0.4613107792515317" />
<path style="fill:none; stroke-width:0.01; stroke:%232A7A1F; stroke-opacity:0.48480113844142625; stroke-linecap:round;" d="M -0.2424434790738265 -0.15460857635941322 C 0.01582226683466897 0.06177457394724639, 0.008499433950316663 2.0602123553896265, 1.248824201702348 1.1757777940045662" />
<path style="fill:none; stroke-width:0.01; stroke:%231F217A; stroke-opacity:0.38370570037184104; stroke-linecap:round;" d="M -0.1905305038778954 -0.2003475929263072 C -0.061638073913150404 0.14266760336166995, -0.22794546044562386 2.1357394482941063, 1.1913180110996284 1.2455044768000731" />
<path style="fill:none; stroke-width:0.01; stroke:%231F217A; stroke-opacity:0.24738612686009043; stroke-linecap:round;" d="M -0.18251438586857754 -0.1524800540043601 C 0.4058573369871273 -0.2917933859582128, 0.3231687114936434 1.6452638704977196, 1.2128357545177013 1.193635174829553" />
<path style="fill:none; stroke-width:0.01; stroke:%233F7A1F; stroke-opacity:0.46599684790271667; stroke-linecap:round;" d="M -0.15336382065183848 -0.15377650204664745 C 0.5435686839047776 -0.3852611961182423, 0.42187624803468593 1.5562921143630297, 1.2194939191787846 1.2245195229697263" />
<path style="fill:none; stroke-width:0.01; stroke:%23457A1F; stroke-opacity:0.451864680525074; stroke-linecap:round;" d="M -0.15427188028895744 -0.22710607065619567 C 0.43193087911688766 -0.3489415971088389, 0.31853019721905773 1.604080450046077, 1.232669067219407 1.1525857932948358" />
<path style="fill:none; stroke-width:0.01; stroke:%234A7A1F; stroke-opacity:0.36380003009359313; stroke-linecap:round;" d="M -0.21824499234694109 -0.19335652643529808 C 0.10635921452499572 -0.05257107651674353, 0.06217384397382556 1.9278707066906462, 1.2351113018062199 1.1526960304471587" />
<path style="fill:none; stroke-width:0.03; stroke:%23277A1F; stroke-opacity:0.42374952414315975; stroke-linecap:round;" d="M -0.18395681797987753 -0.1764610087009135 C 0.19207029473268122 -0.07911447660761761, 0.03725535670033098 1.8794152040999794, 1.1796509909027824 1.2378868688754605" />
<path style="fill:none; stroke-width:0.01; stroke:%231F317A; stroke-opacity:0.5309298240734778; stroke-linecap:round;" d="M -0.2310520236759646 -0.16127547359636576 C 0.3786818372697296 -0.3307529640384801, 0.3041364689136643 1.5858113912523701, 1.15435492237087 1.1651571608634306" />
<path style="fill:none; stroke-width:0.02; stroke:%233A7A1F; stroke-opacity:0.4236072737954938; stroke-linecap:round;" d="M -0.2035715714001881 -0.20747252618128761 C 0.21803644485855597 -0.16135138080839895, 0.08139858961306748 1.7812710906598492, 1.1601782278807815 1.1827211492109604" />
<path style="fill:none; stroke-width:0.01; stroke:%23367A1F; stroke-opacity:0.37617638437423456; stroke-linecap:round;" d="M -0.1717220580858284 -0.18970624644800255 C 0.41631759939721424 -0.32311992214120344, 0.3044852266731969 1.5878142184111672, 1.1847496873231558 1.1609084924856483" />
<path style="fill:none; stroke-width:0.01; stroke:%23467A1F; stroke-opacity:0.3181254727659; stroke-linecap:round;" d="M -0.2391912714234202 -0.1632816080794467 C 0.6238454906541232 -0.6044784853944778, 0.5914677524050674 1.4071862106051802, 1.2453680374295089 1.1946310642097673" />
<path style="fill:none; stroke-width:0.01; stroke:%231F3D7A; stroke-opacity:0.25765072551579304; stroke-linecap:round;" d="M -0.1989959003449831 -0.24810007005509863 C 0.3720471040733507 -0.31990754763449436, 0.1752735531517528 1.6599632548946395, 1.1527715557857934 1.2118084783120173" />
<path style="fill:none; stroke-width:0.02; stroke:%23467A1F; stroke-opacity:0.3170654799619975; stroke-linecap:round;" d="M -0.21879513795652858 -0.22096300788737275 C 0.3288809140574762 -0.29453608314817914, 0.22212237101118973 1.711369351681548, 1.2121402858019006 1.188816341169098" />
<path style="fill:none; stroke-width:0.03; stroke:%231F207A; stroke-opacity:0.5240764789431; stroke-linecap:round;" d="M -0.2318751006400423 -0.24323028711252928 C 0.397872929661926 -0.396425134870394, 0.27020634714728164 1.5871166087246125, 1.1684564330884497 1.167375327692862" />
<path style="fill:none; stroke-width:0.02; stroke:%231F4B7A; stroke-opacity:0.32696320684685415; stroke-linecap:round;" d="M -0.23535217952674053 -0.21256311948409568 C 0.5742145829406785 -0.5718663334936827, 0.5089873415924547 1.4552040418210137, 1.2389622970433147 1.1801557048549474" />
<path style="fill:none; stroke-width:0.03; stroke:%231F327A; stroke-opacity:0.42462722115940893; stroke-linecap:round;" d="M -0.2058206381639435 -0.1681195878159993 C 0.1895616508546516 -0.11009908576065597, 0.09267855528356328 1.8041065932369849, 1.1630112527554683 1.1734723658406419" />
<path style="fill:none; stroke-width:0.03; stroke:%231F417A; stroke-opacity:0.4023455913993396; stroke-linecap:round;" d="M -0.22418336434820038 -0.16398472525531058 C 0.21485370127782588 -0.14785221279107896, 0.17616603139132048 1.8329945454036665, 1.2331209229563513 1.1782204861246974" />
<path style="fill:none; stroke-width:0.03; stroke:%231F387A; stroke-opacity:0.2230343249974608; stroke-linecap:round;" d="M -0.1540187590516011 -0.1976052103353296 C 0.3195550585718283 -0.21599240592707403, 0.2295782756895474 1.7210539844945578, 1.2364914173107573 1.1539590646941789" />
<path style="fill:none; stroke-width:0.01; stroke:%23407A1F; stroke-opacity:0.4613960574325805; stroke-linecap:round;" d="M -0.23252986759315772 -0.19809548548808723 C 0.5656242596216848 -0.5673697570927358, 0.5261012014266421 1.4303586014158942, 1.2368589253306523 1.1559271294443894" />
<path style="fill:none; stroke-width:0.02; stroke:%231F457A; stroke-opacity:0.46027996307075625; stroke-linecap:round;" d="M -0.22306204309515384 -0.1888205868774408 C 0.20007454237002675 -0.15110024760932106, 0.1545942043655687 1.8419263376955755, 1.2388572886232234 1.1665447876342399" />
<path style="fill:none; stroke-width:0.01; stroke:%231F547A; stroke-opacity:0.42105822124428166; stroke-linecap:round;" d="M -0.21083198852864993 -0.243699759870204 C 0.38617420968869487 -0.35583812454402153, 0.26781652183909654 1.6831235556611355, 1.2371609776455115 1.1966785395804282" />
<path style="fill:none; stroke-width:0.01; stroke:%231F527A; stroke-opacity:0.41432563246539017; stroke-linecap:round;" d="M -0.18326623617418789 -0.16463573963427586 C 0.5432028354210245 -0.4543462070319535, 0.469725425324138 1.472417087049406, 1.2104841290594501 1.167758961880593" />
<path style="fill:none; stroke-width:0.02; stroke:%23281F7A; stroke-opacity:0.5060664948485775; stroke-linecap:round;" d="M -0.24864193492699058 -0.21993987991169991 C 0.3397362150058613 -0.34444919793571593, 0.27929259113866906 1.692755699176788, 1.2364311056471329 1.1759165914510592" />
<path style="fill:none; stroke-width:0.03; stroke:%231F4B7A; stroke-opacity:0.25562250094646244; stroke-linecap:round;" d="M -0.16451396441389282 -0.16087990082962358 C 0.4101747312685039 -0.2594761746971258, 0.27693625514274267 1.7145853988669537, 1.2250262797863567 1.2476120222890414" />
<path style="fill:none; stroke-width:0.02; stroke:%231F4C7A; stroke-opacity:0.2501458723649942; stroke-linecap:round;" d="M -0.24013618512254614 -0.1827058597509581 C 0.9410062014480747 -0.9190320363539667, 0.8606020934223324 1.1153539684641096, 1.229593302112954 1.2262251078757542" />
<path style="fill:none; stroke-width:0.02; stroke:%23301F7A; stroke-opacity:0.3391131714944479; stroke-linecap:round;" d="M -0.20693361917226122 -0.2434829153824111 C 0.471116388466696 -0.4505468223940745, 0.3553798877101255 1.5308202896595635, 1.1996791707949819 1.1567495758260016" />
<path style="fill:none; stroke-width:0.01; stroke:%232F7A1F; stroke-opacity:0.4445853101281884; stroke-linecap:round;" d="M -0.22304440483247642 -0.19116868116907168 C 0.31094356614785956 -0.24048442782898038, 0.15401299612395036 1.7417052425075683, 1.1568737608097834 1.2404489176077262" />
<path style="fill:none; stroke-width:0.01; stroke:%23407A1F; stroke-opacity:0.3390248800664217; stroke-linecap:round;" d="M -0.20179706294347033 -0.18538341080942067 C -0.08230268248422168 0.1698114379102068, -0.18221016140908652 2.1489637809891127, 1.2136518145692388 1.2015304209075526" />
<path style="fill:none; stroke-width:0.02; stroke:%233A7A1F; stroke-opacity:0.3993385757170738; stroke-linecap:round;" d="M -0.20887392494730056 -0.24165628265626782 C 0.2835606158942561 -0.24241033092424602, 0.11776104557640332 1.7686497594591415, 1.1867780853428198 1.2157412783488164" />
<path style="fill:none; stroke-width:0.03; stroke:%234A7A1F; stroke-opacity:0.3482492618488239; stroke-linecap:round;" d="M -0.2234132362291933 -0.1555567725953234 C 0.17232323808242722 -0.08167813512400168, 0.07229489650891363 1.9000070528807873, 1.1938517172640744 1.2331267424919874" />
<path style="fill:none; stroke-width:0.02; stroke:%231F377A; stroke-opacity:0.39123969124151037; stroke-linecap:round;" d="M -0.17666975851467573 -0.21656085155662655 C 0.5003794740021947 -0.39422624453815713, 0.342631902894389 1.6338178003250046, 1.2370354551354148 1.2460684634080015" />
<path style="fill:none; stroke-width:0.03; stroke:%231F3C7A; stroke-opacity:0.35591395258906916; stroke-linecap:round;" d="M -0.15684414896077759 -0.15953681407992742 C 0.09367415464129146 0.042550563773614436, -0.024737971871380257 1.9376705815673492, 1.183426237402059 1.1855195434704136" />
<path style="fill:none; stroke-width:0.02; stroke:%23307A1F; stroke-opacity:0.45216489135505256; stroke-linecap:round;" d="M -0.15640447541776964 -0.15030989057590782 C 0.8218568336942211 -0.6567453702566499, 0.6831935833848062 1.2411774880143098, 1.1725383601512986 1.2117655892428227" />
<path style="fill:none; stroke-width:0.01; stroke:%23417A1F; stroke-opacity:0.3138288868151015; stroke-linecap:round;" d="M -0.18357437178130867 -0.2156710631596304 C 0.44132116729014603 -0.3717229031486684, 0.304188569698437 1.5566196363462366, 1.1691568139085589 1.1654258335894692" />
<path style="fill:none; stroke-width:0.01; stroke:%231F447A; stroke-opacity:0.2965050370757806; stroke-linecap:round;" d="M -0.16802745134645716 -0.15210519282213436 C 0.425928442981897 -0.29272551065958297, 0.3072435554936539 1.599573908470085, 1.1699504727164134 1.1912853940426786" />
<path style="fill:none; stroke-width:0.02; stroke:%231F547A; stroke-opacity:0.510607735738321; stroke-linecap:round;" d="M -0.24225713417478256 -0.17342799507592066 C 0.2499012519840526 -0.20466929542556123, 0.19017467845721076 1.7951302556410398, 1.215287925630502 1.1970930396654822" />
<path style="fill:none; stroke-width:0.01; stroke:%231F467A; stroke-opacity:0.3071002106792675; stroke-linecap:round;" d="M -0.20351572036444393 -0.1519910233388226 C 0.4152423014063998 -0.32625646516839213, 0.35634355462466544 1.6391314487581086, 1.2288160283661698 1.195096381456843" />
<path style="fill:none; stroke-width:0.01; stroke:%231F377A; stroke-opacity:0.34663070353283654; stroke-linecap:round;" d="M -0.24907472571376427 -0.21227262841063696 C 0.6509482792869796 -0.6888929291127028, 0.612456532501326 1.3255897139293262, 1.2335408241620767 1.152085486218571" />
<path style="fill:none; stroke-width:0.03; stroke:%23467A1F; stroke-opacity:0.2385848631198488; stroke-linecap:round;" d="M -0.18586365911951616 -0.18076408128117055 C 0.2915126187897945 -0.17715575716887422, 0.1477643487532455 1.81295301714617, 1.2087225807579494 1.246234768854547" />
<path style="fill:none; stroke-width:0.03; stroke:%231F327A; stroke-opacity:0.42669830314348467; stroke-linecap:round;" d="M -0.17801349617382295 -0.16124095053778567 C 0.6761347928665616 -0.5744137170279038, 0.576836520296179 1.3166881789987512, 1.1719206497589896 1.1668420023441943" />
<path style="fill:none; stroke-width:0.03; stroke:%231F557A; stroke-opacity:0.3223766182900798; stroke-linecap:round;" d="M -0.18021155772745964 -0.1586574212316227 C -0.15757235811578038 0.27019959295787754, -0.3101652751889714 2.1901954101623007, 1.156021160548483 1.2284801563115242" />
<path style="fill:none; stroke-width:0.03; stroke:%231F3A7A; stroke-opacity:0.41280409687952935; stroke-linecap:round;" d="M -0.20889502376169672 -0.22609642580511563 C 1.2190509323617642 -1.1974330356866945, 1.1174723888159324 0.8195984967180376, 1.233804092624228 1.1871812053782083" />
</svg>)
SwiftUI for Mini Desktop Apps: A Tutorial
August 2022
A little while ago I wrote about the state of SwiftUI. While I was generally skeptical of the technology as a general purpose/widely used…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBBDBE; fill-opacity:0.5;" d="M 0.46257837942508384 -0.031863446951425844 A 0.5190325042990825 0.5190325042990825 0 0 0 -0.0564541248739987 0.48716905734765675 A 0.5190325042990825 0.5190325042990825 0 0 0 0.9816108837241664 0.4871690573476566 A 0.5190325042990825 0.5190325042990825 0 0 0 -0.0564541248739987 0.48716905734765686 A 0.5190325042990825 0.5190325042990825 0 0 0 0.9816108837241664 0.4871690573476564" />
<path style="fill:%23DBC1BD; fill-opacity:0.5;" d="M 0.8478068291103346 -0.29978330537053777 A 0.5455962063682815 0.5455962063682815 0 0 0 0.302210622742053 0.24581290099774383 A 0.5455962063682815 0.5455962063682815 0 0 0 1.3934030354786162 0.24581290099774364 A 0.5455962063682815 0.5455962063682815 0 0 0 0.302210622742053 0.24581290099774397 A 0.5455962063682815 0.5455962063682815 0 0 0 1.3934030354786162 0.2458129009977435" />
<path style="fill:%23DBCDBD; fill-opacity:0.5;" d="M 0.7649717114510571 -0.09849625599619699 A 0.49241077157757357 0.49241077157757357 0 0 0 0.27256093987348357 0.39391451558137663 A 0.49241077157757357 0.49241077157757357 0 0 0 1.2573824830286306 0.39391451558137647 A 0.49241077157757357 0.49241077157757357 0 0 0 0.27256093987348357 0.39391451558137675 A 0.49241077157757357 0.49241077157757357 0 0 0 1.2573824830286306 0.39391451558137636" />
<path style="fill:%23DBBDCE; fill-opacity:0.5;" d="M 0.28842395890156014 0.0669883525031928 A 0.9000616814412448 0.9000616814412448 0 0 0 -0.6116377225396846 0.9670500339444377 A 0.9000616814412448 0.9000616814412448 0 0 0 1.188485640342805 0.9670500339444373 A 0.9000616814412448 0.9000616814412448 0 0 0 -0.6116377225396846 0.9670500339444379 A 0.9000616814412448 0.9000616814412448 0 0 0 1.188485640342805 0.9670500339444371" />
<path style="fill:%23DBD8BD; fill-opacity:0.5;" d="M 0.22415553779475383 0.25008434825570114 A 0.6374402921279411 0.6374402921279411 0 0 0 -0.41328475433318723 0.8875246403836423 A 0.6374402921279411 0.6374402921279411 0 0 0 0.8615958299226949 0.8875246403836421 A 0.6374402921279411 0.6374402921279411 0 0 0 -0.41328475433318723 0.8875246403836424 A 0.6374402921279411 0.6374402921279411 0 0 0 0.8615958299226949 0.8875246403836419" />
<path style="fill:%23DBD2BD; fill-opacity:0.5;" d="M 0.28472819304405883 -0.20427969661248435 A 0.5377227788908554 0.5377227788908554 0 0 0 -0.25299458584679657 0.3334430822783711 A 0.5377227788908554 0.5377227788908554 0 0 0 0.8224509719349142 0.33344308227837094 A 0.5377227788908554 0.5377227788908554 0 0 0 -0.25299458584679657 0.33344308227837127 A 0.5377227788908554 0.5377227788908554 0 0 0 0.8224509719349142 0.3334430822783708" />
<path style="fill:none; stroke-width:0.01; stroke:%231F0891; stroke-opacity:0.3363699978401685; stroke-linecap:round;" d="M -0.2781507375066805 -0.22970183781942466 C -0.2725513866483483 -0.06524200099985483, 1.7902998768483038 0.545015925831859, 1.2828393876449247 1.25052784089596" />
<path style="fill:none; stroke-width:0.01; stroke:%232F0891; stroke-opacity:0.437417870820742; stroke-linecap:round;" d="M -0.2228967188403894 -0.273521468883679 C -0.11740182516154063 -0.22238837569259523, 1.845870920295642 0.36360323903825836, 1.260383731042889 1.1398805095300757" />
<path style="fill:none; stroke-width:0.01; stroke:%23913408; stroke-opacity:0.6606105631094812; stroke-linecap:round;" d="M -0.25380081264315846 -0.13763909772302121 C -0.3206955414171231 0.07723248576355057, 1.530879510952178 0.6971236482709694, 1.114565810513279 1.2552600416774693" />
<path style="fill:none; stroke-width:0.01; stroke:%23914008; stroke-opacity:0.4787022546938178; stroke-linecap:round;" d="M -0.22966366238972055 -0.29690703220952697 C -0.4521467317227702 0.05423771527390919, 1.4217798407944091 0.7574952587226165, 1.1207723341455174 1.180419807344054" />
<path style="fill:none; stroke-width:0.01; stroke:%23913108; stroke-opacity:0.4534908906978147; stroke-linecap:round;" d="M -0.11946896499424267 -0.2111472052241827 C -0.7456663008583149 0.548624385420283, 1.1266713046359016 1.1852910065604523, 1.2597817822784243 1.2061247769901153" />
<path style="fill:none; stroke-width:0.01; stroke:%23090891; stroke-opacity:0.4534476573351895; stroke-linecap:round;" d="M -0.20962300754610555 -0.16660304747924098 C -0.24861540200681875 0.03700950661470237, 1.6602375505260163 0.5543486792284199, 1.2563350133591595 1.16092340983055" />
<path style="fill:none; stroke-width:0.01; stroke:%2391080C; stroke-opacity:0.4466194309136196; stroke-linecap:round;" d="M -0.18264121132638217 -0.2687480064426788 C -0.12915664874273713 -0.17439225584047485, 1.6910075270030955 0.4770206640470334, 1.1434277942329891 1.1379777704447909" />
<path style="fill:none; stroke-width:0.01; stroke:%23912908; stroke-opacity:0.3719591996780852; stroke-linecap:round;" d="M -0.2109070803557825 -0.1865917738659296 C 0.0742402789874671 -0.34641843931947547, 2.017612982367325 0.14558747188612978, 1.2973091956067944 1.1340334363374691" />
<path style="fill:none; stroke-width:0.01; stroke:%2391080E; stroke-opacity:0.3464188376784608; stroke-linecap:round;" d="M -0.17576723256378268 -0.2832851929321164 C -0.16203276954893042 -0.1392380090065261, 1.81916353648483 0.5903956250125646, 1.2582736427905132 1.2662408025732206" />
<path style="fill:none; stroke-width:0.01; stroke:%23912408; stroke-opacity:0.5103796012192386; stroke-linecap:round;" d="M -0.10204331344548973 -0.25937742029372673 C -0.3991546231055897 0.14055159277397933, 1.3539976088347028 0.831273132362859, 1.146471958557004 1.1519512477300613" />
<path style="fill:none; stroke-width:0.01; stroke:%23230891; stroke-opacity:0.35706885624727674; stroke-linecap:round;" d="M -0.17532242015532895 -0.16706095680085709 C -0.15913266861519937 -0.04086433126055536, 1.588844733293978 0.5052503202167785, 1.1342297612725616 1.113071573158764" />
<path style="fill:none; stroke-width:0.01; stroke:%23090891; stroke-opacity:0.43980261310240115; stroke-linecap:round;" d="M -0.22694269376723772 -0.13070058871883616 C -0.3093828849002117 0.12116803993678577, 1.6041284290714128 0.6405099013916071, 1.2422568282834268 1.2007250690491333" />
<path style="fill:none; stroke-width:0.01; stroke:%2391080F; stroke-opacity:0.3683786822045062; stroke-linecap:round;" d="M -0.24404686402017567 -0.2435830354388352 C -0.33464853031552055 0.018170469535023603, 1.6078814342183718 0.5551406546630038, 1.2430059099281423 1.116723433824998" />
<path style="fill:none; stroke-width:0.01; stroke:%231F0891; stroke-opacity:0.3889513407616614; stroke-linecap:round;" d="M -0.289279404265236 -0.10262122623421908 C -0.29567282225186087 0.0694139220166669, 1.6583292948341275 0.5904269082859201, 1.2152393818000384 1.2486751986165252" />
<path style="fill:none; stroke-width:0.01; stroke:%23912708; stroke-opacity:0.47657339291468204; stroke-linecap:round;" d="M -0.22257688659439606 -0.133365043777287 C 0.029461942942804797 -0.2370652992678426, 1.8894246763854166 0.3552377035051022, 1.16578759172633 1.2387604214139896" />
<path style="fill:none; stroke-width:0.01; stroke:%231E0891; stroke-opacity:0.5232854732244333; stroke-linecap:round;" d="M -0.1873078168460252 -0.228201819799932 C -0.5921698833686124 0.3694607826246106, 1.3102615248917364 0.9039923620955108, 1.2651236071999048 1.1117281153201923" />
<path style="fill:none; stroke-width:0.01; stroke:%23540891; stroke-opacity:0.38844115002242874; stroke-linecap:round;" d="M -0.11101900682484096 -0.2660983953332501 C 0.3823818212131903 -0.5897411786124669, 2.181976805178808 0.050322953188975894, 1.2018745953979841 1.1211775643717112" />
<path style="fill:none; stroke-width:0.01; stroke:%23910B08; stroke-opacity:0.38248774718938594; stroke-linecap:round;" d="M -0.14022230801815297 -0.2686961313414441 C -0.2833923724828813 -0.002561616987948656, 1.5956069282590923 0.7893078346078837, 1.1745060671610836 1.2898881301144691" />
<path style="fill:none; stroke-width:0.01; stroke:%23210891; stroke-opacity:0.34363243800182663; stroke-linecap:round;" d="M -0.26631353588820234 -0.21790895456523796 C -0.948806418575612 0.6163514078893524, 0.9486261681810677 1.2357403471571362, 1.1431408325147776 1.1953608224989896" />
<path style="fill:none; stroke-width:0.01; stroke:%23912008; stroke-opacity:0.5014727287867349; stroke-linecap:round;" d="M -0.16487125032792938 -0.19521921049591717 C -0.049045511700644084 -0.15415537680574737, 1.7738360617381201 0.5791933109945353, 1.1264222929069914 1.2857461887895574" />
<path style="fill:none; stroke-width:0.01; stroke:%232A0891; stroke-opacity:0.39094144102488; stroke-linecap:round;" d="M -0.26143417958109283 -0.10104874978749244 C -0.3143135708389182 0.1326389891606174, 1.5795837502797374 0.5305119303968435, 1.2454327071618283 1.1132420415578432" />
<path style="fill:none; stroke-width:0.01; stroke:%23911F08; stroke-opacity:0.4051574688532242; stroke-linecap:round;" d="M -0.2719810268495766 -0.1100084036990216 C -0.22118410716047587 0.0015477905712164008, 1.768599452699 0.5194748161759875, 1.2658205056254541 1.2547822270045679" />
<path style="fill:none; stroke-width:0.01; stroke:%23911608; stroke-opacity:0.3880856963964377; stroke-linecap:round;" d="M -0.15774539461816844 -0.20575889537314512 C -0.15846407162540121 -0.06117324922348055, 1.645193352902866 0.5738283490093582, 1.1610661612708566 1.17885051340168" />
<path style="fill:none; stroke-width:0.01; stroke:%23450891; stroke-opacity:0.24340091617483153; stroke-linecap:round;" d="M -0.2680127435507175 -0.18803991705951362 C -0.06953727311883173 -0.23405859418334768, 1.8669254509860733 0.3627632075129979, 1.186462953571012 1.2228408685882741" />
<path style="fill:none; stroke-width:0.01; stroke:%23912108; stroke-opacity:0.33591169355311; stroke-linecap:round;" d="M -0.21414736081974028 -0.21909736706789298 C -0.41697622433555676 0.14067177421265098, 1.406142357267435 0.6974011653100125, 1.1575379202292848 1.1046051928945781" />
<path style="fill:none; stroke-width:0.01; stroke:%23914108; stroke-opacity:0.3719829868784965; stroke-linecap:round;" d="M -0.17611882081796737 -0.23605656885131843 C 0.3133100967692236 -0.5652761508927568, 2.2837988189069036 0.07636579778018104, 1.2883273702194744 1.2302065548493768" />
<path style="fill:none; stroke-width:0.01; stroke:%232D0891; stroke-opacity:0.3644913059240042; stroke-linecap:round;" d="M -0.2571503022201903 -0.18364503799638932 C -0.022146454398978332 -0.2872771654481102, 1.9415603485749364 0.19503700538691848, 1.2735837582653746 1.137575838126786" />
<path style="fill:none; stroke-width:0.01; stroke:%23912108; stroke-opacity:0.10166545028908625; stroke-linecap:round;" d="M -0.16637755411132568 -0.2419263528468636 C -0.11382091045091236 -0.14676440864394558, 1.7092263902228035 0.44419016461780014, 1.1897068733834757 1.112238996605998" />
<path style="fill:none; stroke-width:0.01; stroke:%23913208; stroke-opacity:0.34724066375221413; stroke-linecap:round;" d="M -0.2426953045575741 -0.2195534349591468 C -0.4023015560416172 0.09430068361481209, 1.4607105538672145 0.6838030347438613, 1.1496576366935176 1.1514609452145506" />
<path style="fill:none; stroke-width:0.01; stroke:%23915B08; stroke-opacity:0.5007458993080734; stroke-linecap:round;" d="M -0.12841662775482654 -0.13441077959338646 C 0.20358066541022668 -0.33774526641299724, 1.9708349476048794 0.18775214554801584, 1.2076712319972946 1.1361026831200378" />
<path style="fill:none; stroke-width:0.01; stroke:%23340891; stroke-opacity:0.41653740366827097; stroke-linecap:round;" d="M -0.29763011118625804 -0.20066396564735478 C -0.12875901092901754 -0.21193549787976246, 1.8490826322353577 0.4055144026824787, 1.1843502021254044 1.247381715985702" />
<path style="fill:none; stroke-width:0.01; stroke:%23100891; stroke-opacity:0.3281996701271069; stroke-linecap:round;" d="M -0.12093699669054483 -0.2592433328418194 C -0.11881967021296003 -0.12097242009914425, 1.673021574774499 0.5841783320554264, 1.1555002779222512 1.1825057835031225" />
<path style="fill:none; stroke-width:0.01; stroke:%23911D08; stroke-opacity:0.44267329225548285; stroke-linecap:round;" d="M -0.1197190758388357 -0.1292036667393597 C 0.025426634041232576 -0.1363428220974749, 1.8085754846377176 0.377888138586672, 1.235645757479233 1.138486939408051" />
<path style="fill:none; stroke-width:0.01; stroke:%23250891; stroke-opacity:0.38748441564102515; stroke-linecap:round;" d="M -0.2310799777643596 -0.19964881697717654 C -0.4888403813912337 0.21697899681213562, 1.3701153806086173 0.7941748433688636, 1.1632455293407027 1.158558807280247" />
<path style="fill:none; stroke-width:0.01; stroke:%23910813; stroke-opacity:0.3001462435368966; stroke-linecap:round;" d="M -0.2145570184783023 -0.297213895383586 C -0.031740242921196815 -0.30472462647905324, 1.8811995248490094 0.4898966376681037, 1.1291635692148825 1.2792303601361068" />
<path style="fill:none; stroke-width:0.01; stroke:%23320891; stroke-opacity:0.3896401411989216; stroke-linecap:round;" d="M -0.2805692368957808 -0.21126782224340146 C -0.7509711573219133 0.49846908027156567, 1.2303092694944529 0.9941938704709117, 1.2597351134002435 1.1298800837546543" />
<path style="fill:none; stroke-width:0.01; stroke:%231F0891; stroke-opacity:0.4704399928423688; stroke-linecap:round;" d="M -0.26018588744115745 -0.16562349982803054 C 0.11005009486500428 -0.37837120855913464, 2.065882326378328 0.2537711350838536, 1.1955137244805294 1.2855216687556945" />
<path style="fill:none; stroke-width:0.01; stroke:%23910F08; stroke-opacity:0.44829110876315187; stroke-linecap:round;" d="M -0.21330267269798908 -0.23238715757540696 C -0.47027536882454196 0.15182840442101042, 1.452023362406717 0.8822984823943384, 1.1678798588764645 1.291146157249461" />
<path style="fill:none; stroke-width:0.01; stroke:%23911708; stroke-opacity:0.37435642911742406; stroke-linecap:round;" d="M -0.1092537115596939 -0.14390477610170782 C -0.3251861763035081 0.24878792121542123, 1.4795515435953908 0.7301372764689353, 1.2802745195284484 1.1042886121350302" />
</svg>)
On consistency
July 2022
When you talk about software development approaches you often find people advocate consistency, in a unsubstantiated way, the way people…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDC6DB; fill-opacity:0.5;" d="M 0.9671543420066376 -0.4305345554874185 A 0.7381788155832427 0.7381788155832427 0 0 0 0.22897552642339492 0.30764426009582435 A 0.7381788155832427 0.7381788155832427 0 0 0 1.7053331575898802 0.3076442600958241 A 0.7381788155832427 0.7381788155832427 0 0 0 0.22897552642339492 0.3076442600958245 A 0.7381788155832427 0.7381788155832427 0 0 0 1.7053331575898802 0.30764426009582385" />
<path style="fill:%23BDC8DB; fill-opacity:0.5;" d="M 0.7675142138554242 -0.5484164653929421 A 1.1966377406293116 1.1966377406293116 0 0 0 -0.42912352677388743 0.6482212752363696 A 1.1966377406293116 1.1966377406293116 0 0 0 1.964151954484736 0.6482212752363692 A 1.1966377406293116 1.1966377406293116 0 0 0 -0.42912352677388743 0.64822127523637 A 1.1966377406293116 1.1966377406293116 0 0 0 1.964151954484736 0.648221275236369" />
<path style="fill:%23C3BDDB; fill-opacity:0.5;" d="M 0.1722510925742754 -0.8618092015401955 A 0.9653703235438174 0.9653703235438174 0 0 0 -0.793119230969542 0.10356112200362201 A 0.9653703235438174 0.9653703235438174 0 0 0 1.1376214161180926 0.10356112200362165 A 0.9653703235438174 0.9653703235438174 0 0 0 -0.793119230969542 0.10356112200362225 A 0.9653703235438174 0.9653703235438174 0 0 0 1.1376214161180926 0.10356112200362141" />
<path style="fill:%23C2BDDB; fill-opacity:0.5;" d="M 0.48715222613074083 -0.25744000967854863 A 0.3815761086666801 0.3815761086666801 0 0 0 0.1055761174640607 0.12413609898813154 A 0.3815761086666801 0.3815761086666801 0 0 0 0.868728334797421 0.1241360989881314 A 0.3815761086666801 0.3815761086666801 0 0 0 0.1055761174640607 0.12413609898813163 A 0.3815761086666801 0.3815761086666801 0 0 0 0.868728334797421 0.12413609898813131" />
<path style="fill:none; stroke-width:0.02; stroke:%231F5F7A; stroke-opacity:0.34315625244212133; stroke-linecap:round;" d="M 0.48030838023139816 -0.0730106412939742 C 0.5868007973316178 0.205600786610048, 1.7378962153614266 1.2089489651162524, 0.44324223917952643 1.4535391711617023" />
<path style="fill:none; stroke-width:0.05; stroke:%231F4E7A; stroke-opacity:0.37554456165754124; stroke-linecap:round;" d="M 0.5800662704302686 -0.19722060835839894 C -0.8928349868556135 0.09224716392736232, 0.44270261551653867 1.246561382212939, 0.5446043879980353 1.5676715857374788" />
<path style="fill:none; stroke-width:0.02; stroke:%231F447A; stroke-opacity:0.41475406213637506; stroke-linecap:round;" d="M 0.5525003893739172 -0.002933623191170548 C 2.8873972982890765 0.35347129310647807, 4.042614452976852 1.3783693566608728, 0.501482468889115 1.540549414276969" />
<path style="fill:none; stroke-width:0.02; stroke:%231F447A; stroke-opacity:0.5120079913504799; stroke-linecap:round;" d="M 0.5665789313265127 -0.014946235105485026 C -1.8079249269291071 0.050691917127053565, -0.6872492046211781 1.172595921577853, 0.4188520790274079 1.563901270793339" />
<path style="fill:none; stroke-width:0.02; stroke:%231F457A; stroke-opacity:0.35944718939195724; stroke-linecap:round;" d="M 0.5607183507267173 -0.07862959413289879 C 0.14507343761087477 0.18873345364747063, 1.3361859763977764 1.371520252608725, 0.4111183181417434 1.5933014816303828" />
<path style="fill:none; stroke-width:0.02; stroke:%231F3A7A; stroke-opacity:0.44412397209183985; stroke-linecap:round;" d="M 0.48214295679778646 -0.16446145338833862 C -0.4656668806383365 0.11444893140141899, 0.8356776037452035 1.284360722643247, 0.41284284228947843 1.5840775254311956" />
<path style="fill:none; stroke-width:0.05; stroke:%234F7A1F; stroke-opacity:0.45787517149412404; stroke-linecap:round;" d="M 0.5667028583890631 -0.020767013189512795 C 0.9920790667034187 0.2690385764395823, 2.2131725048617508 1.2918330249903693, 0.5593710440298254 1.5720681676116415" />
<path style="fill:none; stroke-width:0.02; stroke:%231F477A; stroke-opacity:0.31985020057135005; stroke-linecap:round;" d="M 0.41946768471523793 -0.10661488049310625 C -3.053229079802237 0.4317020629146082, -1.7901758919892465 1.3308809139034419, 0.5340596018288328 1.4395722536670468" />
<path style="fill:none; stroke-width:0.02; stroke:%231F537A; stroke-opacity:0.28530522566190186; stroke-linecap:round;" d="M 0.5447505480769148 -0.026308262833318954 C 0.9870389074501397 0.23462112340642838, 2.1435371117942594 1.1632246197225666, 0.5686547125940732 1.456668858008559" />
<path style="fill:none; stroke-width:0.02; stroke:%231F427A; stroke-opacity:0.34466902266207233; stroke-linecap:round;" d="M 0.44610569134354816 -0.10871023723937026 C -1.3890598046209441 0.15969700790652852, -0.22029518682594718 1.1369969048083752, 0.4403683460214113 1.414803104731254" />
<path style="fill:none; stroke-width:0.05; stroke:%231F477A; stroke-opacity:0.3892310624480624; stroke-linecap:round;" d="M 0.4129602778282494 -0.19180924817367048 C -0.4981610841374057 0.20312676506301447, 0.8491713490487837 1.0885710502776362, 0.5919407233391545 1.410464844439503" />
<path style="fill:none; stroke-width:0.02; stroke:%233F7A1F; stroke-opacity:0.4114302567178516; stroke-linecap:round;" d="M 0.5456543012694064 -0.08204116648004485 C -1.8309546243125423 0.21370840795408952, -0.5442352296363885 1.2879974150576996, 0.5406019595775081 1.5941802226159352" />
<path style="fill:none; stroke-width:0.02; stroke:%231F597A; stroke-opacity:0.36231094416589016; stroke-linecap:round;" d="M 0.44141840038645375 -0.11412710155751515 C -3.859543985280128 0.4471809044152603, -2.5961348302556804 1.3644286365036327, 0.5423326205664611 1.4438723898372392" />
<path style="fill:none; stroke-width:0.02; stroke:%231F667A; stroke-opacity:0.35289771688957283; stroke-linecap:round;" d="M 0.4897965466881837 -0.13956274438188038 C -0.3506411490877648 0.11031628634926205, 0.8077576641710673 1.146387361810378, 0.4322121138207036 1.4135036151333706" />
<path style="fill:none; stroke-width:0.02; stroke:%231F3D7A; stroke-opacity:0.3812427051129258; stroke-linecap:round;" d="M 0.5900109118932411 -0.03682839800994624 C -1.9253217070854536 0.19179919940937784, -0.7398377245106752 1.220126739205924, 0.5556816002502264 1.5321366431581136" />
<path style="fill:none; stroke-width:0.02; stroke:%23477A1F; stroke-opacity:0.4308032425276127; stroke-linecap:round;" d="M 0.50371891668396 -0.09483268888110306 C -1.6899630183675787 0.13062495175978717, -0.5271004602445868 1.1443613926843081, 0.46617268588740113 1.4474063267373043" />
</svg>)
@FocusState, TextFields, TextEditor in SwiftUI 3.0
November 2021
I've recently been working with SwiftUI on a couple of projects. One major area of improvement in SwiftUI 3.0 (the Autumn 2021 release) is…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23C0BDDB; fill-opacity:0.5;" d="M 0.21463176571239706 -0.25065347422905926 A 0.5818202717193544 0.5818202717193544 0 0 0 -0.3671885060069573 0.33116679749029515 A 0.5818202717193544 0.5818202717193544 0 0 0 0.7964520374317514 0.33116679749029493 A 0.5818202717193544 0.5818202717193544 0 0 0 -0.3671885060069573 0.3311667974902953 A 0.5818202717193544 0.5818202717193544 0 0 0 0.7964520374317514 0.3311667974902948" />
<path style="fill:%23BDC3DB; fill-opacity:0.5;" d="M 0.3953614195658879 -0.21897815085333394 A 0.8547612812116336 0.8547612812116336 0 0 0 -0.45939986164574576 0.6357831303582998 A 0.8547612812116336 0.8547612812116336 0 0 0 1.2501227007775215 0.6357831303582995 A 0.8547612812116336 0.8547612812116336 0 0 0 -0.45939986164574576 0.6357831303583 A 0.8547612812116336 0.8547612812116336 0 0 0 1.2501227007775215 0.6357831303582993" />
<path style="fill:%23BDCBDB; fill-opacity:0.5;" d="M 0.7037373509413164 -1.2123089949689114 A 1.6269042771272555 1.6269042771272555 0 0 0 -0.9231669261859391 0.4145952821583442 A 1.6269042771272555 1.6269042771272555 0 0 0 2.330641628068572 0.41459528215834357 A 1.6269042771272555 1.6269042771272555 0 0 0 -0.9231669261859391 0.41459528215834457 A 1.6269042771272555 1.6269042771272555 0 0 0 2.330641628068572 0.4145952821583432" />
<path style="fill:none; stroke-width:0.05; stroke:%23052F61; stroke-opacity:0.3995462491474195; stroke-linecap:round;" d="M -0.1218947705999148 1.1066075511126452 C -0.11623976515321055 0.7563282552410128, 1.6936307571577298 0.8637056900052417, 1.3288994924143434 0.019245041444623717" />
<path style="fill:none; stroke-width:0.02; stroke:%23196105; stroke-opacity:0.43791338069699937; stroke-linecap:round;" d="M -0.3284741019103735 1.0063725141032214 C -0.6735352240575241 0.2369720161740437, 1.1721943349649782 0.27153751982926166, 1.1026479825396582 -0.15973295217833908" />
<path style="fill:none; stroke-width:0.05; stroke:%23166105; stroke-opacity:0.44080208175109525; stroke-linecap:round;" d="M -0.008764340336477633 1.2786379820211748 C -0.5661292009287587 0.6895473106534119, 1.0526844672294082 0.17873607322212226, 0.8968028446793955 -0.15713145835712347" />
<path style="fill:none; stroke-width:0.02; stroke:%23051461; stroke-opacity:0.41138047218522217; stroke-linecap:round;" d="M 0.07669965849437335 0.8524769779220351 C -0.3489782383162031 0.1046435720408263, 0.9451638093872906 0.1123949971319832, 1.069487508333033 0.022274587273907714" />
<path style="fill:none; stroke-width:0.05; stroke:%23052261; stroke-opacity:0.5449369528978687; stroke-linecap:round;" d="M -0.023621325933477183 1.2020545422918107 C -0.6111559033266574 0.5546440804615205, 0.8652261170023685 0.1904133393918675, 0.8679347274996954 -0.02981221441429935" />
<path style="fill:none; stroke-width:0.05; stroke:%23050761; stroke-opacity:0.46062646954712116; stroke-linecap:round;" d="M -0.16562834822936903 0.9866396525198393 C -0.04528206078189523 0.816479369071844, 1.6852894590125689 0.6592084352302979, 1.0536554432344207 -0.2514875491960419" />
<path style="fill:none; stroke-width:0.02; stroke:%23053761; stroke-opacity:0.43062639902499245; stroke-linecap:round;" d="M -0.21453968354511213 1.221453790915361 C -0.6702387399634768 0.404405587894994, 1.1117942415333224 0.34400614709042926, 1.1066097970353952 0.02401749216969054" />
<path style="fill:none; stroke-width:0.05; stroke:%233A6105; stroke-opacity:0.3390640128022331; stroke-linecap:round;" d="M -0.06898175585325825 0.9373971720562058 C -0.3345421115702764 0.19249634129751353, 1.2720929330881063 0.3788398552100452, 1.2777073379145072 0.041613405386666164" />
<path style="fill:none; stroke-width:0.05; stroke:%232E6105; stroke-opacity:0.30493933632717946; stroke-linecap:round;" d="M 0.0719336801602092 0.988509585969172 C -0.5419553542009515 0.3391787733954038, 0.8578615144090457 -0.014287359977209563, 0.9120046433827493 -0.18567368330221287" />
<path style="fill:none; stroke-width:0.02; stroke:%23052861; stroke-opacity:0.14384730697198234; stroke-linecap:round;" d="M -0.058487154727594054 1.1489422782101428 C -0.3722107635189065 0.5784080234400409, 1.4950109419156605 0.2947060682388948, 1.1834131170649873 -0.2739728322417909" />
<path style="fill:none; stroke-width:0.05; stroke:%23052E61; stroke-opacity:0.39818980952700994; stroke-linecap:round;" d="M -0.3044688744703764 1.0868927808086233 C -1.0974933320310294 -0.17735794526299295, 0.9233557064922445 -0.215341403368599, 1.2134442499286375 -0.24772826142296325" />
<path style="fill:none; stroke-width:0.02; stroke:%23050C61; stroke-opacity:0.38131111264808276; stroke-linecap:round;" d="M -0.0952136227690106 1.1475378195437056 C -0.881665988807796 0.04284680899008192, 0.9816680077947038 -0.10681339615611568, 1.2303209223294227 -0.17055547368319493" />
<path style="fill:none; stroke-width:0.05; stroke:%23196105; stroke-opacity:0.32643048422220805; stroke-linecap:round;" d="M 0.08511172303250517 0.9213463313871274 C -0.3453913223070343 0.3356070234576648, 1.1844569219239478 0.04497739568631362, 1.0650291220116856 -0.2888863413221372" />
<path style="fill:none; stroke-width:0.02; stroke:%23054361; stroke-opacity:0.3953246522441248; stroke-linecap:round;" d="M -0.3275110049118246 1.1288763682948522 C -0.486096789364991 0.5030081766826808, 1.4396303229155856 0.6804033296156127, 1.2569501402818792 0.020103699697703176" />
</svg>)
SwiftUI in late 2021
November 2021
I've been reviewing the state of declarative UI frameworks such as Flutter and React Native, now we get to the third (and final) one…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDC1DB; fill-opacity:0.5;" d="M 0.587062332860008 0.4920412437433727 A 0.47427062551590654 0.47427062551590654 0 0 0 0.11279170734410143 0.9663118692592794 A 0.47427062551590654 0.47427062551590654 0 0 0 1.0613329583759146 0.9663118692592791 A 0.47427062551590654 0.47427062551590654 0 0 0 0.11279170734410143 0.9663118692592795 A 0.47427062551590654 0.47427062551590654 0 0 0 1.0613329583759146 0.966311869259279" />
<path style="fill:%23BDBEDB; fill-opacity:0.5;" d="M 0.1321941065602561 0.21241991865227405 A 0.5659158782371614 0.5659158782371614 0 0 0 -0.4337217716769053 0.7783357968894355 A 0.5659158782371614 0.5659158782371614 0 0 0 0.6981099847974175 0.7783357968894353 A 0.5659158782371614 0.5659158782371614 0 0 0 -0.4337217716769053 0.7783357968894357 A 0.5659158782371614 0.5659158782371614 0 0 0 0.6981099847974175 0.7783357968894352" />
<path style="fill:%23C3BDDB; fill-opacity:0.5;" d="M 0.15399727234277516 0.050429141162397995 A 0.497299019733694 0.497299019733694 0 0 0 -0.34330174739091884 0.5477281608960921 A 0.497299019733694 0.497299019733694 0 0 0 0.6512962920764691 0.5477281608960919 A 0.497299019733694 0.497299019733694 0 0 0 -0.34330174739091884 0.5477281608960922 A 0.497299019733694 0.497299019733694 0 0 0 0.6512962920764691 0.5477281608960918" />
<path style="fill:%23BDC0DB; fill-opacity:0.5;" d="M 0.6934862457288721 0.40761559070536024 A 0.4573369648403883 0.4573369648403883 0 0 0 0.23614928088848375 0.8649525555457487 A 0.4573369648403883 0.4573369648403883 0 0 0 1.1508232105692604 0.8649525555457485 A 0.4573369648403883 0.4573369648403883 0 0 0 0.23614928088848375 0.8649525555457488 A 0.4573369648403883 0.4573369648403883 0 0 0 1.1508232105692604 0.8649525555457483" />
<path style="fill:%23BDD8DB; fill-opacity:0.5;" d="M 0.8679572707569011 0.45637742490720623 A 0.2403931276074018 0.2403931276074018 0 0 0 0.6275641431494993 0.6967705525146081 A 0.2403931276074018 0.2403931276074018 0 0 0 1.1083503983643028 0.696770552514608 A 0.2403931276074018 0.2403931276074018 0 0 0 0.6275641431494993 0.6967705525146082 A 0.2403931276074018 0.2403931276074018 0 0 0 1.1083503983643028 0.696770552514608" />
<path style="fill:%23C2BDDB; fill-opacity:0.5;" d="M 0.29070362756076273 0.12770944927200711 A 0.43310194967206017 0.43310194967206017 0 0 0 -0.14239832211129744 0.5608113989440673 A 0.43310194967206017 0.43310194967206017 0 0 0 0.7238055772328229 0.5608113989440672 A 0.43310194967206017 0.43310194967206017 0 0 0 -0.14239832211129744 0.5608113989440674 A 0.43310194967206017 0.43310194967206017 0 0 0 0.7238055772328229 0.5608113989440671" />
<path style="fill:%23C0BDDB; fill-opacity:0.5;" d="M 0.19282765332497154 0.43072503435905685 A 0.5471003854961644 0.5471003854961644 0 0 0 -0.3542727321711928 0.9778254198552213 A 0.5471003854961644 0.5471003854961644 0 0 0 0.7399280388211359 0.9778254198552211 A 0.5471003854961644 0.5471003854961644 0 0 0 -0.3542727321711928 0.9778254198552214 A 0.5471003854961644 0.5471003854961644 0 0 0 0.7399280388211359 0.977825419855221" />
<path style="fill:%23BDC2DB; fill-opacity:0.5;" d="M 0.5838788927455223 -0.38842715597299293 A 0.691530092840319 0.691530092840319 0 0 0 -0.10765120009479667 0.30310293686732614 A 0.691530092840319 0.691530092840319 0 0 0 1.2754089855858413 0.30310293686732587 A 0.691530092840319 0.691530092840319 0 0 0 -0.10765120009479667 0.3031029368673263 A 0.691530092840319 0.691530092840319 0 0 0 1.2754089855858413 0.3031029368673257" />
<path style="fill:none; stroke-width:0.01; stroke:%2329590D; stroke-opacity:0.40651646480535225; stroke-linecap:round;" d="M -0.13499152366408346 1.1143622003509634 C 0.15521163128568383 1.3780343855660786, 1.504746078888732 0.30906927866291856, 1.0503826569322128 -0.13416400162455266" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1559; stroke-opacity:0.3889143748872759; stroke-linecap:round;" d="M -0.1358647859329076 1.0550971126727995 C -0.18453988893846512 0.9918539511020249, 1.156900538708532 0.038948434145841815, 1.05785634483846 -0.07738741575185704" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1E59; stroke-opacity:0.27541736703505104; stroke-linecap:round;" d="M -0.14086294821013337 1.1341327060826623 C -0.0052789900340701745 1.2635165259463668, 1.3877542189842254 0.2654559490843449, 1.0975705913949367 -0.05032869239987982" />
<path style="fill:none; stroke-width:0.01; stroke:%2321590D; stroke-opacity:0.3219775393790953; stroke-linecap:round;" d="M -0.052499785176237206 1.0898987831193723 C 0.12070354475458056 1.2517027263452944, 1.4372681362338537 0.2646699809957804, 1.1117832104874148 -0.07286562549385017" />
<path style="fill:none; stroke-width:0.01; stroke:%2317590D; stroke-opacity:0.2699414369750216; stroke-linecap:round;" d="M -0.0888267513974008 1.0694272965266507 C 0.2890825127191974 1.445125636003643, 1.5917408471928658 0.491795969171619, 1.0664397430417243 -0.05801029237222262" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3059; stroke-opacity:0.2619753355589592; stroke-linecap:round;" d="M -0.07153653360096834 1.1043497263195934 C 0.002400000027311555 1.164155663488247, 1.2852851845226905 0.16102635931757237, 1.057134325212536 -0.06960295158053023" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3659; stroke-opacity:0.48873691660362056; stroke-linecap:round;" d="M -0.06554129787543395 1.1137391350836932 C -0.2040871419341208 0.9746992494953624, 1.082054388908499 -0.07478892492711003, 1.0598184899139977 -0.10656853662755877" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1D59; stroke-opacity:0.45757078188243033; stroke-linecap:round;" d="M -0.08719873318596784 1.080542105989499 C 0.1535346693955395 1.3081574377843974, 1.5079842570426367 0.2861856859720937, 1.109665850125317 -0.12215283296834195" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3759; stroke-opacity:0.5806636799285199; stroke-linecap:round;" d="M -0.06295859652697877 1.1272392786776086 C -0.05082522963449032 1.127165207310783, 1.244114394473709 0.07935548514236623, 1.0713480341963664 -0.09264690923222697" />
<path style="fill:none; stroke-width:0.01; stroke:%231F590D; stroke-opacity:0.36790386784350976; stroke-linecap:round;" d="M -0.05559078383590047 1.1262867189064074 C -0.08387375033040312 1.08570321856534, 1.2737293836130235 0.07760910397832776, 1.146352095404718 -0.0631136881057798" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4159; stroke-opacity:0.4337025447774546; stroke-linecap:round;" d="M -0.14281006058806453 1.09633591993514 C -0.1261409333734571 1.101421510963478, 1.2544335129780892 0.10715808381326258, 1.0838243784031736 -0.08261001502880948" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3C59; stroke-opacity:0.3907929811583224; stroke-linecap:round;" d="M -0.11200343322718406 1.0684116470823204 C -0.047957851658428474 1.12139464691588, 1.3344224066094 0.10306808909020893, 1.1130267665442652 -0.1346116970260266" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3559; stroke-opacity:0.4556962905054024; stroke-linecap:round;" d="M -0.12213444757120345 1.1289445827194056 C -0.008524425981120243 1.2300784071341428, 1.3190182948275848 0.22642950705495823, 1.0506747897417044 -0.05181757922340139" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1C59; stroke-opacity:0.41074443351869444; stroke-linecap:round;" d="M -0.1024048179227889 1.0966145024631149 C 0.12899786684989356 1.3295451145826587, 1.510165702301045 0.35399236084339836, 1.1274546044709057 -0.06389123477497395" />
<path style="fill:none; stroke-width:0.01; stroke:%232D590D; stroke-opacity:0.23755109734692495; stroke-linecap:round;" d="M -0.13717059198356202 1.060834133135285 C 0.36346483512629624 1.5968327135432248, 1.7426010488781398 0.6563482409562, 1.095620837595147 -0.06466710205566203" />
<path style="fill:none; stroke-width:0.01; stroke:%2330590D; stroke-opacity:0.4594037121294681; stroke-linecap:round;" d="M -0.11165645020210968 1.0941547065664166 C 0.3279268085663476 1.533396072036207, 1.6932687951042078 0.5362955145918958, 1.0994976965066539 -0.08545281069051974" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2959; stroke-opacity:0.4124406613958661; stroke-linecap:round;" d="M -0.10604731717327334 1.1261832070297577 C 0.3812114911367157 1.5693963191057017, 1.7370418499826217 0.4773119355586446, 1.0823009378868873 -0.14611891410776726" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3059; stroke-opacity:0.4632539299807747; stroke-linecap:round;" d="M -0.1479683462929471 1.1284892022679986 C -0.20388276736969835 1.0546480587547342, 1.2385841515581237 0.0654863657764756, 1.1406597149871902 -0.05413051122325492" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2559; stroke-opacity:0.26933079305180396; stroke-linecap:round;" d="M -0.09627398961501016 1.1389962107758205 C -0.09751083004543026 1.1262621649572147, 1.2243091724253747 0.05190948292783304, 1.060903029056846 -0.11095704905966558" />
<path style="fill:none; stroke-width:0.01; stroke:%2321590D; stroke-opacity:0.38091462728775777; stroke-linecap:round;" d="M -0.06720123439624628 1.0968245259639988 C -0.1779370570265265 0.9789177621107702, 1.1438629710251695 -0.05641070510367918, 1.0954569937710952 -0.11449136745805283" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2959; stroke-opacity:0.24515816543018293; stroke-linecap:round;" d="M -0.09268223990047574 1.0815128530616913 C -0.30976186435939035 0.8403884039303624, 1.0501184764282039 -0.12470275227347316, 1.1175769493800467 -0.06563499085621088" />
<path style="fill:none; stroke-width:0.01; stroke:%2315590D; stroke-opacity:0.5871109740825863; stroke-linecap:round;" d="M -0.1382565386476576 1.076463313745737 C -0.43473481547730974 0.7577926665840312, 0.9903445849726923 -0.2771260267661536, 1.1267075612245279 -0.14900550489761882" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1B59; stroke-opacity:0.5630873802460069; stroke-linecap:round;" d="M -0.08044396480899774 1.134658725630037 C 0.02696536965529639 1.2255008340752254, 1.4226803740308696 0.13245534256554947, 1.147255199148596 -0.1442171802992915" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2C59; stroke-opacity:0.4189984870660297; stroke-linecap:round;" d="M -0.14364044121754752 1.1407791566326533 C -0.1602467530430195 1.1129102395707424, 1.20133553910925 0.04388638216517404, 1.0536530022850272 -0.10950351386656466" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1259; stroke-opacity:0.43854064491048667; stroke-linecap:round;" d="M -0.08536027105291477 1.1412261743680885 C 0.09264540398016774 1.2998908032273624, 1.4649258071907512 0.22418916188299576, 1.1215831380083339 -0.11717564283910882" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3259; stroke-opacity:0.5257287707156222; stroke-linecap:round;" d="M -0.11856340099198891 1.1153864646025005 C -0.015725441881100255 1.2020247194852525, 1.3305884974869446 0.14488789765247734, 1.0652897835586606 -0.12097558627122708" />
<path style="fill:none; stroke-width:0.01; stroke:%2337590D; stroke-opacity:0.43828739006631945; stroke-linecap:round;" d="M -0.07884562275859013 1.0691688435763556 C -0.26943943494355355 0.8742713382255092, 1.037257390851495 -0.14652304774273145, 1.0709089843794537 -0.12562909596487715" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2A59; stroke-opacity:0.29129021618884876; stroke-linecap:round;" d="M -0.057251051667503806 1.0789002493006998 C -0.1218052952138512 1.0066628703235692, 1.143370264693508 0.001817678200598527, 1.053645139130024 -0.09425477489307323" />
<path style="fill:none; stroke-width:0.01; stroke:%233A590D; stroke-opacity:0.28144611165145555; stroke-linecap:round;" d="M -0.14368476990949006 1.1460509203955425 C -0.271543458035019 1.0045290356087557, 1.132059751376898 -0.038505641007310576, 1.0988735264213416 -0.08442548584491677" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2859; stroke-opacity:0.4534867622397718; stroke-linecap:round;" d="M -0.05167927973015407 1.1226198750957832 C 0.37710730610008436 1.5037167394450246, 1.6851132194694438 0.4284669517835792, 1.0916951270714546 -0.1262742521809311" />
<path style="fill:none; stroke-width:0.01; stroke:%2316590D; stroke-opacity:0.5268378735503615; stroke-linecap:round;" d="M -0.07190034005273815 1.1176566076780574 C 0.5048726037238355 1.6414445359198397, 1.7921852041921222 0.5973563389897596, 1.0553800229884085 -0.09747008423309836" />
<path style="fill:none; stroke-width:0.01; stroke:%231E590D; stroke-opacity:0.3044444536257758; stroke-linecap:round;" d="M -0.09888540373093066 1.0546009472652011 C 0.15720885715070032 1.311969601670834, 1.4930929267974573 0.36043283420745686, 1.0895277938394292 -0.07574525598901755" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2259; stroke-opacity:0.463141501394833; stroke-linecap:round;" d="M -0.14811265145309072 1.1436933775285971 C -0.42928978025851283 0.8686468583638469, 0.9505349750711157 -0.24139111023938514, 1.0614596138821804 -0.14976538953472088" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2359; stroke-opacity:0.3682690793918285; stroke-linecap:round;" d="M -0.14962921328057355 1.1333987755881365 C -0.05909201167572098 1.2129602539066235, 1.374921415625244 0.1573221157516863, 1.1212590229482344 -0.11384197078840519" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3559; stroke-opacity:0.43783698495452783; stroke-linecap:round;" d="M -0.06547235083527214 1.0841795942106338 C 0.047179540180934176 1.1835072743114758, 1.3684964844729248 0.1759625327411799, 1.1006241045914438 -0.09956190213910848" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1659; stroke-opacity:0.5170561858063231; stroke-linecap:round;" d="M -0.10590625081583697 1.1282797526817556 C -0.13616656699797525 1.0851883241323097, 1.2445904176858797 0.06994467589659203, 1.1179514613574277 -0.07146264316422045" />
<path style="fill:none; stroke-width:0.01; stroke:%2322590D; stroke-opacity:0.6037680236787286; stroke-linecap:round;" d="M -0.13066061209239047 1.0994544835550806 C 0.03570665717171173 1.2558813047986392, 1.4477162630446505 0.2125546788173973, 1.120178987099401 -0.13249595077763726" />
<path style="fill:none; stroke-width:0.01; stroke:%2313590D; stroke-opacity:0.339413778932679; stroke-linecap:round;" d="M -0.13492140045024203 1.0537351760895124 C -0.310570951723801 0.8583689899775095, 1.0649487614085738 -0.13000594236073543, 1.0875388397934527 -0.118668529599671" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2B59; stroke-opacity:0.3063495864655552; stroke-linecap:round;" d="M -0.07392890849440925 1.073108886195051 C -0.1839707704621299 0.9556068093273932, 1.0939954800089289 -0.03917345653349602, 1.0510490412665467 -0.091884730629073" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2659; stroke-opacity:0.41384550370129336; stroke-linecap:round;" d="M -0.13866153661393688 1.1273213717209436 C -0.42025454904359294 0.8327512398851095, 1.0034052046934874 -0.2344217620309531, 1.1203504162522409 -0.12987957203043565" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2059; stroke-opacity:0.39935065106997825; stroke-linecap:round;" d="M -0.09907169205970745 1.0525907806012365 C 0.05293270202118794 1.1951674248654975, 1.3656191110361138 0.22426128040193016, 1.0636451053712006 -0.09366137261009931" />
<path style="fill:none; stroke-width:0.01; stroke:%2323590D; stroke-opacity:0.23586916639756436; stroke-linecap:round;" d="M -0.0964169353611681 1.0816003635214273 C 0.5173511844670423 1.7005395168462214, 1.8964915954024106 0.6950030696986068, 1.12720870454167 -0.10830388178135883" />
<path style="fill:none; stroke-width:0.01; stroke:%2331590D; stroke-opacity:0.42001906908873493; stroke-linecap:round;" d="M -0.07400886320702191 1.092522386516347 C 0.2361463896629905 1.3854689142049512, 1.5755664844300958 0.36139544268530366, 1.1076800340405493 -0.11013467826065877" />
<path style="fill:none; stroke-width:0.01; stroke:%2315590D; stroke-opacity:0.29058623487944435; stroke-linecap:round;" d="M -0.13308650432672364 1.079966409806885 C -0.26934703402733035 0.9215656623548931, 1.1696823927262614 -0.08625218958306174, 1.1495085539161947 -0.1206386169685522" />
<path style="fill:none; stroke-width:0.01; stroke:%2325590D; stroke-opacity:0.3510058358974758; stroke-linecap:round;" d="M -0.12627946545624896 1.1033384931047088 C -0.1507024981079077 1.0659161207118237, 1.2491644758705083 0.041303360904221154, 1.1151767177512577 -0.10837327029939736" />
<path style="fill:none; stroke-width:0.01; stroke:%232A590D; stroke-opacity:0.27915054883437157; stroke-linecap:round;" d="M -0.10121388264103184 1.0583694025536725 C -0.20255948969536336 0.939238504703615, 1.1752594102352691 -0.039076648279148474, 1.124940646897107 -0.10439907365079128" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3C59; stroke-opacity:0.42958266061084094; stroke-linecap:round;" d="M -0.05993816381024278 1.124654221258875 C 0.23351987571450072 1.4046550471696593, 1.5883494459431002 0.3821031497343885, 1.1372208286089345 -0.07866863408136335" />
<path style="fill:none; stroke-width:0.01; stroke:%2310590D; stroke-opacity:0.2945528499579657; stroke-linecap:round;" d="M -0.12551990043314332 1.149336758068892 C 0.07670047005451686 1.3317844100059268, 1.4520387416847023 0.2570435013398965, 1.0845862717682673 -0.10854496696372795" />
</svg>)
Flutter in late 2021
October 2021
It had been some time since I'd used Flutter and I wanted to take another look. I've mostly been working in React and React Native for the…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBBDC3; fill-opacity:0.5;" d="M 0.9574120480311807 0.4645626032138906 A 0.40493146554617215 0.40493146554617215 0 0 0 0.5524805824850085 0.8694940687600627 A 0.40493146554617215 0.40493146554617215 0 0 0 1.362343513577353 0.8694940687600626 A 0.40493146554617215 0.40493146554617215 0 0 0 0.5524805824850085 0.8694940687600629 A 0.40493146554617215 0.40493146554617215 0 0 0 1.362343513577353 0.8694940687600625" />
<path style="fill:%23DBBEBD; fill-opacity:0.5;" d="M 0.15452068435151822 -0.024739530074953442 A 0.4910310776852116 0.4910310776852116 0 0 0 -0.33651039333369337 0.4662915476102582 A 0.4910310776852116 0.4910310776852116 0 0 0 0.6455517620367298 0.46629154761025804 A 0.4910310776852116 0.4910310776852116 0 0 0 -0.33651039333369337 0.4662915476102583 A 0.4910310776852116 0.4910310776852116 0 0 0 0.6455517620367298 0.46629154761025793" />
<path style="fill:%23DBC4BD; fill-opacity:0.5;" d="M 0.16953157100498328 0.4028554203203135 A 0.23823316148905682 0.23823316148905682 0 0 0 -0.06870159048407354 0.6410885818093703 A 0.23823316148905682 0.23823316148905682 0 0 0 0.4077647324940401 0.6410885818093702 A 0.23823316148905682 0.23823316148905682 0 0 0 -0.06870159048407354 0.6410885818093705 A 0.23823316148905682 0.23823316148905682 0 0 0 0.4077647324940401 0.6410885818093702" />
<path style="fill:%23DBBDBD; fill-opacity:0.5;" d="M 0.6327917040512689 -0.4383949555140672 A 0.4558632149069262 0.4558632149069262 0 0 0 0.17692848914434273 0.017468259392859065 A 0.4558632149069262 0.4558632149069262 0 0 0 1.088654918958195 0.017468259392858898 A 0.4558632149069262 0.4558632149069262 0 0 0 0.17692848914434273 0.017468259392859176 A 0.4558632149069262 0.4558632149069262 0 0 0 1.088654918958195 0.017468259392858787" />
<path style="fill:%23DBC9BD; fill-opacity:0.5;" d="M 0.0991678264700071 -0.19573408747803922 A 0.3371039162201698 0.3371039162201698 0 0 0 -0.23793608975016267 0.14136982874213058 A 0.3371039162201698 0.3371039162201698 0 0 0 0.4362717426901769 0.14136982874213047 A 0.3371039162201698 0.3371039162201698 0 0 0 -0.23793608975016267 0.14136982874213067 A 0.3371039162201698 0.3371039162201698 0 0 0 0.4362717426901769 0.1413698287421304" />
<path style="fill:%23DBBDC4; fill-opacity:0.5;" d="M 0.5191873781745262 -0.19767456375210185 A 0.3071026261786087 0.3071026261786087 0 0 0 0.21208475199591753 0.10942806242650686 A 0.3071026261786087 0.3071026261786087 0 0 0 0.8262900043531349 0.10942806242650675 A 0.3071026261786087 0.3071026261786087 0 0 0 0.21208475199591753 0.10942806242650693 A 0.3071026261786087 0.3071026261786087 0 0 0 0.8262900043531349 0.10942806242650667" />
<path style="fill:%23DBBDC5; fill-opacity:0.5;" d="M 0.5069663034085357 0.16803669933914833 A 0.211908751986555 0.211908751986555 0 0 0 0.29505755142198065 0.37994545132570334 A 0.211908751986555 0.211908751986555 0 0 0 0.7188750553950907 0.3799454513257033 A 0.211908751986555 0.211908751986555 0 0 0 0.29505755142198065 0.3799454513257034 A 0.211908751986555 0.211908751986555 0 0 0 0.7188750553950907 0.37994545132570323" />
<path style="fill:%23DBC6BD; fill-opacity:0.5;" d="M 0.9845500788165527 0.26882191968841607 A 0.43851661608791903 0.43851661608791903 0 0 0 0.5460334627286336 0.7073385357763351 A 0.43851661608791903 0.43851661608791903 0 0 0 1.4230666949044717 0.707338535776335 A 0.43851661608791903 0.43851661608791903 0 0 0 0.5460334627286336 0.7073385357763352 A 0.43851661608791903 0.43851661608791903 0 0 0 1.4230666949044717 0.7073385357763349" />
<path style="fill:%23DBC1BD; fill-opacity:0.5;" d="M 0.904763402369064 -0.13586668249393802 A 0.3879875409135774 0.3879875409135774 0 0 0 0.5167758614554867 0.25212085841963944 A 0.3879875409135774 0.3879875409135774 0 0 0 1.2927509432826414 0.25212085841963927 A 0.3879875409135774 0.3879875409135774 0 0 0 0.5167758614554867 0.25212085841963955 A 0.3879875409135774 0.3879875409135774 0 0 0 1.2927509432826414 0.2521208584196392" />
<path style="fill:%23DBD8BD; fill-opacity:0.5;" d="M 0.17388899953600334 -0.016882297893202308 A 0.21239879909220497 0.21239879909220497 0 0 0 -0.038509799556201624 0.19551650119900268 A 0.21239879909220497 0.21239879909220497 0 0 0 0.3862877986282083 0.1955165011990026 A 0.21239879909220497 0.21239879909220497 0 0 0 -0.038509799556201624 0.19551650119900274 A 0.21239879909220497 0.21239879909220497 0 0 0 0.3862877986282083 0.19551650119900255" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1B59; stroke-opacity:0.588101319479578; stroke-linecap:round;" d="M -1.0171274113866737 0.5178129672920355 C -0.9956532406217121 0.7616283264527584, 1.852708160293326 1.6228998549775075, 1.9518196587043297 0.7185730506454822" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D23; stroke-opacity:0.29526023464216894; stroke-linecap:round;" d="M -1.0420216684465737 0.45868377361965784 C -0.9507459169355887 -0.0336869528183219, 1.906987625677382 0.9531354602950315, 1.9642068007375142 0.7796975843276" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D25; stroke-opacity:0.2724887342334451; stroke-linecap:round;" d="M -0.9939853074094716 0.4906334649900593 C -0.990769549770896 0.8581928130273936, 1.9021967620296394 1.8272048218333095, 2.042586062981757 0.7863912492379205" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D23; stroke-opacity:0.4157256523586849; stroke-linecap:round;" d="M -1.047747310996031 0.49808489318128396 C -1.016869577254274 0.6046773949269648, 1.9251006300676679 1.533539680884531, 2.027579179907161 0.7437285810572113" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4759; stroke-opacity:0.6021056984848888; stroke-linecap:round;" d="M -1.0097087540821044 0.47184325203554006 C -0.9833504741598862 0.6028674714368578, 1.8665392230928646 1.538736427220488, 1.9774520493469818 0.744959204267946" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2B; stroke-opacity:0.4114068834104874; stroke-linecap:round;" d="M -1.0276994209324386 0.45080051661189974 C -1.0354155352684673 0.8729356280437528, 1.8351509774342478 1.8760715896466926, 1.9946927568863124 0.7848355219201879" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3559; stroke-opacity:0.17575068985448433; stroke-linecap:round;" d="M -1.0180278890409173 0.4936746203441516 C -0.9766997796724651 0.4514418622587129, 1.8779526199771799 1.3381023895357327, 1.9627421151465252 0.7177670021714495" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D21; stroke-opacity:0.4132923143343038; stroke-linecap:round;" d="M -0.9786420357009835 0.4543864255222754 C -0.8931671452704086 -0.007548073166886771, 1.9095124742931073 0.9485784116782375, 1.9670520798111581 0.757828483873002" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2859; stroke-opacity:0.34002932362054983; stroke-linecap:round;" d="M -0.9541045326922889 0.5356859801700913 C -0.9196543477620543 0.597702242818515, 1.9580406796088643 1.4489179443620146, 2.041174996514341 0.7200697729101603" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2F59; stroke-opacity:0.5241305828057354; stroke-linecap:round;" d="M -1.0182718606712091 0.4508490531396377 C -0.9255652991137939 -0.051084721689120705, 1.9214418443141206 0.9354016293292602, 1.97742791299207 0.7739401572401831" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2759; stroke-opacity:0.5233660583602887; stroke-linecap:round;" d="M -0.9957045100959302 0.5308178602872486 C -0.9870268629484416 0.8757377915898061, 1.9050563946767325 1.8128355742033158, 2.0328512874758187 0.7956717902364574" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D22; stroke-opacity:0.43303586844475417; stroke-linecap:round;" d="M -1.0050196260928226 0.4790305069021991 C -0.9835190028809412 0.6442545375846889, 1.8939022125632516 1.6340400698634272, 2.0210596696437904 0.7985181387611565" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2F; stroke-opacity:0.4688337716068264; stroke-linecap:round;" d="M -1.004616660078043 0.524406370251295 C -0.9606313029919299 0.44122273655732863, 1.8749783419174348 1.3166864695905383, 1.9550850733396532 0.7418562618671335" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D23; stroke-opacity:0.4999266456637789; stroke-linecap:round;" d="M -1.0231580404883478 0.4900584245688176 C -0.9823833407371056 0.46636699302335916, 1.867928377346356 1.4231958048078506, 1.9691131276044005 0.7835060722092011" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D28; stroke-opacity:0.4352641052515142; stroke-linecap:round;" d="M -1.0232883685578316 0.482597828136115 C -1.0160672442533145 0.7957571554782594, 1.896747217499649 1.788354056567765, 2.037913510735051 0.7968902888529125" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D16; stroke-opacity:0.5715859711644979; stroke-linecap:round;" d="M -1.0155324272309254 0.5245392401004277 C -0.971526939993305 0.4363828410663685, 1.8968036656918414 1.29812071405764, 1.9729800713695254 0.721276808872962" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D22; stroke-opacity:0.3180638203003355; stroke-linecap:round;" d="M -1.0355730797479483 0.481788426313957 C -1.0302631466366439 0.8075610549636514, 1.836822793156085 1.7845552680663006, 1.9775662862792958 0.7911274627936062" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D31; stroke-opacity:0.35383787693090224; stroke-linecap:round;" d="M -1.0483521167394185 0.5146230722469761 C -1.0433610368229633 0.9096804478299565, 1.8837633206120161 1.8562063729193117, 2.0164665269470023 0.7808091200923252" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D20; stroke-opacity:0.49190553693466305; stroke-linecap:round;" d="M -0.9945812118513568 0.5252607613702673 C -1.0104395144883018 1.129069379636606, 1.8207626248274933 2.0521322765810757, 1.9714966874224271 0.7900862903916754" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D10; stroke-opacity:0.5548637032502292; stroke-linecap:round;" d="M -0.9747586692699208 0.4826735410271509 C -0.9461802047415878 0.6008460580122115, 1.8665350604783035 1.4783258478189658, 1.9630834637785188 0.7072209658747778" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2C59; stroke-opacity:0.41357316201071365; stroke-linecap:round;" d="M -0.9844009871426067 0.45746526457905995 C -1.0184848521245466 1.1036603068598307, 1.793309499436502 2.0902616347386993, 1.9770081347400856 0.7885629366834492" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2E; stroke-opacity:0.4337216908381747; stroke-linecap:round;" d="M -1.0326931713936809 0.5309211358097199 C -0.9862389674105527 0.4395165676300294, 1.9618316561467286 1.3606482317645003, 2.0468452822605667 0.7676633091066657" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D29; stroke-opacity:0.3910439551900179; stroke-linecap:round;" d="M -0.9838485932235947 0.529405165970935 C -0.9240418020449246 0.24725080810419064, 1.8881323882483247 1.1311552927327986, 1.9549066202025538 0.7603350472307938" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D24; stroke-opacity:0.585714951770405; stroke-linecap:round;" d="M -0.9557289855720597 0.5492764498033027 C -0.9344207761101928 0.8040407086769721, 1.8846339521892634 1.6442029797611355, 1.9799248493386101 0.736035022498366" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D29; stroke-opacity:0.5184857994119196; stroke-linecap:round;" d="M -0.9932602732197866 0.45280877748412574 C -0.8887411980477684 -0.18966827173651973, 1.996351141387116 0.7913459448430624, 2.0383283917561785 0.7620285481753762" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D35; stroke-opacity:0.3090302837758017; stroke-linecap:round;" d="M -1.0364851707381502 0.5270311573240375 C -0.9776064989802582 0.280691185371768, 1.9578323442272727 1.2062377123760375, 2.031732840603355 0.7709077874894016" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2E59; stroke-opacity:0.4208738566794262; stroke-linecap:round;" d="M -0.9816505972667914 0.5266903590575536 C -0.9574780132594967 0.7532443950849744, 1.9042310762419348 1.5988056353955669, 1.9967822260781805 0.70914758931166" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D35; stroke-opacity:0.374762432246895; stroke-linecap:round;" d="M -0.953838316290136 0.517370799886886 C -0.9058767786484956 0.3726661308989021, 1.955567410314384 1.238702338803689, 2.028926726983167 0.7198411843344525" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D16; stroke-opacity:0.4294694650150647; stroke-linecap:round;" d="M -0.9783397359406727 0.49739939410185396 C -0.9622825538425914 0.7709095536503849, 1.888438338633192 1.6741697356397018, 2.0023203929880746 0.7385502990965642" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3059; stroke-opacity:0.4210205652341747; stroke-linecap:round;" d="M -1.0221838128190348 0.5453875337083465 C -0.9754736860773179 0.43902680096720464, 1.8727004848520614 1.3402884070345884, 1.955546352960598 0.7851616989689436" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1459; stroke-opacity:0.31638965517616; stroke-linecap:round;" d="M -0.9869059208668821 0.5144285889177713 C -0.9793200797653185 0.8700536025405812, 1.8559593390034743 1.783197190563507, 1.9809216127063127 0.7686732069652992" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D25; stroke-opacity:0.4941073093127043; stroke-linecap:round;" d="M -1.0092629028915454 0.5401446405603485 C -1.026196080977861 1.2408440224887298, 1.84458625365391 2.144499697445185, 1.991036659450247 0.7771833039182361" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1C; stroke-opacity:0.5289783314488947; stroke-linecap:round;" d="M -0.9536008093131014 0.47789734537926876 C -0.9107108267300164 0.42066536188276166, 1.877094069867904 1.3426437188261282, 1.9699414022625272 0.7513953696917182" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1C; stroke-opacity:0.41570507098297965; stroke-linecap:round;" d="M -0.983033936086673 0.4538712214498039 C -0.9336013316099776 0.34621936131520614, 1.9372057363476953 1.3136836133563659, 2.031595268687702 0.7530886309277803" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2A; stroke-opacity:0.46330925990626515; stroke-linecap:round;" d="M -1.0268649763159392 0.5103460553695587 C -0.983124695857152 0.43007004647162794, 1.9122004843108273 1.2963869226179838, 1.9889815213639888 0.7054940280529409" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D3B; stroke-opacity:0.4280989929756524; stroke-linecap:round;" d="M -1.0097630080714368 0.4721564389853059 C -0.9861775429772016 0.6422579471763599, 1.885940820802198 1.5751791673786832, 1.998399751332998 0.7374161449244897" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1B; stroke-opacity:0.5123196860119893; stroke-linecap:round;" d="M -1.026830730544244 0.5324641948263817 C -0.9467164173417218 0.05982264508085966, 1.9516682349006467 0.9980154474533263, 2.0081115533589333 0.7969725314703952" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3359; stroke-opacity:0.43554837122081014; stroke-linecap:round;" d="M -1.0473626525594304 0.5008194393956682 C -1.054459618119881 1.1105786273964635, 1.866860926304605 2.019551984800853, 2.003380834620503 0.731710026420785" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D20; stroke-opacity:0.4161041300248766; stroke-linecap:round;" d="M -0.9720472165155045 0.4873730249127773 C -0.9807704678082005 0.9961179209488225, 1.8442418626599142 1.925151812377743, 1.9893371039824461 0.7594052748930693" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2959; stroke-opacity:0.4903685979355421; stroke-linecap:round;" d="M -0.9731987533157369 0.5444466603072355 C -0.9327826061055653 0.5126075627136486, 1.9449375498549526 1.3766920259690771, 2.024990371760524 0.7413659989596232" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2C59; stroke-opacity:0.4776467895208867; stroke-linecap:round;" d="M -0.9829734139522956 0.4903054996630059 C -0.9131992419401816 0.059597474849757415, 1.9189922008895435 0.9360981284881542, 1.9736296017902293 0.7095322589070868" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1D; stroke-opacity:0.5740801204820797; stroke-linecap:round;" d="M -1.0285998219000176 0.5381306703740876 C -1.0364655025524605 1.302351600696597, 1.8296319355741246 2.145734125180981, 1.9536211856710157 0.7174808012450602" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1859; stroke-opacity:0.39642417047995; stroke-linecap:round;" d="M -1.001995153182994 0.549592927520562 C -0.9595685733473589 0.4859649451779038, 1.8837962162288213 1.3548634256961065, 1.9637924188163505 0.7589060274992032" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1B; stroke-opacity:0.5261706012361709; stroke-linecap:round;" d="M -1.043822672653762 0.514969983455468 C -1.0088280644434726 0.5736062318055355, 1.9249160153315805 1.470769456906209, 2.0163803333355053 0.7315657826355717" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D39; stroke-opacity:0.47776660813048255; stroke-linecap:round;" d="M -0.9988335509046926 0.547263143375027 C -0.9724002268006987 0.7464538348967195, 1.9063394548812784 1.5910366448111084, 1.9959769817902466 0.7249486828901753" />
</svg>)
Generative Animated Videos with Remotion (and Solandra)
October 2021
Getting started Remotion is a React powered library for creating videos. Let's try it out with Solandra, a library for creating 2D graphics…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDBDDB; fill-opacity:0.5;" d="M 0.8906461025065271 -0.3415797404536608 A 0.9610241980075765 0.9610241980075765 0 0 0 -0.07037809550104945 0.6194444575539159 A 0.9610241980075765 0.9610241980075765 0 0 0 1.8516703005141038 0.6194444575539155 A 0.9610241980075765 0.9610241980075765 0 0 0 -0.07037809550104945 0.6194444575539161 A 0.9610241980075765 0.9610241980075765 0 0 0 1.8516703005141038 0.6194444575539153" />
<path style="fill:%23BDC6DB; fill-opacity:0.5;" d="M 0.3403045698168117 -0.11926392180142464 A 0.3720734048325941 0.3720734048325941 0 0 0 -0.031768835015782426 0.2528094830311695 A 0.3720734048325941 0.3720734048325941 0 0 0 0.7123779746494058 0.25280948303116935 A 0.3720734048325941 0.3720734048325941 0 0 0 -0.031768835015782426 0.25280948303116957 A 0.3720734048325941 0.3720734048325941 0 0 0 0.7123779746494058 0.2528094830311693" />
<path style="fill:%23CABDDB; fill-opacity:0.5;" d="M 0.1448765430833756 0.1613737097752973 A 0.2656312921052467 0.2656312921052467 0 0 0 -0.12075474902187111 0.4270050018805441 A 0.2656312921052467 0.2656312921052467 0 0 0 0.4105078351886223 0.42700500188054397 A 0.2656312921052467 0.2656312921052467 0 0 0 -0.12075474902187111 0.42700500188054413 A 0.2656312921052467 0.2656312921052467 0 0 0 0.4105078351886223 0.4270050018805439" />
<path style="fill:%23BDBDDB; fill-opacity:0.5;" d="M 0.36715179645479634 0.4208934624980878 A 0.435099779910491 0.435099779910491 0 0 0 -0.06794798345569464 0.8559932424085788 A 0.435099779910491 0.435099779910491 0 0 0 0.8022515763652873 0.8559932424085787 A 0.435099779910491 0.435099779910491 0 0 0 -0.06794798345569464 0.8559932424085789 A 0.435099779910491 0.435099779910491 0 0 0 0.8022515763652873 0.8559932424085785" />
<path style="fill:%23C0BDDB; fill-opacity:0.5;" d="M 0.7826779345379428 0.40925165119457196 A 0.5558572550239842 0.5558572550239842 0 0 0 0.22682067951395857 0.9651089062185563 A 0.5558572550239842 0.5558572550239842 0 0 0 1.3385351895619269 0.965108906218556 A 0.5558572550239842 0.5558572550239842 0 0 0 0.22682067951395857 0.9651089062185564 A 0.5558572550239842 0.5558572550239842 0 0 0 1.3385351895619269 0.9651089062185559" />
<path style="fill:%23C2BDDB; fill-opacity:0.5;" d="M 0.6140764491268812 0.11267069851741307 A 0.33919237419963433 0.33919237419963433 0 0 0 0.27488407492724687 0.45186307271704745 A 0.33919237419963433 0.33919237419963433 0 0 0 0.9532688233265155 0.45186307271704734 A 0.33919237419963433 0.33919237419963433 0 0 0 0.27488407492724687 0.4518630727170475 A 0.33919237419963433 0.33919237419963433 0 0 0 0.9532688233265155 0.45186307271704723" />
<path style="fill:%23C3BDDB; fill-opacity:0.5;" d="M 0.18253078181940352 0.5942412666844932 A 0.38666696635933057 0.38666696635933057 0 0 0 -0.20413618453992705 0.9809082330438238 A 0.38666696635933057 0.38666696635933057 0 0 0 0.569197748178734 0.9809082330438237 A 0.38666696635933057 0.38666696635933057 0 0 0 -0.20413618453992705 0.9809082330438239 A 0.38666696635933057 0.38666696635933057 0 0 0 0.569197748178734 0.9809082330438236" />
<path style="fill:none; stroke-width:0.02; stroke:%23388A0F; stroke-opacity:0.4760962365774905; stroke-linecap:round;" d="M -0.26873703411424305 -0.25726522835239246 C -0.33237171399311527 0.10592898932340453, 1.6682175970546111 0.3776799593704757, 1.1329592078667794 1.1958190177999837" />
<path style="fill:none; stroke-width:0.03; stroke:%230F118A; stroke-opacity:0.3170896340960785; stroke-linecap:round;" d="M -0.25236638474939 -0.10173636054714891 C -0.48373240659118444 0.43741126003795067, 1.3863166564768634 0.6032475786734728, 1.1125166053789317 1.1873251609166782" />
<path style="fill:none; stroke-width:0.01; stroke:%232A8A0F; stroke-opacity:0.578329830413258; stroke-linecap:round;" d="M -0.23087059595542417 -0.15543213225107444 C -0.1734087108637361 0.09073538965725342, 1.7396435182288061 0.1977451505982291, 1.204218298360315 1.1141110082464112" />
<path style="fill:none; stroke-width:0.02; stroke:%234E8A0F; stroke-opacity:0.3611700604381807; stroke-linecap:round;" d="M -0.13411230379368122 -0.11912758694962629 C -0.0725836005524847 0.11257149556757565, 1.8582523365059989 0.37864297099406663, 1.2163596727126371 1.2862716042210747" />
<path style="fill:none; stroke-width:0.02; stroke:%230F1A8A; stroke-opacity:0.3611384360036626; stroke-linecap:round;" d="M -0.1438241192654487 -0.11518181026944269 C -0.3431962960954019 0.3972897926183135, 1.5178778419691143 0.5399057805738384, 1.228405291370537 1.150093935162646" />
<path style="fill:none; stroke-width:0.03; stroke:%230F1D8A; stroke-opacity:0.3027419034247284; stroke-linecap:round;" d="M -0.2212377729726666 -0.10488761511174571 C -0.6694778229935173 0.6129560476077686, 1.2249775358569375 0.8708909684245186, 1.1057243293701768 1.271580004921435" />
<path style="fill:none; stroke-width:0.02; stroke:%230F1E8A; stroke-opacity:0.5214712200705245; stroke-linecap:round;" d="M -0.16965110018846402 -0.17207957804956447 C -0.07373200168238936 0.01093243216472603, 1.7532194223298667 0.26240710211185647, 1.108335997030915 1.157484258201337" />
<path style="fill:none; stroke-width:0.02; stroke:%230F4E8A; stroke-opacity:0.43472080582224937; stroke-linecap:round;" d="M -0.15089414820149757 -0.2995753724707083 C -0.7149987940514427 0.526448486035096, 1.238467377323476 0.811194953775854, 1.2057652363530178 1.134504802379075" />
<path style="fill:none; stroke-width:0.02; stroke:%230F408A; stroke-opacity:0.35569641135821334; stroke-linecap:round;" d="M -0.284544428575158 -0.19349243658375767 C -0.3192139491904472 0.16590242498604885, 1.774387531836549 0.3885474000380537, 1.2205818338914143 1.2786939919325992" />
<path style="fill:none; stroke-width:0.01; stroke:%230F538A; stroke-opacity:0.5059855775242019; stroke-linecap:round;" d="M -0.11418700421146913 -0.1875755294314911 C -0.34549419533343184 0.32527126433429154, 1.6471598619704904 0.6285121566406479, 1.2617664964517028 1.2853050478283556" />
<path style="fill:none; stroke-width:0.01; stroke:%230F418A; stroke-opacity:0.276548051938459; stroke-linecap:round;" d="M -0.11965356545435671 -0.22352139069694366 C -0.25441765755615786 0.20788096457618824, 1.7811037566790937 0.5076803067098744, 1.2920759750318012 1.2732240044430616" />
<path style="fill:none; stroke-width:0.02; stroke:%230F408A; stroke-opacity:0.5816315558070055; stroke-linecap:round;" d="M -0.20030619446515552 -0.19755851173632868 C -0.9529821508611196 0.9131147200556061, 1.0779908595246983 1.0994330297543649, 1.2781802919512757 1.2073057489410615" />
<path style="fill:none; stroke-width:0.01; stroke:%23568A0F; stroke-opacity:0.34574515366935515; stroke-linecap:round;" d="M -0.21650896407487724 -0.10420112418943735 C -0.054996950499981434 0.0343179510008848, 1.9201237931137647 0.13303056797765817, 1.2724345733326619 1.19729542786748" />
<path style="fill:none; stroke-width:0.02; stroke:%234F8A0F; stroke-opacity:0.4513083817670884; stroke-linecap:round;" d="M -0.20583763209566505 -0.14440894803627882 C -0.3266529994529671 0.2541570457783632, 1.5872219266121053 0.5424863399711587, 1.117529324592266 1.2679475623593175" />
<path style="fill:none; stroke-width:0.03; stroke:%230F398A; stroke-opacity:0.4922320796566707; stroke-linecap:round;" d="M -0.17915272535466828 -0.2135191266804466 C -0.22669315040642946 0.114854891822053, 1.6953533924104986 0.4219225106038237, 1.1390149523929685 1.2186077561760322" />
<path style="fill:none; stroke-width:0.03; stroke:%230F5D8A; stroke-opacity:0.36421064675324677; stroke-linecap:round;" d="M -0.18929129168913308 -0.20407433776978778 C -0.28003587776971484 0.18210543870428364, 1.6599457747709634 0.4180600173922716, 1.1870225295274197 1.1833562518189586" />
<path style="fill:none; stroke-width:0.02; stroke:%230F508A; stroke-opacity:0.35239068798937867; stroke-linecap:round;" d="M -0.10998166836665864 -0.2462142987891476 C -0.39836097366180134 0.3034325427943496, 1.5640524609874253 0.634198100503859, 1.2251807054703934 1.2295274733879717" />
<path style="fill:none; stroke-width:0.01; stroke:%230F3F8A; stroke-opacity:0.5557164836402076; stroke-linecap:round;" d="M -0.26295303634634426 -0.2663247246901001 C 0.004998267548842028 -0.21250529713136987, 2.0800121386365005 0.06326301713429125, 1.1946635901635243 1.2360349188310855" />
<path style="fill:none; stroke-width:0.03; stroke:%230F1B8A; stroke-opacity:0.3622097611506953; stroke-linecap:round;" d="M -0.2963805647737904 -0.2507260405946822 C -0.5712424515871952 0.32817927029385185, 1.4185420660056336 0.56403385059471, 1.1190816030100548 1.1674899729496853" />
<path style="fill:none; stroke-width:0.02; stroke:%23140F8A; stroke-opacity:0.24729088335572547; stroke-linecap:round;" d="M -0.13186021491566963 -0.17565302915869868 C -0.8742504786837183 0.9111544378584369, 1.0143159122594234 1.074898080604417, 1.2488524544459803 1.1232417002955224" />
<path style="fill:none; stroke-width:0.02; stroke:%23228A0F; stroke-opacity:0.3083723549794969; stroke-linecap:round;" d="M -0.18371860451601219 -0.1331469343935357 C -0.09878547868347276 0.08568521212021289, 1.8495805747105245 0.22294154837516594, 1.2603408976247346 1.1820191137301423" />
<path style="fill:none; stroke-width:0.02; stroke:%230F608A; stroke-opacity:0.3573951388024289; stroke-linecap:round;" d="M -0.16668423520978423 -0.19910963835839088 C -0.4911673366586256 0.452635702251974, 1.41392882889444 0.6051351467074915, 1.233969633144452 1.1012042551413859" />
<path style="fill:none; stroke-width:0.02; stroke:%23328A0F; stroke-opacity:0.42355902282792834; stroke-linecap:round;" d="M -0.19038074379428907 -0.24003663229686173 C -0.5101581978318491 0.3769166487381259, 1.4462190947404365 0.6124882855774871, 1.1990380508334024 1.1572541463569495" />
<path style="fill:none; stroke-width:0.01; stroke:%23328A0F; stroke-opacity:0.360785545669008; stroke-linecap:round;" d="M -0.191437317479921 -0.2941601934256125 C 0.28795523696099234 -0.4628783810060707, 2.253251501364896 -0.20404107751705322, 1.1905630476957538 1.1269172665362663" />
<path style="fill:none; stroke-width:0.01; stroke:%230F4C8A; stroke-opacity:0.3913189977758494; stroke-linecap:round;" d="M -0.14237597005763336 -0.1896303820982728 C 0.17306211711429798 -0.1997890926475128, 2.0527109499516256 0.11008433197464276, 1.1407782414584147 1.2184237871517674" />
<path style="fill:none; stroke-width:0.02; stroke:%230F5B8A; stroke-opacity:0.5071490365791776; stroke-linecap:round;" d="M -0.23472249021646602 -0.12058890788113935 C -0.5196210226557965 0.4592598342835539, 1.345073553442898 0.6574602061460884, 1.105901482952138 1.190554338337199" />
<path style="fill:none; stroke-width:0.03; stroke:%230F118A; stroke-opacity:0.3682880062493721; stroke-linecap:round;" d="M -0.16234509893531085 -0.1462664812214582 C -0.34305588684274824 0.31113505429274757, 1.5389856896683438 0.5695595019519658, 1.1545710258062951 1.2228922426889142" />
<path style="fill:none; stroke-width:0.01; stroke:%230F1B8A; stroke-opacity:0.4964760458477913; stroke-linecap:round;" d="M -0.22304870543066027 -0.12220324698645478 C -0.6142086452550188 0.6070543271323967, 1.280962597117802 0.7467638454320309, 1.1777420584768339 1.1619221453222233" />
<path style="fill:none; stroke-width:0.01; stroke:%231A8A0F; stroke-opacity:0.5015623147481858; stroke-linecap:round;" d="M -0.1402627216198193 -0.2822260001356412 C -0.5830528205455965 0.4051109357025092, 1.4454593904330089 0.7712888303625726, 1.2248296288536404 1.262270977946812" />
<path style="fill:none; stroke-width:0.02; stroke:%23448A0F; stroke-opacity:0.39191716218914374; stroke-linecap:round;" d="M -0.16052047842865969 -0.179932785479965 C -0.6084732784251898 0.5318089287459016, 1.267264856770129 0.7924363028697936, 1.1500833671655408 1.1870484652628608" />
<path style="fill:none; stroke-width:0.01; stroke:%23308A0F; stroke-opacity:0.1846884508291512; stroke-linecap:round;" d="M -0.23220655151963118 -0.1916336027717171 C -0.19314527950482419 0.07105520355579073, 1.748380837947316 0.2559957613990056, 1.1769338835904108 1.156717207967841" />
<path style="fill:none; stroke-width:0.03; stroke:%230F258A; stroke-opacity:0.3529065524256397; stroke-linecap:round;" d="M -0.1443364887491998 -0.1461639613129335 C -0.6352494599929969 0.6139113777022176, 1.2898433339597077 0.8818651868914278, 1.2004616210545653 1.2571533773727457" />
<path style="fill:none; stroke-width:0.03; stroke:%23328A0F; stroke-opacity:0.5170325184903408; stroke-linecap:round;" d="M -0.22687895830971588 -0.128538932209256 C -0.7914248066304099 0.8706283583684432, 1.1429577486137377 0.92546545984942, 1.2572829588477907 1.1132768276323828" />
<path style="fill:none; stroke-width:0.03; stroke:%23408A0F; stroke-opacity:0.30051530940759075; stroke-linecap:round;" d="M -0.100427366252763 -0.20549908653151597 C -0.06871259195938084 0.032576598156753095, 1.7244212414914766 0.2975014978480095, 1.1426835516548093 1.113663296544041" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A14; stroke-opacity:0.4703572638254336; stroke-linecap:round;" d="M -0.19334131595806697 -0.14038843640389 C -0.0015030186086724129 -0.0296436485832363, 1.9912564566992772 0.1546539278404362, 1.256406645935954 1.239208160463972" />
<path style="fill:none; stroke-width:0.02; stroke:%230F438A; stroke-opacity:0.22220230622043785; stroke-linecap:round;" d="M -0.23688753378388205 -0.21484118471559055 C -0.5534141971949595 0.4143097852661132, 1.450634348342978 0.637404701486764, 1.1976767922520024 1.202200490388367" />
<path style="fill:none; stroke-width:0.01; stroke:%230F278A; stroke-opacity:0.4079107822150989; stroke-linecap:round;" d="M -0.25285089367920477 -0.22354077483844678 C -0.565165883489085 0.3853884273392609, 1.359958169586414 0.6079814794093599, 1.1200827841686807 1.1441958236302778" />
<path style="fill:none; stroke-width:0.03; stroke:%230F3E8A; stroke-opacity:0.29338544555491786; stroke-linecap:round;" d="M -0.2618760870945999 -0.27475904672971774 C -0.09275577726695894 -0.12662140539797775, 1.976009293542054 0.12775749685403062, 1.204091822491343 1.2069412037172396" />
<path style="fill:none; stroke-width:0.03; stroke:%230F478A; stroke-opacity:0.21766145058121966; stroke-linecap:round;" d="M -0.2015090399982692 -0.1279649051523471 C -0.2171696324249025 0.16757651804765492, 1.6426657602319819 0.42122632360539103, 1.1009381352484136 1.2236849264721759" />
<path style="fill:none; stroke-width:0.02; stroke:%230F428A; stroke-opacity:0.3603097597527481; stroke-linecap:round;" d="M -0.1812520846092651 -0.21127317839182044 C -0.5817828351357183 0.492608442432671, 1.3234824592900023 0.6959657379619643, 1.1880168174121883 1.1290598793759414" />
<path style="fill:none; stroke-width:0.03; stroke:%23338A0F; stroke-opacity:0.3286591601672101; stroke-linecap:round;" d="M -0.16095823704489431 -0.2618370361245084 C -0.4043975625001205 0.23875059122330441, 1.4702176764391424 0.5413706994752896, 1.1227405360263893 1.1374051459144097" />
<path style="fill:none; stroke-width:0.03; stroke:%230F318A; stroke-opacity:0.5143308408136055; stroke-linecap:round;" d="M -0.1675465141027658 -0.29082456153983793 C 0.07327794487694561 -0.21452415844092027, 2.110519769409387 0.0747006045603193, 1.2520865356844635 1.1986878483142065" />
<path style="fill:none; stroke-width:0.03; stroke:%230F398A; stroke-opacity:0.4243827489110832; stroke-linecap:round;" d="M -0.16900239276366072 -0.276249807660125 C -0.7042420556448485 0.5871129533978806, 1.3364677868496568 0.8035641443481133, 1.298451778449619 1.1582975197942427" />
<path style="fill:none; stroke-width:0.03; stroke:%230F388A; stroke-opacity:0.5631587369514673; stroke-linecap:round;" d="M -0.22549386377594846 -0.256624814996618 C -0.2353939438269559 0.0435493105938439, 1.7253842301694609 0.350876422510743, 1.1229104299551036 1.199708547248293" />
<path style="fill:none; stroke-width:0.03; stroke:%230F388A; stroke-opacity:0.46738579042905415; stroke-linecap:round;" d="M -0.259668001441046 -0.22715817797377405 C 0.2527572014530097 -0.46088701363232304, 2.321151515160664 -0.321473498402483, 1.2772554488291852 1.1640849615300104" />
<path style="fill:none; stroke-width:0.02; stroke:%230F3B8A; stroke-opacity:0.4114063254449289; stroke-linecap:round;" d="M -0.20323154855090808 -0.2468590109869514 C -0.5059314182579536 0.33745463529832537, 1.550266198315939 0.6627110120950619, 1.2089488557693893 1.2826791071078074" />
<path style="fill:none; stroke-width:0.01; stroke:%230F448A; stroke-opacity:0.30744365216773767; stroke-linecap:round;" d="M -0.13762610144001483 -0.11361039369722224 C 0.05448164393433874 -0.036134327575701994, 1.8456693229122667 0.11073348976314144, 1.177119940895292 1.111692140885915" />
<path style="fill:none; stroke-width:0.03; stroke:%230F258A; stroke-opacity:0.39924786514920774; stroke-linecap:round;" d="M -0.11218822289988975 -0.14022076942773032 C 0.20542934334045548 -0.1586800532665895, 2.052331172806137 0.13836009449620798, 1.1532184829146788 1.2374675429078816" />
<path style="fill:none; stroke-width:0.02; stroke:%230F3B8A; stroke-opacity:0.585263809706374; stroke-linecap:round;" d="M -0.2177427280454295 -0.2906373008838613 C -0.6140705982179182 0.4596102746976153, 1.4288986410245674 0.6244699604704812, 1.2834570306107524 1.1048200840243159" />
<path style="fill:none; stroke-width:0.01; stroke:%230F128A; stroke-opacity:0.5504946233940147; stroke-linecap:round;" d="M -0.23865078437628906 -0.14365214156824369 C -0.5237147616053447 0.45270602763031476, 1.4413917085114116 0.6597311696185042, 1.1753097351270783 1.2366443836739724" />
<path style="fill:none; stroke-width:0.02; stroke:%230F2B8A; stroke-opacity:0.3613840430813962; stroke-linecap:round;" d="M -0.159187630061158 -0.24797038738927873 C -0.48544918345928084 0.3432655762890764, 1.4199620419806926 0.6269940640908349, 1.160388048171508 1.1555301727245155" />
</svg>)
Flutter, an ideal framework for Algorithmic Art?
October 2021
Flutter is a cross platform framework for Apps. On most of its target platforms it uses a low level renderer called Skia to draw user…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBC2BD; fill-opacity:0.5;" d="M 0.6682772654671215 -0.26830709288987464 A 0.43558128694592324 0.43558128694592324 0 0 0 0.23269597852119828 0.16727419405604865 A 0.43558128694592324 0.43558128694592324 0 0 0 1.1038585524130449 0.1672741940560485 A 0.43558128694592324 0.43558128694592324 0 0 0 0.23269597852119828 0.16727419405604876 A 0.43558128694592324 0.43558128694592324 0 0 0 1.1038585524130449 0.16727419405604838" />
<path style="fill:%23DBBDCC; fill-opacity:0.5;" d="M 0.5768347697635509 0.1509937789572608 A -0.043341069073009 -0.043341069073009 0 0 0 0.6201758388365599 0.1076527098842518 A -0.043341069073009 -0.043341069073009 0 0 0 0.5334937006905418 0.10765270988425181 A -0.043341069073009 -0.043341069073009 0 0 0 0.6201758388365599 0.10765270988425178 A -0.043341069073009 -0.043341069073009 0 0 0 0.5334937006905418 0.10765270988425182" />
<path style="fill:%23DBC9BD; fill-opacity:0.5;" d="M 0.6598712557826882 -0.04743364910061798 A 0.5019372337661587 0.5019372337661587 0 0 0 0.1579340220165295 0.4545035846655408 A 0.5019372337661587 0.5019372337661587 0 0 0 1.161808489548847 0.45450358466554064 A 0.5019372337661587 0.5019372337661587 0 0 0 0.1579340220165295 0.4545035846655409 A 0.5019372337661587 0.5019372337661587 0 0 0 1.161808489548847 0.4545035846655405" />
<path style="fill:%23DBCBBD; fill-opacity:0.5;" d="M 0.6231308997400475 0.5423971088343931 A 0.11004708333559593 0.11004708333559593 0 0 0 0.5130838164044516 0.652444192169989 A 0.11004708333559593 0.11004708333559593 0 0 0 0.7331779830756435 0.652444192169989 A 0.11004708333559593 0.11004708333559593 0 0 0 0.5130838164044516 0.652444192169989 A 0.11004708333559593 0.11004708333559593 0 0 0 0.7331779830756435 0.652444192169989" />
<path style="fill:%23DBCBBD; fill-opacity:0.5;" d="M 0.24795989133929408 -0.33635380676593796 A 0.6321025591550359 0.6321025591550359 0 0 0 -0.3841426678157418 0.295748752389098 A 0.6321025591550359 0.6321025591550359 0 0 0 0.88006245049433 0.29574875238909776 A 0.6321025591550359 0.6321025591550359 0 0 0 -0.3841426678157418 0.29574875238909815 A 0.6321025591550359 0.6321025591550359 0 0 0 0.88006245049433 0.2957487523890976" />
<path style="fill:%23DBBDBF; fill-opacity:0.5;" d="M 0.8127318349083613 0.4211954580390338 A 0.5146357088554718 0.5146357088554718 0 0 0 0.2980961260528895 0.9358311668945057 A 0.5146357088554718 0.5146357088554718 0 0 0 1.3273675437638333 0.9358311668945055 A 0.5146357088554718 0.5146357088554718 0 0 0 0.2980961260528895 0.9358311668945059 A 0.5146357088554718 0.5146357088554718 0 0 0 1.3273675437638333 0.9358311668945054" />
<path style="fill:%23DBCCBD; fill-opacity:0.5;" d="M 0.9394162360182687 0.10644726853222453 A 0.2572407227090001 0.2572407227090001 0 0 0 0.6821755133092686 0.3636879912412247 A 0.2572407227090001 0.2572407227090001 0 0 0 1.1966569587272688 0.3636879912412246 A 0.2572407227090001 0.2572407227090001 0 0 0 0.6821755133092686 0.36368799124122475 A 0.2572407227090001 0.2572407227090001 0 0 0 1.1966569587272688 0.36368799124122453" />
<path style="fill:%23DBBDBE; fill-opacity:0.5;" d="M 0.3052863350420135 -0.3126825315754721 A 0.5326932364422152 0.5326932364422152 0 0 0 -0.2274069014002017 0.22001070486674318 A 0.5326932364422152 0.5326932364422152 0 0 0 0.8379795714842287 0.22001070486674298 A 0.5326932364422152 0.5326932364422152 0 0 0 -0.2274069014002017 0.22001070486674332 A 0.5326932364422152 0.5326932364422152 0 0 0 0.8379795714842287 0.22001070486674287" />
<path style="fill:none; stroke-width:0.03; stroke:%23590E0D; stroke-opacity:0.3470318190887607; stroke-linecap:round;" d="M -0.15702945590760886 -0.1673753823723078 C 0.6992261534452732 -0.7588319849433267, 0.9742466351288798 1.1357067525548443, 1.2053932046622655 1.1775104072739175" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D1A; stroke-opacity:0.372256356361277; stroke-linecap:round;" d="M -0.2223253763399264 -0.19820315419565918 C 0.7911295059120395 -0.9291872272105597, 1.0591820580624944 1.015873447143559, 1.1650239385010004 1.1911762310852951" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D30; stroke-opacity:0.31986231742471927; stroke-linecap:round;" d="M -0.2257600065065417 -0.2209638871453836 C 0.5083759539862476 -0.658623379438182, 0.7921305227155748 1.391033683461829, 1.2372211967080282 1.2423531426917997" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D27; stroke-opacity:0.4477178887130894; stroke-linecap:round;" d="M -0.16517979669413002 -0.24880916754260643 C 0.5615648742624335 -0.6628866685234812, 0.777715354903812 1.2892764532627932, 1.1850649314141446 1.17755020462124" />
<path style="fill:none; stroke-width:0.01; stroke:%230D0D59; stroke-opacity:0.434074199778059; stroke-linecap:round;" d="M -0.20273250945494253 -0.16035371449199148 C 0.08742304412448618 -0.1785561296861896, 0.41694223972131006 1.7580472624689634, 1.2285313194080743 1.1851942969003924" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D23; stroke-opacity:0.6287536069980826; stroke-linecap:round;" d="M -0.18316945697515646 -0.16921621496985687 C 0.273305824203738 -0.3634343228500476, 0.5816562951985309 1.5448635616763955, 1.2141344622349242 1.1665317352104745" />
<path style="fill:none; stroke-width:0.02; stroke:%230D2359; stroke-opacity:0.3583708347831572; stroke-linecap:round;" d="M -0.1629648576837956 -0.24150312024698814 C 0.47325398325724566 -0.5390297244525639, 0.6306223179620011 1.4364617854079045, 1.1544788928269727 1.2389270410705464" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D23; stroke-opacity:0.6516729439324922; stroke-linecap:round;" d="M -0.22208845817172468 -0.2489940413488877 C 0.4725996757954519 -0.6305058911477905, 0.7315031973976397 1.4400823807130951, 1.2337041785656453 1.2460091773389919" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D2C; stroke-opacity:0.46806616567769843; stroke-linecap:round;" d="M -0.21021231158055648 -0.2331882847534688 C 0.3622689115399539 -0.5137893592606718, 0.6360457522870505 1.4931481499413048, 1.2190364125222841 1.2020817278301212" />
<path style="fill:none; stroke-width:0.02; stroke:%230D2D59; stroke-opacity:0.5530526351203926; stroke-linecap:round;" d="M -0.1810949391240891 -0.21947128130439672 C 0.4859869672082575 -0.5857177296767568, 0.7124106839400719 1.348574090004212, 1.166559341929754 1.186437848739438" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D1E; stroke-opacity:0.3943784350411132; stroke-linecap:round;" d="M -0.21180407924299421 -0.21602171840177342 C -0.002598073375949944 -0.1363477076420968, 0.2919307809168984 1.8666678312625131, 1.2316272143079678 1.2035995676820117" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D31; stroke-opacity:0.31191971770782306; stroke-linecap:round;" d="M -0.2074773211889448 -0.17734889320231514 C 0.8065063066002984 -0.8990674268126243, 1.075426528535605 1.0864571778684762, 1.2049785684448826 1.243775450899386" />
<path style="fill:none; stroke-width:0.02; stroke:%23590E0D; stroke-opacity:0.4889245361273871; stroke-linecap:round;" d="M -0.19418288074681556 -0.2155434946424259 C 1.1529013222845177 -1.2387382598421495, 1.3900607529958924 0.7218488478988689, 1.1778984689702778 1.2048575657535994" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D31; stroke-opacity:0.4926134723682399; stroke-linecap:round;" d="M -0.20311410334817662 -0.23355997613481974 C 0.6565650673118908 -0.8346162433354782, 0.9666476363157146 1.1350188903251084, 1.2325800325151568 1.1500570617762509" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D24; stroke-opacity:0.38740307542944485; stroke-linecap:round;" d="M -0.15671374285949585 -0.17772735830092914 C 0.3216572128045613 -0.3835281330058924, 0.5718067990415725 1.4820209287229864, 1.168383859024108 1.159046542811136" />
<path style="fill:none; stroke-width:0.03; stroke:%230D2959; stroke-opacity:0.39738966673499665; stroke-linecap:round;" d="M -0.20498295517611376 -0.20897224222868072 C 0.10012089176677827 -0.22943661524599723, 0.3973178323764349 1.7599895788808706, 1.2323766625587198 1.1982022077564756" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D37; stroke-opacity:0.36772216547328573; stroke-linecap:round;" d="M -0.21738185901121884 -0.17178639670867438 C 0.8608989408248564 -1.0476039239001675, 1.2040959559393039 0.8709965789789399, 1.2139271562644673 1.1511522200162192" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D2A; stroke-opacity:0.3492648254061883; stroke-linecap:round;" d="M -0.17373038179137618 -0.23169295961288855 C 0.9235488702896645 -0.9627576583114117, 1.1115679768527926 1.0278217689201472, 1.1772597883468547 1.2422755613332652" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D0F; stroke-opacity:0.23998231749474047; stroke-linecap:round;" d="M -0.15938364826369358 -0.23105638621187904 C 1.0215335232877227 -1.1255642118587252, 1.2912105252422372 0.838279008252014, 1.240593891912049 1.1723212413572541" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D0D; stroke-opacity:0.36929005698084133; stroke-linecap:round;" d="M -0.22388585190983532 -0.18574656024490488 C 0.8561025813501045 -1.0174751691356425, 1.1752153341585718 0.9736457615671746, 1.2319733626556166 1.2095560797055525" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D45; stroke-opacity:0.3447800429694058; stroke-linecap:round;" d="M -0.231595020230197 -0.22519979091835954 C 0.28307514297872755 -0.44385906977831024, 0.5353962529419765 1.5473864689624361, 1.1710755220149087 1.2105021586539852" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D17; stroke-opacity:0.2598835454469709; stroke-linecap:round;" d="M -0.17612039761279527 -0.17511245268986722 C 0.452152700433734 -0.5238896677487466, 0.7044248517882137 1.373466833687679, 1.1698614621766923 1.1857460135033375" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D20; stroke-opacity:0.43742638391397043; stroke-linecap:round;" d="M -0.24414096895154516 -0.15102222319802466 C 0.32765669779936335 -0.46154286612211837, 0.6564889975899425 1.5065317191580048, 1.2055637965526744 1.2200373478948743" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D0D; stroke-opacity:0.39798466321620635; stroke-linecap:round;" d="M -0.24596747069727037 -0.18008156924992705 C 0.3928730303298976 -0.5854133046118384, 0.7689021306966753 1.3809328348558556, 1.2403321031217729 1.161122591714198" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2359; stroke-opacity:0.42065989388737013; stroke-linecap:round;" d="M -0.22981329054442282 -0.20195496700567633 C 0.7087376403059746 -0.8817172971542317, 1.0240644743969884 1.1146268102849854, 1.2261782919750488 1.1997972647519872" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3F59; stroke-opacity:0.39114574724349993; stroke-linecap:round;" d="M -0.17131976932641915 -0.1565517254703087 C 0.8488943925750528 -0.9453664960680771, 1.169300925071424 0.9834807935176829, 1.2479972648227444 1.1883093711425357" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D29; stroke-opacity:0.33122503016898097; stroke-linecap:round;" d="M -0.15152543654458078 -0.21950574130485637 C 0.5386863230996025 -0.6077375846249239, 0.7533318696732699 1.2965615824520795, 1.1686395843090625 1.1695919320459331" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1E; stroke-opacity:0.49871179825797674; stroke-linecap:round;" d="M -0.2315096892787491 -0.16038103680296262 C 0.19655480811580503 -0.32309327972483026, 0.5263771041057322 1.6250330175831873, 1.206948403029491 1.1941731828088076" />
<path style="fill:none; stroke-width:0.02; stroke:%230D2F59; stroke-opacity:0.56646798530103; stroke-linecap:round;" d="M -0.248064690953102 -0.19193775684620273 C 0.8272170231562705 -1.020159035016912, 1.1424023599142206 0.9539338245400275, 1.19438836196956 1.192155305333869" />
<path style="fill:none; stroke-width:0.02; stroke:%230D2759; stroke-opacity:0.5424397489198842; stroke-linecap:round;" d="M -0.23486715860349147 -0.2220240073913498 C 0.5401248532413777 -0.7235416858279923, 0.8276629178124669 1.2362459905986225, 1.1769069310189932 1.1673426811115533" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D27; stroke-opacity:0.3625879509238053; stroke-linecap:round;" d="M -0.19809275849852703 -0.2474208839919321 C 0.8297133943094279 -0.9351298620722454, 1.0539669614853209 1.095005482729536, 1.2056598239776155 1.2362292997765059" />
<path style="fill:none; stroke-width:0.02; stroke:%230D1459; stroke-opacity:0.45408057095162524; stroke-linecap:round;" d="M -0.18442726840852333 -0.2190508010279076 C 0.597087888181388 -0.7072069535821506, 0.8551168667989416 1.2599395985074995, 1.208254530142002 1.1939891556579219" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D3A; stroke-opacity:0.4001306657744314; stroke-linecap:round;" d="M -0.20586996812001568 -0.17269978889275844 C 0.8730990406089653 -0.9697365425529335, 1.1486884422979977 0.9984633721587447, 1.2014511815277922 1.2305847882149457" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1F; stroke-opacity:0.37020781613966275; stroke-linecap:round;" d="M -0.2432793083395489 -0.2496736905007164 C 0.3488834458800144 -0.5747798720226589, 0.6873177010161854 1.4433356651258968, 1.2442757688447432 1.155498170402146" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D0F; stroke-opacity:0.4518577377650635; stroke-linecap:round;" d="M -0.1921428300225701 -0.20835607575366474 C 0.863237509049823 -1.000865884626811, 1.1478829353761681 0.9278161971758273, 1.1985563678069089 1.1579503805552813" />
<path style="fill:none; stroke-width:0.03; stroke:%230D1559; stroke-opacity:0.31407718790361844; stroke-linecap:round;" d="M -0.17343576770718877 -0.21258765855131595 C 0.18665762006591652 -0.2884197451332895, 0.43555700475016684 1.6500457042607772, 1.1946602591381592 1.183088687712642" />
</svg>)
React Native Setup in Late 2021
August 2021
React Native is a leading, cross-platform, declarative UI framework with hot reloading. If you want to make mobile apps, along with Flutter…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDBDDB; fill-opacity:0.5;" d="M 0.8151731355255514 -0.44638253290506535 A 0.5542418288602672 0.5542418288602672 0 0 0 0.2609313066652842 0.1078592959552019 A 0.5542418288602672 0.5542418288602672 0 0 0 1.3694149643858187 0.10785929595520169 A 0.5542418288602672 0.5542418288602672 0 0 0 0.2609313066652842 0.10785929595520204 A 0.5542418288602672 0.5542418288602672 0 0 0 1.3694149643858187 0.10785929595520155" />
<path style="fill:%23BDD8DB; fill-opacity:0.5;" d="M 0.8689743909733801 -0.6356334280662096 A 0.9615608530320605 0.9615608530320605 0 0 0 -0.09258646205868037 0.32592742496585103 A 0.9615608530320605 0.9615608530320605 0 0 0 1.8305352440054405 0.3259274249658507 A 0.9615608530320605 0.9615608530320605 0 0 0 -0.09258646205868037 0.32592742496585125 A 0.9615608530320605 0.9615608530320605 0 0 0 1.8305352440054405 0.3259274249658505" />
<path style="fill:%23BDD6DB; fill-opacity:0.5;" d="M 0.9506683393084348 -0.2276476580126744 A 0.9176946088616632 0.9176946088616632 0 0 0 0.03297373044677154 0.6900469508489889 A 0.9176946088616632 0.9176946088616632 0 0 0 1.8683629481700978 0.6900469508489886 A 0.9176946088616632 0.9176946088616632 0 0 0 0.03297373044677154 0.6900469508489891 A 0.9176946088616632 0.9176946088616632 0 0 0 1.8683629481700978 0.6900469508489884" />
<path style="fill:%23BDCEDB; fill-opacity:0.5;" d="M 0.09127748343932729 -0.10510045575668586 A 0.36275706800273294 0.36275706800273294 0 0 0 -0.27147958456340565 0.25765661224604713 A 0.36275706800273294 0.36275706800273294 0 0 0 0.45403455144206023 0.25765661224604697 A 0.36275706800273294 0.36275706800273294 0 0 0 -0.27147958456340565 0.2576566122460472 A 0.36275706800273294 0.36275706800273294 0 0 0 0.45403455144206023 0.2576566122460469" />
<path style="fill:%23BDBDDB; fill-opacity:0.5;" d="M 0.25858762264506896 0.29669439925814933 A 0.09670163893658079 0.09670163893658079 0 0 0 0.16188598370848817 0.3933960381947301 A 0.09670163893658079 0.09670163893658079 0 0 0 0.35528926158164975 0.3933960381947301 A 0.09670163893658079 0.09670163893658079 0 0 0 0.16188598370848817 0.3933960381947302 A 0.09670163893658079 0.09670163893658079 0 0 0 0.35528926158164975 0.39339603819473007" />
<path style="fill:none; stroke-width:0.02; stroke:%231F397A; stroke-opacity:0.3653575360455131; stroke-linecap:round;" d="M -0.22621675093852633 -0.20024876717165124 C -0.6920186475060157 0.5056878357277672, 1.2499795357725458 0.8678607890961627, 1.1531209228878168 1.2139484515967043" />
<path style="fill:none; stroke-width:0.05; stroke:%231F4B7A; stroke-opacity:0.350382061310792; stroke-linecap:round;" d="M -0.24522134883950059 -0.15678121120499192 C -0.7165398779770079 0.6340185751469136, 1.2782434681681458 0.88351403285298, 1.2421475527599048 1.195676674286824" />
<path style="fill:none; stroke-width:0.02; stroke:%231F567A; stroke-opacity:0.41708606019702466; stroke-linecap:round;" d="M -0.15180342291475168 -0.17532257413032223 C -0.7619928761931329 0.6626352733934648, 1.123740465442171 1.0164583163884922, 1.1863372677686448 1.199653961468258" />
<path style="fill:none; stroke-width:0.02; stroke:%231F417A; stroke-opacity:0.5428595803723666; stroke-linecap:round;" d="M -0.17681691608087713 -0.19464684566852122 C -0.8034817998573334 0.679609017358614, 1.091046538791141 1.0090060337493616, 1.182577749601597 1.1654215949855915" />
<path style="fill:none; stroke-width:0.05; stroke:%23417A1F; stroke-opacity:0.40490856245465784; stroke-linecap:round;" d="M -0.22819211080221896 -0.24020722107674217 C -0.27727624071087953 0.06366323267758711, 1.676658212234822 0.40904682683793137, 1.1705712885272892 1.1671344667231658" />
<path style="fill:none; stroke-width:0.05; stroke:%231F3C7A; stroke-opacity:0.22295168634307552; stroke-linecap:round;" d="M -0.16045863153513382 -0.16173975067648255 C -0.3364099881784378 0.2801427885240606, 1.5799914361544207 0.5617197449973156, 1.2443518526484347 1.1718222108122514" />
<path style="fill:none; stroke-width:0.05; stroke:%23447A1F; stroke-opacity:0.31793135776947923; stroke-linecap:round;" d="M -0.20375101984248997 -0.16398350075263501 C -0.5701463440347108 0.4706222148811276, 1.3628111872353281 0.7747462170709474, 1.2016153148365678 1.1975456732837746" />
<path style="fill:none; stroke-width:0.02; stroke:%236C7A1F; stroke-opacity:0.18430181422347203; stroke-linecap:round;" d="M -0.19010414851882115 -0.18714293101762858 C -0.3988363302486252 0.28160939801848006, 1.5742768865152015 0.6184474677301645, 1.2292604772218372 1.2242534380336987" />
<path style="fill:none; stroke-width:0.05; stroke:%231F617A; stroke-opacity:0.40680260708584043; stroke-linecap:round;" d="M -0.23921904907433778 -0.1868962839341656 C -0.671994359458635 0.5476929365439126, 1.2869987375384877 0.8074751145445626, 1.2129639756067239 1.1533668234135308" />
<path style="fill:none; stroke-width:0.05; stroke:%233E7A1F; stroke-opacity:0.35751504086517333; stroke-linecap:round;" d="M -0.1722688190730977 -0.19757906206896675 C -0.45453982978724794 0.31897917969106604, 1.4679472561537428 0.6987301672859639, 1.180995593803734 1.2197574671400655" />
<path style="fill:none; stroke-width:0.02; stroke:%231F417A; stroke-opacity:0.5507949126317531; stroke-linecap:round;" d="M -0.18395336373379712 -0.17271714788485237 C -0.8380541785399681 0.745211933961733, 1.0909560031766543 1.0653736781556398, 1.2089520233942337 1.1996524838548592" />
<path style="fill:none; stroke-width:0.05; stroke:%23437A1F; stroke-opacity:0.5793112516177107; stroke-linecap:round;" d="M -0.19220229027711172 -0.18985933508771474 C -0.6769880931662924 0.5414781751909239, 1.2691791822784182 0.8933533253123038, 1.196472969333781 1.2183182846142355" />
<path style="fill:none; stroke-width:0.05; stroke:%231F487A; stroke-opacity:0.28078488958332937; stroke-linecap:round;" d="M -0.1552113093368555 -0.19439207463802233 C -0.2254396711605533 0.12752981872366023, 1.6800699807856918 0.44546174815727524, 1.2197629183725722 1.1626243654055552" />
<path style="fill:none; stroke-width:0.02; stroke:%236D7A1F; stroke-opacity:0.3327898052667126; stroke-linecap:round;" d="M -0.16172292248520798 -0.16662902238894103 C -0.4226391984454435 0.33811588716704777, 1.4680269294419785 0.6761351452431887, 1.1895497500210634 1.1982656953489954" />
</svg>)
An Introduction to React Native Reanimated 2
August 2021
React Native Reanimated 2 is the main third party approach to animation for React Native. In version 1 a animation node graph approach was…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBC9BD; fill-opacity:0.5;" d="M 0.41719687061031174 0.440002001638653 A 0.09699829118659098 0.09699829118659098 0 0 0 0.32019857942372076 0.537000292825244 A 0.09699829118659098 0.09699829118659098 0 0 0 0.5141951617969027 0.537000292825244 A 0.09699829118659098 0.09699829118659098 0 0 0 0.32019857942372076 0.537000292825244 A 0.09699829118659098 0.09699829118659098 0 0 0 0.5141951617969027 0.537000292825244" />
<path style="fill:%23DBCFBD; fill-opacity:0.5;" d="M 0.9635366436054172 -0.48097467455706344 A 0.9262353321506664 0.9262353321506664 0 0 0 0.037301311454750796 0.4452606575936031 A 0.9262353321506664 0.9262353321506664 0 0 0 1.8897719757560836 0.4452606575936028 A 0.9262353321506664 0.9262353321506664 0 0 0 0.037301311454750796 0.44526065759360334 A 0.9262353321506664 0.9262353321506664 0 0 0 1.8897719757560836 0.44526065759360256" />
<path style="fill:%23DBBDC0; fill-opacity:0.5;" d="M 0.9286716324036381 -0.5209038747105491 A 0.7647613642817711 0.7647613642817711 0 0 0 0.16391026812186704 0.24385748957122208 A 0.7647613642817711 0.7647613642817711 0 0 0 1.6934329966854094 0.2438574895712218 A 0.7647613642817711 0.7647613642817711 0 0 0 0.16391026812186704 0.24385748957122227 A 0.7647613642817711 0.7647613642817711 0 0 0 1.6934329966854094 0.24385748957122164" />
<path style="fill:%23DBDABD; fill-opacity:0.5;" d="M 0.10163587088145998 -0.5748559562500561 A 0.7209229774874082 0.7209229774874082 0 0 0 -0.6192871066059482 0.14606702123735213 A 0.7209229774874082 0.7209229774874082 0 0 0 0.8225588483688682 0.14606702123735188 A 0.7209229774874082 0.7209229774874082 0 0 0 -0.6192871066059482 0.14606702123735232 A 0.7209229774874082 0.7209229774874082 0 0 0 0.8225588483688682 0.14606702123735169" />
<path style="fill:none; stroke-width:0.05; stroke:%23863213; stroke-opacity:0.41899316634341766; stroke-linecap:round;" d="M 0.40500961841528194 -0.16041008643943366 C 0.5665415548347208 -0.1670316059827639, 0.877097877889401 1.1653206108915866, 0.5209650229436144 1.2027340745941342" />
<path style="fill:none; stroke-width:0.02; stroke:%23291386; stroke-opacity:0.4275951340527505; stroke-linecap:round;" d="M 0.5603244337412567 -0.22477852473646762 C 0.07413336115586636 -0.2676382551748402, 0.13280302639145233 1.162188437122056, 0.41300394873429364 1.1986480361794274" />
<path style="fill:none; stroke-width:0.05; stroke:%23863313; stroke-opacity:0.327754467222407; stroke-linecap:round;" d="M 0.5610175535493734 -0.2821561983962896 C 0.5875685600134746 -0.27299831791411305, 0.7312833640696788 1.2333275076095243, 0.4868718654031865 1.2291921580304175" />
<path style="fill:none; stroke-width:0.05; stroke:%23401386; stroke-opacity:0.42454736195072934; stroke-linecap:round;" d="M 0.5091703995669193 -0.16571094585133994 C 0.7667943267395164 -0.13869248071193163, 0.8556004116885748 1.1962066772713482, 0.40530930150143885 1.1681013179313415" />
<path style="fill:none; stroke-width:0.02; stroke:%23864613; stroke-opacity:0.4988855143366403; stroke-linecap:round;" d="M 0.5061610839096239 -0.17818258513804122 C 2.41444629542624 -0.23915073203178439, 2.6548086303830543 1.0837743615957178, 0.5540045431409616 1.1655494784907192" />
<path style="fill:none; stroke-width:0.05; stroke:%23862513; stroke-opacity:0.34118489454793904; stroke-linecap:round;" d="M 0.5702314501103568 -0.15526469741545657 C 0.15533676249220563 -0.17340346659094147, 0.2623766851181998 1.0882377380619956, 0.4949379480651243 1.1086684348600042" />
<path style="fill:none; stroke-width:0.02; stroke:%23863313; stroke-opacity:0.6296119338988428; stroke-linecap:round;" d="M 0.4922838139844984 -0.12496212440361346 C -0.14226888692437129 -0.095838020899641, 0.08720563203342573 1.1687135866115077, 0.5377371913686506 1.1594378574534079" />
<path style="fill:none; stroke-width:0.05; stroke:%23861320; stroke-opacity:0.3890040386239664; stroke-linecap:round;" d="M 0.46695456023998716 -0.18180001047301672 C -0.5822481247487985 -0.1300995742959643, -0.3183310358939071 1.269756381192904, 0.5270580812846257 1.241448559758245" />
<path style="fill:none; stroke-width:0.02; stroke:%23862813; stroke-opacity:0.5098942813366688; stroke-linecap:round;" d="M 0.5957513838498647 -0.14802229446278115 C -0.0956090367597667 -0.14793324184661039, 0.08799869396989565 1.2144959771582777, 0.5817543798382112 1.2266519431152216" />
<path style="fill:none; stroke-width:0.05; stroke:%23862913; stroke-opacity:0.48234058394559237; stroke-linecap:round;" d="M 0.4102869861405272 -0.10064681883932068 C 0.09748199825434667 -0.05786589432545852, 0.41910726943508325 1.153723121158615, 0.5545430994309569 1.144576426720321" />
<path style="fill:none; stroke-width:0.05; stroke:%23862B13; stroke-opacity:0.40550616308160764; stroke-linecap:round;" d="M 0.5803629002825424 -0.2915707760113477 C 0.21186883227710446 -0.30781786671298145, 0.32546682272026733 1.1069048567092903, 0.48957067535479304 1.1247984059086498" />
<path style="fill:none; stroke-width:0.05; stroke:%23231386; stroke-opacity:0.5750073063970538; stroke-linecap:round;" d="M 0.43497765493807783 -0.2416691942218748 C -0.16734901869466395 -0.24731975069795925, 0.002496857712068687 1.1285480121499596, 0.40543118304603315 1.144327461104263" />
<path style="fill:none; stroke-width:0.02; stroke:%23861322; stroke-opacity:0.28130143302467187; stroke-linecap:round;" d="M 0.4850186561745198 -0.19620461383507515 C 0.06314644961381041 -0.18689174743389447, 0.277870900655496 1.2497872825852983, 0.49115037057908634 1.2564190907940702" />
<path style="fill:none; stroke-width:0.02; stroke:%23862F13; stroke-opacity:0.32662208782695845; stroke-linecap:round;" d="M 0.5572568667958676 -0.13415356394917816 C -0.10568746494762975 -0.12336127532564656, 0.10138431606281288 1.2509467850042786, 0.5647742989521245 1.255646729399623" />
<path style="fill:none; stroke-width:0.05; stroke:%23863C13; stroke-opacity:0.3525583356368677; stroke-linecap:round;" d="M 0.40098827427552614 -0.22928135033060684 C -0.1730972447308148 -0.1803274014434838, 0.13400450663045885 1.2170502163650876, 0.5041846178008582 1.1977176710861988" />
<path style="fill:none; stroke-width:0.05; stroke:%23131786; stroke-opacity:0.260137697429892; stroke-linecap:round;" d="M 0.4685368089288561 -0.10392133617466037 C -0.617931779302615 -0.09209218887738446, -0.4233260785455658 1.206420867309554, 0.4746047060950169 1.2090793174729553" />
<path style="fill:none; stroke-width:0.02; stroke:%23261386; stroke-opacity:0.4444785910627186; stroke-linecap:round;" d="M 0.5636955087145608 -0.1340029757303695 C -0.4047684111755158 -0.16901401550232864, -0.27049229737496444 1.1576521157462123, 0.5060155092069819 1.1981929994159881" />
<path style="fill:none; stroke-width:0.05; stroke:%232E1386; stroke-opacity:0.5136095520158859; stroke-linecap:round;" d="M 0.4893969675530932 -0.15979211638497687 C -0.08018048163826255 -0.11439522951032499, 0.18879630667616323 1.1348246160782214, 0.5761452399227687 1.1151092415659398" />
</svg>)
Valtio: A great state management solution for React
August 2021
Valtio is a fantastic and relatively new state management library for React. It is extraordinarily clear, concise and easy to use, yet…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBDABD; fill-opacity:0.5;" d="M 0.06684120692986495 0.14040739223396093 A 0.48433107807774056 0.48433107807774056 0 0 0 -0.4174898711478756 0.6247384703117016 A 0.48433107807774056 0.48433107807774056 0 0 0 0.5511722850076055 0.6247384703117014 A 0.48433107807774056 0.48433107807774056 0 0 0 -0.4174898711478756 0.6247384703117017 A 0.48433107807774056 0.48433107807774056 0 0 0 0.5511722850076055 0.6247384703117013" />
<path style="fill:%23DBD4BD; fill-opacity:0.5;" d="M 0.1250953131787389 0.2849765919838253 A 0.6462141866160256 0.6462141866160256 0 0 0 -0.5211188734372867 0.931190778599851 A 0.6462141866160256 0.6462141866160256 0 0 0 0.7713094997947645 0.9311907785998508 A 0.6462141866160256 0.6462141866160256 0 0 0 -0.5211188734372867 0.9311907785998511 A 0.6462141866160256 0.6462141866160256 0 0 0 0.7713094997947645 0.9311907785998506" />
<path style="fill:%23DBD9BD; fill-opacity:0.5;" d="M 0.2186719339012303 0.09080609797288064 A 0.4891955785271527 0.4891955785271527 0 0 0 -0.2705236446259224 0.5800016765000334 A 0.4891955785271527 0.4891955785271527 0 0 0 0.707867512428383 0.5800016765000332 A 0.4891955785271527 0.4891955785271527 0 0 0 -0.2705236446259224 0.5800016765000335 A 0.4891955785271527 0.4891955785271527 0 0 0 0.707867512428383 0.5800016765000331" />
<path style="fill:%23DBD2BD; fill-opacity:0.5;" d="M 0.22569914423610404 0.19836901638851268 A 0.5263305872246606 0.5263305872246606 0 0 0 -0.3006314429885566 0.7246996036131734 A 0.5263305872246606 0.5263305872246606 0 0 0 0.7520297314607647 0.7246996036131732 A 0.5263305872246606 0.5263305872246606 0 0 0 -0.3006314429885566 0.7246996036131735 A 0.5263305872246606 0.5263305872246606 0 0 0 0.7520297314607647 0.7246996036131731" />
<path style="fill:%23DBD3BD; fill-opacity:0.5;" d="M 0.4047190138991291 0.08870690987186625 A 0.4734960466726388 0.4734960466726388 0 0 0 -0.06877703277350966 0.5622029565445051 A 0.4734960466726388 0.4734960466726388 0 0 0 0.8782150605717679 0.5622029565445049 A 0.4734960466726388 0.4734960466726388 0 0 0 -0.06877703277350966 0.5622029565445053 A 0.4734960466726388 0.4734960466726388 0 0 0 0.8782150605717679 0.5622029565445048" />
<path style="fill:%23DBD2BD; fill-opacity:0.5;" d="M 0.9995814003346102 0.19823721068562572 A 0.26944798352353283 0.26944798352353283 0 0 0 0.7301334168110774 0.4676851942091586 A 0.26944798352353283 0.26944798352353283 0 0 0 1.269029383858143 0.4676851942091585 A 0.26944798352353283 0.26944798352353283 0 0 0 0.7301334168110774 0.46768519420915866 A 0.26944798352353283 0.26944798352353283 0 0 0 1.269029383858143 0.46768519420915844" />
<path style="fill:%23DBDBBD; fill-opacity:0.5;" d="M 0.4826911255029489 0.6235791041187497 A 0.1930160235926373 0.1930160235926373 0 0 0 0.2896751019103116 0.816595127711387 A 0.1930160235926373 0.1930160235926373 0 0 0 0.6757071490955862 0.816595127711387 A 0.1930160235926373 0.1930160235926373 0 0 0 0.2896751019103116 0.8165951277113871 A 0.1930160235926373 0.1930160235926373 0 0 0 0.6757071490955862 0.8165951277113869" />
<path style="fill:none; stroke-width:0.02; stroke:%23481966; stroke-opacity:0.4498431166255936; stroke-linecap:round;" d="M 0.5063964785403582 -0.05327173913277601 C 3.166878437572905 -0.11796240061826879, 3.542211874688548 1.365854996604781, 0.5538927504274572 1.4765430736715892" />
<path style="fill:none; stroke-width:0.05; stroke:%23663C19; stroke-opacity:0.5615134481666453; stroke-linecap:round;" d="M 0.5678807665171672 -0.06358526548771679 C 2.0515490670962304 0.032989379855325573, 2.3172283650161374 1.6336539344770822, 0.4831628248359513 1.5567651213493336" />
<path style="fill:none; stroke-width:0.02; stroke:%23331966; stroke-opacity:0.38509446807950076; stroke-linecap:round;" d="M 0.4428364987210484 -0.11941902969906726 C 0.5237439349093335 -0.10587654942550073, 0.9593635406938786 1.416820204986151, 0.5408487331265265 1.4613287201796115" />
<path style="fill:none; stroke-width:0.02; stroke:%23662C19; stroke-opacity:0.35418848954059495; stroke-linecap:round;" d="M 0.5951080105192366 -0.018406180828777846 C 2.466244690794947 0.1792333200884808, 2.643840993774611 1.6440298193730998, 0.45358246558316095 1.4503142661178376" />
<path style="fill:none; stroke-width:0.02; stroke:%23663D19; stroke-opacity:0.24094618335672732; stroke-linecap:round;" d="M 0.5280396964276343 -0.19087068485485703 C 2.501448970858226 -0.15728142723690908, 2.8533802084375774 1.4961793176081306, 0.5162036473914576 1.4995872231306864" />
<path style="fill:none; stroke-width:0.05; stroke:%23664219; stroke-opacity:0.4480901597571924; stroke-linecap:round;" d="M 0.5734670782451925 -0.08841328630124495 C -0.5840293453319243 -0.05362682720155543, -0.22425577140881955 1.4768430792218963, 0.5957360063342902 1.4836170104179291" />
<path style="fill:none; stroke-width:0.05; stroke:%23663319; stroke-opacity:0.5338416532678734; stroke-linecap:round;" d="M 0.4822507191118801 -0.00004127539850411199 C -1.099977377509794 0.06862104200953312, -0.7481405034842328 1.4490269273041152, 0.5290360886325913 1.4237286228922301" />
<path style="fill:none; stroke-width:0.05; stroke:%23663519; stroke-opacity:0.24462753496284395; stroke-linecap:round;" d="M 0.43393802987336083 -0.11585607372641658 C -0.7383129452409998 -0.0809281714760659, -0.383547104855362 1.4270748472125168, 0.45614730113408886 1.4331560805669168" />
<path style="fill:none; stroke-width:0.02; stroke:%233A1966; stroke-opacity:0.4867862063823827; stroke-linecap:round;" d="M 0.4444276124472324 -0.1634387599415706 C -0.00587157602680663 -0.11340281010637032, 0.44069773508560406 1.4019251227639935, 0.5547179026468068 1.4124669941098185" />
<path style="fill:none; stroke-width:0.05; stroke:%23664A19; stroke-opacity:0.3963226556703183; stroke-linecap:round;" d="M 0.5054320276455971 -0.18656480174271595 C 1.0102122817140993 -0.1511591490254609, 1.3117819366104024 1.463329230400711, 0.45279245101632376 1.4550033689491726" />
</svg>)
Getting Started with Thermal Printing
June 2020
For a while I'd been interested in trying out retro thermal printing (see GameBoy Printer). You can print low quality printouts on cheap…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBD0BD; fill-opacity:0.5;" d="M 0.7226906886842326 -0.3869388312051972 A 0.39224784841499355 0.39224784841499355 0 0 0 0.33044284026923904 0.005309017209796422 A 0.39224784841499355 0.39224784841499355 0 0 0 1.1149385370992262 0.005309017209796278 A 0.39224784841499355 0.39224784841499355 0 0 0 0.33044284026923904 0.005309017209796518 A 0.39224784841499355 0.39224784841499355 0 0 0 1.1149385370992262 0.005309017209796181" />
<path style="fill:%23DBCABD; fill-opacity:0.5;" d="M 0.8716942904934057 0.18165519337381586 A 0.2950207192119002 0.2950207192119002 0 0 0 0.5766735712815055 0.4766759125857161 A 0.2950207192119002 0.2950207192119002 0 0 0 1.1667150097053058 0.476675912585716 A 0.2950207192119002 0.2950207192119002 0 0 0 0.5766735712815055 0.4766759125857162 A 0.2950207192119002 0.2950207192119002 0 0 0 1.1667150097053058 0.4766759125857159" />
<path style="fill:%23DBD0BD; fill-opacity:0.5;" d="M 0.3779659473178175 0.20550289315637432 A 0.2153715473247138 0.2153715473247138 0 0 0 0.1625943999931037 0.42087444048108813 A 0.2153715473247138 0.2153715473247138 0 0 0 0.5933374946425314 0.4208744404810881 A 0.2153715473247138 0.2153715473247138 0 0 0 0.1625943999931037 0.4208744404810882 A 0.2153715473247138 0.2153715473247138 0 0 0 0.5933374946425314 0.420874440481088" />
<path style="fill:%23DBCBBD; fill-opacity:0.5;" d="M 0.5638959953503188 -0.01644107145093604 A 0.46544695733631086 0.46544695733631086 0 0 0 0.0984490380140079 0.4490058858853749 A 0.46544695733631086 0.46544695733631086 0 0 0 1.0293429526866296 0.4490058858853747 A 0.46544695733631086 0.46544695733631086 0 0 0 0.0984490380140079 0.449005885885375 A 0.46544695733631086 0.46544695733631086 0 0 0 1.0293429526866296 0.4490058858853746" />
<path style="fill:%23DBD2BD; fill-opacity:0.5;" d="M 0.8237227284404509 0.6302259025644646 A 0.3514026419930709 0.3514026419930709 0 0 0 0.47232008644738 0.9816285445575356 A 0.3514026419930709 0.3514026419930709 0 0 0 1.1751253704335218 0.9816285445575355 A 0.3514026419930709 0.3514026419930709 0 0 0 0.47232008644738 0.9816285445575357 A 0.3514026419930709 0.3514026419930709 0 0 0 1.1751253704335218 0.9816285445575353" />
<path style="fill:%23DBC8BD; fill-opacity:0.5;" d="M 0.18949154862934414 0.02725279567152572 A 0.3002699885381347 0.3002699885381347 0 0 0 -0.11077843990879055 0.32752278420966047 A 0.3002699885381347 0.3002699885381347 0 0 0 0.48976153716747883 0.32752278420966036 A 0.3002699885381347 0.3002699885381347 0 0 0 -0.11077843990879055 0.3275227842096605 A 0.3002699885381347 0.3002699885381347 0 0 0 0.48976153716747883 0.32752278420966024" />
<path style="fill:%23DBC2BD; fill-opacity:0.5;" d="M 0.9102040267282978 -0.24545424764371893 A 0.3209478320279169 0.3209478320279169 0 0 0 0.5892561947003809 0.075493584384198 A 0.3209478320279169 0.3209478320279169 0 0 0 1.2311518587562147 0.07549358438419787 A 0.3209478320279169 0.3209478320279169 0 0 0 0.5892561947003809 0.07549358438419806 A 0.3209478320279169 0.3209478320279169 0 0 0 1.2311518587562147 0.0754935843841978" />
<path style="fill:%23CEDBBD; fill-opacity:0.5;" d="M 0.011233489338355773 0.5971677039767942 A 0.2999410344137306 0.2999410344137306 0 0 0 -0.2887075450753748 0.8971087383905247 A 0.2999410344137306 0.2999410344137306 0 0 0 0.3111745237520864 0.8971087383905246 A 0.2999410344137306 0.2999410344137306 0 0 0 -0.2887075450753748 0.8971087383905249 A 0.2999410344137306 0.2999410344137306 0 0 0 0.3111745237520864 0.8971087383905246" />
<path style="fill:%23DBD1BD; fill-opacity:0.5;" d="M 0.42295575855999645 -0.1298783320339793 A 0.4035572457237498 0.4035572457237498 0 0 0 0.019398512836246662 0.27367891368977054 A 0.4035572457237498 0.4035572457237498 0 0 0 0.8265130042837463 0.2736789136897704 A 0.4035572457237498 0.4035572457237498 0 0 0 0.019398512836246662 0.27367891368977065 A 0.4035572457237498 0.4035572457237498 0 0 0 0.8265130042837463 0.27367891368977026" />
<path style="fill:none; stroke-width:0.02; stroke:%23650679; stroke-opacity:0.4019074266793324; stroke-linecap:round;" d="M 0.7116054638386156 -0.4139745162024407 C -0.8396588838345369 -0.4211281937802402, -0.31943934308828825 0.9602203457263034, 0.6485772990660621 1.0607388826030706" />
<path style="fill:none; stroke-width:0.02; stroke:%23660679; stroke-opacity:0.40483948372906914; stroke-linecap:round;" d="M 0.5741260513018662 -0.32456564517781733 C -0.24764379498128208 -0.1854251771127265, 0.44939359973475324 1.0879808507576532, 0.7160801356663758 1.120174151249681" />
<path style="fill:none; stroke-width:0.03; stroke:%23430679; stroke-opacity:0.2221172969844811; stroke-linecap:round;" d="M 0.6027356663756152 0.0037738968308833054 C 1.2940825616117948 -0.013017824309063841, 1.9703221698186963 1.2022870529264673, 0.7483373172578974 1.386910228361744" />
<path style="fill:none; stroke-width:0.03; stroke:%233B0679; stroke-opacity:0.21586980688189214; stroke-linecap:round;" d="M 0.28777245454540057 -0.24389943717315565 C 0.6110084689537575 -0.23631547666206276, 1.3954549530972926 1.007801978070888, 0.5216203685514287 1.2081679444491227" />
<path style="fill:none; stroke-width:0.03; stroke:%23795606; stroke-opacity:0.3735095031846002; stroke-linecap:round;" d="M 0.6540043752065645 -0.18051338600916467 C 0.25546536100516043 -0.17966157313019537, 0.5962166936981725 0.9987076607811838, 0.5054611052373414 1.0371074166662022" />
<path style="fill:none; stroke-width:0.03; stroke:%23796206; stroke-opacity:0.5182331408103824; stroke-linecap:round;" d="M 0.36235176939047903 -0.4245375078711078 C -0.35500321193633394 -0.36817882076461234, 0.33265857785970027 1.3673912084127988, 0.3144770599524631 1.4416859716512644" />
<path style="fill:none; stroke-width:0.01; stroke:%23793506; stroke-opacity:0.45929505620911704; stroke-linecap:round;" d="M 0.38947121317960054 -0.20585981762771893 C -1.223068306808801 -0.27150325113573703, -0.7008032214603555 1.2984409972310211, 0.2543807731216767 1.4431508965154127" />
<path style="fill:none; stroke-width:0.02; stroke:%23797506; stroke-opacity:0.4126617067094489; stroke-linecap:round;" d="M 0.2522652446061304 -0.1912653546524562 C 0.25891894693213396 -0.12728478153982126, 1.0953618555028897 1.2429938924742263, 0.48448144323807124 1.397248422703262" />
<path style="fill:none; stroke-width:0.01; stroke:%23792906; stroke-opacity:0.408974434575229; stroke-linecap:round;" d="M 0.2793412230805417 -0.06718658776570208 C 0.15083661982693825 0.003199019117637647, 0.8236914777767199 1.137945677382088, 0.45341415661073253 1.2405145448028798" />
<path style="fill:none; stroke-width:0.03; stroke:%23370679; stroke-opacity:0.5262727377762026; stroke-linecap:round;" d="M 0.37363998794281417 -0.04611154726036992 C -0.31928833431343434 0.0036763977652464197, 0.18178742933465813 1.1872343191852597, 0.3705499926259204 1.239142017683343" />
<path style="fill:none; stroke-width:0.03; stroke:%23794606; stroke-opacity:0.48315732186043825; stroke-linecap:round;" d="M 0.48012743047723255 -0.061154358735201586 C 0.37107947901062194 -0.02240082882494676, 0.7082027156961648 1.3152532591226342, 0.265794631125687 1.3015752501154831" />
<path style="fill:none; stroke-width:0.03; stroke:%23795806; stroke-opacity:0.3581461812420538; stroke-linecap:round;" d="M 0.2933390859311402 -0.336265139308597 C -0.3360642789684942 -0.08180589421389645, 0.5783333467041029 0.9958028732600483, 0.7120174914149804 1.013576357443487" />
<path style="fill:none; stroke-width:0.01; stroke:%23795806; stroke-opacity:0.5526711842571835; stroke-linecap:round;" d="M 0.25982073125406685 -0.21930486653842846 C -1.5822794738265082 0.08617956323388354, -0.7365169693169105 1.5249156337576164, 0.47376975816997546 1.4358390874855576" />
<path style="fill:none; stroke-width:0.02; stroke:%23795306; stroke-opacity:0.3106217479418881; stroke-linecap:round;" d="M 0.26555376092846394 -0.07514554926050027 C -0.23898587879440103 0.04516477023079557, 0.4419509961300795 1.198255472461215, 0.4398693262241999 1.2525996367212784" />
<path style="fill:none; stroke-width:0.01; stroke:%23794B06; stroke-opacity:0.3373074079634838; stroke-linecap:round;" d="M 0.4150531882071288 -0.32794099436509183 C 0.5622719353182664 -0.3015903124761572, 1.3166885096693028 0.8140561648531932, 0.6716461292790088 0.9941677351367687" />
<path style="fill:none; stroke-width:0.01; stroke:%23792406; stroke-opacity:0.39482376614678116; stroke-linecap:round;" d="M 0.2828031592701648 -0.3029341389825994 C -0.6833961586835828 -0.026383445579114206, 0.28015891684880323 1.3374056969368002, 0.6344983555724601 1.3294474639909222" />
<path style="fill:none; stroke-width:0.01; stroke:%232C0679; stroke-opacity:0.2845678144133072; stroke-linecap:round;" d="M 0.6070575197893409 -0.20626947717116945 C 0.2700970419134089 -0.1242944480798549, 0.8728378436519858 0.9940026191344697, 0.7230797670011784 1.05880903532224" />
<path style="fill:none; stroke-width:0.02; stroke:%23650679; stroke-opacity:0.36164463084176823; stroke-linecap:round;" d="M 0.41999879141922875 -0.2852781289502124 C -0.11510458420229475 -0.28270521409480176, 0.3033608741158462 1.0588250310262866, 0.27897558574763426 1.11290969600113" />
<path style="fill:none; stroke-width:0.02; stroke:%23794606; stroke-opacity:0.2380726862100303; stroke-linecap:round;" d="M 0.37587130227425236 -0.21280280653883127 C -0.4900467480766113 -0.09752408192939943, 0.13067876823793467 1.116270266131861, 0.47099598472392595 1.14717814214327" />
<path style="fill:none; stroke-width:0.03; stroke:%23795406; stroke-opacity:0.3451353164997871; stroke-linecap:round;" d="M 0.5178881298885127 -0.22770229320517044 C 0.38306866493548797 -0.17427076463812308, 0.8970179753230902 1.2892344837686682, 0.41688002179088174 1.3201313115019546" />
<path style="fill:none; stroke-width:0.03; stroke:%23795206; stroke-opacity:0.36399900596804674; stroke-linecap:round;" d="M 0.5385810321428446 -0.2465574861342471 C 0.6217434348192292 -0.16521814432766568, 1.0106207075107787 1.4482584265471146, 0.2637147985266815 1.3902017299985112" />
<path style="fill:none; stroke-width:0.03; stroke:%23410679; stroke-opacity:0.3821807709433251; stroke-linecap:round;" d="M 0.2888996768420961 -0.2762565121046332 C 0.9369136432895604 -0.26038936237620425, 1.6253290669956506 1.0880052572147934, 0.3935208292592664 1.2340872435368728" />
<path style="fill:none; stroke-width:0.03; stroke:%23795006; stroke-opacity:0.52391898640919; stroke-linecap:round;" d="M 0.7211297943520398 -0.2913840917352236 C 0.6333745629320844 -0.2474708658392487, 0.8691648881026297 1.352505277077971, 0.31072712382385864 1.27293377346086" />
<path style="fill:none; stroke-width:0.03; stroke:%23795706; stroke-opacity:0.44858158874264376; stroke-linecap:round;" d="M 0.4911316775960474 -0.0056734830202972986 C 0.1310560631923895 0.07720464990938397, 0.6496635443092201 0.994147078046753, 0.6087034776986664 1.041185632529368" />
<path style="fill:none; stroke-width:0.01; stroke:%23795606; stroke-opacity:0.3776994872124833; stroke-linecap:round;" d="M 0.29947629508870904 0.012922963601468773 C 0.19067113940831293 0.06851421190338369, 0.7379448088321832 1.1891770433723643, 0.3635449680411936 1.2584304329595806" />
<path style="fill:none; stroke-width:0.03; stroke:%23794006; stroke-opacity:0.42107123269681457; stroke-linecap:round;" d="M 0.7053844097949178 0.011383570421950595 C -0.9307872967329001 -0.32190111259419685, -0.6956576095914777 1.062193559627865, 0.3790161543877754 1.3768460537261307" />
<path style="fill:none; stroke-width:0.01; stroke:%23794506; stroke-opacity:0.4537587075410996; stroke-linecap:round;" d="M 0.5515811414912208 -0.15791357460320132 C -0.8363168447849877 -0.28784472262608085, -0.5160489453491414 0.8439887814155581, 0.4024400864096516 1.0088664192128483" />
<path style="fill:none; stroke-width:0.02; stroke:%23795806; stroke-opacity:0.38175731771557275; stroke-linecap:round;" d="M 0.374085966352142 -0.43059266310905925 C -2.0551533503800354 -0.007312442114326911, -1.1771523290334807 1.4310713786212277, 0.6178303586907532 1.236867225596779" />
<path style="fill:none; stroke-width:0.02; stroke:%23380679; stroke-opacity:0.3936423501842541; stroke-linecap:round;" d="M 0.45378653880909475 -0.16622562138176855 C -2.0720752230756534 -0.20906707700825888, -1.5074322214370242 1.2884771767129255, 0.38606728933193024 1.43279739734031" />
<path style="fill:none; stroke-width:0.01; stroke:%23794906; stroke-opacity:0.5249024986473508; stroke-linecap:round;" d="M 0.305410199334732 -0.2611736219007326 C 0.17470021703247307 -0.18411806090614324, 0.9250198041955792 1.0648140830550366, 0.5059759459993204 1.1819425772893948" />
<path style="fill:none; stroke-width:0.01; stroke:%23793206; stroke-opacity:0.31922203450660386; stroke-linecap:round;" d="M 0.5913115776224782 -0.39726981608950357 C -1.6706337413132466 -0.39731993848134456, -1.0705441164827463 1.132695407829196, 0.5434696572528543 1.2455222183537855" />
<path style="fill:none; stroke-width:0.01; stroke:%23420679; stroke-opacity:0.43949487789733443; stroke-linecap:round;" d="M 0.3468781398666724 0.03926867087400798 C 0.26021228623450615 0.11996221270758656, 0.9826760566640627 0.8105611833849977, 0.7407280085834778 0.9578344653578577" />
<path style="fill:none; stroke-width:0.03; stroke:%23795D06; stroke-opacity:0.37287535177178477; stroke-linecap:round;" d="M 0.25795170647064597 -0.0016439478006379793 C -0.6546604002751425 0.2478179919743022, 0.18877976027783727 1.4620298982700808, 0.5577950926491997 1.4460424138084789" />
<path style="fill:none; stroke-width:0.02; stroke:%23791606; stroke-opacity:0.3747728681500414; stroke-linecap:round;" d="M 0.26696941634010385 0.04281577935733538 C 0.2512384067559243 0.10136414107917502, 1.0572432471599806 1.1396084266947109, 0.6013676935927337 1.3139462964713553" />
<path style="fill:none; stroke-width:0.03; stroke:%23795606; stroke-opacity:0.3277273526884121; stroke-linecap:round;" d="M 0.5001683160774708 -0.26172050429899796 C 0.17960895303962338 -0.1870624970233481, 0.8119249357431442 1.1013284886155899, 0.5767078189645887 1.1714286639161557" />
<path style="fill:none; stroke-width:0.03; stroke:%23470679; stroke-opacity:0.4784103302435486; stroke-linecap:round;" d="M 0.7184529990117452 -0.322646368320331 C -0.6275078398230727 -0.3169155099746743, -0.15345588869312304 0.9128218398597789, 0.6723970314629251 0.9944937342508109" />
<path style="fill:none; stroke-width:0.01; stroke:%233A0679; stroke-opacity:0.35281716334301555; stroke-linecap:round;" d="M 0.6330650652063075 -0.13523504820306814 C 0.9578242578819005 -0.09101224918865058, 1.4967209501254655 1.0930037187860817, 0.6645881782449254 1.1652686044925142" />
<path style="fill:none; stroke-width:0.03; stroke:%23440679; stroke-opacity:0.3704791768971352; stroke-linecap:round;" d="M 0.6556418743189898 -0.36928905235148435 C 1.0732137398895922 -0.28590024918071955, 1.5434456529370317 1.047297082879901, 0.5655074514177119 1.0415294916399336" />
<path style="fill:none; stroke-width:0.02; stroke:%23130679; stroke-opacity:0.5129275646228084; stroke-linecap:round;" d="M 0.5838026785950564 -0.0348462362035708 C -0.12893922338319186 -0.00800690948882088, 0.26024380454165863 0.9610991948665004, 0.5618605527597698 1.0092555853815321" />
<path style="fill:none; stroke-width:0.03; stroke:%234A0679; stroke-opacity:0.2940827550928055; stroke-linecap:round;" d="M 0.3060219072213952 -0.42679146141419694 C 0.010868768468420553 -0.3422006787906302, 0.7723060480543003 1.2208103905489407, 0.39367205942060574 1.3096151109186276" />
<path style="fill:none; stroke-width:0.02; stroke:%23794B06; stroke-opacity:0.4323131934857928; stroke-linecap:round;" d="M 0.26447944727630157 -0.3004698489493506 C -0.11513940198816314 -0.23066451692109735, 0.49851373934977655 1.0996539077804304, 0.30741161343814116 1.16393245850681" />
<path style="fill:none; stroke-width:0.01; stroke:%23797106; stroke-opacity:0.4332344129542904; stroke-linecap:round;" d="M 0.4860528658028756 -0.08432952421826762 C -0.2649631326796924 -0.16849286408178743, 0.013479035052349458 1.0470820483746803, 0.26560188525121475 1.1430879979552915" />
<path style="fill:none; stroke-width:0.02; stroke:%23794006; stroke-opacity:0.5321689044837662; stroke-linecap:round;" d="M 0.4333084966526153 -0.20622179761653509 C -0.5255949422282494 -0.26279263212511605, -0.17391227562545797 0.9019703170825829, 0.30015602616257103 1.003168067331185" />
<path style="fill:none; stroke-width:0.03; stroke:%23360679; stroke-opacity:0.46737209640168875; stroke-linecap:round;" d="M 0.34515839112419366 -0.2093892275220955 C -0.6985106733889759 0.010752527984494886, -0.004444123066246919 1.1132563741705734, 0.5513863126140619 1.0769673138496807" />
<path style="fill:none; stroke-width:0.02; stroke:%23794C06; stroke-opacity:0.3747650917090252; stroke-linecap:round;" d="M 0.7153400646674928 -0.16619312660895758 C -0.5442868262930523 -0.20060061980511373, -0.09413422332937382 1.1066166667774935, 0.6169202117721824 1.2128528961369966" />
<path style="fill:none; stroke-width:0.03; stroke:%23792806; stroke-opacity:0.4557659485206586; stroke-linecap:round;" d="M 0.32111130380497915 -0.3078902980149001 C 0.1419367262857048 -0.2189478124048156, 0.9620970197835916 1.158559884032892, 0.5355142638037627 1.2808896526137006" />
<path style="fill:none; stroke-width:0.01; stroke:%23792A06; stroke-opacity:0.4368168027154179; stroke-linecap:round;" d="M 0.28631930792421584 -0.1268301140683331 C -1.282133138115872 0.46136141950420473, -0.4743514762081734 1.3589084892146843, 0.6775162819200544 1.0155651254161158" />
<path style="fill:none; stroke-width:0.03; stroke:%233B0679; stroke-opacity:0.2738620396284219; stroke-linecap:round;" d="M 0.47995400291165036 -0.10764549343403512 C -1.420880231943362 0.21185959764619133, -0.638089173162905 1.524689958935232, 0.6853382878304539 1.4069840634997168" />
<path style="fill:none; stroke-width:0.02; stroke:%232B0679; stroke-opacity:0.44581886945830446; stroke-linecap:round;" d="M 0.5993585959936898 -0.19298257850127776 C -0.2324755948998632 -0.3092656886490297, 0.012613525854952054 0.8567673937430214, 0.36764927832465033 0.975782846402464" />
<path style="fill:none; stroke-width:0.02; stroke:%23793106; stroke-opacity:0.3131483589139945; stroke-linecap:round;" d="M 0.6676156470272767 -0.11683725267601086 C 1.5009612786674895 0.17542518783445038, 1.716323622164713 1.736591578454274, 0.2536370250562666 1.4037689220939482" />
<path style="fill:none; stroke-width:0.02; stroke:%23580679; stroke-opacity:0.49097821785104867; stroke-linecap:round;" d="M 0.32083509115634046 -0.39184619625842637 C 0.5833070851178945 -0.3899093063943676, 1.533525291611027 0.8850584932023505, 0.695086074296718 1.1535966954648438" />
<path style="fill:none; stroke-width:0.02; stroke:%23791E06; stroke-opacity:0.2870290923600683; stroke-linecap:round;" d="M 0.4920279244241664 -0.08856583135411616 C -0.6869282403351957 0.033980695658911264, -0.16593003385776312 1.0662841567866932, 0.5665686235626923 1.0653549853317772" />
<path style="fill:none; stroke-width:0.01; stroke:%23520679; stroke-opacity:0.34754691230139784; stroke-linecap:round;" d="M 0.6704103024599216 -0.4036497911897517 C -0.2566156015379808 -0.4991483271598214, 0.11683987084439273 1.0978382486352012, 0.38782240262133644 1.2118932110193108" />
<path style="fill:none; stroke-width:0.03; stroke:%23792806; stroke-opacity:0.35083434342700104; stroke-linecap:round;" d="M 0.6138087301331047 -0.44985052982279145 C -0.1239727658145783 -0.47456319055874696, 0.35775797189545033 1.25253233415168, 0.37981403052569274 1.3278361511435341" />
<path style="fill:none; stroke-width:0.03; stroke:%23794606; stroke-opacity:0.29602080426417854; stroke-linecap:round;" d="M 0.5562837630347228 0.002001536317311259 C 0.5331609005651934 0.05986063324068536, 1.1048626678877767 1.3843255767658968, 0.5629185160165913 1.444570868252479" />
<path style="fill:none; stroke-width:0.01; stroke:%23460679; stroke-opacity:0.2832159852867774; stroke-linecap:round;" d="M 0.39884980260749403 -0.30875732750074275 C -0.7592064009069519 -0.04767219126075317, -0.03355048758131879 1.0600104310691074, 0.6321073238663057 0.994748800268594" />
<path style="fill:none; stroke-width:0.01; stroke:%23480679; stroke-opacity:0.24373731174761115; stroke-linecap:round;" d="M 0.7108607610689619 -0.4309296690276175 C -0.7600203713846204 -0.804814477185184, -0.5851823341908765 0.7346207925394104, 0.268122788958779 1.0537966953148357" />
</svg>)
Getting Started with React Native in 2020
April 2020
I've been doing React Native for over 4 years. It is amazing how much it has improved, but also how much was there from the start. The React…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBCBBD; fill-opacity:0.5;" d="M 0.4184406238395635 0.1746313474186224 A 0.24452088485385837 0.24452088485385837 0 0 0 0.17391973898570512 0.41915223227248083 A 0.24452088485385837 0.24452088485385837 0 0 0 0.6629615086934219 0.4191522322724807 A 0.24452088485385837 0.24452088485385837 0 0 0 0.17391973898570512 0.4191522322724809 A 0.24452088485385837 0.24452088485385837 0 0 0 0.6629615086934219 0.41915223227248066" />
<path style="fill:%23DBBDC2; fill-opacity:0.5;" d="M 0.05465241846025204 -0.3060236667733869 A 0.5094775593122893 0.5094775593122893 0 0 0 -0.4548251408520373 0.2034538925389025 A 0.5094775593122893 0.5094775593122893 0 0 0 0.5641299777725414 0.20345389253890234 A 0.5094775593122893 0.5094775593122893 0 0 0 -0.4548251408520373 0.20345389253890264 A 0.5094775593122893 0.5094775593122893 0 0 0 0.5641299777725414 0.2034538925389022" />
<path style="fill:%23DBD1BD; fill-opacity:0.5;" d="M 0.3336740142766146 -0.39529437721479577 A 0.6375092601061643 0.6375092601061643 0 0 0 -0.3038352458295497 0.24221488289136858 A 0.6375092601061643 0.6375092601061643 0 0 0 0.9711832743827788 0.24221488289136833 A 0.6375092601061643 0.6375092601061643 0 0 0 -0.3038352458295497 0.24221488289136872 A 0.6375092601061643 0.6375092601061643 0 0 0 0.9711832743827788 0.2422148828913682" />
<path style="fill:%23DBBFBD; fill-opacity:0.5;" d="M 0.2549760960156676 -0.5927114355795942 A 0.76891643250488 0.76891643250488 0 0 0 -0.5139403364892123 0.17620499692528588 A 0.76891643250488 0.76891643250488 0 0 0 1.0238925285205476 0.1762049969252856 A 0.76891643250488 0.76891643250488 0 0 0 -0.5139403364892123 0.17620499692528607 A 0.76891643250488 0.76891643250488 0 0 0 1.0238925285205476 0.1762049969252854" />
<path style="fill:%23DBD2BD; fill-opacity:0.5;" d="M 0.41201050096260283 -0.4850918763494505 A 0.6306855801111839 0.6306855801111839 0 0 0 -0.2186750791485811 0.1455937037617335 A 0.6306855801111839 0.6306855801111839 0 0 0 1.0426960810737866 0.14559370376173325 A 0.6306855801111839 0.6306855801111839 0 0 0 -0.2186750791485811 0.14559370376173364 A 0.6306855801111839 0.6306855801111839 0 0 0 1.0426960810737866 0.1455937037617331" />
<path style="fill:%23CDDBBD; fill-opacity:0.5;" d="M 0.26185247195216754 0.6384494111114056 A 0.3577812615287988 0.3577812615287988 0 0 0 -0.09592878957663126 0.9962306726402045 A 0.3577812615287988 0.3577812615287988 0 0 0 0.6196337334809663 0.9962306726402044 A 0.3577812615287988 0.3577812615287988 0 0 0 -0.09592878957663126 0.9962306726402046 A 0.3577812615287988 0.3577812615287988 0 0 0 0.6196337334809663 0.9962306726402043" />
<path style="fill:%23DBCBBD; fill-opacity:0.5;" d="M 0.20618806020651526 -0.0006964274466845222 A 0.31188076657546027 0.31188076657546027 0 0 0 -0.10569270636894501 0.3111843391287758 A 0.31188076657546027 0.31188076657546027 0 0 0 0.5180688267819755 0.3111843391287757 A 0.31188076657546027 0.31188076657546027 0 0 0 -0.10569270636894501 0.31118433912877586 A 0.31188076657546027 0.31188076657546027 0 0 0 0.5180688267819755 0.3111843391287756" />
<path style="fill:%23DBCEBD; fill-opacity:0.5;" d="M 0.9552215089228961 -0.3973369182290907 A 0.7707466879049001 0.7707466879049001 0 0 0 0.18447482101799606 0.3734097696758095 A 0.7707466879049001 0.7707466879049001 0 0 0 1.7259681968277962 0.37340976967580924 A 0.7707466879049001 0.7707466879049001 0 0 0 0.18447482101799606 0.3734097696758097 A 0.7707466879049001 0.7707466879049001 0 0 0 1.7259681968277962 0.373409769675809" />
<path style="fill:none; stroke-width:0.01; stroke:%23521418; stroke-opacity:0.294455622781027; stroke-linecap:round;" d="M -0.25761162062283455 -0.23390762263822157 C -0.5952210927199858 0.21575102469118124, 1.3053524680531 0.9837710700044219, 1.1700416080473128 1.237092346287795" />
<path style="fill:none; stroke-width:0.03; stroke:%23521F14; stroke-opacity:0.4778398270167651; stroke-linecap:round;" d="M -0.29681604921950977 -0.2057618024082648 C 0.2265317334432192 -0.6118553855562185, 2.2083376923018907 0.12899718064772175, 1.2161174681284403 1.2732410899161082" />
<path style="fill:none; stroke-width:0.01; stroke:%23522314; stroke-opacity:0.27744042492990884; stroke-linecap:round;" d="M -0.2725476147453463 -0.1477053348326153 C -0.5521567795069431 0.2767835173276861, 1.4169230269562267 0.979355225380433, 1.2442273028623296 1.2911400837212386" />
<path style="fill:none; stroke-width:0.01; stroke:%23251452; stroke-opacity:0.504700812415842; stroke-linecap:round;" d="M -0.21800022070539707 -0.23579380868287925 C -0.3854066225039461 0.06518234222635183, 1.5664202879035847 0.7822710196475, 1.277124884224545 1.2093516442334864" />
<path style="fill:none; stroke-width:0.03; stroke:%232E1452; stroke-opacity:0.26622337781313754; stroke-linecap:round;" d="M -0.1079561107651844 -0.11024517414787033 C -0.3078529645694382 0.17571088553900244, 1.3941644487002565 0.9448565208527784, 1.1376454816752573 1.281489339437724" />
<path style="fill:none; stroke-width:0.03; stroke:%23521E14; stroke-opacity:0.5400461171431711; stroke-linecap:round;" d="M -0.13788869467207507 -0.14556756113233582 C -0.42503600443885103 0.22270239333686104, 1.3031397514811303 0.994240850471688, 1.1306692803385812 1.258933666430122" />
<path style="fill:none; stroke-width:0.01; stroke:%23522B14; stroke-opacity:0.537395996382058; stroke-linecap:round;" d="M -0.10164297916017856 -0.22026505850055036 C 0.23224821930407302 -0.4174577561273581, 1.923173959734028 0.32952950069295267, 1.1427750507779537 1.1467183314005196" />
<path style="fill:none; stroke-width:0.03; stroke:%2352141C; stroke-opacity:0.4811496708929128; stroke-linecap:round;" d="M -0.16203083507231486 -0.23227984722900374 C -0.6620190145553284 0.35998876741878993, 1.2395588141838099 1.1611369477645965, 1.2531440648386367 1.2694247336675455" />
<path style="fill:none; stroke-width:0.01; stroke:%23522714; stroke-opacity:0.40698309260257454; stroke-linecap:round;" d="M -0.18624160125174286 -0.1701341470599197 C -0.4349345264457646 0.20561569142985825, 1.4990138311248011 0.9466809056399267, 1.2828360830077612 1.2897099059378085" />
<path style="fill:none; stroke-width:0.02; stroke:%23201452; stroke-opacity:0.46511828157252466; stroke-linecap:round;" d="M -0.2655986301516001 -0.28123242160123496 C -0.20855109303414388 -0.21324182156085048, 1.7373348300659934 0.4753745819630377, 1.2356069525364746 1.1354702202497657" />
<path style="fill:none; stroke-width:0.03; stroke:%23141952; stroke-opacity:0.3092749211319592; stroke-linecap:round;" d="M -0.2699140765550103 -0.2531495820923219 C -0.7408122906603037 0.37430353537781225, 1.2883962157308932 1.1039184634240948, 1.2909175278021903 1.234744839053917" />
<path style="fill:none; stroke-width:0.02; stroke:%23523114; stroke-opacity:0.3130965283488689; stroke-linecap:round;" d="M -0.11225898064215484 -0.18432265510969528 C -0.0525145617655246 -0.12771476188191944, 1.758357560671973 0.5313976783584168, 1.2773962425512468 1.1507973444978883" />
<path style="fill:none; stroke-width:0.02; stroke:%2352141B; stroke-opacity:0.6296532343302206; stroke-linecap:round;" d="M -0.19092565223475788 -0.10266827493461227 C -0.2097874331454611 0.044249424464235854, 1.688278063536103 0.6894123941281741, 1.2841163958644306 1.2549542217329908" />
<path style="fill:none; stroke-width:0.02; stroke:%23521914; stroke-opacity:0.3070693181270042; stroke-linecap:round;" d="M -0.1287762888155186 -0.14381729172775598 C -0.2554696209365771 0.10678188347720036, 1.5698320021712084 0.7772203133934013, 1.269495776217494 1.2074964896630545" />
<path style="fill:none; stroke-width:0.01; stroke:%23522314; stroke-opacity:0.39610244432799024; stroke-linecap:round;" d="M -0.18329485105587365 -0.2546670165892191 C -0.10361842228148421 -0.2107900495031565, 1.7824416067920097 0.5549152418228707, 1.232020593152441 1.2083467290122378" />
<path style="fill:none; stroke-width:0.01; stroke:%23522614; stroke-opacity:0.5063304214489645; stroke-linecap:round;" d="M -0.29002428962219473 -0.27820205175553614 C -0.4721975101963455 0.033465682598212865, 1.4745867780855133 0.7693742033815814, 1.192878278629001 1.1821165399006397" />
<path style="fill:none; stroke-width:0.02; stroke:%23321452; stroke-opacity:0.38900814001117445; stroke-linecap:round;" d="M -0.29162950927004655 -0.2360570447988747 C -0.5220538286127729 0.12634316256555433, 1.3850727769453615 0.8302888612838675, 1.1679283127381366 1.1789915058121756" />
<path style="fill:none; stroke-width:0.02; stroke:%23521C14; stroke-opacity:0.36767375747010744; stroke-linecap:round;" d="M -0.22549432726673008 -0.1996123625819686 C 0.06233286699129026 -0.38700917965983705, 1.942131050063086 0.25240191713443816, 1.2351667341648243 1.1453623670696065" />
<path style="fill:none; stroke-width:0.02; stroke:%23522414; stroke-opacity:0.44076184531605545; stroke-linecap:round;" d="M -0.1401209751332156 -0.1431800389952851 C -0.334400817299797 0.1737595058780258, 1.3728919785272862 0.7843062534795401, 1.1744418317485337 1.1056356593577676" />
<path style="fill:none; stroke-width:0.03; stroke:%23201452; stroke-opacity:0.34211675512294193; stroke-linecap:round;" d="M -0.16242311070330773 -0.15324327663340717 C -0.49381807585098636 0.2712711277177844, 1.2354869122934735 0.9936250533391948, 1.1270575695744758 1.2067311757267527" />
<path style="fill:none; stroke-width:0.02; stroke:%233A1452; stroke-opacity:0.3117565276019024; stroke-linecap:round;" d="M -0.1095637189793321 -0.21529548865969186 C -0.037943590138056815 -0.1670492464894413, 1.7514800679402165 0.636151744905831, 1.2022065255413141 1.2429320951758425" />
<path style="fill:none; stroke-width:0.02; stroke:%23171452; stroke-opacity:0.2851744431810985; stroke-linecap:round;" d="M -0.169013200534014 -0.290178929495096 C -0.6815425802324923 0.30563017266563447, 1.230393992515737 1.1309143336040555, 1.245875205931213 1.2377890681273576" />
<path style="fill:none; stroke-width:0.02; stroke:%2352141A; stroke-opacity:0.30265530313292394; stroke-linecap:round;" d="M -0.11907905188747558 -0.1694294220424821 C 0.2892109547454552 -0.4767676636765832, 2.1311218695380227 0.18500497079488576, 1.2978880157023318 1.1806754506001" />
<path style="fill:none; stroke-width:0.01; stroke:%232F1452; stroke-opacity:0.43234888591197973; stroke-linecap:round;" d="M -0.25991968142952715 -0.2667166132918956 C -0.4263236447661425 0.02643896979687904, 1.4803776980208703 0.7466254874402094, 1.1926815129024093 1.1630135713955705" />
<path style="fill:none; stroke-width:0.01; stroke:%23521F14; stroke-opacity:0.3683558390595404; stroke-linecap:round;" d="M -0.15624433755912065 -0.23709313399180354 C -0.020997789039466475 -0.2547798293532118, 1.7926508587999601 0.44791627320201904, 1.218325284885282 1.139010635136508" />
<path style="fill:none; stroke-width:0.02; stroke:%23521E14; stroke-opacity:0.23502370892434735; stroke-linecap:round;" d="M -0.18228979315185778 -0.20785207058960214 C -0.17666854953094702 -0.08834650561088989, 1.7205589797706167 0.5766081907292999, 1.2839822082883965 1.1675327715244082" />
<path style="fill:none; stroke-width:0.03; stroke:%23521417; stroke-opacity:0.29667219826813057; stroke-linecap:round;" d="M -0.24867774432299408 -0.26544263177292376 C -0.060136248517492774 -0.3244379423677788, 1.830105680120623 0.4592016476066033, 1.163209880377567 1.215664687422471" />
<path style="fill:none; stroke-width:0.02; stroke:%23271452; stroke-opacity:0.23449932126968853; stroke-linecap:round;" d="M -0.10860177403067409 -0.23203157558642692 C -0.2634750685083732 0.011317089791750279, 1.4615195851737894 0.8151998919262761, 1.1439669557685135 1.200764883066703" />
<path style="fill:none; stroke-width:0.01; stroke:%23522614; stroke-opacity:0.48554363327168626; stroke-linecap:round;" d="M -0.24556571857902074 -0.16013160542758778 C 0.19986474032195423 -0.5002720862623786, 2.0575131244909914 0.17991403211745954, 1.1783482995566057 1.213178098826817" />
<path style="fill:none; stroke-width:0.03; stroke:%23151452; stroke-opacity:0.6718186759812579; stroke-linecap:round;" d="M -0.11484847701541384 -0.21233499102974146 C 0.08364146305865416 -0.2862936415113592, 1.868900549415808 0.46193077636221297, 1.215345106309312 1.193927721198934" />
<path style="fill:none; stroke-width:0.01; stroke:%23522D14; stroke-opacity:0.41691540750014766; stroke-linecap:round;" d="M -0.22918128268161228 -0.22414888218330783 C -0.13403035487248383 -0.20392540425002448, 1.7191073232415985 0.42904809363472485, 1.209699809462112 1.1041567700450448" />
<path style="fill:none; stroke-width:0.03; stroke:%23522414; stroke-opacity:0.25734102370057493; stroke-linecap:round;" d="M -0.16398389168826077 -0.27467550098244187 C -0.004390511798021524 -0.30619297532077094, 1.842238540398367 0.48352843747045515, 1.205556602445144 1.1943573785561787" />
<path style="fill:none; stroke-width:0.03; stroke:%23521A14; stroke-opacity:0.4113851286806889; stroke-linecap:round;" d="M -0.25742247786943473 -0.19599485400969727 C -0.4444439852358092 0.10925397604604536, 1.4810605847298661 0.8866231941002826, 1.1892515265602404 1.2936376761951063" />
<path style="fill:none; stroke-width:0.02; stroke:%23521F14; stroke-opacity:0.3309900253325206; stroke-linecap:round;" d="M -0.2825613927489408 -0.22669258376879808 C -0.10183350338540054 -0.2776797654223732, 1.9263613401399708 0.4936074327463294, 1.260491117319782 1.29890474728958" />
<path style="fill:none; stroke-width:0.01; stroke:%23522014; stroke-opacity:0.4329029291692945; stroke-linecap:round;" d="M -0.2937943383677274 -0.14938226714606453 C -0.3314759751083145 0.015583939895887189, 1.512283757082537 0.6280961084551455, 1.1447842636347296 1.1564173777238143" />
<path style="fill:none; stroke-width:0.02; stroke:%23171452; stroke-opacity:0.34440455483438887; stroke-linecap:round;" d="M -0.11839064039823005 -0.18864093461703374 C -0.23156854014999373 0.015125372221212519, 1.4826871163248518 0.8354927153225635, 1.1176901162222836 1.2548892508988885" />
<path style="fill:none; stroke-width:0.03; stroke:%23521421; stroke-opacity:0.2958577082727716; stroke-linecap:round;" d="M -0.2412024087707237 -0.12805191823050135 C -0.7157464574087203 0.543451236491193, 1.1094949752679448 1.1045233258899896, 1.2012416924357252 1.1232127188293881" />
<path style="fill:none; stroke-width:0.02; stroke:%23161452; stroke-opacity:0.1432252586571423; stroke-linecap:round;" d="M -0.12233204402184522 -0.2524836884155923 C -0.43640236372764035 0.14694289237798103, 1.388511112551104 0.9590643375112062, 1.2182892749137635 1.2282542751567607" />
<path style="fill:none; stroke-width:0.01; stroke:%23521415; stroke-opacity:0.3505993344874907; stroke-linecap:round;" d="M -0.14633198835883457 -0.2680904934670994 C 0.02476868263563392 -0.30693653281731936, 1.920658730797037 0.5062008306384146, 1.2587926003122383 1.2422791092716268" />
<path style="fill:none; stroke-width:0.01; stroke:%23201452; stroke-opacity:0.3370535899943803; stroke-linecap:round;" d="M -0.15436750751522377 -0.10384138451740083 C -0.09774388626626962 -0.044689621255635414, 1.6649681152186342 0.7092402141305947, 1.1528976161580076 1.2985215119156281" />
<path style="fill:none; stroke-width:0.02; stroke:%23521417; stroke-opacity:0.34975128112931947; stroke-linecap:round;" d="M -0.12827840209759983 -0.16453984521137477 C -0.17897951311030325 -0.0106780777601157, 1.462166673061093 0.6609219270425557, 1.1010981470802328 1.1133649521688807" />
<path style="fill:none; stroke-width:0.03; stroke:%23522214; stroke-opacity:0.36363462940187574; stroke-linecap:round;" d="M -0.10266966328762082 -0.20104412365127788 C -0.33546635192063 0.13973662190928593, 1.4237578796975965 0.8430709882412537, 1.2218660998458972 1.15363448773839" />
<path style="fill:none; stroke-width:0.03; stroke:%23521B14; stroke-opacity:0.35676195346710277; stroke-linecap:round;" d="M -0.2875458529262147 -0.21235105068617355 C -0.1189735917446908 -0.2724822429686996, 1.8154285898521814 0.339603548377585, 1.234105389029568 1.1297138933419348" />
<path style="fill:none; stroke-width:0.03; stroke:%23521F14; stroke-opacity:0.4516718708959927; stroke-linecap:round;" d="M -0.22585583095348916 -0.14689452873574638 C -0.1359516663440592 -0.12144995539936487, 1.771615867814991 0.44430689904199605, 1.2899879890073975 1.141946900304851" />
<path style="fill:none; stroke-width:0.02; stroke:%23522514; stroke-opacity:0.4228011002637147; stroke-linecap:round;" d="M -0.19479948780241085 -0.1566254198481285 C -0.1274796000279389 -0.10023690910159022, 1.7900049331621348 0.6237855411753008, 1.2661126217395224 1.2809737077677188" />
<path style="fill:none; stroke-width:0.03; stroke:%23521514; stroke-opacity:0.34803013836236285; stroke-linecap:round;" d="M -0.136944954354768 -0.29808474467574136 C 0.1441768116932034 -0.4478647386426611, 2.0040263649328516 0.32045807165830487, 1.2533402756015712 1.1567235866448282" />
<path style="fill:none; stroke-width:0.02; stroke:%23521A14; stroke-opacity:0.5598577609114738; stroke-linecap:round;" d="M -0.23608125650738257 -0.2973051260506346 C -0.13648245510978363 -0.2635107809284724, 1.8400057279464952 0.6033600666976124, 1.2210276739488597 1.2948017073653089" />
<path style="fill:none; stroke-width:0.02; stroke:%23521D14; stroke-opacity:0.48242740051304844; stroke-linecap:round;" d="M -0.11035328747842009 -0.1643468035500142 C -0.03438620644077106 -0.12640843884108038, 1.6357194738105805 0.6480768288959369, 1.1039030007892594 1.21936634575222" />
<path style="fill:none; stroke-width:0.02; stroke:%23521418; stroke-opacity:0.4581834764104804; stroke-linecap:round;" d="M -0.11213811006312796 -0.22382282432775782 C -0.44662555908947743 0.19242106508218532, 1.3338498274030257 0.9811122437690591, 1.19731586071899 1.2175156770823248" />
<path style="fill:none; stroke-width:0.01; stroke:%23181452; stroke-opacity:0.5034028367021811; stroke-linecap:round;" d="M -0.12414671820173027 -0.2694797366748957 C 0.14912192618867515 -0.4031522104528676, 1.8731652641183079 0.38755668785130065, 1.13287939946007 1.1508833621252115" />
<path style="fill:none; stroke-width:0.03; stroke:%23522114; stroke-opacity:0.46595793314058664; stroke-linecap:round;" d="M -0.11549112576001107 -0.2274959711028256 C -0.12895622535599272 -0.10346358745327061, 1.6132612409063203 0.6208029343071517, 1.1850256697455466 1.1394494407188644" />
<path style="fill:none; stroke-width:0.03; stroke:%23522814; stroke-opacity:0.2854331087361955; stroke-linecap:round;" d="M -0.21684823158596517 -0.1521327114202941 C -0.32943685843490755 0.10056460846803611, 1.5306007065521143 0.6943667163768552, 1.2441840656675442 1.1431376514391123" />
<path style="fill:none; stroke-width:0.03; stroke:%23521415; stroke-opacity:0.3128994174523842; stroke-linecap:round;" d="M -0.12585207447066465 -0.1359222240853034 C -0.14317611286801124 -0.004616733355468139, 1.6477455438125101 0.729078577420706, 1.215395893046582 1.2593422952991409" />
<path style="fill:none; stroke-width:0.02; stroke:%231A1452; stroke-opacity:0.29295262494081326; stroke-linecap:round;" d="M -0.23065419346320126 -0.216109523533039 C -0.17131572970876197 -0.15471742899610735, 1.706087352441645 0.5284655489123433, 1.2101152613298567 1.1679297433618787" />
</svg>)
A concrete example of why Apple's documentation is terrible
December 2019
Apple's documentations is famously dreadful. In particular it is often missing or incomplete. No overview available gives you some numbers…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBCEBD; fill-opacity:0.5;" d="M 0.7120101339474084 -0.5563694157199951 A 0.6978745960380559 0.6978745960380559 0 0 0 0.014135537909352514 0.1415051803180609 A 0.6978745960380559 0.6978745960380559 0 0 0 1.4098847299854644 0.14150518031806064 A 0.6978745960380559 0.6978745960380559 0 0 0 0.014135537909352514 0.14150518031806106 A 0.6978745960380559 0.6978745960380559 0 0 0 1.4098847299854644 0.14150518031806048" />
<path style="fill:%23DBC4BD; fill-opacity:0.5;" d="M 0.7234251999873464 -0.8344780395049048 A 1.1616384166317877 1.1616384166317877 0 0 0 -0.43821321664444124 0.327160377126883 A 1.1616384166317877 1.1616384166317877 0 0 0 1.8850636166191341 0.32716037712688256 A 1.1616384166317877 1.1616384166317877 0 0 0 -0.43821321664444124 0.3271603771268833 A 1.1616384166317877 1.1616384166317877 0 0 0 1.8850636166191341 0.3271603771268823" />
<path style="fill:%23DBC4BD; fill-opacity:0.5;" d="M 0.46167910154501013 -0.22949010765656963 A 0.9496234527256893 0.9496234527256893 0 0 0 -0.48794435118067914 0.7201333450691197 A 0.9496234527256893 0.9496234527256893 0 0 0 1.4113025542706994 0.7201333450691194 A 0.9496234527256893 0.9496234527256893 0 0 0 -0.48794435118067914 0.72013334506912 A 0.9496234527256893 0.9496234527256893 0 0 0 1.4113025542706994 0.7201333450691192" />
<path style="fill:%23DBC0BD; fill-opacity:0.5;" d="M 0.2225055459887476 -0.6787000322744596 A 0.85343298787102 0.85343298787102 0 0 0 -0.6309274418822723 0.17473295559656044 A 0.85343298787102 0.85343298787102 0 0 0 1.0759385338597676 0.1747329555965601 A 0.85343298787102 0.85343298787102 0 0 0 -0.6309274418822723 0.17473295559656063 A 0.85343298787102 0.85343298787102 0 0 0 1.0759385338597676 0.1747329555965599" />
<path style="fill:none; stroke-width:0.01; stroke:%23910843; stroke-opacity:0.4791507803911995; stroke-linecap:round;" d="M -0.07819008377889075 1.1103959878735827 C 0.20635548064483175 0.9596118089377783, -0.01514993283100216 -0.6824531533011466, 1.0536436456775977 -0.09972565777880302" />
<path style="fill:none; stroke-width:0.01; stroke:%23083591; stroke-opacity:0.3869250099571961; stroke-linecap:round;" d="M -0.07440584997495425 1.136135107073531 C 0.4207031565037562 1.1718184159515133, 0.2236643171157522 -0.5586965718639307, 1.141414628113842 -0.11097635239638699" />
<path style="fill:none; stroke-width:0.01; stroke:%23910D08; stroke-opacity:0.2990003810684032; stroke-linecap:round;" d="M -0.07446078721371424 1.1095568535940319 C 0.3095350012998157 1.0606255587745554, 0.12442912286106103 -0.5795728794738333, 1.0789485174954836 -0.07118955392761758" />
<path style="fill:none; stroke-width:0.01; stroke:%23082B91; stroke-opacity:0.6148977324179196; stroke-linecap:round;" d="M -0.07953239935705154 1.0818759016783233 C 0.38982745067565056 1.1348627723269642, 0.23897170022400832 -0.4746701325762226, 1.0717856235681877 -0.05294586384167991" />
<path style="fill:none; stroke-width:0.01; stroke:%23910839; stroke-opacity:0.5732804104623667; stroke-linecap:round;" d="M -0.08411611548312421 1.0925682533626224 C 0.5079428473639283 1.2517204281940084, 0.3639612644309557 -0.45552149005844733, 1.147234029157812 -0.09872620434082637" />
<path style="fill:none; stroke-width:0.01; stroke:%23910836; stroke-opacity:0.581918097858285; stroke-linecap:round;" d="M -0.0691795179319155 1.12840775700375 C 0.04757889982963476 0.8144591067461473, -0.2017720351081302 -0.8583629937261814, 1.0688671275848132 -0.1227355206471798" />
<path style="fill:none; stroke-width:0.01; stroke:%23080891; stroke-opacity:0.42530487361850616; stroke-linecap:round;" d="M -0.055523472011402134 1.1262125086973322 C 0.3778351450754531 1.1087684161413527, 0.1802744394212159 -0.5900154035666239, 1.1353882866924014 -0.1012343868958075" />
<path style="fill:none; stroke-width:0.01; stroke:%23084091; stroke-opacity:0.44074150089492437; stroke-linecap:round;" d="M -0.08047569278948058 1.1138317963474798 C 0.4862851579232833 1.2194670778404526, 0.2646348521362354 -0.4605605501246727, 1.0806719140089256 -0.12041207096884232" />
<path style="fill:none; stroke-width:0.01; stroke:%23910830; stroke-opacity:0.3808862433508305; stroke-linecap:round;" d="M -0.07168729385494892 1.097551472521134 C 0.16659447232353874 0.906310983731837, -0.053184347467509885 -0.7247346032410962, 1.0527029403019812 -0.10426342077364877" />
<path style="fill:none; stroke-width:0.01; stroke:%2391083D; stroke-opacity:0.44742048835761095; stroke-linecap:round;" d="M -0.13949643372028808 1.1325818598870214 C 0.460592524497514 1.2692337148300905, 0.2688388510267494 -0.4791441599169025, 1.0935031380948341 -0.12173337963535207" />
<path style="fill:none; stroke-width:0.01; stroke:%23083B91; stroke-opacity:0.4189414394338027; stroke-linecap:round;" d="M -0.10912764832900804 1.077921971159954 C 0.29986667161209485 1.0609845541786136, 0.16833597033369158 -0.6053803476220316, 1.0984342764151875 -0.07787494406345857" />
<path style="fill:none; stroke-width:0.01; stroke:%23084491; stroke-opacity:0.38535501354451895; stroke-linecap:round;" d="M -0.05282631159855569 1.134173379462735 C 0.7729033074577764 1.458679201021914, 0.514587492391451 -0.215651502869866, 1.0807189267689352 -0.12486814442855919" />
<path style="fill:none; stroke-width:0.01; stroke:%23080891; stroke-opacity:0.4013769431452004; stroke-linecap:round;" d="M -0.13896903457409326 1.0707115738130828 C 0.3758588448120164 1.1521993973781404, 0.21914707821297447 -0.5250875399083015, 1.0611268965627447 -0.11149813848466815" />
<path style="fill:none; stroke-width:0.01; stroke:%23081F91; stroke-opacity:0.5169959137522562; stroke-linecap:round;" d="M -0.09728019419681516 1.146882753240731 C 0.5111505514795527 1.3126729808339097, 0.34340895683307127 -0.3895563087050321, 1.115159883061656 -0.0596456781674425" />
<path style="fill:none; stroke-width:0.01; stroke:%2391083A; stroke-opacity:0.37576108569447775; stroke-linecap:round;" d="M -0.147742060740321 1.0552344856302127 C 0.5373201834999971 1.3411653960204921, 0.427979992932548 -0.320717336353452, 1.0703827002608381 -0.08053906577511981" />
<path style="fill:none; stroke-width:0.01; stroke:%23910819; stroke-opacity:0.4679632095892596; stroke-linecap:round;" d="M -0.1270257191514883 1.116826771353251 C 0.3736469485185193 1.1519869598666994, 0.1946782669985799 -0.6316300648472578, 1.1413557969672274 -0.14987280209849774" />
<path style="fill:none; stroke-width:0.01; stroke:%23910863; stroke-opacity:0.42745534947880126; stroke-linecap:round;" d="M -0.08322306525210409 1.0933591763463621 C 0.27931726654062894 1.0153600479791165, 0.08937509343942018 -0.655116517200778, 1.0905806074305275 -0.11028317997647574" />
<path style="fill:none; stroke-width:0.01; stroke:%23083B91; stroke-opacity:0.4556008942876498; stroke-linecap:round;" d="M -0.1286780257329244 1.0916361683630964 C 0.6718040698218832 1.4801635011164191, 0.5445686932031659 -0.21809699014898953, 1.1063065512138814 -0.08100641655348959" />
<path style="fill:none; stroke-width:0.01; stroke:%23080E91; stroke-opacity:0.2657711971779857; stroke-linecap:round;" d="M -0.14875173959929228 1.086393938715271 C 0.6917503278369805 1.494428971288884, 0.532057986804856 -0.19215304462668348, 1.0566589665260233 -0.10400329320044863" />
<path style="fill:none; stroke-width:0.01; stroke:%23910845; stroke-opacity:0.4609592735876677; stroke-linecap:round;" d="M -0.08010357886965926 1.123841296940602 C 0.38225028127195226 1.127459002226454, 0.15339526529927575 -0.5600181023228585, 1.0822576068299463 -0.12069478959646222" />
<path style="fill:none; stroke-width:0.01; stroke:%2391084A; stroke-opacity:0.374444836749599; stroke-linecap:round;" d="M -0.14121664711381995 1.1457561655168411 C 0.023528572074499696 0.8476800826577945, -0.12424398519245765 -0.9179274442410342, 1.1329452858253701 -0.08538884477710496" />
<path style="fill:none; stroke-width:0.01; stroke:%23910843; stroke-opacity:0.3357186551058112; stroke-linecap:round;" d="M -0.08723220554418645 1.0642089839164692 C 0.5151389859562856 1.2195896079686026, 0.3327959804213935 -0.4706965309600321, 1.1067219666972432 -0.14607595679338364" />
<path style="fill:none; stroke-width:0.01; stroke:%23910830; stroke-opacity:0.39543626355263684; stroke-linecap:round;" d="M -0.13708517439651924 1.113276964254212 C 0.33223601577589545 1.1266797595860094, 0.16501625116202104 -0.6303864041172619, 1.1181610574081564 -0.12752956814663435" />
<path style="fill:none; stroke-width:0.01; stroke:%23910858; stroke-opacity:0.5971053182762315; stroke-linecap:round;" d="M -0.13465599629351097 1.1440929930369943 C 0.10379225370842889 0.9292879847967866, -0.02223822837743379 -0.8120728312660918, 1.134475729907847 -0.0548756619674346" />
<path style="fill:none; stroke-width:0.01; stroke:%23083691; stroke-opacity:0.4114679709332298; stroke-linecap:round;" d="M -0.08798419547575438 1.0706332439955057 C -0.10486180719927159 0.6043547733841546, -0.2719235708870646 -1.110152749376018, 1.1343964514258322 -0.1431341276899246" />
<path style="fill:none; stroke-width:0.01; stroke:%23082C91; stroke-opacity:0.3865400708497859; stroke-linecap:round;" d="M -0.07335936138854462 1.1463634878314093 C -0.2243753661701826 0.5607866978567406, -0.45884472398905607 -1.1873328579718645, 1.1324240201812272 -0.14087553346827159" />
<path style="fill:none; stroke-width:0.01; stroke:%23910834; stroke-opacity:0.5744453951077976; stroke-linecap:round;" d="M -0.12226752421787586 1.1359735939253377 C 0.2448896776087784 1.050926985844066, 0.08223987457640507 -0.6895671213142396, 1.1230324842694759 -0.09081187401135832" />
<path style="fill:none; stroke-width:0.01; stroke:%23084391; stroke-opacity:0.3950173478177857; stroke-linecap:round;" d="M -0.1068985148478495 1.1200488883083657 C 0.6235168153259909 1.4254516589329038, 0.48655112807523543 -0.287264263160951, 1.133129036526236 -0.0692732300057034" />
<path style="fill:none; stroke-width:0.01; stroke:%2391083B; stroke-opacity:0.60430396819747; stroke-linecap:round;" d="M -0.08393653528231934 1.0706577532794066 C 0.10205368244616715 0.821273582537569, -0.1058704350296625 -0.8462979858237354, 1.0762440364722958 -0.1450759408979887" />
<path style="fill:none; stroke-width:0.01; stroke:%23910845; stroke-opacity:0.3995634969575248; stroke-linecap:round;" d="M -0.13231209838632652 1.120672431315199 C 0.3437449465372957 1.1594114999678455, 0.17575995821053958 -0.5164196417909848, 1.059526289497236 -0.06934867318629506" />
<path style="fill:none; stroke-width:0.01; stroke:%2391081A; stroke-opacity:0.1754357917497174; stroke-linecap:round;" d="M -0.13036953863052853 1.1250519298535957 C 0.3812591114990236 1.2025037318797778, 0.23210070626628798 -0.49042142185499116, 1.086616828012356 -0.061197617840654805" />
<path style="fill:none; stroke-width:0.01; stroke:%23082791; stroke-opacity:0.4171785398997993; stroke-linecap:round;" d="M -0.1420909261855574 1.1251960585659062 C 0.19440579086716847 1.0032438848064005, -0.024700908986921358 -0.7254094409018927, 1.0583304164139367 -0.13783152095677426" />
<path style="fill:none; stroke-width:0.01; stroke:%23910831; stroke-opacity:0.3946820611108739; stroke-linecap:round;" d="M -0.053100691584908016 1.1471423032805819 C 0.9407293680762501 1.658522072012723, 0.7235467928797799 -0.021745087458411416, 1.111058129254427 -0.08379239767968205" />
<path style="fill:none; stroke-width:0.01; stroke:%23910838; stroke-opacity:0.4680824292051933; stroke-linecap:round;" d="M -0.14927914818562205 1.1097368214198575 C 0.15974550291663936 0.9781394091815299, 0.03077677062293914 -0.7291384616279968, 1.0915939206853684 -0.06995156498396082" />
<path style="fill:none; stroke-width:0.01; stroke:%2391084E; stroke-opacity:0.3613339430784089; stroke-linecap:round;" d="M -0.06057313457132999 1.141938145077567 C 0.5038207156012822 1.2341861400021321, 0.27304006920738494 -0.4829316978913611, 1.1235295882012004 -0.12283618968918894" />
<path style="fill:none; stroke-width:0.01; stroke:%2391083B; stroke-opacity:0.5405712106965096; stroke-linecap:round;" d="M -0.10227319007365461 1.1349113872780394 C 0.30767566475265035 1.0995002459545848, 0.15671829644277674 -0.6267958651691248, 1.1394242218091641 -0.0738375228151179" />
<path style="fill:none; stroke-width:0.01; stroke:%23910841; stroke-opacity:0.428084540651567; stroke-linecap:round;" d="M -0.09058659515930703 1.133823977095569 C 0.7130541737206761 1.4992012808199224, 0.5505775132330846 -0.20455701386319824, 1.1263677119689912 -0.0695933263642986" />
<path style="fill:none; stroke-width:0.01; stroke:%23084391; stroke-opacity:0.38455320478114025; stroke-linecap:round;" d="M -0.050186028932865084 1.1189466037444054 C 0.4530056674452169 1.1648279302391884, 0.23317343402090812 -0.5180316373142868, 1.1143050349664263 -0.11568009978070748" />
<path style="fill:none; stroke-width:0.01; stroke:%23085991; stroke-opacity:0.2632687667506143; stroke-linecap:round;" d="M -0.08622445496392168 1.1386456666136968 C 0.6084797559329195 1.3841386136832738, 0.4272719770862511 -0.314360381140083, 1.1148093057199813 -0.07595426761484518" />
<path style="fill:none; stroke-width:0.01; stroke:%23082891; stroke-opacity:0.3664996977257207; stroke-linecap:round;" d="M -0.0653052041391345 1.091510709355236 C 0.11850203098965457 0.8602986309410685, -0.05822110104193197 -0.7285820113672192, 1.0536556072397096 -0.05028588526897692" />
<path style="fill:none; stroke-width:0.01; stroke:%23910840; stroke-opacity:0.4223520154661199; stroke-linecap:round;" d="M -0.12117808259298743 1.10876238030035 C 0.2498333307890019 1.0333693310347192, 0.1104926013330533 -0.7017191455149115, 1.1346769078475867 -0.0965492405372405" />
<path style="fill:none; stroke-width:0.01; stroke:%2391080B; stroke-opacity:0.4720798135488372; stroke-linecap:round;" d="M -0.1364790272624958 1.1475311202900509 C 0.5219930869836766 1.3546047986803738, 0.3549141326676171 -0.39193445239883656, 1.1107022164238252 -0.08650845684380992" />
<path style="fill:none; stroke-width:0.01; stroke:%2391081D; stroke-opacity:0.5158125439048548; stroke-linecap:round;" d="M -0.14424423100866296 1.0824292158386593 C 0.5771486250795018 1.3922047409056808, 0.4502729615640494 -0.2864245025022679, 1.0757616751284638 -0.07751869670196737" />
<path style="fill:none; stroke-width:0.01; stroke:%23910822; stroke-opacity:0.39582881898701405; stroke-linecap:round;" d="M -0.07126912120578104 1.070660452916591 C 0.3062174590641497 1.030555872441703, 0.1462086516719749 -0.5695789903400585, 1.0669802967363542 -0.06530726673351578" />
<path style="fill:none; stroke-width:0.01; stroke:%2391081C; stroke-opacity:0.4500000876845608; stroke-linecap:round;" d="M -0.0768528572314138 1.1192936119879753 C 0.5533684276732079 1.3219364785268555, 0.41309692454791125 -0.37565523113626986, 1.1493688174752132 -0.06302365160317992" />
<path style="fill:none; stroke-width:0.01; stroke:%23085E91; stroke-opacity:0.6414622607043929; stroke-linecap:round;" d="M -0.070466043055417 1.0513614658855053 C 0.5206833359099378 1.221949123107632, 0.3802145827783482 -0.4377279395798035, 1.1262625567436015 -0.1071289662891492" />
<path style="fill:none; stroke-width:0.01; stroke:%23086391; stroke-opacity:0.5361820088011939; stroke-linecap:round;" d="M -0.14929854398029363 1.107042471951753 C 0.405828137471727 1.2036998837336006, 0.24671826889425902 -0.5829214935762526, 1.133970083419057 -0.14617479814624645" />
<path style="fill:none; stroke-width:0.01; stroke:%23082591; stroke-opacity:0.48431106382460887; stroke-linecap:round;" d="M -0.12622441432639503 1.0740572402844712 C 0.505206042240101 1.3042297819073454, 0.3991774055983808 -0.3578124757636473, 1.0941183494681976 -0.05925210712530215" />
<path style="fill:none; stroke-width:0.01; stroke:%23910817; stroke-opacity:0.4224812273037685; stroke-linecap:round;" d="M -0.06612693958069205 1.108140662805172 C 0.36557291535621783 1.0838374607988353, 0.17013319467431257 -0.6404963858689336, 1.1459170696711547 -0.13382279028875654" />
<path style="fill:none; stroke-width:0.01; stroke:%23910841; stroke-opacity:0.4080117498593252; stroke-linecap:round;" d="M -0.1055736441160989 1.1425937805560817 C 0.5177834034282636 1.3172931339394798, 0.34649389340588055 -0.4053549380804309, 1.1204387000631393 -0.07959696077595431" />
<path style="fill:none; stroke-width:0.01; stroke:%23910827; stroke-opacity:0.5164951830865689; stroke-linecap:round;" d="M -0.14734462117784444 1.1493279883319028 C 0.4474675416631193 1.2769564694433564, 0.24114756826242545 -0.45923137918693413, 1.0670000246127422 -0.10856042420526452" />
<path style="fill:none; stroke-width:0.01; stroke:%23910816; stroke-opacity:0.27206754959257773; stroke-linecap:round;" d="M -0.12433936995815564 1.1098116319206848 C 0.37955251612663693 1.1579614822111683, 0.20400467674585315 -0.5877997531825525, 1.1168829720044968 -0.1302957959771647" />
<path style="fill:none; stroke-width:0.01; stroke:%23083191; stroke-opacity:0.2544645235057149; stroke-linecap:round;" d="M -0.13578244000770434 1.072238064536928 C 0.5933024833994756 1.3512865345248173, 0.41187377908564676 -0.34878469553678093, 1.0663294317665788 -0.14352737738494198" />
<path style="fill:none; stroke-width:0.01; stroke:%23910848; stroke-opacity:0.35664281591934655; stroke-linecap:round;" d="M -0.058771270286832 1.1437260326710232 C 0.1582391184917829 0.924157588176922, -0.0858634303276579 -0.736597866251832, 1.0732480781923754 -0.09572018577643905" />
</svg>)
React-ish iOS Apps: A Tutorial
April 2019
Update 3/8/2019 Well WWDC and SwiftUI meant this article aged rather badly! Yes Marzipan (now Catalyst) was just a UIKit on the Mac, but…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBD4BD; fill-opacity:0.5;" d="M 0.020032014032229206 -0.5058288925684015 A 0.5747807316331527 0.5747807316331527 0 0 0 -0.5547487176009235 0.06895183906475129 A 0.5747807316331527 0.5747807316331527 0 0 0 0.5948127456653819 0.06895183906475108 A 0.5747807316331527 0.5747807316331527 0 0 0 -0.5547487176009235 0.06895183906475143 A 0.5747807316331527 0.5747807316331527 0 0 0 0.5948127456653819 0.06895183906475094" />
<path style="fill:%23DBC1BD; fill-opacity:0.5;" d="M 0.031246740611802992 0.08763852339313533 A 0.4846634061639497 0.4846634061639497 0 0 0 -0.4534166655521467 0.5723019295570851 A 0.4846634061639497 0.4846634061639497 0 0 0 0.5159101467757528 0.5723019295570849 A 0.4846634061639497 0.4846634061639497 0 0 0 -0.4534166655521467 0.5723019295570853 A 0.4846634061639497 0.4846634061639497 0 0 0 0.5159101467757528 0.5723019295570848" />
<path style="fill:%23DBD8BD; fill-opacity:0.5;" d="M 0.35689978554979507 -0.29245402990001734 A 0.4399087266331497 0.4399087266331497 0 0 0 -0.08300894108335466 0.14745469673313244 A 0.4399087266331497 0.4399087266331497 0 0 0 0.7968085121829448 0.14745469673313227 A 0.4399087266331497 0.4399087266331497 0 0 0 -0.08300894108335466 0.14745469673313255 A 0.4399087266331497 0.4399087266331497 0 0 0 0.7968085121829448 0.14745469673313216" />
<path style="fill:%23D9DBBD; fill-opacity:0.5;" d="M 0.4229304503936542 -0.22335863350458862 A 0.6203563363145063 0.6203563363145063 0 0 0 -0.19742588592085208 0.3969977028099177 A 0.6203563363145063 0.6203563363145063 0 0 0 1.0432867867081606 0.3969977028099175 A 0.6203563363145063 0.6203563363145063 0 0 0 -0.19742588592085208 0.39699770280991786 A 0.6203563363145063 0.6203563363145063 0 0 0 1.0432867867081606 0.39699770280991736" />
<path style="fill:%23DBD4BD; fill-opacity:0.5;" d="M 0.16492547940579794 -0.30907826672535266 A 0.5891561895151529 0.5891561895151529 0 0 0 -0.424230710109355 0.2800779227898003 A 0.5891561895151529 0.5891561895151529 0 0 0 0.7540816689209509 0.2800779227898001 A 0.5891561895151529 0.5891561895151529 0 0 0 -0.424230710109355 0.2800779227898005 A 0.5891561895151529 0.5891561895151529 0 0 0 0.7540816689209509 0.2800779227898" />
<path style="fill:%23DBD5BD; fill-opacity:0.5;" d="M 0.22087176145615317 0.20633907782930572 A 0.3517648376070749 0.3517648376070749 0 0 0 -0.13089307615092172 0.5581039154363806 A 0.3517648376070749 0.3517648376070749 0 0 0 0.5726365990632281 0.5581039154363805 A 0.3517648376070749 0.3517648376070749 0 0 0 -0.13089307615092172 0.5581039154363807 A 0.3517648376070749 0.3517648376070749 0 0 0 0.5726365990632281 0.5581039154363804" />
<path style="fill:%23DBC3BD; fill-opacity:0.5;" d="M 0.8189034000952765 -0.05947455702590998 A 0.4558348895747666 0.4558348895747666 0 0 0 0.3630685105205099 0.39636033254885666 A 0.4558348895747666 0.4558348895747666 0 0 0 1.2747382896700432 0.3963603325488565 A 0.4558348895747666 0.4558348895747666 0 0 0 0.3630685105205099 0.3963603325488568 A 0.4558348895747666 0.4558348895747666 0 0 0 1.2747382896700432 0.3963603325488564" />
<path style="fill:none; stroke-width:0.02; stroke:%23523014; stroke-opacity:0.31222664845913656; stroke-linecap:round;" d="M -0.019288085536962457 1.190578707896697 C -0.45187677728398423 0.7318860862959167, 0.1777500655046067 -0.7742042291551683, 1.0803730211223939 -0.01585548009541933" />
<path style="fill:none; stroke-width:0.02; stroke:%23351452; stroke-opacity:0.30019956827101396; stroke-linecap:round;" d="M -0.023477638473184043 1.1060540110624515 C 0.2906069318977681 1.3294388743149446, 0.9732039429301472 -0.25787884663355964, 1.1533953132039367 -0.15904925836588782" />
<path style="fill:none; stroke-width:0.03; stroke:%23523414; stroke-opacity:0.40287709062842714; stroke-linecap:round;" d="M -0.10332198092513566 1.1070735255508073 C -0.6102378927817498 0.5470788931752878, 0.11056627354840182 -1.0484126584390339, 1.112280714191993 -0.15287172131333887" />
<path style="fill:none; stroke-width:0.02; stroke:%233C1452; stroke-opacity:0.4902276723789784; stroke-linecap:round;" d="M -0.08843710940580073 1.049335251922428 C -0.44680797645841813 0.6137861658292233, 0.26988992079178115 -0.8522341214197896, 1.079736442778389 -0.0900689391028231" />
<path style="fill:none; stroke-width:0.03; stroke:%23351452; stroke-opacity:0.46434620228579676; stroke-linecap:round;" d="M -0.19630986723074326 1.023655864150892 C 0.032036928907792694 1.2000922265239793, 0.8449400786949279 -0.32371409255357164, 1.0819027128378103 -0.1377957401568431" />
<path style="fill:none; stroke-width:0.01; stroke:%23523714; stroke-opacity:0.1805825678723398; stroke-linecap:round;" d="M -0.15216804486984767 1.1337671415295218 C 0.17899942502636357 1.381403425211349, 0.9392531065073089 -0.2836933129405036, 1.1240036947636831 -0.17845178020952868" />
<path style="fill:none; stroke-width:0.03; stroke:%23524114; stroke-opacity:0.5742658155114311; stroke-linecap:round;" d="M -0.127306149159399 1.0840544270477064 C -0.8045307914775783 0.32611962026011865, -0.07207017533277987 -1.1897483958100812, 1.0724830171183408 -0.09698763521357812" />
<path style="fill:none; stroke-width:0.02; stroke:%23523614; stroke-opacity:0.4461384925425061; stroke-linecap:round;" d="M -0.18084187030538332 1.013034055098746 C 0.05189902283233855 1.1945126284689218, 0.9099794290979422 -0.38512119886247353, 1.1586978712162006 -0.18578965710870896" />
<path style="fill:none; stroke-width:0.03; stroke:%232B1452; stroke-opacity:0.44159870995873607; stroke-linecap:round;" d="M -0.15806934247995488 1.1021665499695554 C 0.36342888925774375 1.541772365660547, 1.0763017955202783 -0.011225374638071495, 1.0357669182663574 -0.1204309898541885" />
<path style="fill:none; stroke-width:0.03; stroke:%23522614; stroke-opacity:0.20737609537075982; stroke-linecap:round;" d="M -0.1644658492896261 1.076478182176871 C -0.055610894282162315 1.1124166212281323, 0.6453403063055065 -0.4408017060528136, 1.0182179998337195 -0.15033829587903666" />
<path style="fill:none; stroke-width:0.01; stroke:%23201452; stroke-opacity:0.3346025237912763; stroke-linecap:round;" d="M -0.05003305177404241 1.1987573221399759 C 0.22622697281197235 1.379756907740453, 0.8237610496535044 -0.11779950156784313, 1.0165350597031746 -0.010438541079520552" />
<path style="fill:none; stroke-width:0.02; stroke:%232C1452; stroke-opacity:0.4694243495981204; stroke-linecap:round;" d="M -0.035633824698095104 1.026520106277229 C -0.0893936558114809 0.9165703900262187, 0.5063148612268868 -0.4969345959402728, 1.0009349737197901 -0.10413904164078265" />
<path style="fill:none; stroke-width:0.02; stroke:%23524F14; stroke-opacity:0.3469318555123923; stroke-linecap:round;" d="M -0.12320172679243052 1.0315879614279828 C -0.10149623387202023 0.9829522646507196, 0.6911279692660373 -0.4865535279722533, 1.1176441209768937 -0.08555213006741172" />
<path style="fill:none; stroke-width:0.02; stroke:%23523514; stroke-opacity:0.3107527061450765; stroke-linecap:round;" d="M -0.037739862103435766 1.1904252545523386 C 0.35537213315833677 1.4650247773202683, 1.022161830055109 -0.21937550496414993, 1.1569120783831655 -0.1714189185963793" />
<path style="fill:none; stroke-width:0.03; stroke:%23523514; stroke-opacity:0.31886009287967176; stroke-linecap:round;" d="M -0.14580752181154832 1.1411005340416411 C -0.32718433739022984 0.8777321918369967, 0.443002241647762 -0.6445392498002824, 1.0916625748907998 -0.033278224418407984" />
<path style="fill:none; stroke-width:0.03; stroke:%23301452; stroke-opacity:0.39985827960063774; stroke-linecap:round;" d="M -0.09684612245178426 1.1241372800421268 C -0.2396546782031283 0.8993016392530037, 0.5528189486514452 -0.6667373873218431, 1.1763377842859737 -0.08395850326295354" />
<path style="fill:none; stroke-width:0.02; stroke:%23523F14; stroke-opacity:0.29178382343224885; stroke-linecap:round;" d="M -0.13956265244367835 1.1016634730368084 C 0.18942545944611117 1.3641219120616181, 0.8948733364738732 -0.11821701769260418, 1.0235074112613003 -0.05689314482058721" />
<path style="fill:none; stroke-width:0.03; stroke:%23321452; stroke-opacity:0.3690496207012756; stroke-linecap:round;" d="M -0.16712173889945453 1.1845072527654126 C -0.1438252503025036 1.1316255862356883, 0.6997146511654084 -0.4779653932401399, 1.1688047287707497 -0.04741935201129299" />
<path style="fill:none; stroke-width:0.02; stroke:%23522B14; stroke-opacity:0.406196249733561; stroke-linecap:round;" d="M -0.03450869485595183 1.045183962410387 C 0.10512119348098126 1.1070116460950552, 0.7503362298432404 -0.42977143553133446, 1.0901587408392444 -0.18490865288646374" />
<path style="fill:none; stroke-width:0.01; stroke:%23523014; stroke-opacity:0.47558807454920293; stroke-linecap:round;" d="M -0.03829463864287022 1.0731521356471503 C 0.04201564191694063 1.0913975144794086, 0.817159808975887 -0.3430021929437407, 1.1742784199192529 -0.016810055454184764" />
<path style="fill:none; stroke-width:0.03; stroke:%23523014; stroke-opacity:0.5389477910112177; stroke-linecap:round;" d="M -0.12391258768620735 1.1411113102530717 C 0.10364118123317917 1.2991894564525623, 0.7871304185276089 -0.17033586430565917, 1.0141677926897563 -0.012767042802473344" />
<path style="fill:none; stroke-width:0.01; stroke:%23311452; stroke-opacity:0.4653601341918309; stroke-linecap:round;" d="M -0.08288081219732223 1.1614193102880384 C 0.06447888353224507 1.2235100912449888, 0.7112959874915782 -0.39810937981758326, 1.0718395866864443 -0.14802441714178477" />
<path style="fill:none; stroke-width:0.03; stroke:%23251452; stroke-opacity:0.2827982573758322; stroke-linecap:round;" d="M -0.15507259486759375 1.1129501243896436 C -0.3330245845481647 0.8583770023080521, 0.39504396269100056 -0.595005068732291, 1.0195563695191938 -0.010726897678569977" />
<path style="fill:none; stroke-width:0.02; stroke:%23523514; stroke-opacity:0.17466173522042322; stroke-linecap:round;" d="M -0.05325433654109013 1.068765996635339 C 0.06438591981243869 1.1232881712786, 0.7824346463156987 -0.319870618251507, 1.1084992402584268 -0.04865509329651177" />
<path style="fill:none; stroke-width:0.03; stroke:%233C1452; stroke-opacity:0.5291370443046809; stroke-linecap:round;" d="M -0.12700603373713296 1.0143115108181298 C -0.04231403962944663 1.0351362533268338, 0.6583078889512914 -0.38908381385375324, 1.0119646065648433 -0.0911385183999143" />
<path style="fill:none; stroke-width:0.03; stroke:%23401452; stroke-opacity:0.45395821794249314; stroke-linecap:round;" d="M -0.12129339481246147 1.1586440067402117 C -0.6273901670743437 0.6233540823256285, 0.056703800541597515 -0.990952843514429, 1.066070103302437 -0.1313712376224464" />
<path style="fill:none; stroke-width:0.01; stroke:%233F1452; stroke-opacity:0.31217155531660024; stroke-linecap:round;" d="M -0.03320996847456795 1.1310141728928769 C -0.08177740257513039 1.0244987351352866, 0.5269519561245108 -0.42013536686795666, 1.0260943076984135 -0.02457813034180159" />
<path style="fill:none; stroke-width:0.01; stroke:%23441452; stroke-opacity:0.47399712596677046; stroke-linecap:round;" d="M -0.16256053829387807 1.0022156267886573 C -0.5908482702776807 0.47060434176833965, 0.14299799350338782 -0.9328572269027944, 1.0007128835019192 -0.07250743509555327" />
<path style="fill:none; stroke-width:0.02; stroke:%23523E14; stroke-opacity:0.5658080266385286; stroke-linecap:round;" d="M -0.1190962847909191 1.008172314987028 C -0.48233497016854837 0.4743469296776107, 0.39259330578824864 -0.9363716945064925, 1.1794753334699306 -0.025915822908393046" />
<path style="fill:none; stroke-width:0.02; stroke:%23524614; stroke-opacity:0.2907463910523165; stroke-linecap:round;" d="M -0.17114403440342385 1.1287410922005907 C -0.1359833499908049 1.0903390272178994, 0.6431717414421962 -0.5139483159245739, 1.102366992616732 -0.11985419848857887" />
</svg>)
Starting with Flutter (from React Native)
February 2019
At the end of 2018/start of 2019 I wanted to fill in my knowledge of modern UI approaches. I have worked with native iOS and Android and…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23CBBDDB; fill-opacity:0.5;" d="M 0.806298522070209 -0.2312550594951489 A 0.6214947760971918 0.6214947760971918 0 0 0 0.18480374597301719 0.390239716602043 A 0.6214947760971918 0.6214947760971918 0 0 0 1.4277932981674009 0.39023971660204276 A 0.6214947760971918 0.6214947760971918 0 0 0 0.18480374597301719 0.39023971660204315 A 0.6214947760971918 0.6214947760971918 0 0 0 1.4277932981674009 0.39023971660204265" />
<path style="fill:%23C3BDDB; fill-opacity:0.5;" d="M 0.04568921222670197 -0.8723495571179765 A 1.110173328988575 1.110173328988575 0 0 0 -1.0644841167618728 0.23782377187059858 A 1.110173328988575 1.110173328988575 0 0 0 1.155862541215277 0.23782377187059817 A 1.110173328988575 1.110173328988575 0 0 0 -1.0644841167618728 0.23782377187059886 A 1.110173328988575 1.110173328988575 0 0 0 1.155862541215277 0.2378237718705979" />
<path style="fill:%23BDCEDB; fill-opacity:0.5;" d="M 0.4151947946582747 -0.11220964447551562 A 1.0398347483065218 1.0398347483065218 0 0 0 -0.6246399536482471 0.9276251038310063 A 1.0398347483065218 1.0398347483065218 0 0 0 1.4550295429647964 0.9276251038310059 A 1.0398347483065218 1.0398347483065218 0 0 0 -0.6246399536482471 0.9276251038310065 A 1.0398347483065218 1.0398347483065218 0 0 0 1.4550295429647964 0.9276251038310056" />
<path style="fill:none; stroke-width:0.02; stroke:%230D1C73; stroke-opacity:0.38625129463947966; stroke-linecap:round;" d="M -0.1396100423739763 1.1054662391642978 C -0.21810971907898624 0.9758828368325763, 0.5839492483921079 -0.5312494324056789, 1.0642813164542215 -0.10506746975042942" />
<path style="fill:none; stroke-width:0.01; stroke:%232E730D; stroke-opacity:0.4735207649578437; stroke-linecap:round;" d="M -0.10944058099819494 1.0648528801538526 C 0.12149990224411028 1.2494505058412488, 0.9236063919146182 -0.212796027259887, 1.0815066959761268 -0.10270196986617254" />
<path style="fill:none; stroke-width:0.03; stroke:%2328730D; stroke-opacity:0.12597452950897287; stroke-linecap:round;" d="M -0.08391016493008345 1.0959947602580389 C 0.4478969198778551 1.5669026232589636, 1.222342574773961 0.0848810529681614, 1.0862826019002252 -0.09849378956263653" />
<path style="fill:none; stroke-width:0.02; stroke:%230D3273; stroke-opacity:0.39506065092662523; stroke-linecap:round;" d="M -0.08825512059469932 1.1112048624251094 C 0.04369348595110595 1.1922609847787349, 0.830989589157417 -0.28252376860148987, 1.0921439561571187 -0.0726377126371616" />
<path style="fill:none; stroke-width:0.03; stroke:%2334730D; stroke-opacity:0.45879082804568344; stroke-linecap:round;" d="M -0.1108837337771256 1.1263499692451187 C 0.024990642449917777 1.2159688989953303, 0.8665224198045024 -0.26853979575454134, 1.1242443402542146 -0.05110509903781438" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2973; stroke-opacity:0.362418957110077; stroke-linecap:round;" d="M -0.09012680679612996 1.1313838314230327 C 0.23055662761762347 1.3813206146620214, 0.9846578468082106 -0.14737302460620494, 1.0740985696941436 -0.1136672375134768" />
<path style="fill:none; stroke-width:0.03; stroke:%230D730F; stroke-opacity:0.3271635399724242; stroke-linecap:round;" d="M -0.1347989976432039 1.145927923485987 C -0.4304731477852343 0.789107195802222, 0.42332058751746166 -0.7610158425836515, 1.1310546162986221 -0.09078538389256617" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4873; stroke-opacity:0.38560853167575365; stroke-linecap:round;" d="M -0.14600664898112461 1.0852489443660276 C -0.06095435623069706 1.1244508765440004, 0.8203401453092587 -0.34448125287838466, 1.1226749970291505 -0.06578905690525995" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3D73; stroke-opacity:0.28965073478719133; stroke-linecap:round;" d="M -0.05518160965064314 1.0707198937985059 C 0.21550375029396596 1.2931054013788992, 0.9636029732168238 -0.10546889820413652, 1.0656431027015636 -0.05151648191409546" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2C73; stroke-opacity:0.3093462059751616; stroke-linecap:round;" d="M -0.06516877414049907 1.1190711692628026 C 0.045812608518273734 1.1791325409527742, 0.81117733976166 -0.27432023323851384, 1.0880640559650754 -0.05069896978259947" />
<path style="fill:none; stroke-width:0.02; stroke:%230D3173; stroke-opacity:0.27241291635005405; stroke-linecap:round;" d="M -0.10141927841872855 1.1348131133603918 C -0.16286710074149996 1.0183358365590691, 0.6722617394590793 -0.4737338837794043, 1.1297679356593084 -0.051732407880347366" />
<path style="fill:none; stroke-width:0.02; stroke:%2322730D; stroke-opacity:0.4101258472769274; stroke-linecap:round;" d="M -0.09777414259704321 1.0599332467124507 C 0.22126961076541063 1.32571669350477, 1.0160753478596174 -0.17023305628115826, 1.0959382155084207 -0.14199546153473092" />
<path style="fill:none; stroke-width:0.03; stroke:%233A730D; stroke-opacity:0.312521802934869; stroke-linecap:round;" d="M -0.10145303558386519 1.0846506271418048 C 0.023408599319031664 1.159528079832393, 0.8683849825749805 -0.3661777693945216, 1.148894376810624 -0.13124195649538886" />
<path style="fill:none; stroke-width:0.02; stroke:%230D4873; stroke-opacity:0.4418630747123631; stroke-linecap:round;" d="M -0.14357821877347915 1.0745576099381886 C 0.1271013317192637 1.2970720671753302, 0.9550785238237463 -0.21822764020773155, 1.0874859325119486 -0.13629353254808174" />
<path style="fill:none; stroke-width:0.03; stroke:%230D2473; stroke-opacity:0.5454008283706843; stroke-linecap:round;" d="M -0.13953413681748053 1.110767339633783 C -0.42358153244936514 0.7780455935976305, 0.396326818920528 -0.7803025875383316, 1.0962643155509557 -0.14362531955218127" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2473; stroke-opacity:0.4122775273802904; stroke-linecap:round;" d="M -0.06310736725244548 1.0977512038838153 C -0.049705007059179795 1.059852594244619, 0.739878816202731 -0.4494997207952792, 1.1294851135877617 -0.11851776288159448" />
<path style="fill:none; stroke-width:0.02; stroke:%233E730D; stroke-opacity:0.26089256253100424; stroke-linecap:round;" d="M -0.11856739970137267 1.0555417390721842 C -0.21083103403942893 0.9002451903238169, 0.6556738054969347 -0.5445055194722399, 1.1289595156452896 -0.07662955798572559" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4173; stroke-opacity:0.8259047377897886; stroke-linecap:round;" d="M -0.09448217222716138 1.0798021189524767 C -0.171144865412805 0.9521989634585886, 0.6319955029982773 -0.5646339863725203, 1.113251613990574 -0.13970423637864898" />
<path style="fill:none; stroke-width:0.03; stroke:%232E730D; stroke-opacity:0.537225855424425; stroke-linecap:round;" d="M -0.13305290639793063 1.0909053169678549 C -0.003916866723111312 1.1668844001867171, 0.8180332559959202 -0.3734186874761149, 1.0994778465784245 -0.1456235136984681" />
<path style="fill:none; stroke-width:0.02; stroke:%230D1D73; stroke-opacity:0.32644422816565494; stroke-linecap:round;" d="M -0.05456235448955443 1.1063411931218397 C -0.005416523196786871 1.1055521498702066, 0.7326241580672589 -0.33661588353130756, 1.0692498898282554 -0.060534431478852416" />
<path style="fill:none; stroke-width:0.02; stroke:%230D3F73; stroke-opacity:0.4302063826537792; stroke-linecap:round;" d="M -0.08748697603418015 1.0868843959438823 C -0.25395801201156704 0.8660296319459835, 0.5547731651732186 -0.6123220832014695, 1.1144622326337932 -0.09416937523359373" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5073; stroke-opacity:0.4850659503212192; stroke-linecap:round;" d="M -0.09696199677506455 1.0572088540720148 C 0.08078590483052295 1.200843808289624, 0.9436625864208098 -0.22880062690392033, 1.1427203727773216 -0.06155251518110464" />
<path style="fill:none; stroke-width:0.03; stroke:%231E730D; stroke-opacity:0.49625051784379726; stroke-linecap:round;" d="M -0.09681125041223532 1.140960453584893 C -0.2553655250879222 0.9283887108819514, 0.5625647602784942 -0.5771553215261834, 1.1218126805823256 -0.0634599464609952" />
<path style="fill:none; stroke-width:0.03; stroke:%230D3373; stroke-opacity:0.5078261966597348; stroke-linecap:round;" d="M -0.11408878707938253 1.124697789090695 C 0.19460284026655283 1.3840960784787673, 1.0318927535073468 -0.15462487524530277, 1.1326675205082113 -0.10587739420158854" />
<path style="fill:none; stroke-width:0.03; stroke:%230D3073; stroke-opacity:0.5767481816619907; stroke-linecap:round;" d="M -0.12427881063175093 1.064337380290856 C 0.10657713152042486 1.2443890602376075, 0.8967465579464113 -0.2318342887179894, 1.0592869597906862 -0.12005071722802418" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1B73; stroke-opacity:0.5643211871593812; stroke-linecap:round;" d="M -0.07439526074582391 1.1394014005624824 C -0.2824309712482437 0.9076894311397972, 0.4289088360825689 -0.6539718581963292, 1.0584390077628123 -0.14958146363584107" />
<path style="fill:none; stroke-width:0.03; stroke:%230D3A73; stroke-opacity:0.33940696036611995; stroke-linecap:round;" d="M -0.14175025645265416 1.1069643182726554 C -0.26530160083711374 0.9150038220601047, 0.6300290500059335 -0.5721957195488365, 1.145653383678496 -0.057497496592024334" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3273; stroke-opacity:0.5340425587158277; stroke-linecap:round;" d="M -0.05977375273482836 1.1216664213120773 C -0.22048786438664458 0.9188667783587263, 0.5322857774246417 -0.5671186400190869, 1.090821437266961 -0.08288807234192833" />
<path style="fill:none; stroke-width:0.02; stroke:%230E730D; stroke-opacity:0.4062848879630703; stroke-linecap:round;" d="M -0.1322096538709071 1.1384941343825545 C -0.544056560333222 0.6919324734988003, 0.2529058045574787 -0.8760665063306624, 1.084417518433447 -0.13177675617942516" />
<path style="fill:none; stroke-width:0.03; stroke:%230D5773; stroke-opacity:0.375311637294131; stroke-linecap:round;" d="M -0.07903641190567573 1.1330308235930473 C -0.31266053491890117 0.8687913663909085, 0.425760214759289 -0.6595427638875114, 1.0700754125733587 -0.11621392111139199" />
<path style="fill:none; stroke-width:0.03; stroke:%230D2873; stroke-opacity:0.5104111997677417; stroke-linecap:round;" d="M -0.10305561037188651 1.1286874512258076 C -0.24499262392667404 0.9430588289873654, 0.5256019590624275 -0.5850474438554116, 1.0767874111074316 -0.11102833761458025" />
<path style="fill:none; stroke-width:0.02; stroke:%230D1673; stroke-opacity:0.3642823596511666; stroke-linecap:round;" d="M -0.14441460440050644 1.0864855569194607 C -0.20173538283041464 0.9717588462636384, 0.6576373697655684 -0.5206520311552358, 1.1100778698445326 -0.09337053049337718" />
<path style="fill:none; stroke-width:0.02; stroke:%2336730D; stroke-opacity:0.1973106126048939; stroke-linecap:round;" d="M -0.08587272843984028 1.0791359397677132 C -0.19353195953167246 0.9210537694843002, 0.6069059832691551 -0.5916484183952297, 1.1180788578539786 -0.13719846628653257" />
<path style="fill:none; stroke-width:0.02; stroke:%230D3473; stroke-opacity:0.22880919601238045; stroke-linecap:round;" d="M -0.10558783486063 1.1265080421639677 C -0.13895803953083755 1.0462000647296446, 0.6035328808439366 -0.4912872765833457, 1.050068866079982 -0.1303203793430125" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3E73; stroke-opacity:0.365357404319784; stroke-linecap:round;" d="M -0.09767881636677017 1.1023258375378568 C 0.009355886304379168 1.1611239106942801, 0.8135040701458782 -0.2952694847395259, 1.0935289411783702 -0.05903547669775562" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2273; stroke-opacity:0.31370503423064633; stroke-linecap:round;" d="M -0.0903760957711185 1.0540631545780696 C -0.2387754454552195 0.854756788433005, 0.5585878119368859 -0.6362569895886965, 1.1043559176139957 -0.14240066296187073" />
<path style="fill:none; stroke-width:0.02; stroke:%230D3473; stroke-opacity:0.23038299231614495; stroke-linecap:round;" d="M -0.11378096308820469 1.0509246974214899 C -0.20590390816291498 0.9062348952211094, 0.5906203447659912 -0.5433648469724475, 1.068163057761445 -0.10613996354147552" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2B73; stroke-opacity:0.3273562775968334; stroke-linecap:round;" d="M -0.1094913697530363 1.0670269361994558 C -0.32616909248536263 0.7937752659069655, 0.48481819226008127 -0.6785852376525876, 1.092883600793097 -0.10763908385267484" />
<path style="fill:none; stroke-width:0.02; stroke:%230D1E73; stroke-opacity:0.4825834967936065; stroke-linecap:round;" d="M -0.09087668831692443 1.0602004988348275 C -0.11573121343412224 0.9842063863434907, 0.67958881093456 -0.43678076978112035, 1.0816343800692259 -0.06982438299073634" />
</svg>)
Getting Started with Functional Music Programming
February 2019
One of my 2019 goals is to learn Haskell, to do this I picked up Haskell School of Music which teaches Haskell by showing how it can be used…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBBDD5; fill-opacity:0.5;" d="M 0.09339960091267718 -0.20614931385354518 A 0.7438839864163636 0.7438839864163636 0 0 0 -0.6504843855036864 0.5377346725628185 A 0.7438839864163636 0.7438839864163636 0 0 0 0.8372835873290407 0.5377346725628182 A 0.7438839864163636 0.7438839864163636 0 0 0 -0.6504843855036864 0.5377346725628186 A 0.7438839864163636 0.7438839864163636 0 0 0 0.8372835873290407 0.537734672562818" />
<path style="fill:%23DBBDD2; fill-opacity:0.5;" d="M 0.41722107808142483 -0.42210104615196364 A 0.6268345449343709 0.6268345449343709 0 0 0 -0.20961346685294602 0.2047334987824073 A 0.6268345449343709 0.6268345449343709 0 0 0 1.0440556230157956 0.20473349878240704 A 0.6268345449343709 0.6268345449343709 0 0 0 -0.20961346685294602 0.20473349878240743 A 0.6268345449343709 0.6268345449343709 0 0 0 1.0440556230157956 0.2047334987824069" />
<path style="fill:%23DBBDBE; fill-opacity:0.5;" d="M 0.5555029811131492 -0.29954179630613553 A 0.9431881412453313 0.9431881412453313 0 0 0 -0.3876851601321821 0.6436463449391959 A 0.9431881412453313 0.9431881412453313 0 0 0 1.4986911223584807 0.6436463449391956 A 0.9431881412453313 0.9431881412453313 0 0 0 -0.3876851601321821 0.6436463449391961 A 0.9431881412453313 0.9431881412453313 0 0 0 1.4986911223584807 0.6436463449391954" />
<path style="fill:%23DBBEBD; fill-opacity:0.5;" d="M 0.1089412690195799 0.19096190151104775 A 0.7201183612302869 0.7201183612302869 0 0 0 -0.611177092210707 0.9110802627413348 A 0.7201183612302869 0.7201183612302869 0 0 0 0.8290596302498668 0.9110802627413345 A 0.7201183612302869 0.7201183612302869 0 0 0 -0.611177092210707 0.9110802627413349 A 0.7201183612302869 0.7201183612302869 0 0 0 0.8290596302498668 0.9110802627413344" />
<path style="fill:none; stroke-width:0.05; stroke:%23590D1F; stroke-opacity:0.33049940971033837; stroke-linecap:round;" d="M 0.46001330326809675 -0.14588438338947088 C -1.2248205477807361 -0.07384986446344322, -0.6259649903329927 1.4678384536748945, 0.478954915346345 1.507920945028037" />
<path style="fill:none; stroke-width:0.05; stroke:%23590D34; stroke-opacity:0.3713212168164395; stroke-linecap:round;" d="M 0.5173978534697703 -0.05985998969833868 C 1.2556223790700969 0.009347302980992955, 1.7626607271144343 1.4779642471764296, 0.47605349164671956 1.4932704809675734" />
<path style="fill:none; stroke-width:0.05; stroke:%230D3559; stroke-opacity:0.4691367010074742; stroke-linecap:round;" d="M 0.5161010743702594 -0.11445097213617991 C -0.3260611969164444 -0.07273724148786209, 0.22059281521308938 1.4348103007868294, 0.4981665172589887 1.489047875028046" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D35; stroke-opacity:0.171936775396908; stroke-linecap:round;" d="M 0.47361144227587954 -0.13221797860260978 C 1.863829561039821 -0.11232420177696045, 2.4820620309751527 1.423412748653456, 0.5127855432929598 1.5228242437014494" />
<path style="fill:none; stroke-width:0.05; stroke:%230D2C59; stroke-opacity:0.3569815869884452; stroke-linecap:round;" d="M 0.48899004877097385 -0.11003777232913411 C -0.9813121116940137 -0.03557834328754894, -0.37758412810633757 1.5034314535272073, 0.5134345694272813 1.542971936737489" />
<path style="fill:none; stroke-width:0.02; stroke:%230D1F59; stroke-opacity:0.3930115196313215; stroke-linecap:round;" d="M 0.4897632763828194 -0.14304930834216692 C -0.5123140155350514 -0.07616777117404183, 0.09194108856177968 1.467845466318925, 0.5129431713725325 1.5148299999456383" />
<path style="fill:none; stroke-width:0.05; stroke:%23590D18; stroke-opacity:0.6433347183465521; stroke-linecap:round;" d="M 0.49053837446253074 -0.05510674320655711 C 1.3842080794873475 -0.03532042153421855, 1.9909626436826438 1.42660856456212, 0.544901489021207 1.5268010016812328" />
<path style="fill:none; stroke-width:0.05; stroke:%23590D2C; stroke-opacity:0.3983378558440484; stroke-linecap:round;" d="M 0.45019217803852085 -0.14348143481971887 C -1.0199808305140339 -0.06403688494742099, -0.39879069342254725 1.507478592072411, 0.47956331371569305 1.5460970384456227" />
<path style="fill:none; stroke-width:0.05; stroke:%23590D17; stroke-opacity:0.5018550245600685; stroke-linecap:round;" d="M 0.46574595344813924 -0.06589533094715136 C 0.873541665827035 -0.02751118007791331, 1.4740292823115457 1.4382566040662221, 0.5128928614093988 1.5174043070417387" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D23; stroke-opacity:0.3573015804117878; stroke-linecap:round;" d="M 0.451512004900545 -0.081883548408011 C -1.7250238039807126 0.021489295442716494, -1.1345015229239317 1.4854650832926168, 0.4899587351549491 1.496236700739051" />
<path style="fill:none; stroke-width:0.02; stroke:%230D2059; stroke-opacity:0.5250565446839941; stroke-linecap:round;" d="M 0.450211648954012 -0.05130370919227237 C 0.7058247214451638 -0.003854919551090741, 1.2633558391302715 1.44577219826609, 0.4628129260732409 1.5017902788564599" />
</svg>)
Upgrading to Elm 0.19 in early 2019
February 2019
So I finally got round to updating this Elm App (for presentations) to Elm 0.19 (along with cutting out a bunch of features so it was better…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDCBDB; fill-opacity:0.5;" d="M 0.46276176455478824 -0.22464731302575913 A 0.43017741757901995 0.43017741757901995 0 0 0 0.032584346975768286 0.20553010455326087 A 0.43017741757901995 0.43017741757901995 0 0 0 0.8929391821338082 0.2055301045532607 A 0.43017741757901995 0.43017741757901995 0 0 0 0.032584346975768286 0.20553010455326098 A 0.43017741757901995 0.43017741757901995 0 0 0 0.8929391821338082 0.2055301045532606" />
<path style="fill:%23BDCBDB; fill-opacity:0.5;" d="M 0.8834366162918188 0.36665045935249074 A 0.25807746206917725 0.25807746206917725 0 0 0 0.6253591542226415 0.624727921421668 A 0.25807746206917725 0.25807746206917725 0 0 0 1.141514078360996 0.6247279214216679 A 0.25807746206917725 0.25807746206917725 0 0 0 0.6253591542226415 0.6247279214216681 A 0.25807746206917725 0.25807746206917725 0 0 0 1.141514078360996 0.6247279214216679" />
<path style="fill:%23C6BDDB; fill-opacity:0.5;" d="M 0.689379101793773 -0.0424163753891631 A 0.6206624200339651 0.6206624200339651 0 0 0 0.06871668175980794 0.5782460446448021 A 0.6206624200339651 0.6206624200339651 0 0 0 1.3100415218277381 0.5782460446448019 A 0.6206624200339651 0.6206624200339651 0 0 0 0.06871668175980794 0.5782460446448022 A 0.6206624200339651 0.6206624200339651 0 0 0 1.3100415218277381 0.5782460446448017" />
<path style="fill:%23BDCBDB; fill-opacity:0.5;" d="M 0.26232571195317567 -0.32025306824532324 A 0.37106337026220565 0.37106337026220565 0 0 0 -0.10873765830902998 0.05081030201688246 A 0.37106337026220565 0.37106337026220565 0 0 0 0.6333890822153814 0.050810302016882324 A 0.37106337026220565 0.37106337026220565 0 0 0 -0.10873765830902998 0.05081030201688255 A 0.37106337026220565 0.37106337026220565 0 0 0 0.6333890822153814 0.05081030201688223" />
<path style="fill:%23BDBDDB; fill-opacity:0.5;" d="M 0.15982224919876542 -0.7608861665704255 A 0.9166808758742924 0.9166808758742924 0 0 0 -0.756858626675527 0.15579470930386696 A 0.9166808758742924 0.9166808758742924 0 0 0 1.076503125073058 0.15579470930386663 A 0.9166808758742924 0.9166808758742924 0 0 0 -0.756858626675527 0.15579470930386718 A 0.9166808758742924 0.9166808758742924 0 0 0 1.076503125073058 0.1557947093038664" />
<path style="fill:%23BDC6DB; fill-opacity:0.5;" d="M 0.04768061406439639 -0.1408509860127351 A 0.35163711885053756 0.35163711885053756 0 0 0 -0.30395650478614117 0.2107861328378025 A 0.35163711885053756 0.35163711885053756 0 0 0 0.39931773291493394 0.21078613283780237 A 0.35163711885053756 0.35163711885053756 0 0 0 -0.30395650478614117 0.2107861328378026 A 0.35163711885053756 0.35163711885053756 0 0 0 0.39931773291493394 0.2107861328378023" />
<path style="fill:none; stroke-width:0.01; stroke:%23194666; stroke-opacity:0.5647903091681167; stroke-linecap:round;" d="M -0.8285530132218337 0.3350041568498676 C -0.9966259554537588 1.2656405113181166, 2.0780317768829413 1.359198563337412, 2.184504869184213 0.9544841624887022" />
<path style="fill:none; stroke-width:0.01; stroke:%23386619; stroke-opacity:0.352076379130824; stroke-linecap:round;" d="M -1.2161444367166454 0.32972818431288137 C -1.3634847456119221 1.2625200823292007, 1.9081306231034496 1.2951617861276477, 2.001400172470875 0.9229728973359358" />
<path style="fill:none; stroke-width:0.01; stroke:%23193C66; stroke-opacity:0.5497779563108571; stroke-linecap:round;" d="M -1.246109606291038 0.5497229371342609 C -1.2291468099657366 0.7825986018810521, 1.8642779239099887 0.32865277426912, 1.879334908088926 0.6330295160615782" />
<path style="fill:none; stroke-width:0.01; stroke:%23193266; stroke-opacity:0.44834355205139964; stroke-linecap:round;" d="M -0.8747735956053788 0.290428527345065 C -1.0503345402262112 1.155694825833855, 1.9176633507113272 1.3124553991131291, 2.0223654097144035 0.9538823251329939" />
<path style="fill:none; stroke-width:0.01; stroke:%23192D66; stroke-opacity:0.5401981811958617; stroke-linecap:round;" d="M -1.0357538993879856 0.47556311354390185 C -1.072107831411349 1.4613782569006455, 2.021302511532342 1.1131028715283926, 2.0715538079529496 0.6629720401904582" />
<path style="fill:none; stroke-width:0.01; stroke:%232E6619; stroke-opacity:0.43223908011122436; stroke-linecap:round;" d="M -0.8175710184112825 0.319820782811698 C -0.8943274195864855 0.8386063164296073, 2.1840968881033582 0.8941504877963765, 2.2057170672439304 0.9024960991618541" />
<path style="fill:none; stroke-width:0.01; stroke:%23193366; stroke-opacity:0.559598944069119; stroke-linecap:round;" d="M -0.9675581918765077 0.7124260296195473 C -0.9199252381027908 1.3179405377112166, 1.7903238321366906 0.7204056733350798, 1.8050135588699419 0.5885558401398019" />
<path style="fill:none; stroke-width:0.01; stroke:%232B6619; stroke-opacity:0.45093976617597464; stroke-linecap:round;" d="M -1.014247196726743 0.5417396039146387 C -0.9942866620118338 0.9715735773924853, 2.0405595325091417 0.46386321314026324, 2.0627073788256336 0.5620319264742271" />
<path style="fill:none; stroke-width:0.01; stroke:%23193166; stroke-opacity:0.43742016045872817; stroke-linecap:round;" d="M -1.0242057977252421 0.35276864525974905 C -1.160137098901076 1.1055167091696043, 1.8448730692098185 1.2120178543406752, 1.9180166687933453 0.9730553224388536" />
<path style="fill:none; stroke-width:0.01; stroke:%23193766; stroke-opacity:0.3389569979069456; stroke-linecap:round;" d="M -1.0878023024586003 0.7233022220805927 C -1.0987836151896957 1.2749964371261824, 2.0711978895380154 0.9260925810921329, 2.0950498623821376 0.9232240514034983" />
<path style="fill:none; stroke-width:0.01; stroke:%23336619; stroke-opacity:0.17993472502143498; stroke-linecap:round;" d="M -1.0173455734585057 0.2656536151938495 C -1.0777171748366408 1.3341464446749938, 2.0890028062561896 1.0359381821421905, 2.15359902536905 0.5149605698937975" />
<path style="fill:none; stroke-width:0.01; stroke:%23193366; stroke-opacity:0.42793642593263054; stroke-linecap:round;" d="M -1.1776980956346847 0.5064647674634326 C -1.1747097820862153 1.2241393866732306, 2.114788327914241 0.7531626622184633, 2.1438355700069485 0.6066196409542872" />
<path style="fill:none; stroke-width:0.01; stroke:%23386619; stroke-opacity:0.5254549149284008; stroke-linecap:round;" d="M -0.8458072314335574 0.7200918892115913 C -0.771916771133141 1.8091656336359498, 2.0330282941786266 1.180196935640833, 2.0254484333424627 0.5814940899284659" />
<path style="fill:none; stroke-width:0.01; stroke:%23194066; stroke-opacity:0.4772920601222676; stroke-linecap:round;" d="M -0.8213003970784596 0.39285541249620826 C -0.8460753856970226 0.7125446061655439, 2.2349214496509275 0.6393603693556443, 2.226599204226613 0.8491507689331429" />
<path style="fill:none; stroke-width:0.01; stroke:%23192566; stroke-opacity:0.5638473834778156; stroke-linecap:round;" d="M -0.8151934438789417 0.7279439964606493 C -0.7623383545905983 1.4342083606869613, 2.075730356195447 0.809534290948714, 2.0879585675270302 0.5992579474282282" />
<path style="fill:none; stroke-width:0.01; stroke:%23192B66; stroke-opacity:0.39221742231687806; stroke-linecap:round;" d="M -0.8764352461880818 0.40512658794689477 C -0.8985082393955803 0.9055049737224501, 1.8960811897198013 0.6624138065351879, 1.9184396740476435 0.6449131036754636" />
<path style="fill:none; stroke-width:0.01; stroke:%23193E66; stroke-opacity:0.33820855807855704; stroke-linecap:round;" d="M -0.9001086235382207 0.3960948303730245 C -0.8966939071696512 0.9298276589941865, 2.201268822842064 0.5079619445101791, 2.224304866982659 0.511784492183735" />
<path style="fill:none; stroke-width:0.01; stroke:%23406619; stroke-opacity:0.5338086011240443; stroke-linecap:round;" d="M -0.7605708651509959 0.6641510077099302 C -0.8033190465975669 1.303931141374195, 2.040154214033678 1.096870969918458, 2.076284251258044 0.9478183252352592" />
<path style="fill:none; stroke-width:0.01; stroke:%232E6619; stroke-opacity:0.2026246929128418; stroke-linecap:round;" d="M -1.1574561585108645 0.34746215813135733 C -1.181971758443858 1.102456623524771, 1.758941811376513 0.7750546046163554, 1.7960343752440746 0.5292817779716424" />
<path style="fill:none; stroke-width:0.01; stroke:%23426619; stroke-opacity:0.2948164699020884; stroke-linecap:round;" d="M -0.9964964201449085 0.3553933100517534 C -1.099611046486678 1.3674198426421238, 1.8307044814919302 1.2224052826676368, 1.9152733881930752 0.715080534412756" />
<path style="fill:none; stroke-width:0.01; stroke:%23256619; stroke-opacity:0.4080481830564384; stroke-linecap:round;" d="M -0.9332005101542385 0.4667118907764489 C -1.0274622766247996 1.185099015084404, 1.9507035093849627 1.1510601269773022, 2.006678117161716 0.9439369440936192" />
<path style="fill:none; stroke-width:0.01; stroke:%23193266; stroke-opacity:0.3168939478197859; stroke-linecap:round;" d="M -1.0159147390998586 0.3192363268915179 C -1.1159948212586353 0.9001840989073182, 1.9221520648803774 1.0109926594045857, 1.9582147599175745 0.9494495938971919" />
<path style="fill:none; stroke-width:0.01; stroke:%23194766; stroke-opacity:0.5081588826591467; stroke-linecap:round;" d="M -1.0476522706940141 0.6479816293581019 C -1.0437230385978584 1.5230211281059034, 1.7262797737986582 1.0955508197016777, 1.754621592998927 0.7019041489139253" />
<path style="fill:none; stroke-width:0.01; stroke:%23366619; stroke-opacity:0.5486184544092422; stroke-linecap:round;" d="M -0.8604186170038921 0.6789269602009201 C -0.8253392627677664 1.0343087396288437, 1.732002814427286 0.4720987394176233, 1.7554533659430103 0.5636344931302317" />
<path style="fill:none; stroke-width:0.01; stroke:%23276619; stroke-opacity:0.3341989450310881; stroke-linecap:round;" d="M -1.1471339585978289 0.41054718220351777 C -1.2577795588973089 1.1253506463515612, 1.9224312562256263 1.1692381943536647, 1.9784316801838577 0.9991951102231018" />
<path style="fill:none; stroke-width:0.01; stroke:%23193666; stroke-opacity:0.42767473927841665; stroke-linecap:round;" d="M -0.90639485919071 0.6012502906661568 C -0.9659572187812417 1.831184569520601, 2.126057282752134 1.504519432342345, 2.195831499769903 0.809709896610225" />
<path style="fill:none; stroke-width:0.01; stroke:%23193A66; stroke-opacity:0.2928172983378778; stroke-linecap:round;" d="M -0.9995768972206265 0.6491939092060467 C -1.0127790261777772 1.2593148601036628, 2.0402811125877545 0.9115796180112922, 2.0678858042697614 0.8302148595884177" />
<path style="fill:none; stroke-width:0.01; stroke:%23194066; stroke-opacity:0.47476106769968107; stroke-linecap:round;" d="M -1.201342006242823 0.48790080800571395 C -1.1840164932426276 1.4068740310117642, 2.1803653129710794 0.8510926894953623, 2.208509980414285 0.5173501993432275" />
<path style="fill:none; stroke-width:0.01; stroke:%23193E66; stroke-opacity:0.588184690342492; stroke-linecap:round;" d="M -1.165233138996442 0.6931178864156311 C -1.1247983493583595 1.5560802947386727, 1.8475463016481661 0.9745673180344824, 1.8628031754455097 0.6299819627012125" />
<path style="fill:none; stroke-width:0.01; stroke:%23193166; stroke-opacity:0.3065111595832397; stroke-linecap:round;" d="M -1.106504625960194 0.3106670866669638 C -1.1855701087823993 1.4001322923010715, 1.9068946146107306 1.1557287824022504, 1.9820572996502073 0.6002467350395297" />
<path style="fill:none; stroke-width:0.01; stroke:%233B6619; stroke-opacity:0.46129245656083195; stroke-linecap:round;" d="M -0.9239050037168038 0.6433289710443753 C -0.9126284503901632 1.6528692904065287, 2.2067922108544016 1.1483883324641868, 2.235817124989028 0.6813074925083011" />
<path style="fill:none; stroke-width:0.01; stroke:%23194066; stroke-opacity:0.37111637973407074; stroke-linecap:round;" d="M -1.2285157750020965 0.43610619504860176 C -1.3111807449951178 1.5543952334484321, 1.7867798742635759 1.3121498421873272, 1.865090498216266 0.7287545409673004" />
<path style="fill:none; stroke-width:0.01; stroke:%23192B66; stroke-opacity:0.40389503556654793; stroke-linecap:round;" d="M -1.1892112604767275 0.57192186524786 C -1.236438203150711 1.2254758336329716, 2.177366458750093 1.0151271589857587, 2.2100891389258064 0.9501620391628904" />
<path style="fill:none; stroke-width:0.01; stroke:%231B6619; stroke-opacity:0.4429962202328457; stroke-linecap:round;" d="M -0.7887160399846929 0.3388759914562181 C -0.7989148705137543 0.6211731591155787, 2.0709186093980936 0.446561018785532, 2.0685438564756953 0.6590314006761171" />
<path style="fill:none; stroke-width:0.01; stroke:%23195066; stroke-opacity:0.48388778869693394; stroke-linecap:round;" d="M -0.9908453130151077 0.42396450954163545 C -0.99061553191057 1.262952082953756, 2.1322204775478144 0.8077111253386431, 2.163796832434585 0.511039222362575" />
<path style="fill:none; stroke-width:0.01; stroke:%23236619; stroke-opacity:0.380132812459244; stroke-linecap:round;" d="M -1.146963026004895 0.6332240306000136 C -1.103414270044574 1.34270173615959, 1.921083106667483 0.7249427887622186, 1.938669547756295 0.5433234267560216" />
<path style="fill:none; stroke-width:0.01; stroke:%23496619; stroke-opacity:0.5438745436917526; stroke-linecap:round;" d="M -1.104791690145686 0.5737718581188078 C -1.1143890365300448 1.0116855189479894, 1.9035180442646156 0.7115495339546754, 1.9198754459906815 0.7956580302320746" />
<path style="fill:none; stroke-width:0.01; stroke:%23192266; stroke-opacity:0.5234322091922239; stroke-linecap:round;" d="M -0.871582995396943 0.5435319089103585 C -0.8825781614096423 0.930927744015574, 2.134057961346774 0.6706454200535511, 2.144997054507586 0.8044632941516241" />
<path style="fill:none; stroke-width:0.01; stroke:%23192866; stroke-opacity:0.4009799871200332; stroke-linecap:round;" d="M -0.9727953651926882 0.3724392931736445 C -1.0156468112552162 1.3591523316099492, 1.882830964224088 1.047578428620306, 1.93617356412368 0.562574719235267" />
<path style="fill:none; stroke-width:0.01; stroke:%23192666; stroke-opacity:0.600236441081484; stroke-linecap:round;" d="M -1.124445471201874 0.7299242985950685 C -1.0327401963286142 1.779987034856524, 1.9789648341927961 1.0503582616087441, 1.967770121690788 0.527617440850429" />
<path style="fill:none; stroke-width:0.01; stroke:%23193366; stroke-opacity:0.3230971354042753; stroke-linecap:round;" d="M -1.003130384722025 0.589221701261293 C -0.9836711178585432 1.107072636647537, 2.0165267608991773 0.6031510199261794, 2.039039453310846 0.6073044019568603" />
<path style="fill:none; stroke-width:0.01; stroke:%23266619; stroke-opacity:0.5402267807269918; stroke-linecap:round;" d="M -1.1718887525803696 0.5379767603661549 C -1.2245547526753593 1.22971825176633, 2.026718477666743 1.0292729973924657, 2.0655898507379336 0.8980992553540939" />
<path style="fill:none; stroke-width:0.01; stroke:%23276619; stroke-opacity:0.4705709511498456; stroke-linecap:round;" d="M -1.2139561417438829 0.5722883603580318 C -1.2791296985274183 1.3107333915169501, 2.0229396035260048 1.1412670644440432, 2.068253002788547 0.9716423926687798" />
<path style="fill:none; stroke-width:0.01; stroke:%23192D66; stroke-opacity:0.3459322570628456; stroke-linecap:round;" d="M -1.127900752421156 0.6896964937600504 C -1.1788166563793165 1.756267221966303, 1.8605993914928782 1.440713220930164, 1.9206008826687913 0.9000819031563894" />
<path style="fill:none; stroke-width:0.01; stroke:%23193566; stroke-opacity:0.525768291689009; stroke-linecap:round;" d="M -0.7699322787118824 0.42556282777265997 C -0.8537356883854849 1.0138817841020311, 2.057612872799148 1.0297249511967166, 2.095564253559993 0.9404716295941877" />
</svg>)
OpenJSCAD
July 2018
What follows is concise documentation for the core of OpenJSCAD (the official docs are a bit confusing as cover both V1 and 2 and include…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDC2DB; fill-opacity:0.5;" d="M 0.7108154784117017 -0.3097845352377173 A 0.5220619817668685 0.5220619817668685 0 0 0 0.1887534966448332 0.2122774465291512 A 0.5220619817668685 0.5220619817668685 0 0 0 1.2328774601785701 0.212277446529151 A 0.5220619817668685 0.5220619817668685 0 0 0 0.1887534966448332 0.21227744652915134 A 0.5220619817668685 0.5220619817668685 0 0 0 1.2328774601785701 0.2122774465291509" />
<path style="fill:%23BDC3DB; fill-opacity:0.5;" d="M 0.26080239964903096 -0.28413873041982773 A 0.6555059870964215 0.6555059870964215 0 0 0 -0.39470358744739054 0.3713672566765938 A 0.6555059870964215 0.6555059870964215 0 0 0 0.9163083867454525 0.3713672566765936 A 0.6555059870964215 0.6555059870964215 0 0 0 -0.39470358744739054 0.371367256676594 A 0.6555059870964215 0.6555059870964215 0 0 0 0.9163083867454525 0.3713672566765934" />
<path style="fill:%23BDC6DB; fill-opacity:0.5;" d="M 0.6384100250668164 -0.2847807493923933 A 0.3109902993191862 0.3109902993191862 0 0 0 0.32741972574763023 0.026209549926792957 A 0.3109902993191862 0.3109902993191862 0 0 0 0.9494003243860026 0.026209549926792843 A 0.3109902993191862 0.3109902993191862 0 0 0 0.32741972574763023 0.026209549926793033 A 0.3109902993191862 0.3109902993191862 0 0 0 0.9494003243860026 0.026209549926792766" />
<path style="fill:%23BDC0DB; fill-opacity:0.5;" d="M 0.905468146032508 0.23083671545713336 A 0.6634411589876903 0.6634411589876903 0 0 0 0.24202698704481773 0.8942778744448238 A 0.6634411589876903 0.6634411589876903 0 0 0 1.5689093050201983 0.8942778744448235 A 0.6634411589876903 0.6634411589876903 0 0 0 0.24202698704481773 0.8942778744448239 A 0.6634411589876903 0.6634411589876903 0 0 0 1.5689093050201983 0.8942778744448233" />
<path style="fill:%23BDCCDB; fill-opacity:0.5;" d="M 0.8437841006628499 -0.2376308002260178 A 0.3864292811214084 0.3864292811214084 0 0 0 0.4573548195414415 0.14879848089539066 A 0.3864292811214084 0.3864292811214084 0 0 0 1.2302133817842584 0.14879848089539052 A 0.3864292811214084 0.3864292811214084 0 0 0 0.4573548195414415 0.14879848089539074 A 0.3864292811214084 0.3864292811214084 0 0 0 1.2302133817842584 0.1487984808953904" />
<path style="fill:%23C4BDDB; fill-opacity:0.5;" d="M 0.18457921233749852 -0.24578547287740438 A 0.46196433858571784 0.46196433858571784 0 0 0 -0.2773851262482193 0.21617886570831352 A 0.46196433858571784 0.46196433858571784 0 0 0 0.6465435509232164 0.21617886570831335 A 0.46196433858571784 0.46196433858571784 0 0 0 -0.2773851262482193 0.21617886570831363 A 0.46196433858571784 0.46196433858571784 0 0 0 0.6465435509232164 0.21617886570831324" />
<path style="fill:%23BDBEDB; fill-opacity:0.5;" d="M 0.6196196627530403 0.445515431643438 A 0.26956364687024814 0.26956364687024814 0 0 0 0.3500560158827921 0.7150790785136861 A 0.26956364687024814 0.26956364687024814 0 0 0 0.8891833096232884 0.715079078513686 A 0.26956364687024814 0.26956364687024814 0 0 0 0.3500560158827921 0.7150790785136862 A 0.26956364687024814 0.26956364687024814 0 0 0 0.8891833096232884 0.715079078513686" />
<path style="fill:none; stroke-width:0.05; stroke:%23142652; stroke-opacity:0.336973496864858; stroke-linecap:round;" d="M -0.4424889959978975 -0.1437423464357675 C -0.8558303845093457 1.0522617010923747, 1.4123694088503327 0.5517397809516307, 1.329086467022723 1.35851358181399" />
<path style="fill:none; stroke-width:0.02; stroke:%23142E52; stroke-opacity:0.2468551219470701; stroke-linecap:round;" d="M -0.20946706159951023 -0.41957205713478385 C -0.4852299217478512 0.32407344208196115, 1.62924476242108 0.2997646455078186, 1.0900184626268108 1.2486400036981393" />
<path style="fill:none; stroke-width:0.05; stroke:%232F5214; stroke-opacity:0.4241280261025571; stroke-linecap:round;" d="M -0.34294181722874095 -0.1742074002324876 C -0.8738270901664947 1.097952024857037, 1.2480778662148917 0.6468547289540597, 1.3007268389666533 1.2415336646970063" />
<path style="fill:none; stroke-width:0.02; stroke:%23142152; stroke-opacity:0.46002187363235875; stroke-linecap:round;" d="M -0.2544645337774309 -0.2803085630038492 C -1.0701563262648435 0.9700674072612735, 1.0952722306805351 0.8576854197444076, 1.1459675353147087 1.3751371673694222" />
<path style="fill:none; stroke-width:0.02; stroke:%23141E52; stroke-opacity:0.4999011391007729; stroke-linecap:round;" d="M 0.014400271946813092 -0.009642498061991578 C -0.7215969226977254 0.9349435550306694, 0.8517415339037698 0.9406397852751446, 0.9623917107950868 1.246040016720528" />
<path style="fill:none; stroke-width:0.05; stroke:%23142F52; stroke-opacity:0.4171680478273342; stroke-linecap:round;" d="M -0.398409398522684 -0.07262829456505687 C -0.6665693743833382 0.966526418887913, 1.0701910571481843 0.38249868231713774, 1.1178869010109067 0.9560945668695879" />
<path style="fill:none; stroke-width:0.02; stroke:%23142352; stroke-opacity:0.3244256377364191; stroke-linecap:round;" d="M -0.4055827060565237 0.007794951225944258 C -0.3469633294136716 0.5369235119480161, 1.4912807411301583 0.0658333497915761, 1.0822654573728279 1.1856638091002134" />
<path style="fill:none; stroke-width:0.02; stroke:%23142D52; stroke-opacity:0.4098359461385281; stroke-linecap:round;" d="M -0.14745115234076606 0.03493835771917869 C -0.4399482029646251 1.107954082111606, 1.1521842859288836 0.5284109248527316, 1.2777156829887557 0.9512656053729076" />
<path style="fill:none; stroke-width:0.05; stroke:%23225214; stroke-opacity:0.24073506027038385; stroke-linecap:round;" d="M -0.4154426734855812 -0.13774691955187035 C -0.817623932374167 1.0230828247968748, 1.1999012698036071 0.5157514747198286, 1.2097899320431713 1.160872354184543" />
<path style="fill:none; stroke-width:0.02; stroke:%231C5214; stroke-opacity:0.5300978449101883; stroke-linecap:round;" d="M -0.14683955363950912 -0.02234431832641509 C -0.6882440728341521 1.1598234596734116, 1.3993662727774172 0.8139844033823461, 1.3922906189271738 1.429826442932605" />
<path style="fill:none; stroke-width:0.02; stroke:%23265214; stroke-opacity:0.4874864751171632; stroke-linecap:round;" d="M -0.10999457732570361 -0.12251579761123954 C -0.616984164491928 1.0468566485983295, 1.4665008946275333 0.6729280937921363, 1.448994757634604 1.3093657649327757" />
<path style="fill:none; stroke-width:0.05; stroke:%23142152; stroke-opacity:0.37766918793134685; stroke-linecap:round;" d="M 0.011588982276420356 0.026560989800742618 C -0.3346671524260064 0.8878920304634772, 1.1436558418454115 0.5710101960529661, 1.1587992093449333 1.0113257674407596" />
<path style="fill:none; stroke-width:0.05; stroke:%233B5214; stroke-opacity:0.41475045631310625; stroke-linecap:round;" d="M -0.22699434564261184 -0.41521749088324617 C -1.0219305199992579 0.8289796771197354, 1.1925905611380163 0.7156161829471704, 1.2039403391822654 1.278707191142948" />
<path style="fill:none; stroke-width:0.05; stroke:%23175214; stroke-opacity:0.30660558398643806; stroke-linecap:round;" d="M -0.23309736360642241 -0.30682235912490236 C -0.5100250098212642 0.631476548802241, 1.5496639141863826 0.22206183808236968, 1.3397291414257555 1.0846357444850763" />
</svg>)
Creating a Watch
September 2017
A few months ago I created a watch. Two actually. In a few hours. That is amazing and something which has only just become possible. This…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23C5BDDB; fill-opacity:0.5;" d="M 0.002901992382484009 0.4223243260206978 A 0.26736644234089413 0.26736644234089413 0 0 0 -0.2644644499584101 0.6896907683615919 A 0.26736644234089413 0.26736644234089413 0 0 0 0.27026843472337814 0.6896907683615918 A 0.26736644234089413 0.26736644234089413 0 0 0 -0.2644644499584101 0.689690768361592 A 0.26736644234089413 0.26736644234089413 0 0 0 0.27026843472337814 0.6896907683615918" />
<path style="fill:%23C5BDDB; fill-opacity:0.5;" d="M 0.5156800128206793 0.43981388140631206 A 0.36426563109586707 0.36426563109586707 0 0 0 0.15141438172481225 0.8040795125021791 A 0.36426563109586707 0.36426563109586707 0 0 0 0.8799456439165464 0.804079512502179 A 0.36426563109586707 0.36426563109586707 0 0 0 0.15141438172481225 0.8040795125021792 A 0.36426563109586707 0.36426563109586707 0 0 0 0.8799456439165464 0.8040795125021789" />
<path style="fill:%23BDCBDB; fill-opacity:0.5;" d="M 0.28436665434857866 0.615179499892869 A 0.35999897419146065 0.35999897419146065 0 0 0 -0.07563231984288199 0.9751784740843297 A 0.35999897419146065 0.35999897419146065 0 0 0 0.6443656285400393 0.9751784740843296 A 0.35999897419146065 0.35999897419146065 0 0 0 -0.07563231984288199 0.9751784740843298 A 0.35999897419146065 0.35999897419146065 0 0 0 0.6443656285400393 0.9751784740843294" />
<path style="fill:%23C2BDDB; fill-opacity:0.5;" d="M 0.1668410255540823 -0.04231923539943966 A 0.23572042458703385 0.23572042458703385 0 0 0 -0.06887939903295154 0.19340118918759422 A 0.23572042458703385 0.23572042458703385 0 0 0 0.40256145014111616 0.19340118918759414 A 0.23572042458703385 0.23572042458703385 0 0 0 -0.06887939903295154 0.19340118918759427 A 0.23572042458703385 0.23572042458703385 0 0 0 0.40256145014111616 0.19340118918759408" />
<path style="fill:%23BDBDDB; fill-opacity:0.5;" d="M 0.19034997929182307 -0.3815266655266418 A 0.45649384155233036 0.45649384155233036 0 0 0 -0.2661438622605073 0.07496717602568864 A 0.45649384155233036 0.45649384155233036 0 0 0 0.6468438208441534 0.07496717602568848 A 0.45649384155233036 0.45649384155233036 0 0 0 -0.2661438622605073 0.07496717602568875 A 0.45649384155233036 0.45649384155233036 0 0 0 0.6468438208441534 0.07496717602568836" />
<path style="fill:%23BDC4DB; fill-opacity:0.5;" d="M 0.287415005231895 0.05985110080855466 A 0.40203244267989063 0.40203244267989063 0 0 0 -0.11461743744799563 0.46188354348844535 A 0.40203244267989063 0.40203244267989063 0 0 0 0.6894474479117856 0.4618835434884452 A 0.40203244267989063 0.40203244267989063 0 0 0 -0.11461743744799563 0.46188354348844546 A 0.40203244267989063 0.40203244267989063 0 0 0 0.6894474479117856 0.46188354348844507" />
<path style="fill:%23BDC6DB; fill-opacity:0.5;" d="M 0.7917517144478213 0.237203572939661 A 0.28733864171501244 0.28733864171501244 0 0 0 0.5044130727328089 0.5245422146546734 A 0.28733864171501244 0.28733864171501244 0 0 0 1.0790903561628338 0.5245422146546733 A 0.28733864171501244 0.28733864171501244 0 0 0 0.5044130727328089 0.5245422146546735 A 0.28733864171501244 0.28733864171501244 0 0 0 1.0790903561628338 0.5245422146546733" />
<path style="fill:%23BDC8DB; fill-opacity:0.5;" d="M 0.9800326077812359 -0.034395095297217515 A 0.42775119260215244 0.42775119260215244 0 0 0 0.5522814151790835 0.393356097304935 A 0.42775119260215244 0.42775119260215244 0 0 0 1.4077838003833882 0.3933560973049348 A 0.42775119260215244 0.42775119260215244 0 0 0 0.5522814151790835 0.3933560973049351 A 0.42775119260215244 0.42775119260215244 0 0 0 1.4077838003833882 0.3933560973049347" />
<path style="fill:%23BDD1DB; fill-opacity:0.5;" d="M 0.45392856827531236 0.19909812194070697 A 0.2786721349313618 0.2786721349313618 0 0 0 0.17525643334395058 0.4777702568720688 A 0.2786721349313618 0.2786721349313618 0 0 0 0.7326007032066741 0.4777702568720687 A 0.2786721349313618 0.2786721349313618 0 0 0 0.17525643334395058 0.47777025687206887 A 0.2786721349313618 0.2786721349313618 0 0 0 0.7326007032066741 0.47777025687206864" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1D73; stroke-opacity:0.45118206427817303; stroke-linecap:round;" d="M -0.32244573543132493 1.1152439154778127 C 0.49360397153678415 1.2941910059373383, 0.046820469967907785 -0.5644359754053471, 0.9052906578644726 -0.3499431379819822" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5A73; stroke-opacity:0.3433548117605115; stroke-linecap:round;" d="M -0.07802680473777732 1.2835925217527906 C 0.4850385840762393 1.225908383488286, -0.10412505652883114 -0.48484117588142117, 0.9461359448107387 -0.20800679198126018" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4973; stroke-opacity:0.3202928340425076; stroke-linecap:round;" d="M 0.01744957734346933 1.1571162161847248 C 0.5610205282339589 1.0904654194923256, -0.0252394535051505 -0.5960624300833399, 1.0238752932214787 -0.3177343633664701" />
<path style="fill:none; stroke-width:0.01; stroke:%2334730D; stroke-opacity:0.16080983386621034; stroke-linecap:round;" d="M 0.08120895674584258 0.8586072206213967 C 0.926969071975312 1.2394202310695925, 0.6660837678727175 -0.2550472420349749, 1.1269338163804572 -0.24046224397418534" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3173; stroke-opacity:0.39886371790298486; stroke-linecap:round;" d="M 0.1312577083273551 1.2395118804701064 C 0.14320728225651447 0.8021629290903585, -0.5233866136066543 -0.9293294602635247, 1.1260080885992232 -0.32665701123392377" />
<path style="fill:none; stroke-width:0.01; stroke:%2334730D; stroke-opacity:0.31344226233387673; stroke-linecap:round;" d="M 0.10739374625892786 1.0200968681674785 C 0.38549242636013326 0.8574771366149168, -0.1312572148351535 -0.4530479907837106, 0.8530234814941428 -0.17511968089453542" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2473; stroke-opacity:0.5169812729663226; stroke-linecap:round;" d="M -0.32657238577214176 1.1442742929159002 C 0.27136506807013777 1.2186828825659282, 0.07934146514950217 -0.7131016866144834, 1.1115726958756265 -0.15972087959606288" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4373; stroke-opacity:0.4897930751236715; stroke-linecap:round;" d="M 0.10345916088325433 1.145317203682068 C 0.48913959703245347 1.0836834724972728, 0.22751175010588529 -0.4296619145717493, 1.1639128235809275 0.03441602890475695" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5E73; stroke-opacity:0.4765391557596513; stroke-linecap:round;" d="M -0.31936637318802374 0.9494508438679029 C -0.1117947845531432 0.5485931488164814, 0.07069665764281088 -1.341608457167459, 1.3082502681382313 -0.028827903022198426" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5673; stroke-opacity:0.3144341991447426; stroke-linecap:round;" d="M -0.25539575298975714 0.9292442318368594 C 0.25745237393601195 0.9630363690480617, 0.004682090057515964 -0.6825192353868699, 0.9165765185435344 -0.2532222828925531" />
<path style="fill:none; stroke-width:0.01; stroke:%2346730D; stroke-opacity:0.40800721327301837; stroke-linecap:round;" d="M -0.21884946351924947 0.9338713896472344 C -0.2310920128745586 0.32388756883758196, -0.3478516627994248 -1.5654999105084724, 1.230016882250275 -0.2844077963592728" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5273; stroke-opacity:0.4219992831052212; stroke-linecap:round;" d="M -0.06342500962566386 1.3003185415586227 C 0.27289998072344623 1.0868973602035499, -0.3408880895056916 -0.6010676378787396, 0.9277725877691196 -0.19750953696887016" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2B73; stroke-opacity:0.33528301054121357; stroke-linecap:round;" d="M -0.17884455724257922 1.1676045363604544 C 0.3731987066093283 1.11964730468975, -0.1404786998137576 -0.6469660258420237, 0.9351363988612496 -0.2965790473885622" />
<path style="fill:none; stroke-width:0.01; stroke:%2332730D; stroke-opacity:0.34346517721751296; stroke-linecap:round;" d="M 0.13888680290649782 1.094130805999799 C 0.5921303315076496 1.1477004357224785, 0.4709664963642042 -0.3602320139686076, 1.2785861411032498 0.09933114461469764" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3473; stroke-opacity:0.3457233266853292; stroke-linecap:round;" d="M -0.14408528836859233 1.144108490499018 C 0.5148049288741889 1.20603863687072, 0.05993201639317988 -0.5406500177724283, 0.9888806041519302 -0.2609605146225177" />
<path style="fill:none; stroke-width:0.01; stroke:%2349730D; stroke-opacity:0.3684258903184827; stroke-linecap:round;" d="M 0.12982132493465412 1.2418653637800325 C 0.6510670717808451 1.1081308981985125, -0.13267819129831632 -0.4647277163730996, 0.927368642817695 -0.32403984873084046" />
<path style="fill:none; stroke-width:0.01; stroke:%233C730D; stroke-opacity:0.44192928243246177; stroke-linecap:round;" d="M -0.1375559892610462 1.086732128560565 C 0.3138122534555945 1.045909192614694, 0.07569934977235947 -0.6714472961713885, 1.100840280733615 -0.12668690167566546" />
<path style="fill:none; stroke-width:0.01; stroke:%2334730D; stroke-opacity:0.4292427316212293; stroke-linecap:round;" d="M -0.2040159205644402 1.2159801782537298 C 0.23680068186159278 1.174565669835839, -0.09365285155410166 -0.3879807632875468, 0.8550159559368682 0.020487652987406596" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2873; stroke-opacity:0.3877432666041236; stroke-linecap:round;" d="M -0.22306489111865144 0.9855242071543133 C 0.2728302498661035 1.0920882756685333, 0.23467403904853934 -0.5177702722911472, 1.047945657177084 -0.00322885958367633" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5173; stroke-opacity:0.180942842024995; stroke-linecap:round;" d="M -0.34846217620530806 1.0648014635582395 C 0.2503320093955705 1.3192268441162316, 0.401272129336203 -0.5243736781191782, 1.2229273508130136 0.08890148929268812" />
<path style="fill:none; stroke-width:0.01; stroke:%235B730D; stroke-opacity:0.5887910173891995; stroke-linecap:round;" d="M -0.20156039586751015 0.8817357047103312 C 0.3321071010546377 0.9589905393700952, 0.10849436595721748 -0.6386509214885746, 0.9492597835174954 -0.2487835598193082" />
<path style="fill:none; stroke-width:0.01; stroke:%2355730D; stroke-opacity:0.4458299441936314; stroke-linecap:round;" d="M 0.019700181795117372 1.0846925053988072 C 0.18718488385535187 0.844907894091021, -0.03165296846703075 -0.5623703207251504, 1.0203818633436603 0.07130306805576694" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2673; stroke-opacity:0.6663166698876031; stroke-linecap:round;" d="M 0.02874940309077026 1.1935756307119063 C 0.45151421896734056 1.1823426755764277, 0.1864615967725368 -0.26010581758638573, 1.0301904976419427 0.12211574713988863" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4D73; stroke-opacity:0.35944600506008784; stroke-linecap:round;" d="M -0.038684584437088526 1.2297952813874686 C 0.12125596133656952 0.9126334827483951, -0.5551064445657323 -0.7018883962027851, 0.8562520205698204 -0.27461007447534114" />
<path style="fill:none; stroke-width:0.01; stroke:%2339730D; stroke-opacity:0.5877760301255643; stroke-linecap:round;" d="M 0.02623653709616411 0.9774816046682426 C 0.33715853433113957 0.8722693089455289, 0.2583632470961133 -0.641429003797866, 1.1957846356828834 0.01329877740733379" />
<path style="fill:none; stroke-width:0.01; stroke:%234A730D; stroke-opacity:0.4573565390883014; stroke-linecap:round;" d="M 0.057574237984070326 0.8911324221064358 C 0.8869066243939983 1.3159709048491557, 0.7151550486448992 -0.258746355221561, 1.2208366172673295 -0.1840669500479444" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5E73; stroke-opacity:0.41813196648960893; stroke-linecap:round;" d="M -0.24553560636585922 0.9319894675386176 C 0.6813278665939138 1.4946581336981728, 0.631302513478637 -0.3982748817117018, 1.2458962061635246 -0.23477061292280502" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4373; stroke-opacity:0.17473855930165821; stroke-linecap:round;" d="M -0.26824141570779125 1.1297666484055309 C 0.5397616362517197 1.5560334626770018, 0.4085978227585925 -0.05698772426827503, 0.9499582339828796 0.06438835455966149" />
<path style="fill:none; stroke-width:0.01; stroke:%2339730D; stroke-opacity:0.3418098874385451; stroke-linecap:round;" d="M 0.060043320442328435 1.0378186332130417 C 0.8050622796858989 1.1797530555395925, 0.3435582951079602 -0.4502355124872784, 1.0952799685752974 -0.3031264596382722" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2073; stroke-opacity:0.3616569855983375; stroke-linecap:round;" d="M -0.29957066652576847 1.0710712737088288 C 0.03593092771734062 0.8293567596137467, -0.012413094656989244 -1.2113946550960923, 1.3116519865765608 -0.1823101699344987" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5273; stroke-opacity:0.27251489124246475; stroke-linecap:round;" d="M 0.0591892905166109 1.0016006079377795 C 0.29171156778871654 0.7224739704538429, -0.040133860254194076 -1.038689336478055, 1.2770058158695403 -0.31321515572403436" />
<path style="fill:none; stroke-width:0.01; stroke:%2342730D; stroke-opacity:0.49828173395384745; stroke-linecap:round;" d="M -0.01737062852520302 1.317312117616511 C 0.8595452608393631 1.6701844273315811, 0.548117097767293 0.052170763106455076, 1.0975587146219965 0.10409808944051888" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2B73; stroke-opacity:0.2585604074855702; stroke-linecap:round;" d="M 0.016187678018157875 1.0003674511999554 C 0.41147064332144884 0.9632458250886621, 0.17422053565989176 -0.5140437340141962, 1.0621742078238738 -0.06948498464563038" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2E73; stroke-opacity:0.14170036509084577; stroke-linecap:round;" d="M 0.1272748787524761 1.026397310245158 C 0.7819083121682264 1.1284325432462265, 0.31927269029757 -0.19225776081708545, 0.9132789525173323 -0.13138168157303123" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2E73; stroke-opacity:0.3376886623404246; stroke-linecap:round;" d="M -0.16168529852445682 1.013456828385169 C 0.3027131764241334 1.0503015108933147, 0.3339963906681741 -0.711266623317862, 1.2725686319842333 -0.009781459494080685" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2F73; stroke-opacity:0.4591867616768174; stroke-linecap:round;" d="M 0.06572545203035443 1.0276949545546201 C 0.6176545502636804 1.206716476311298, 0.4531946867887199 -0.1567761603485841, 1.0635825217728263 0.08406341349376331" />
<path style="fill:none; stroke-width:0.01; stroke:%2331730D; stroke-opacity:0.3807371966883795; stroke-linecap:round;" d="M 0.11959056253937203 0.9037429927768068 C 0.4232120359749135 0.8255898345659404, 0.11166184239706334 -0.3781505917119795, 0.9015279203457576 -0.06301887316584234" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5B73; stroke-opacity:0.5139363895086672; stroke-linecap:round;" d="M -0.17252523274042683 1.0332992123341094 C 0.3647519578777638 1.033026430656104, 0.12264214191445187 -0.8689442420903943, 1.2118524592553626 -0.29320295836821086" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5B73; stroke-opacity:0.44193357068172867; stroke-linecap:round;" d="M -0.3184350238348048 1.1410914596246233 C 0.3386287340470423 1.4076265044289398, 0.339522834436105 -0.4186903986967354, 1.1497667325571372 0.054897263089915854" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4473; stroke-opacity:0.3740041779991615; stroke-linecap:round;" d="M -0.13782896987934903 1.2492597652932504 C 0.6168176131596477 1.3698413478448517, 0.11395617099717797 -0.3181457029056488, 0.9194031302892687 -0.1594382860606033" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3B73; stroke-opacity:0.3475526866080957; stroke-linecap:round;" d="M 0.10567205658096071 1.224977437974417 C 0.6940256079402676 1.256425792371029, 0.32634091433740425 -0.5292116807819918, 1.3218272258584653 -0.13320510633902719" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2A73; stroke-opacity:0.4288112575332609; stroke-linecap:round;" d="M -0.2070853900091185 1.096353047818785 C -0.09415033713753047 0.6438947306654433, -0.2081768789695158 -1.2173703982918407, 1.2208077774865216 -0.10299303848566596" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4D73; stroke-opacity:0.453569563543273; stroke-linecap:round;" d="M 0.13165354365789603 0.8788972958270331 C 0.5393254678632883 0.8380628384905344, 0.31819614894793313 -0.7221604501530512, 1.253881610298668 -0.2273572194421654" />
<path style="fill:none; stroke-width:0.01; stroke:%2344730D; stroke-opacity:0.5088810023866976; stroke-linecap:round;" d="M -0.24191723853986122 0.9649037875698037 C 0.22474929240661567 0.9238761057852525, 0.11788759273912508 -0.9753037762885393, 1.2207091617748276 -0.25124902372988756" />
<path style="fill:none; stroke-width:0.01; stroke:%2345730D; stroke-opacity:0.41628299288408555; stroke-linecap:round;" d="M 0.014942817742747333 1.056272928331266 C 0.6265444893745977 1.312757366249366, 0.5721525401073533 -0.26201355795517267, 1.2480936327919645 0.07535447340824938" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3C73; stroke-opacity:0.3283413916547949; stroke-linecap:round;" d="M -0.31022861339780516 1.2901468111157004 C 0.06476104165411989 1.0607482367897636, -0.25621342844577655 -1.0233685609826955, 1.173590387182974 -0.20813507515560317" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5173; stroke-opacity:0.5286516406720814; stroke-linecap:round;" d="M -0.24596300422986586 1.237114836863231 C 0.09190807007925304 1.0836515918905758, 0.04467193686403094 -0.6973904313157737, 1.1572106458503235 0.13918694832558623" />
<path style="fill:none; stroke-width:0.01; stroke:%2332730D; stroke-opacity:0.4550701767696197; stroke-linecap:round;" d="M 0.07212132579289507 1.0494750637643417 C 0.9311447623879329 1.378888248796362, 0.6059149004317691 -0.21357352185342193, 1.1583026567906627 -0.15962338974595378" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4773; stroke-opacity:0.3075450391266954; stroke-linecap:round;" d="M -0.2436384321514478 0.9166066490413043 C 0.3306757404622387 1.091667833093862, 0.253626801730218 -0.5587439649372911, 1.0368150411204426 -0.12753632240758037" />
<path style="fill:none; stroke-width:0.01; stroke:%2353730D; stroke-opacity:0.37344764805795616; stroke-linecap:round;" d="M 0.024452067240187364 1.1225400152487977 C 0.6448692204537678 1.272170984295378, 0.36607374264611076 -0.2602629264951435, 1.0900285705900783 -0.013517784731181842" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4C73; stroke-opacity:0.2808316682367064; stroke-linecap:round;" d="M 0.03343342562697091 1.1758181470351938 C 0.6440936000736956 1.1751907715153451, 0.1721009614190096 -0.6722765187057252, 1.2371986935088164 -0.30298597090008794" />
</svg>)
A few big ideas
December 2016
Notes (August 2021) I wrote this a few years ago in preparation for a very open ended brief for a presentation, a better title than I had…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBC9BD; fill-opacity:0.5;" d="M 0.13935948510021268 -0.3865557331410481 A 0.9022624977806682 0.9022624977806682 0 0 0 -0.7629030126804556 0.5157067646396203 A 0.9022624977806682 0.9022624977806682 0 0 0 1.0416219828808808 0.51570676463962 A 0.9022624977806682 0.9022624977806682 0 0 0 -0.7629030126804556 0.5157067646396205 A 0.9022624977806682 0.9022624977806682 0 0 0 1.0416219828808808 0.5157067646396197" />
<path style="fill:%23DBBDD0; fill-opacity:0.5;" d="M 0.30914001369087496 -1.2698218275877968 A 1.3199002712435668 1.3199002712435668 0 0 0 -1.010760257552692 0.050078443655770126 A 1.3199002712435668 1.3199002712435668 0 0 0 1.6290402849344416 0.05007844365576964 A 1.3199002712435668 1.3199002712435668 0 0 0 -1.010760257552692 0.05007844365577045 A 1.3199002712435668 1.3199002712435668 0 0 0 1.6290402849344416 0.05007844365576932" />
<path style="fill:%23DBBDCD; fill-opacity:0.5;" d="M 0.24993472474046263 -0.08511878860286748 A 1.0048443637318758 1.0048443637318758 0 0 0 -0.7549096389914132 0.9197255751290084 A 1.0048443637318758 1.0048443637318758 0 0 0 1.2547790884723384 0.9197255751290081 A 1.0048443637318758 1.0048443637318758 0 0 0 -0.7549096389914132 0.9197255751290087 A 1.0048443637318758 1.0048443637318758 0 0 0 1.2547790884723384 0.9197255751290079" />
<path style="fill:none; stroke-width:0.02; stroke:%230A225C; stroke-opacity:0.3984890992805351; stroke-linecap:round;" d="M -1.148779341070748 0.40342925453882233 C -0.7207509406934034 1.3647482059089768, 1.6099156873145342 -0.7040125568623934, 1.9229075677611136 0.929278623277848" />
<path style="fill:none; stroke-width:0.03; stroke:%230A235C; stroke-opacity:0.47941169191885147; stroke-linecap:round;" d="M -0.8456816429429674 0.3140474897818781 C -0.4824063255156632 1.6312062438237849, 1.6773309287790694 -0.3742898132860031, 2.0697715659535834 0.7460336347058316" />
<path style="fill:none; stroke-width:0.03; stroke:%235C0A18; stroke-opacity:0.5344367243283564; stroke-linecap:round;" d="M -0.9752226642489188 0.389819709446303 C -0.5054767816699526 1.1046887139871657, 1.4714283393600105 -0.9439923110786483, 1.859641262183911 0.6521064201829498" />
<path style="fill:none; stroke-width:0.03; stroke:%230A225C; stroke-opacity:0.02062384463991218; stroke-linecap:round;" d="M -0.9647258955380141 0.5624457023594914 C -0.38554715717774346 0.9919989754382099, 1.5997352484421459 -1.4171307941653986, 2.156709786953706 0.6059400344233509" />
<path style="fill:none; stroke-width:0.02; stroke:%235C0A15; stroke-opacity:0.40344301192631093; stroke-linecap:round;" d="M -1.0331969266213934 0.6681841957237509 C -0.46565466266155964 0.767080246596823, 1.6045130893997563 -1.482382733076721, 2.016682049355641 0.8777467173960469" />
<path style="fill:none; stroke-width:0.02; stroke:%235C0A16; stroke-opacity:0.3401618609081259; stroke-linecap:round;" d="M -1.230279691098284 0.36541029605811065 C -0.7590092604729392 1.1035999363522886, 1.4779728717222382 -0.9813502974092327, 1.7954773709070806 0.8080170501269658" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A2B; stroke-opacity:0.5482725583949537; stroke-linecap:round;" d="M -0.9672556930033344 0.3038159811123899 C -0.5131258198222785 1.0767276798747845, 1.3752749653356955 -0.9230033105806189, 1.7740745085577807 0.5276245725066785" />
<path style="fill:none; stroke-width:0.01; stroke:%230A235C; stroke-opacity:0.31053838412658447; stroke-linecap:round;" d="M -1.1234024439984314 0.2625675091315372 C -0.7653313429220021 1.220003570580725, 1.6311254494068148 -0.6488400434317515, 1.8333746833252762 0.9647431498863974" />
<path style="fill:none; stroke-width:0.01; stroke:%230A165C; stroke-opacity:0.5359344942181071; stroke-linecap:round;" d="M -1.0486535474233398 0.5162502798176163 C -0.4710925064050313 1.4555270586193967, 1.5468751724694498 -0.9807521227287193, 2.1144054666171073 0.5682836935993705" />
<path style="fill:none; stroke-width:0.03; stroke:%235C0A2D; stroke-opacity:0.4530144638436248; stroke-linecap:round;" d="M -0.9659902512818821 0.5147456155125496 C -0.36941828273809485 1.3128698943295212, 1.6604320175010017 -1.1814867627257057, 2.249827265988661 0.5397470073217466" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A2F; stroke-opacity:0.3661658171825455; stroke-linecap:round;" d="M -0.9056158236051637 0.7244357248893958 C -0.43140840443175515 1.2046271032119096, 1.3683822066038156 -0.7822601339363826, 1.7702958961465525 0.8871121055043425" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A1A; stroke-opacity:0.35880757121636214; stroke-linecap:round;" d="M -0.9146722561507483 0.3674159519072719 C -0.5602724858838818 1.362868461750251, 1.6299824906923717 -0.49372624962639255, 1.9036394302937065 0.916305761230945" />
<path style="fill:none; stroke-width:0.03; stroke:%235C0A18; stroke-opacity:0.4099572583821544; stroke-linecap:round;" d="M -1.05424553222733 0.44963615632573317 C -0.5185922875851106 0.7763441854000406, 1.4112463912848745 -1.4295214697938192, 1.873879856373407 0.5769245055893872" />
<path style="fill:none; stroke-width:0.02; stroke:%235C0A43; stroke-opacity:0.3852811465323204; stroke-linecap:round;" d="M -1.1344187841294633 0.340961473728442 C -0.6042758041174162 1.2005332576749306, 1.4798725315202446 -1.0985890178923763, 1.962959720079481 0.5303920008759632" />
<path style="fill:none; stroke-width:0.01; stroke:%230A0D5C; stroke-opacity:0.3348770785792287; stroke-linecap:round;" d="M -0.8847753996927963 0.5262704900020623 C -0.40554027216157285 1.4681076709231156, 1.663769755055365 -0.6921356975359022, 2.0949303491275195 0.7909383009630591" />
<path style="fill:none; stroke-width:0.03; stroke:%230A2F5C; stroke-opacity:0.38491157816299654; stroke-linecap:round;" d="M -0.8426271809007885 0.4688443515155315 C -0.3861589061561622 1.3324988491639065, 1.6638873999676265 -0.7333109889333005, 2.0513294854249344 0.7775107699350051" />
<path style="fill:none; stroke-width:0.02; stroke:%230A135C; stroke-opacity:0.4501574043386427; stroke-linecap:round;" d="M -1.0612635517335676 0.40907634060519893 C -0.5250195857331298 1.1179100686727856, 1.733140831409509 -1.184959591392827, 2.147821758658145 0.7319828463133529" />
<path style="fill:none; stroke-width:0.03; stroke:%235C0A16; stroke-opacity:0.5571589587938705; stroke-linecap:round;" d="M -0.9387610960212505 0.4323806241932207 C -0.4931063597886295 1.2493461675226076, 1.7887467936140378 -0.7933937384331908, 2.082100947602507 0.9363971422472379" />
<path style="fill:none; stroke-width:0.03; stroke:%230A135C; stroke-opacity:0.4436226193525913; stroke-linecap:round;" d="M -1.0426547227709169 0.3001477049240352 C -0.6171005150642808 1.005153982848833, 1.6127478634356884 -0.901362094411205, 1.8393726399758794 0.8487328162136989" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A33; stroke-opacity:0.5469056162032089; stroke-linecap:round;" d="M -0.9491341871242597 0.3134356065741691 C -0.4492302226855075 1.613536709558566, 1.686405477299897 -0.6991081276735017, 2.1909856613225833 0.5345991741400293" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A20; stroke-opacity:0.4775127300169983; stroke-linecap:round;" d="M -1.177152769590343 0.39985138184835495 C -0.7496551430625593 1.7381789328089776, 1.814473501448977 -0.5493771445804727, 2.211253097043206 0.9711430724664856" />
<path style="fill:none; stroke-width:0.03; stroke:%230A345C; stroke-opacity:0.5127411870938877; stroke-linecap:round;" d="M -0.9036991333275892 0.722177986120146 C -0.29670846361950476 1.891922313359848, 1.3414277603907867 -0.43521060303231074, 1.9367219841492254 0.545979874999931" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A17; stroke-opacity:0.4279808484114984; stroke-linecap:round;" d="M -1.1990065825715215 0.2891356614052658 C -0.8020083210525679 1.629578377075411, 1.8545066759586204 -0.6049489684846054, 2.2057641029391517 0.9656864477384316" />
<path style="fill:none; stroke-width:0.03; stroke:%235C0A11; stroke-opacity:0.2898822593005378; stroke-linecap:round;" d="M -1.1317983248028025 0.7311763499994463 C -0.5489443946242073 1.797088872147044, 1.427519361324693 -0.6434124301729471, 2.0086103423407793 0.748176012780695" />
<path style="fill:none; stroke-width:0.03; stroke:%230A2B5C; stroke-opacity:0.40196619795935185; stroke-linecap:round;" d="M -1.0573514876951955 0.7426729147419122 C -0.4312276808668327 1.8119328568347313, 1.509602390549502 -0.7348209569689722, 2.1437125572050637 0.6654373356061494" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A22; stroke-opacity:0.4927258848745985; stroke-linecap:round;" d="M -1.171806571058126 0.5303061907784896 C -0.5797845963321886 1.261327951009696, 1.4709402091477046 -1.2194002469805723, 2.046423252201159 0.5801200924436042" />
<path style="fill:none; stroke-width:0.01; stroke:%230A365C; stroke-opacity:0.3124716888655367; stroke-linecap:round;" d="M -1.041403975935592 0.7458379421695769 C -0.46938055157120495 0.9577856063206083, 1.658168252703502 -1.333061314733622, 2.0766468821250506 0.9743163368192094" />
<path style="fill:none; stroke-width:0.02; stroke:%235C0A18; stroke-opacity:0.3001662936814136; stroke-linecap:round;" d="M -0.9278571957816374 0.6521038652400933 C -0.34187927642555105 1.6965680007424253, 1.5971867269096638 -0.7373563700927833, 2.184039259775634 0.6440256150546023" />
<path style="fill:none; stroke-width:0.02; stroke:%230A1D5C; stroke-opacity:0.3601337223271708; stroke-linecap:round;" d="M -1.1146365180897813 0.4427457987268556 C -0.7170538775149282 1.6332834985986349, 1.555670296539311 -0.4427164173295526, 1.9264784909248354 0.9188448684701105" />
<path style="fill:none; stroke-width:0.01; stroke:%230A255C; stroke-opacity:0.34851154438532767; stroke-linecap:round;" d="M -0.8848807992948253 0.31988509052143577 C -0.5062791673408809 1.1676367204800653, 1.4570829591773322 -0.6455269839920104, 1.75769262689233 0.7188326387912533" />
<path style="fill:none; stroke-width:0.02; stroke:%235C0A3C; stroke-opacity:0.36517756713477667; stroke-linecap:round;" d="M -0.9055380928894885 0.676619258049918 C -0.4142360951575802 1.2793079768924212, 1.4444855833859722 -0.8016369025029595, 1.8806269718113193 0.8264928768437505" />
<path style="fill:none; stroke-width:0.01; stroke:%230A2B5C; stroke-opacity:0.5445505353821225; stroke-linecap:round;" d="M -1.2450607467375212 0.44070343639159565 C -0.7718475757723682 1.5433142344571993, 1.305026124149502 -0.6411535110563442, 1.7582807880411258 0.6961311601993705" />
<path style="fill:none; stroke-width:0.03; stroke:%230A345C; stroke-opacity:0.2903423766072835; stroke-linecap:round;" d="M -0.8798833915987965 0.41072130889463304 C -0.41914704003743863 1.11919886376958, 1.5765917647710217 -0.8994434833130975, 1.943308659228491 0.7064863281233733" />
<path style="fill:none; stroke-width:0.01; stroke:%230A255C; stroke-opacity:0.5049835956542745; stroke-linecap:round;" d="M -1.1563452024640146 0.4277935682769062 C -0.6713925488674107 1.2946628642106206, 1.7031062719228607 -0.9084006116283856, 2.047567923740223 0.9038965069849363" />
<path style="fill:none; stroke-width:0.02; stroke:%230A1D5C; stroke-opacity:0.48589261646476334; stroke-linecap:round;" d="M -0.9465134185798258 0.3534568588940796 C -0.5164158878858085 1.2092598597155677, 1.5538318303453729 -0.7779068935660733, 1.898690042925833 0.7270536774371773" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A2A; stroke-opacity:0.3737880203777364; stroke-linecap:round;" d="M -0.7718189207498991 0.7242080581439512 C -0.25879177741405013 1.5414205082317656, 1.3154435370806286 -0.5429290889022522, 1.8391597424220532 0.6499080653060871" />
<path style="fill:none; stroke-width:0.01; stroke:%230A2A5C; stroke-opacity:0.3839436607772784; stroke-linecap:round;" d="M -1.140337181530783 0.5497430423272931 C -0.6383690218396535 1.4199820958897453, 1.635316626292993 -0.8275249532121205, 2.0352423585554438 0.9193765728310865" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A33; stroke-opacity:0.4764084098070108; stroke-linecap:round;" d="M -1.1240668703844146 0.6756340629929405 C -0.5627145898858468 1.2293683620284566, 1.1531078704108721 -1.0860823381139846, 1.7558009098099179 0.5673740581556229" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A20; stroke-opacity:0.4117561588563668; stroke-linecap:round;" d="M -0.9684301794996942 0.6744453205536622 C -0.47860976554704654 1.8452857632202941, 1.4762218633112267 -0.34826475915377164, 1.9657071875990235 0.8289396647453842" />
<path style="fill:none; stroke-width:0.03; stroke:%235C0A26; stroke-opacity:0.4655621873745429; stroke-linecap:round;" d="M -1.0185461176339767 0.386418055542228 C -0.4726980595641549 0.9179126739043548, 1.7828910548931796 -1.3506041290178201, 2.1621189312296596 0.7287929747988098" />
<path style="fill:none; stroke-width:0.02; stroke:%230A0A5C; stroke-opacity:0.47072693517765374; stroke-linecap:round;" d="M -0.9144257557367366 0.6246890531542872 C -0.47249041840457706 1.2201848382684817, 1.489076250815281 -0.6850943642885008, 1.7989225632613508 0.9646501351632601" />
<path style="fill:none; stroke-width:0.02; stroke:%235C0A33; stroke-opacity:0.2563741661277261; stroke-linecap:round;" d="M -1.0333492893727865 0.3459309648386724 C -0.48317533856602257 0.8592392364615044, 1.5702583166061927 -1.4364294118723442, 2.042132637725442 0.5135472982583336" />
<path style="fill:none; stroke-width:0.03; stroke:%230A0B5C; stroke-opacity:0.406671120263544; stroke-linecap:round;" d="M -1.087360718216242 0.6929268050870853 C -0.5600429812351889 1.6526071060189125, 1.4822253043392797 -0.6440648558370857, 1.9819243877362531 0.8512012155801852" />
<path style="fill:none; stroke-width:0.02; stroke:%230A3F5C; stroke-opacity:0.5264666974403218; stroke-linecap:round;" d="M -1.1168220300282692 0.3840184664915769 C -0.6563676312710985 1.3137992862636374, 1.7837111575279017 -0.8496124327858554, 2.097139067188047 0.9360952974196393" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A30; stroke-opacity:0.4074397688632428; stroke-linecap:round;" d="M -0.9214703315288636 0.2622125294945972 C -0.544581636968386 1.37531652351142, 1.4787706898278508 -0.5492223401068395, 1.845535085748756 0.6383581086060778" />
<path style="fill:none; stroke-width:0.03; stroke:%230A2A5C; stroke-opacity:0.48891667451952786; stroke-linecap:round;" d="M -1.010553662030489 0.3219057418580696 C -0.5476383802015323 1.6538578001133377, 1.7292854772442696 -0.630138428049631, 2.1955304757750618 0.6712558873856995" />
<path style="fill:none; stroke-width:0.01; stroke:%235C0A21; stroke-opacity:0.4058404642957112; stroke-linecap:round;" d="M -0.9038811946290083 0.3363775593007704 C -0.4763796710738266 1.23201897873484, 1.8629825394781354 -0.801202863205833, 2.1455030965069426 0.8912307431940226" />
<path style="fill:none; stroke-width:0.03; stroke:%235C0B0A; stroke-opacity:0.40247875237175795; stroke-linecap:round;" d="M -1.0195037274715102 0.7059823315527539 C -0.45276867684591593 1.4880179983266735, 1.7274928998574266 -0.9340850427886016, 2.2339470500056766 0.8935502476842148" />
</svg>)
Elixir versus Javascript
August 2016
Notes (August 2021) I wrote this quite a few years ago. I think it was before I officially and briefly became a 'professional Elixir…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBC5BD; fill-opacity:0.5;" d="M 0.8562872407545803 -0.05847074230202476 A 0.33442261186870004 0.33442261186870004 0 0 0 0.5218646288858803 0.27595186956667533 A 0.33442261186870004 0.33442261186870004 0 0 0 1.1907098526232804 0.2759518695666752 A 0.33442261186870004 0.33442261186870004 0 0 0 0.5218646288858803 0.2759518695666754 A 0.33442261186870004 0.33442261186870004 0 0 0 1.1907098526232804 0.2759518695666751" />
<path style="fill:%23DBBDCA; fill-opacity:0.5;" d="M 0.1472884138246051 -0.3468997851019222 A 0.3786674251470866 0.3786674251470866 0 0 0 -0.2313790113224815 0.03176764004516446 A 0.3786674251470866 0.3786674251470866 0 0 0 0.5259558389716917 0.03176764004516432 A 0.3786674251470866 0.3786674251470866 0 0 0 -0.2313790113224815 0.03176764004516455 A 0.3786674251470866 0.3786674251470866 0 0 0 0.5259558389716917 0.031767640045164226" />
<path style="fill:%23DBBDBE; fill-opacity:0.5;" d="M 0.001868745344992484 -0.29136511100894025 A 0.4592513040661105 0.4592513040661105 0 0 0 -0.457382558721118 0.16788619305717029 A 0.4592513040661105 0.4592513040661105 0 0 0 0.46112004941110296 0.16788619305717012 A 0.4592513040661105 0.4592513040661105 0 0 0 -0.457382558721118 0.1678861930571704 A 0.4592513040661105 0.4592513040661105 0 0 0 0.46112004941110296 0.16788619305717" />
<path style="fill:%23DBC1BD; fill-opacity:0.5;" d="M 0.19628670937242643 -0.12664002489067194 A 0.3185348367108012 0.3185348367108012 0 0 0 -0.12224812733837476 0.19189481182012927 A 0.3185348367108012 0.3185348367108012 0 0 0 0.5148215460832276 0.19189481182012916 A 0.3185348367108012 0.3185348367108012 0 0 0 -0.12224812733837476 0.19189481182012935 A 0.3185348367108012 0.3185348367108012 0 0 0 0.5148215460832276 0.19189481182012907" />
<path style="fill:%23DBBDC9; fill-opacity:0.5;" d="M 0.6488733098563858 0.321584692324294 A 0.476725314148174 0.476725314148174 0 0 0 0.17214799570821182 0.7983100064724681 A 0.476725314148174 0.476725314148174 0 0 0 1.1255986240045597 0.7983100064724679 A 0.476725314148174 0.476725314148174 0 0 0 0.17214799570821182 0.7983100064724682 A 0.476725314148174 0.476725314148174 0 0 0 1.1255986240045597 0.7983100064724677" />
<path style="fill:%23DBBDCD; fill-opacity:0.5;" d="M 0.013647292390745247 -0.3459686548896408 A 0.8115856422412774 0.8115856422412774 0 0 0 -0.7979383498505321 0.4656169873516367 A 0.8115856422412774 0.8115856422412774 0 0 0 0.8252329346320226 0.46561698735163637 A 0.8115856422412774 0.8115856422412774 0 0 0 -0.7979383498505321 0.46561698735163687 A 0.8115856422412774 0.8115856422412774 0 0 0 0.8252329346320226 0.4656169873516362" />
<path style="fill:%23DBBDC3; fill-opacity:0.5;" d="M 0.5844733322728334 0.4133838785730911 A 0.48195724139414065 0.48195724139414065 0 0 0 0.10251609087869273 0.8953411199672319 A 0.48195724139414065 0.48195724139414065 0 0 0 1.066430573666974 0.8953411199672316 A 0.48195724139414065 0.48195724139414065 0 0 0 0.10251609087869273 0.895341119967232 A 0.48195724139414065 0.48195724139414065 0 0 0 1.066430573666974 0.8953411199672315" />
<path style="fill:%23DBC7BD; fill-opacity:0.5;" d="M 0.8661566701642663 0.5121244764849948 A 0.3757103833820748 0.3757103833820748 0 0 0 0.49044628678219154 0.8878348598670697 A 0.3757103833820748 0.3757103833820748 0 0 0 1.2418670535463412 0.8878348598670696 A 0.3757103833820748 0.3757103833820748 0 0 0 0.49044628678219154 0.8878348598670698 A 0.3757103833820748 0.3757103833820748 0 0 0 1.2418670535463412 0.8878348598670694" />
<path style="fill:%23DBBDC4; fill-opacity:0.5;" d="M 0.5039407911817173 0.27122328894697434 A 0.40234735877284744 0.40234735877284744 0 0 0 0.10159343240886987 0.6735706477198218 A 0.40234735877284744 0.40234735877284744 0 0 0 0.9062881499545647 0.6735706477198217 A 0.40234735877284744 0.40234735877284744 0 0 0 0.10159343240886987 0.6735706477198219 A 0.40234735877284744 0.40234735877284744 0 0 0 0.9062881499545647 0.6735706477198216" />
<path style="fill:none; stroke-width:0.05; stroke:%23045295; stroke-opacity:0.4892420233303387; stroke-linecap:round;" d="M -0.9743382225796782 0.495036950042497 C -0.8227060473259346 0.062085770870819845, 2.010816160312028 -0.92239355719791, 2.017989249767155 0.7048557928821797" />
<path style="fill:none; stroke-width:0.02; stroke:%23950B04; stroke-opacity:0.4384331650118345; stroke-linecap:round;" d="M -0.9629270695685299 0.4347246972423322 C -0.8518930221768928 0.5820835088559255, 2.0388838323643568 -0.3802188139131728, 2.0733110221261764 0.6874594073640139" />
<path style="fill:none; stroke-width:0.02; stroke:%2395041A; stroke-opacity:0.27869040524057503; stroke-linecap:round;" d="M -0.9370554308795019 0.4076115931861345 C -0.8980080389230922 1.097552355662655, 2.025108874068256 0.24954097569934208, 2.083944755705643 0.7781431845732516" />
<path style="fill:none; stroke-width:0.02; stroke:%23950444; stroke-opacity:0.3395968189474412; stroke-linecap:round;" d="M -1.0467799415727244 0.5991304398987046 C -0.9371755093103579 0.8411407706409476, 1.9868632163616993 -0.19159238306220028, 2.047749135179594 0.8002026386780561" />
<path style="fill:none; stroke-width:0.02; stroke:%23046095; stroke-opacity:0.3479150708144062; stroke-linecap:round;" d="M -0.9886612763312761 0.5860039861287697 C -0.8655237765950613 0.5978366406123334, 1.9718392330747507 -0.5449351339878321, 2.069479631679827 0.6518094890473871" />
<path style="fill:none; stroke-width:0.02; stroke:%23950433; stroke-opacity:0.3951110812688682; stroke-linecap:round;" d="M -1.0889193759925218 0.4764275140069616 C -1.0024351249270254 0.9312974674376375, 1.8491809891120097 -0.03560828137401256, 1.9131279692818626 0.709521756027494" />
<path style="fill:none; stroke-width:0.02; stroke:%23043295; stroke-opacity:0.4473519852761899; stroke-linecap:round;" d="M -0.9843405660977279 0.5273942352783156 C -0.8549889097811352 0.44189804691907275, 1.995790895804937 -0.47179749148281847, 1.9960016070812885 0.8090776881176065" />
<path style="fill:none; stroke-width:0.05; stroke:%23950446; stroke-opacity:0.2834538996737365; stroke-linecap:round;" d="M -0.917281480198203 0.5009649861083543 C -0.8256819399978049 0.7731882457359691, 2.064656727315047 -0.09386534399046337, 2.0810767885067043 0.8410932438439281" />
<path style="fill:none; stroke-width:0.02; stroke:%23950444; stroke-opacity:0.5076921786776554; stroke-linecap:round;" d="M -1.0163479597947989 0.5741822988101387 C -0.8887472923056373 0.48123830717016536, 1.9717493229848335 -0.5902144431491019, 2.0349991014934457 0.714656473741173" />
<path style="fill:none; stroke-width:0.02; stroke:%2395043C; stroke-opacity:0.35800460241089893; stroke-linecap:round;" d="M -0.9706224585812514 0.42673594938506926 C -0.8854691946098051 0.8065163974378324, 1.8955663019682922 -0.10536473057968032, 1.9448870842415285 0.6826455634506262" />
<path style="fill:none; stroke-width:0.02; stroke:%2395041A; stroke-opacity:0.3352291025147814; stroke-linecap:round;" d="M -1.0565343392639093 0.4750035155942422 C -0.9593536346779741 0.8167641282277827, 1.8551998512406163 -0.16683683771936614, 1.918008826588573 0.678166356165399" />
<path style="fill:none; stroke-width:0.05; stroke:%23043C95; stroke-opacity:0.43620798242882886; stroke-linecap:round;" d="M -1.0868096267258498 0.5826594034722096 C -0.9612513810430716 0.5897837241180015, 1.9955057821775841 -0.3976086524983366, 2.019958835441391 0.8382887252248474" />
</svg>)
Better British Time
November 2013
Notes (August 2021) I wrote this in 2013, well before Brexit, but perhaps this could be updated for our new political climate. The…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBC6BD; fill-opacity:0.5;" d="M 0.575385446238133 -0.3473040118483822 A 0.4330149726087522 0.4330149726087522 0 0 0 0.14237047362938082 0.08571096076037005 A 0.4330149726087522 0.4330149726087522 0 0 0 1.0084004188468851 0.08571096076036988 A 0.4330149726087522 0.4330149726087522 0 0 0 0.14237047362938082 0.08571096076037014 A 0.4330149726087522 0.4330149726087522 0 0 0 1.0084004188468851 0.08571096076036978" />
<path style="fill:%23DBC8BD; fill-opacity:0.5;" d="M 0.2463126375910274 -0.32852307241452716 A 0.3472110557440904 0.3472110557440904 0 0 0 -0.100898418153063 0.01868798332956327 A 0.3472110557440904 0.3472110557440904 0 0 0 0.5935236933351178 0.018687983329563142 A 0.3472110557440904 0.3472110557440904 0 0 0 -0.100898418153063 0.018687983329563358 A 0.3472110557440904 0.3472110557440904 0 0 0 0.5935236933351178 0.01868798332956306" />
<path style="fill:%23DBD3BD; fill-opacity:0.5;" d="M 0.2055469771184486 0.6097538083570255 A 0.32960169531694833 0.32960169531694833 0 0 0 -0.12405471819849972 0.9393555036739739 A 0.32960169531694833 0.32960169531694833 0 0 0 0.5351486724353969 0.9393555036739738 A 0.32960169531694833 0.32960169531694833 0 0 0 -0.12405471819849972 0.939355503673974 A 0.32960169531694833 0.32960169531694833 0 0 0 0.5351486724353969 0.9393555036739738" />
<path style="fill:%23DBDBBD; fill-opacity:0.5;" d="M 0.5672570032376183 -0.007426301726613016 A 0.35202149090587637 0.35202149090587637 0 0 0 0.21523551233174193 0.3445951891792634 A 0.35202149090587637 0.35202149090587637 0 0 0 0.9192784941434946 0.34459518917926324 A 0.35202149090587637 0.35202149090587637 0 0 0 0.21523551233174193 0.34459518917926346 A 0.35202149090587637 0.35202149090587637 0 0 0 0.9192784941434946 0.3445951891792632" />
<path style="fill:%23DBC6BD; fill-opacity:0.5;" d="M 0.5138029450739571 0.10121797976850244 A 0.595973621984805 0.595973621984805 0 0 0 -0.0821706769108479 0.6971916017533075 A 0.595973621984805 0.595973621984805 0 0 0 1.109776567058762 0.6971916017533073 A 0.595973621984805 0.595973621984805 0 0 0 -0.0821706769108479 0.6971916017533076 A 0.595973621984805 0.595973621984805 0 0 0 1.109776567058762 0.6971916017533071" />
<path style="fill:%23DBC7BD; fill-opacity:0.5;" d="M 0.48391161124835513 0.5231911622551066 A 0.07908694307300745 0.07908694307300745 0 0 0 0.4048246681753477 0.6022781053281141 A 0.07908694307300745 0.07908694307300745 0 0 0 0.5629985543213626 0.6022781053281141 A 0.07908694307300745 0.07908694307300745 0 0 0 0.4048246681753477 0.6022781053281141 A 0.07908694307300745 0.07908694307300745 0 0 0 0.5629985543213626 0.6022781053281141" />
<path style="fill:%23DBC5BD; fill-opacity:0.5;" d="M 0.3362202386333837 0.290422457042362 A 0.42099808763751256 0.42099808763751256 0 0 0 -0.08477784900412888 0.7114205446798746 A 0.42099808763751256 0.42099808763751256 0 0 0 0.7572183262708962 0.7114205446798745 A 0.42099808763751256 0.42099808763751256 0 0 0 -0.08477784900412888 0.7114205446798747 A 0.42099808763751256 0.42099808763751256 0 0 0 0.7572183262708962 0.7114205446798744" />
<path style="fill:%23DBC7BD; fill-opacity:0.5;" d="M 0.5006033118424916 0.2977966431768146 A 0.331680748703402 0.331680748703402 0 0 0 0.16892256313908965 0.6294773918802166 A 0.331680748703402 0.331680748703402 0 0 0 0.8322840605458937 0.6294773918802165 A 0.331680748703402 0.331680748703402 0 0 0 0.16892256313908965 0.6294773918802167 A 0.331680748703402 0.331680748703402 0 0 0 0.8322840605458937 0.6294773918802165" />
<path style="fill:%23D8DBBD; fill-opacity:0.5;" d="M 0.37609137114426905 0.18213006410571064 A 0.1298043545158043 0.1298043545158043 0 0 0 0.24628701662846475 0.31193441862151494 A 0.1298043545158043 0.1298043545158043 0 0 0 0.5058957256600733 0.3119344186215149 A 0.1298043545158043 0.1298043545158043 0 0 0 0.24628701662846475 0.311934418621515 A 0.1298043545158043 0.1298043545158043 0 0 0 0.5058957256600733 0.3119344186215149" />
<path style="fill:%23DBD8BD; fill-opacity:0.5;" d="M 0.17382945847368914 -0.30467309818054433 A 0.3642240133812572 0.3642240133812572 0 0 0 -0.19039455490756807 0.059550915200712914 A 0.3642240133812572 0.3642240133812572 0 0 0 0.5380534718549463 0.05955091520071278 A 0.3642240133812572 0.3642240133812572 0 0 0 -0.19039455490756807 0.059550915200713005 A 0.3642240133812572 0.3642240133812572 0 0 0 0.5380534718549463 0.05955091520071269" />
<path style="fill:none; stroke-width:0.02; stroke:%23950F04; stroke-opacity:0.441051319896683; stroke-linecap:round;" d="M -0.03994915854546597 1.0433607838763124 C -0.3072612533793538 0.7394751756037765, 0.6143028403081265 -0.6597416648950263, 1.162353398142605 -0.12349683712584147" />
<path style="fill:none; stroke-width:0.05; stroke:%23440495; stroke-opacity:0.4012868805037026; stroke-linecap:round;" d="M -0.01902618799616089 1.0212035882839894 C -0.2961110190272612 0.713823280933657, 0.5284193799014703 -0.5558274914594584, 1.0605232898634642 -0.040133487036108195" />
<path style="fill:none; stroke-width:0.02; stroke:%23952F04; stroke-opacity:0.31397534618534584; stroke-linecap:round;" d="M -0.0875463114276241 1.166164675608408 C -0.30331505936064485 0.9381874950327105, 0.5535179675583024 -0.5202329505668479, 1.0643573984924886 -0.07249220796919512" />
<path style="fill:none; stroke-width:0.02; stroke:%23240495; stroke-opacity:0.3826313410469519; stroke-linecap:round;" d="M -0.013490141372957606 1.0339603650626876 C -0.07938326456543843 0.9392636133772254, 0.7735524984069113 -0.3451718325504564, 1.0969895022190956 -0.035669847524977635" />
<path style="fill:none; stroke-width:0.05; stroke:%23953304; stroke-opacity:0.5680208263328788; stroke-linecap:round;" d="M -0.038528085877256674 1.1311442654605455 C 0.05163275346888058 1.1843888467802084, 0.9272152328507566 -0.35564867103086295, 1.149328776025055 -0.18314501399728783" />
<path style="fill:none; stroke-width:0.02; stroke:%23952204; stroke-opacity:0.3880109424774881; stroke-linecap:round;" d="M -0.16142979067088087 1.0348993588890099 C -0.49764292861313325 0.6608673372402711, 0.4059793932069317 -0.7124004687513421, 1.017744717951602 -0.11050242462602769" />
<path style="fill:none; stroke-width:0.05; stroke:%23952504; stroke-opacity:0.3437104976805475; stroke-linecap:round;" d="M -0.05316299561816356 1.0276888674085365 C -0.2953188314113199 0.7649594424715214, 0.5912154867379049 -0.6738667441427784, 1.1235027474900436 -0.18541525901218003" />
<path style="fill:none; stroke-width:0.02; stroke:%23953D04; stroke-opacity:0.22119685134970257; stroke-linecap:round;" d="M -0.01656227521334311 1.086385539208674 C 0.2374432471619382 1.3032626183793594, 1.0318029124828634 -0.012306146979753962, 1.043458543065967 -0.026306834761658432" />
<path style="fill:none; stroke-width:0.05; stroke:%23952304; stroke-opacity:0.29518345505391796; stroke-linecap:round;" d="M -0.13221641565936074 1.1679346840362397 C -0.4791769670596916 0.7844414879683368, 0.44276252737437727 -0.6261865803571058, 1.072919994401611 -0.009983059989322252" />
<path style="fill:none; stroke-width:0.02; stroke:%23954504; stroke-opacity:0.3778918513676108; stroke-linecap:round;" d="M -0.09712581842278359 1.1924269394470632 C -0.5129399059740258 0.801868713465449, 0.3433386466019815 -0.769109418961353, 1.0785737283719752 -0.15624493607769302" />
<path style="fill:none; stroke-width:0.05; stroke:%23952904; stroke-opacity:0.4552430949744833; stroke-linecap:round;" d="M -0.1188058341662037 1.1484832744624294 C -0.1659217542677306 1.0777047258416599, 0.6726434185684366 -0.33885424969789035, 1.0062108761912112 -0.05325225455050251" />
<path style="fill:none; stroke-width:0.02; stroke:%23953604; stroke-opacity:0.36092000927527146; stroke-linecap:round;" d="M -0.1160306974890524 1.1542228911621144 C 0.3746720324611359 1.6236517660546985, 1.3200687564164615 0.16659644900998594, 1.122046542986146 -0.06395193586849202" />
<path style="fill:none; stroke-width:0.05; stroke:%234F0495; stroke-opacity:0.29717381077192506; stroke-linecap:round;" d="M -0.04230507836578212 1.1513890209750777 C -0.3121123327965154 0.8405638715029112, 0.6354644547473164 -0.5779070374964993, 1.1895579446067672 -0.028642750038921347" />
<path style="fill:none; stroke-width:0.02; stroke:%23954104; stroke-opacity:0.5293003238749647; stroke-linecap:round;" d="M -0.05924535660318995 1.0209231757537505 C -0.5121648096019524 0.4739842510629173, 0.42021133362634955 -0.7913681528247358, 1.1246693525080493 -0.012898830220002669" />
<path style="fill:none; stroke-width:0.05; stroke:%23951F04; stroke-opacity:0.30375470267442783; stroke-linecap:round;" d="M -0.10269932049972758 1.0132709247124307 C 0.007413654712492501 1.1000030346232563, 0.9840920098022707 -0.338449988113485, 1.1618973920457483 -0.17997794394008915" />
</svg>)