Creating with code
Interactive essays on creative code, mostly using my Solandra framework
React and State
One of the key challenges for React Apps is state; Valtio is an excellent modern approach.
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>)
Reviews
Advanced Swift (5.6 Edition)
10/05/2022 by Chris Eidhof, Ole Begemann, Florian Kugler, and Ben Cohen Fantastic in depth resource on Swift, arriving at a good time. Swift is a big…
Micro State Management with React Hooks: Explore custom hooks libraries like Zustand, Jotai, and Valtio to manage global states
24/03/2022 By Daishi Kato Asked to name most prominent people working on React state, you would likely come up with Dan Abramov (Redux) and Michel…
iPad Mini 2021
12/12/2021 The iPad virtually no one should buy. Though technically impressive and at least in Apple-world 'reasonably' priced. This is a wonderfully…
iPhone 12 Pro 256GB
12/12/2021 From the vantage point of post iPhone 13 release, how does the 12 Pro look? Well in terms of design great, as that hasn't changed. Though at…
Remarkable 2
12/12/2021 The Remarkable 2 lives up to its name. It is a modern, beautiful device that delivers an incredible note taking experience. It feels like…