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.
@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:%23BDDBC4; fill-opacity:0.25;" d="M 0.277636136254544 -0.3671885060069573 A 0.5818202717193544 0.5818202717193544 0 0 0 -0.3041841354648104 0.21463176571239714 A 0.5818202717193544 0.5818202717193544 0 0 0 0.8594564079738983 0.21463176571239692 A 0.5818202717193544 0.5818202717193544 0 0 0 -0.3041841354648104 0.21463176571239728 A 0.5818202717193544 0.5818202717193544 0 0 0 0.8594564079738983 0.21463176571239678" />
<path style="fill:%23BDDBCE; fill-opacity:0.25;" d="M 0.644872844619506 -0.6949150592955751 A 0.8765503096776912 0.8765503096776912 0 0 0 -0.2316774650581852 0.18163525038211625 A 0.8765503096776912 0.8765503096776912 0 0 0 1.5214231542971972 0.18163525038211592 A 0.8765503096776912 0.8765503096776912 0 0 0 -0.2316774650581852 0.18163525038211648 A 0.8765503096776912 0.8765503096776912 0 0 0 1.5214231542971972 0.18163525038211573" />
<path style="fill:%23BDDBCD; fill-opacity:0.25;" d="M 0.683389074278061 -0.6268327782604264 A 0.8182697436280075 0.8182697436280075 0 0 0 -0.13488066934994658 0.19143696536758126 A 0.8182697436280075 0.8182697436280075 0 0 0 1.5016588179060686 0.19143696536758095 A 0.8182697436280075 0.8182697436280075 0 0 0 -0.13488066934994658 0.19143696536758145 A 0.8182697436280075 0.8182697436280075 0 0 0 1.5016588179060686 0.19143696536758076" />
<path style="fill:none; stroke-width:0.02; stroke:%23156105; stroke-opacity:0.3268457453809712; stroke-linecap:round;" d="M -0.044295399869041324 0.9753640126606522 C -0.6602661820769488 -0.022936661387205827, 1.001043827951111 -0.05427579329387735, 1.2034851309798882 -0.1218947705999148" />
<path style="fill:none; stroke-width:0.02; stroke:%2305611E; stroke-opacity:0.46814943775182344; stroke-linecap:round;" d="M 0.11132895027167597 0.8765383550576671 C 0.0011607625248191145 0.6022734876529579, 1.3767929876379512 0.18794502142738773, 0.8936185866892793 -0.3284741019103735" />
<path style="fill:none; stroke-width:0.05; stroke:%23256105; stroke-opacity:0.49114774253895965; stroke-linecap:round;" d="M -0.024807269674469806 0.9387549816385333 C -0.4059663116070954 0.08836241184991436, 1.2028325184760442 0.2087560298687897, 1.2809244919904472 -0.008764340336477633" />
<path style="fill:none; stroke-width:0.02; stroke:%23055F61; stroke-opacity:0.5049479933589629; stroke-linecap:round;" d="M 0.1452898581920792 0.8974895797623823 C 0.3378611639170438 0.8944130036264648, 1.4151987673802635 0.7309793104853273, 0.8619981594098624 0.07669965849437335" />
<path style="fill:none; stroke-width:0.02; stroke:%230A6105; stroke-opacity:0.4079298407317731; stroke-linecap:round;" d="M -0.20377458299268755 1.3188349775560155 C -0.8776010856565999 0.18999142374910785, 1.1531654288908784 0.1501373537256014, 1.3204996891532665 -0.023621325933477183" />
<path style="fill:none; stroke-width:0.02; stroke:%2305612B; stroke-opacity:0.5900782283807908; stroke-linecap:round;" d="M -0.016337094528852875 0.9161369140968854 C -0.076266413995983 0.5110603095948425, 1.6591941783122228 0.5627857568017045, 1.3417066847977595 -0.16562834822936903" />
<path style="fill:none; stroke-width:0.02; stroke:%23055561; stroke-opacity:0.27333603120226924; stroke-linecap:round;" d="M 0.031870955150014396 1.2592418216639876 C -0.32336749541930965 0.7732570311872359, 1.3733456051465427 0.27858316563431973, 1.0073224679359924 -0.21453968354511213" />
<path style="fill:none; stroke-width:0.02; stroke:%23096105; stroke-opacity:0.2538977759244895; stroke-linecap:round;" d="M 0.011102611778724153 1.1568728039792269 C -0.7116503099169175 0.18817070093545496, 0.9748772535039888 0.009697229117625591, 1.1830704442976345 -0.06898175585325825" />
<path style="fill:none; stroke-width:0.05; stroke:%23056140; stroke-opacity:0.33301498339314095; stroke-linecap:round;" d="M -0.03866510891942851 1.0827506634148754 C -0.6064572053396426 0.12897594849854635, 0.9547791546558524 0.12618012700667333, 1.151173457758309 0.0719336801602092" />
<path style="fill:none; stroke-width:0.05; stroke:%23056112; stroke-opacity:0.36938259760417724; stroke-linecap:round;" d="M -0.3311992773997573 1.100072002620474 C -0.6129481550646289 0.4949468666645243, 1.0963417448321677 0.42390809499393906, 0.9275537356630121 -0.058487154727594054" />
<path style="fill:none; stroke-width:0.05; stroke:%23056124; stroke-opacity:0.330813966714347; stroke-linecap:round;" d="M -0.2828913930270046 1.2242812274564017 C -0.7811164024021983 0.41157309225740385, 1.3083359212542356 0.17732111498510922, 1.1605794683166237 -0.3044688744703764" />
<path style="fill:none; stroke-width:0.02; stroke:%23316105; stroke-opacity:0.5521929669513578; stroke-linecap:round;" d="M 0.06695341221651666 1.0000887571037824 C -0.3585941536273109 0.42851263448226146, 1.0421824560196375 0.17920486923022866, 0.9750515173758422 -0.0952136227690106" />
<path style="fill:none; stroke-width:0.05; stroke:%2305615D; stroke-opacity:0.4720484276311765; stroke-linecap:round;" d="M -0.04574537467392778 1.0410695375857628 C -0.01644847214017231 0.7908070790620643, 1.504367066935885 0.8256704072508636, 1.1375720013254944 0.08511172303250517" />
<path style="fill:none; stroke-width:0.05; stroke:%23054A61; stroke-opacity:0.19354088131009306; stroke-linecap:round;" d="M 0.14936110477840028 1.0688896694884753 C -0.5399414833093609 0.4835283245742137, 0.9373705031216016 -0.09547973471364998, 0.9028637222305772 -0.3275110049118246" />
</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:%23BDDBC2; fill-opacity:0.25;" d="M 0.4193875391887193 0.11279170734410143 A 0.47427062551590654 0.47427062551590654 0 0 0 -0.05488308632718725 0.5870623328600081 A 0.47427062551590654 0.47427062551590654 0 0 0 0.8936581647046258 0.5870623328600079 A 0.47427062551590654 0.47427062551590654 0 0 0 -0.05488308632718725 0.5870623328600082 A 0.47427062551590654 0.47427062551590654 0 0 0 0.8936581647046258 0.5870623328600078" />
<path style="fill:%23BDDBC8; fill-opacity:0.25;" d="M 0.45708515928963145 0.3091817958268981 A 0.4203168738167625 0.4203168738167625 0 0 0 0.03676828547286892 0.7294986696436606 A 0.4203168738167625 0.4203168738167625 0 0 0 0.877402033106394 0.7294986696436605 A 0.4203168738167625 0.4203168738167625 0 0 0 0.03676828547286892 0.7294986696436607 A 0.4203168738167625 0.4203168738167625 0 0 0 0.877402033106394 0.7294986696436604" />
<path style="fill:%23BDDBC9; fill-opacity:0.25;" d="M 0.4712176879690574 0.36909794148495034 A 0.48945653493442776 0.48945653493442776 0 0 0 -0.01823884696537037 0.8585544764193782 A 0.48945653493442776 0.48945653493442776 0 0 0 0.9606742229034851 0.858554476419378 A 0.48945653493442776 0.48945653493442776 0 0 0 -0.01823884696537037 0.8585544764193783 A 0.48945653493442776 0.48945653493442776 0 0 0 0.9606742229034851 0.8585544764193779" />
<path style="fill:%23BDDBCA; fill-opacity:0.25;" d="M 0.2386168606508412 -0.21670600496815745 A 0.49364042260706925 0.49364042260706925 0 0 0 -0.25502356195622805 0.27693441763891186 A 0.49364042260706925 0.49364042260706925 0 0 0 0.7322572832579104 0.2769344176389117 A 0.49364042260706925 0.49364042260706925 0 0 0 -0.25502356195622805 0.27693441763891197 A 0.49364042260706925 0.49364042260706925 0 0 0 0.7322572832579104 0.2769344176389116" />
<path style="fill:%23BDDBCA; fill-opacity:0.25;" d="M 0.2782990248648409 0.05693010427893719 A 0.5328538876867102 0.5328538876867102 0 0 0 -0.25455486282186923 0.5897839919656475 A 0.5328538876867102 0.5328538876867102 0 0 0 0.8111529125515511 0.5897839919656472 A 0.5328538876867102 0.5328538876867102 0 0 0 -0.25455486282186923 0.5897839919656476 A 0.5328538876867102 0.5328538876867102 0 0 0 0.8111529125515511 0.5897839919656471" />
<path style="fill:%23BDDBCB; fill-opacity:0.25;" d="M 0.6967705525146081 0.4315110776093205 A 0.5214653554074125 0.5214653554074125 0 0 0 0.1753051971071956 0.9529764330167331 A 0.5214653554074125 0.5214653554074125 0 0 0 1.2182359079220206 0.9529764330167328 A 0.5214653554074125 0.5214653554074125 0 0 0 0.1753051971071956 0.9529764330167332 A 0.5214653554074125 0.5214653554074125 0 0 0 1.2182359079220206 0.9529764330167327" />
<path style="fill:%23BDDBCE; fill-opacity:0.25;" d="M 0.29070362756076273 0.1032859432975296 A 0.4575254556465377 0.4575254556465377 0 0 0 -0.16682182808577495 0.5608113989440674 A 0.4575254556465377 0.4575254556465377 0 0 0 0.7482290832073004 0.5608113989440672 A 0.4575254556465377 0.4575254556465377 0 0 0 -0.16682182808577495 0.5608113989440675 A 0.4575254556465377 0.4575254556465377 0 0 0 0.7482290832073004 0.5608113989440671" />
<path style="fill:%23BDDBCB; fill-opacity:0.25;" d="M 0.32021882941442603 -0.3542727321711928 A 0.5471003854961644 0.5471003854961644 0 0 0 -0.22688155608173832 0.1928276533249716 A 0.5471003854961644 0.5471003854961644 0 0 0 0.8673192149105904 0.1928276533249714 A 0.5471003854961644 0.5471003854961644 0 0 0 -0.22688155608173832 0.19282765332497173 A 0.5471003854961644 0.5471003854961644 0 0 0 0.8673192149105904 0.19282765332497126" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5932; stroke-opacity:0.32608413739322245; stroke-linecap:round;" d="M 0.4799106580303223 -0.11664226667851564 C 1.779821663709167 -0.1824588273622635, 1.6899011849515093 0.8500449573218315, 0.5364332553759391 0.9182272680340932" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5943; stroke-opacity:0.4938497739320966; stroke-linecap:round;" d="M 0.5255770369064675 -0.0977502562132068 C 0.19711423238022596 -0.10636273106529753, 0.024258957395561512 0.8320966828790892, 0.4867361468844305 0.8557047259297162" />
<path style="fill:none; stroke-width:0.03; stroke:%230D593B; stroke-opacity:0.6148601332376774; stroke-linecap:round;" d="M 0.49917872995775553 -0.13400677248774023 C -0.36367928839982394 -0.1233080022581628, -0.5078791244486741 0.9365586235754986, 0.5058211175624047 0.9356037809191787" />
<path style="fill:none; stroke-width:0.03; stroke:%230D0E59; stroke-opacity:0.34190003951554604; stroke-linecap:round;" d="M 0.48798922594158667 -0.12329627863438802 C -0.41579459004377634 -0.08025880359824566, -0.5137069392078758 0.902515579867772, 0.5295897296793511 0.8634669731158013" />
<path style="fill:none; stroke-width:0.03; stroke:%230D591E; stroke-opacity:0.2999262737088867; stroke-linecap:round;" d="M 0.4941897806218676 -0.07905623142918228 C -0.6150832303210557 -0.11812624225558233, -0.7975908895273115 0.8780619425947264, 0.4539305287868007 0.9329117215940249" />
<path style="fill:none; stroke-width:0.03; stroke:%2313590D; stroke-opacity:0.4927381636177379; stroke-linecap:round;" d="M 0.4833949109871469 -0.10895385161752007 C 2.2619955234868163 -0.16104233947801866, 2.152803138473515 0.8335406522254969, 0.5154925932388637 0.8910901689760116" />
<path style="fill:none; stroke-width:0.03; stroke:%2329590D; stroke-opacity:0.4995189584027756; stroke-linecap:round;" d="M 0.5431060465647638 -0.07044573662610998 C -0.3674115571617053 -0.10843378204426368, -0.5489627756201648 0.8435722876761597, 0.4975656258097661 0.8976464448244669" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5923; stroke-opacity:0.4774129625195893; stroke-linecap:round;" d="M 0.5103314404457032 -0.14706696726957963 C 1.4574118290775715 -0.14630390201488397, 1.309467283478055 0.9307259436502604, 0.5156858952696108 0.9400632948608013" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5959; stroke-opacity:0.2735244399468388; stroke-linecap:round;" d="M 0.45175805103903166 -0.0782607267571134 C 2.130333186575033 -0.14401539685185633, 2.0330885481487817 0.8313905538932993, 0.49298091925948745 0.9011135446975701" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5953; stroke-opacity:0.4163468510387732; stroke-linecap:round;" d="M 0.5081014845702556 -0.06920559942992499 C 1.3836355212178284 -0.08283444687315372, 1.262674400855503 0.9193737278156358, 0.5296228159092462 0.9400464257598892" />
<path style="fill:none; stroke-width:0.03; stroke:%230D591F; stroke-opacity:0.4716517895219734; stroke-linecap:round;" d="M 0.5306139713838333 -0.14044547749583922 C 1.0910906287535325 -0.09642297688951401, 0.87204613754107 0.9287079076444049, 0.45826257483720445 0.9053265315833741" />
<path style="fill:none; stroke-width:0.03; stroke:%230D2459; stroke-opacity:0.33469756945925244; stroke-linecap:round;" d="M 0.5439385720904759 -0.05104802532980736 C 2.384351748267044 0.12109928576675888, 2.1619627954284444 1.062038392719367, 0.4564081530854222 0.9118443233188985" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5159; stroke-opacity:0.27429186674208617; stroke-linecap:round;" d="M 0.5481654601076007 -0.14016174498155093 C 0.1553770611573639 -0.16099505335437514, -0.05708493415577784 0.8481111317986831, 0.4800719365333107 0.8888176835853361" />
<path style="fill:none; stroke-width:0.03; stroke:%230D591B; stroke-opacity:0.46870215708412627; stroke-linecap:round;" d="M 0.49603040523488323 -0.12424972703253391 C 2.494287774939198 -0.0545660878599426, 2.3225329512953916 0.9236234827801344, 0.46387947474805347 0.8683835754627854" />
<path style="fill:none; stroke-width:0.03; stroke:%230D5920; stroke-opacity:0.4189796913671444; stroke-linecap:round;" d="M 0.4769856905879008 -0.11924132576896826 C 0.31083146271758477 -0.11589695756325274, 0.16025020870485865 0.8715966920962224, 0.46710844193677287 0.8796184552498287" />
<path style="fill:none; stroke-width:0.03; stroke:%231D590D; stroke-opacity:0.19710034846704763; stroke-linecap:round;" d="M 0.4631937770590573 -0.09260196406484633 C 0.8593584787977574 -0.09653872955906884, 0.7432142979260256 0.8733023006938447, 0.48492136839578737 0.8839270966840402" />
<path style="fill:none; stroke-width:0.02; stroke:%234F590D; stroke-opacity:0.2721988522211397; stroke-linecap:round;" d="M 0.46776943782837305 -0.11089537533181841 C 3.0433295206135615 -0.30345483002457213, 2.976948380481136 0.7190616876083711, 0.5461884903860357 0.910768432774077" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5952; stroke-opacity:0.36733812063889254; stroke-linecap:round;" d="M 0.47828711482205066 -0.10553759561414046 C -2.940227635641671 0.0562512704973559, -3.0364621656193416 1.0596825735396318, 0.5244605532125141 0.9014398014868794" />
<path style="fill:none; stroke-width:0.03; stroke:%230D3059; stroke-opacity:0.45795462367713724; stroke-linecap:round;" d="M 0.4886440339155858 -0.13295879828815532 C 0.9083130133136338 -0.1512574829747102, 0.816378819531563 0.927884650852911, 0.5497473219864037 0.9483672529911644" />
<path style="fill:none; stroke-width:0.02; stroke:%230D594A; stroke-opacity:0.43739176114155615; stroke-linecap:round;" d="M 0.5241849665097418 -0.06571633444562942 C 1.7519934671413189 -0.06316212481295863, 1.612987073456184 0.927200053225687, 0.5261713584475753 0.934351700950896" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5947; stroke-opacity:0.2817967281942423; stroke-linecap:round;" d="M 0.47964007231030853 -0.13452547581653523 C 0.8697834467457919 -0.15110604521308946, 0.779726435205826 0.8999501304346014, 0.5386427075568776 0.9187304468958031" />
<path style="fill:none; stroke-width:0.03; stroke:%230D5925; stroke-opacity:0.3316616327867721; stroke-linecap:round;" d="M 0.46567460299609054 -0.062396751639054615 C 1.2265870890765302 -0.05002665733858325, 1.076479905959552 0.9355010787858149, 0.45598956977579047 0.9344499192313038" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2E59; stroke-opacity:0.4174609246872221; stroke-linecap:round;" d="M 0.47522361531186147 -0.05286080486781596 C 1.0629771608758234 -0.07190367309756929, 0.9707455688070752 0.835428877508482, 0.5118136184338542 0.8584131361819384" />
<path style="fill:none; stroke-width:0.01; stroke:%230D591C; stroke-opacity:0.4568572771764089; stroke-linecap:round;" d="M 0.5284936028708932 -0.07496297115935958 C -0.49820784219107 -0.0702768062164329, -0.6378765449398704 0.9089227015420902, 0.5282507715082785 0.9141472166129614" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5946; stroke-opacity:0.44283290754066584; stroke-linecap:round;" d="M 0.49861756351532893 -0.06834172780409345 C 2.286771572900741 -0.023236698937153077, 2.121060167786103 0.9792603427122966, 0.4758761696985063 0.9475044304837815" />
<path style="fill:none; stroke-width:0.01; stroke:%2352590D; stroke-opacity:0.39087003019096134; stroke-linecap:round;" d="M 0.5235818472816143 -0.08094293003797423 C -0.4327248426697172 -0.11296679194121162, -0.6110742272774858 0.8665608990579254, 0.4850908296946406 0.9139447229104327" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5929; stroke-opacity:0.4528151323582723; stroke-linecap:round;" d="M 0.5486236847705356 -0.07446407525218092 C 1.9113177815496918 0.011649680045505206, 1.716166858210998 0.9695880389956135, 0.4904555901508581 0.9014182205172873" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5949; stroke-opacity:0.4462085874598113; stroke-linecap:round;" d="M 0.48381021702309895 -0.05947730529370485 C 0.11945380012476065 -0.03267252320475167, 0.04266686679414149 0.9135582293852327, 0.5411738823595252 0.8881293009393351" />
<path style="fill:none; stroke-width:0.02; stroke:%230E590D; stroke-opacity:0.5534494670781844; stroke-linecap:round;" d="M 0.5174954805297035 -0.13937581377895858 C -0.7880146822297147 -0.18094627701254984, -0.9712042651879969 0.841791261698025, 0.48030360022117113 0.898972519118682" />
<path style="fill:none; stroke-width:0.02; stroke:%230D2959; stroke-opacity:0.3716838539297303; stroke-linecap:round;" d="M 0.45592451371142095 -0.13148658390579032 C 0.6346625433109423 -0.13940334732966214, 0.5649600962067267 0.8702785755111035, 0.5292462155525723 0.8779389678229435" />
<path style="fill:none; stroke-width:0.01; stroke:%230D592F; stroke-opacity:0.3306539687606993; stroke-linecap:round;" d="M 0.48116692928054405 -0.09113629994568938 C 1.3902393750754345 -0.09356277421394166, 1.2640900903061438 0.8453093928519501, 0.48862384451827207 0.8561434805594921" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5914; stroke-opacity:0.4833969241217343; stroke-linecap:round;" d="M 0.4624357632844414 -0.09527549994720097 C 1.8418410408505665 -0.1495942079346067, 1.7471612394563425 0.8075538316562387, 0.5036241616464187 0.8656616209535494" />
<path style="fill:none; stroke-width:0.03; stroke:%230D5953; stroke-opacity:0.2036581463902355; stroke-linecap:round;" d="M 0.5183653491321053 -0.10989365052021925 C 0.3634965276355901 -0.10552638414893895, 0.21134789922115266 0.9236408915523442, 0.5128108309815023 0.930444579975474" />
<path style="fill:none; stroke-width:0.01; stroke:%230D594E; stroke-opacity:0.42713578984857337; stroke-linecap:round;" d="M 0.456580218110986 -0.06381459271078062 C -1.159451343287399 0.057493631559282, -1.2287980085274175 1.0524991081006367, 0.5281853080755852 0.931030907564695" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5950; stroke-opacity:0.38596684048136765; stroke-linecap:round;" d="M 0.47447256094746393 -0.12556999387609444 C 3.037749593403436 -0.17575247297948793, 2.915813591004946 0.8365733446914279, 0.4964549615856559 0.8938360703918178" />
<path style="fill:none; stroke-width:0.02; stroke:%230D590E; stroke-opacity:0.2535833731466212; stroke-linecap:round;" d="M 0.5449205969105937 -0.12234337575340472 C -0.11886753583492585 -0.16682844036553796, -0.3302300920176693 0.7975403454790748, 0.4716092002095411 0.8621903841457959" />
<path style="fill:none; stroke-width:0.03; stroke:%230D5956; stroke-opacity:0.3700096958967116; stroke-linecap:round;" d="M 0.5073551812037976 -0.06628127898005992 C 1.6119987605913328 -0.08538074019098157, 1.500219312323721 0.8422339640657281, 0.5274515576560755 0.8678278261365548" />
<path style="fill:none; stroke-width:0.01; stroke:%230D592E; stroke-opacity:0.36460077646977845; stroke-linecap:round;" d="M 0.47719132916406626 -0.07749818644368224 C 0.5956080239983366 -0.07157136661576408, 0.44492264166412454 0.9352464551681601, 0.46993499217623375 0.9405074895151763" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5957; stroke-opacity:0.21824687008185253; stroke-linecap:round;" d="M 0.4741804309431578 -0.13725133693384856 C 2.5350126294956303 -0.1281479761619233, 2.3899075991080676 0.8768550370631474, 0.4721929035337232 0.8781710265041662" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5920; stroke-opacity:0.5707979863934146; stroke-linecap:round;" d="M 0.47595867218059507 -0.13416079657907423 C 2.3550947182793873 -0.2677158385656082, 2.287216086086117 0.7315113363235803, 0.5496122413948702 0.8646573087271203" />
<path style="fill:none; stroke-width:0.01; stroke:%230D5931; stroke-opacity:0.3793438699441392; stroke-linecap:round;" d="M 0.47796472496379533 -0.14585338047011706 C 1.2908924655243796 -0.18626862587301007, 1.1977105440046516 0.9069669932546819, 0.539819409142011 0.949601313925242" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5917; stroke-opacity:0.5768992051681479; stroke-linecap:round;" d="M 0.5384115543686165 -0.08303777818166874 C 0.43646265762988506 -0.07768456387515177, 0.29553875370832955 0.931052542334837, 0.5410897743937294 0.9354920069885495" />
<path style="fill:none; stroke-width:0.02; stroke:%230D591D; stroke-opacity:0.42099733181669097; stroke-linecap:round;" d="M 0.45609646598078074 -0.09325012236710228 C -1.075627584643793 0.009296694599488231, -1.152982903172355 1.0012985411549926, 0.5193494687765982 0.8997506664097737" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5937; stroke-opacity:0.28415531985277176; stroke-linecap:round;" d="M 0.5169233810533784 -0.0959473188030463 C -1.0620757290227718 -0.16485113147805053, -1.2411881847906023 0.7762617648012035, 0.4722618331525249 0.8610166833900397" />
<path style="fill:none; stroke-width:0.01; stroke:%230D594C; stroke-opacity:0.5551737373367756; stroke-linecap:round;" d="M 0.49573678171125934 -0.139570553045415 C 0.2623460448247283 -0.1248971310270231, 0.1540668079108472 0.9385469527726922, 0.5384453850669191 0.9285182483726493" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5939; stroke-opacity:0.33511041786721896; stroke-linecap:round;" d="M 0.5302148232780969 -0.06052863257168019 C 0.5372690201087795 -0.05562340292686213, 0.3971224097336309 0.9137708197271135, 0.5281166703456295 0.9189415451615786" />
<path style="fill:none; stroke-width:0.02; stroke:%230D5916; stroke-opacity:0.39916935667545766; stroke-linecap:round;" d="M 0.46225268338949865 -0.1318906557004556 C 0.28359750234607606 -0.1266123538983021, 0.14026108012555485 0.8868940735526969, 0.4632147741108443 0.8917009048357335" />
<path style="fill:none; stroke-width:0.03; stroke:%230D591C; stroke-opacity:0.4531084480950537; stroke-linecap:round;" d="M 0.5224639400001189 -0.09810898996837114 C -0.18143968931258217 -0.130203670120824, -0.36453469493799584 0.8030151619873868, 0.47274683493014896 0.8516011653684267" />
</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:%23DBBDDB; fill-opacity:0.25;" d="M 0.5962393269520325 0.5524805824850085 A 0.40493146554617215 0.40493146554617215 0 0 0 0.19130786140586037 0.9574120480311807 A 0.40493146554617215 0.40493146554617215 0 0 0 1.0011707924982047 0.9574120480311806 A 0.40493146554617215 0.40493146554617215 0 0 0 0.19130786140586037 0.9574120480311809 A 0.40493146554617215 0.40493146554617215 0 0 0 1.0011707924982047 0.9574120480311805" />
<path style="fill:%23DBBDDB; fill-opacity:0.25;" d="M 0.3942157588921732 0.60525297583899 A 0.2968264525744307 0.2968264525744307 0 0 0 0.09738930631774251 0.9020794284134206 A 0.2968264525744307 0.2968264525744307 0 0 0 0.6910422114666039 0.9020794284134205 A 0.2968264525744307 0.2968264525744307 0 0 0 0.09738930631774251 0.9020794284134207 A 0.2968264525744307 0.2968264525744307 0 0 0 0.6910422114666039 0.9020794284134205" />
<path style="fill:%23D6BDDB; fill-opacity:0.25;" d="M 0.1761662789261148 -0.09232638483394248 A 0.1295707621717833 0.1295707621717833 0 0 0 0.04659551675433152 0.03724437733784082 A 0.1295707621717833 0.1295707621717833 0 0 0 0.3057370410978981 0.03724437733784077 A 0.1295707621717833 0.1295707621717833 0 0 0 0.04659551675433152 0.037244377337840855 A 0.1295707621717833 0.1295707621717833 0 0 0 0.3057370410978981 0.037244377337840744" />
<path style="fill:%23D9BDDB; fill-opacity:0.25;" d="M 0.1443012549558903 0.335884192700523 A 0.37992660046115106 0.37992660046115106 0 0 0 -0.23562534550526076 0.7158107931616741 A 0.37992660046115106 0.37992660046115106 0 0 0 0.5242278554170414 0.715810793161674 A 0.37992660046115106 0.37992660046115106 0 0 0 -0.23562534550526076 0.7158107931616742 A 0.37992660046115106 0.37992660046115106 0 0 0 0.5242278554170414 0.7158107931616738" />
<path style="fill:%23DBBDD6; fill-opacity:0.25;" d="M 0.9938268151304888 0.16828044394251163 A 0.3501879716202885 0.3501879716202885 0 0 0 0.6436388435102003 0.5184684155628001 A 0.3501879716202885 0.3501879716202885 0 0 0 1.3440147867507772 0.5184684155628 A 0.3501879716202885 0.3501879716202885 0 0 0 0.6436388435102003 0.5184684155628002 A 0.3501879716202885 0.3501879716202885 0 0 0 1.3440147867507772 0.5184684155627999" />
<path style="fill:%23DBBDD4; fill-opacity:0.25;" d="M 0.14136982874213055 0.48709006837432844 A 0.3988653018748133 0.3988653018748133 0 0 0 -0.25749547313268273 0.8859553702491417 A 0.3988653018748133 0.3988653018748133 0 0 0 0.5402351306169438 0.8859553702491416 A 0.3988653018748133 0.3988653018748133 0 0 0 -0.25749547313268273 0.8859553702491418 A 0.3988653018748133 0.3988653018748133 0 0 0 0.5402351306169438 0.8859553702491415" />
<path style="fill:%23D5BDDB; fill-opacity:0.25;" d="M 0.5191873781745262 -0.1729039581769637 A 0.2823320206034705 0.2823320206034705 0 0 0 0.2368553575710557 0.10942806242650685 A 0.2823320206034705 0.2823320206034705 0 0 0 0.8015193987779967 0.10942806242650675 A 0.2823320206034705 0.2823320206034705 0 0 0 0.2368553575710557 0.10942806242650692 A 0.2823320206034705 0.2823320206034705 0 0 0 0.8015193987779967 0.10942806242650668" />
<path style="fill:%23DBBDD9; fill-opacity:0.25;" d="M 0.31080207791018133 0.29505755142198065 A 0.211908751986555 0.211908751986555 0 0 0 0.09889332592362632 0.5069663034085357 A 0.211908751986555 0.211908751986555 0 0 0 0.5227108298967363 0.5069663034085357 A 0.211908751986555 0.211908751986555 0 0 0 0.09889332592362632 0.5069663034085358 A 0.211908751986555 0.211908751986555 0 0 0 0.5227108298967363 0.5069663034085355" />
<path style="fill:%23D9BDDB; fill-opacity:0.25;" d="M 0.8219554032518649 -0.34909341007395744 A 0.48247778209708236 0.48247778209708236 0 0 0 0.3394776211547825 0.13338437202312498 A 0.48247778209708236 0.48247778209708236 0 0 0 1.3044331853489473 0.1333843720231248 A 0.48247778209708236 0.48247778209708236 0 0 0 0.3394776211547825 0.1333843720231251 A 0.48247778209708236 0.48247778209708236 0 0 0 1.3044331853489473 0.13338437202312467" />
<path style="fill:%23DBBDDA; fill-opacity:0.25;" d="M 0.6754499991347438 0.045445312813514604 A 0.34454724910507906 0.34454724910507906 0 0 0 0.33090275002966474 0.3899925619185937 A 0.34454724910507906 0.34454724910507906 0 0 0 1.019997248239823 0.38999256191859355 A 0.34454724910507906 0.34454724910507906 0 0 0 0.33090275002966474 0.38999256191859377 A 0.34454724910507906 0.34454724910507906 0 0 0 1.019997248239823 0.3899925619185935" />
<path style="fill:none; stroke-width:0.05; stroke:%23210D59; stroke-opacity:0.4454896431037237; stroke-linecap:round;" d="M -0.23261110004639968 -0.23044834988009974 C -0.015463315492641128 -0.4156235528492866, 1.0855449180635863 1.2984675239163692, 1.2246602748067832 1.193169397213467" />
<path style="fill:none; stroke-width:0.05; stroke:%23590D36; stroke-opacity:0.3316054683388612; stroke-linecap:round;" d="M -0.24818034129567035 -0.2314269493545179 C -0.21258825234441936 -0.23030218203201924, 0.9125843705692394 1.5065003463841133, 1.237732088704636 1.2089065899472848" />
<path style="fill:none; stroke-width:0.02; stroke:%23530D59; stroke-opacity:0.5166787429887083; stroke-linecap:round;" d="M -0.23579319926248582 -0.17030241567240006 C -0.24482659624190412 -0.1251305949208319, 0.820558387678634 1.477781887480215, 1.1618360962985 1.1529533957224165" />
<path style="fill:none; stroke-width:0.02; stroke:%23530D59; stroke-opacity:0.2914192730676245; stroke-linecap:round;" d="M -0.15741393701824266 -0.1636087507620796 C -0.11376540598434737 -0.17288928071460619, 0.9156872565565553 1.4530745416054596, 1.2103657021543672 1.1901674473486261" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D1F; stroke-opacity:0.5742900598094274; stroke-linecap:round;" d="M -0.1724208200928391 -0.2062714189427887 C -0.9415003755488134 0.5477095523101377, 0.043324681266711185 2.243298606397693, 1.1674768373296551 1.2253629270083497" />
<path style="fill:none; stroke-width:0.02; stroke:%23594B0D; stroke-opacity:0.3424020235220245; stroke-linecap:round;" d="M -0.22254795065301816 -0.20504079573205403 C -0.36368755516612544 -0.018496368052083878, 0.7507193547411819 1.6555720880721023, 1.2388081735394556 1.1765692197659228" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D12; stroke-opacity:0.4254261518454075; stroke-linecap:round;" d="M -0.20530724311368748 -0.16516447807981213 C -0.5664873534816837 0.2236851796857383, 0.4463575572365361 1.8770140319882365, 1.1524224966704986 1.2190035249925246" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D33; stroke-opacity:0.3483761504058757; stroke-linecap:round;" d="M -0.23725788485347493 -0.23223299782855047 C -0.14671926084746423 -0.28316981089587234, 0.8863160962113122 1.453752678296234, 1.1588895836274993 1.2288741264607754" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D0D; stroke-opacity:0.350492587453495; stroke-linecap:round;" d="M -0.23294792018884192 -0.19217151612699807 C -0.31849121251828666 -0.07378066092172808, 0.7154354605879649 1.6354722795589423, 1.1578648118187176 1.2417705762840061" />
<path style="fill:none; stroke-width:0.05; stroke:%234D0D59; stroke-opacity:0.6229065858151444; stroke-linecap:round;" d="M -0.15882500348565884 -0.2299302270898397 C -0.3875174002102585 0.02425821852607346, 0.6456641780979563 1.7606398393184635, 1.237343704317489 1.2306170149165079" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D23; stroke-opacity:0.27545462516666114; stroke-linecap:round;" d="M -0.2225720870079299 -0.176059842759817 C -0.27544563002904604 -0.08955700990652582, 0.7499041594221072 1.6010150042449607, 1.1556939282090093 1.2415997486293706" />
<path style="fill:none; stroke-width:0.05; stroke:%23590D44; stroke-opacity:0.30364178225456107; stroke-linecap:round;" d="M -0.16714871252418123 -0.15432820976354264 C -0.1014008912414539 -0.1867160982736792, 0.9493705832513761 1.4375481766488316, 1.2210260260033405 1.1930121413398571" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D49; stroke-opacity:0.2569852155620552; stroke-linecap:round;" d="M -0.1789403303562095 -0.15148186123884352 C -0.3944635410602891 0.11338531934618645, 0.6841041290842824 1.7269241343583261, 1.2339184446231612 1.179174295924103" />
<path style="fill:none; stroke-width:0.05; stroke:%23410D59; stroke-opacity:0.21143853312781458; stroke-linecap:round;" d="M -0.2449149266603468 -0.20814373813286655 C -0.20698234804856996 -0.2111853237132857, 0.8861550036689272 1.4507252489812827, 1.1929873369302375 1.1663864003926607" />
<path style="fill:none; stroke-width:0.02; stroke:%23490D59; stroke-opacity:0.38153677655065715; stroke-linecap:round;" d="M -0.2308868723955995 -0.16649392779079894 C -0.2965724087892442 -0.06066562225667416, 0.8181971738727735 1.6419088039081953, 1.2372135771789596 1.2428151117807422" />
</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:%23BDDBCB; fill-opacity:0.25;" d="M 0.28929775752429887 -0.07037809550104945 A 0.9610241980075765 0.9610241980075765 0 0 0 -0.6717264404832777 0.8906461025065272 A 0.9610241980075765 0.9610241980075765 0 0 0 1.2503219555318754 0.8906461025065269 A 0.9610241980075765 0.9610241980075765 0 0 0 -0.6717264404832777 0.8906461025065274 A 0.9610241980075765 0.9610241980075765 0 0 0 1.2503219555318754 0.8906461025065266" />
<path style="fill:%23BDDBC7; fill-opacity:0.25;" d="M 0.5481896492945778 0.23969253850336047 A 0.34245931527193907 0.34245931527193907 0 0 0 0.20573033402263874 0.5821518537752995 A 0.34245931527193907 0.34245931527193907 0 0 0 0.8906489645665169 0.5821518537752994 A 0.34245931527193907 0.34245931527193907 0 0 0 0.20573033402263874 0.5821518537752997 A 0.34245931527193907 0.34245931527193907 0 0 0 0.8906489645665169 0.5821518537752993" />
<path style="fill:%23BDDBC0; fill-opacity:0.25;" d="M 0.5750938710860094 -0.20337700897271654 A 0.4956804392701866 0.4956804392701866 0 0 0 0.07941343181582278 0.29230343029747013 A 0.4956804392701866 0.4956804392701866 0 0 0 1.070774310356196 0.29230343029746997 A 0.4956804392701866 0.4956804392701866 0 0 0 0.07941343181582278 0.29230343029747025 A 0.4956804392701866 0.4956804392701866 0 0 0 1.070774310356196 0.29230343029746986" />
<path style="fill:%23BDDBC8; fill-opacity:0.25;" d="M 0.3423725731807896 -0.6567952587464287 A 0.6956766646409368 0.6956766646409368 0 0 0 -0.3533040914601472 0.03888140589450814 A 0.6956766646409368 0.6956766646409368 0 0 0 1.0380492378217263 0.038881405894507885 A 0.6956766646409368 0.6956766646409368 0 0 0 -0.3533040914601472 0.038881405894508315 A 0.6956766646409368 0.6956766646409368 0 0 0 1.0380492378217263 0.03888140589450772" />
<path style="fill:%23BDDBCB; fill-opacity:0.25;" d="M 0.6894363237290139 0.14330780539193344 A 0.6702145063674355 0.6702145063674355 0 0 0 0.019221817361578353 0.8135223117593691 A 0.6702145063674355 0.6702145063674355 0 0 0 1.3596508300964494 0.8135223117593688 A 0.6702145063674355 0.6702145063674355 0 0 0 0.019221817361578353 0.8135223117593692 A 0.6702145063674355 0.6702145063674355 0 0 0 1.3596508300964494 0.8135223117593686" />
<path style="fill:%23BDDBC8; fill-opacity:0.25;" d="M 0.9651089062185562 -0.40051106812747195 A 0.7234652705049682 0.7234652705049682 0 0 0 0.24164363571358793 0.3229542023774964 A 0.7234652705049682 0.7234652705049682 0 0 0 1.6885741767235243 0.3229542023774961 A 0.7234652705049682 0.7234652705049682 0 0 0 0.24164363571358793 0.32295420237749656 A 0.7234652705049682 0.7234652705049682 0 0 0 1.6885741767235243 0.32295420237749595" />
<path style="fill:%23BDDBC7; fill-opacity:0.25;" d="M 0.6140764491268812 0.10260685046946172 A 0.3492562222475857 0.3492562222475857 0 0 0 0.2648202268792955 0.45186307271704745 A 0.3492562222475857 0.3492562222475857 0 0 0 0.9633326713744669 0.4518630727170473 A 0.3492562222475857 0.3492562222475857 0 0 0 0.2648202268792955 0.4518630727170475 A 0.3492562222475857 0.3492562222475857 0 0 0 0.9633326713744669 0.45186307271704723" />
<path style="fill:none; stroke-width:0.01; stroke:%230F578A; stroke-opacity:0.583110845191649; stroke-linecap:round;" d="M -1.0420562300939267 0.5454882824721708 C -0.7382419236234191 0.81918855342753, 1.7426500388160893 -0.8657869528955273, 1.9492174286107622 0.7605447516728536" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A64; stroke-opacity:0.21173859638091969; stroke-linecap:round;" d="M -0.9441454648566364 0.40322072682456583 C -0.7202239543314439 1.180302629639787, 1.9046683411677927 -0.36396297192529103, 2.0729418485872353 0.8179494986796695" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A3C; stroke-opacity:0.18299322437880228; stroke-linecap:round;" d="M -0.9841038964626266 0.47982937760826516 C -0.6513868761107031 0.44941739819606363, 1.892587376014427 -1.2521953868413878, 2.0669885987975953 0.7209219968343165" />
<path style="fill:none; stroke-width:0.01; stroke:%234E8A0F; stroke-opacity:0.5031410851722896; stroke-linecap:round;" d="M -0.9389473064917486 0.42100435191935515 C -0.6837675712898974 1.0464476370289455, 1.8499938882052136 -0.5402708829812972, 2.032927523100923 0.7459394109693431" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A60; stroke-opacity:0.4945490091847467; stroke-linecap:round;" d="M -1.0832696243689075 0.4230451640629559 C -0.8137529863216946 1.0500590100489382, 1.7155691318421322 -0.6003296171240653, 1.9245788458348427 0.6952593782908243" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A48; stroke-opacity:0.39972218484473226; stroke-linecap:round;" d="M -1.0283648941152617 0.4107880928921333 C -0.7775499744538833 1.2000032872964055, 1.7080080024040907 -0.4277254383427207, 1.9310936953089792 0.6736647142873436" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A1A; stroke-opacity:0.5672077392773734; stroke-linecap:round;" d="M -1.0011987905555693 0.46128433022404663 C -0.694233866222702 0.5937390032905815, 1.7150242052848124 -1.0678578414317306, 1.9193667685703033 0.6502958228985122" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A12; stroke-opacity:0.34126953359068757; stroke-linecap:round;" d="M -0.9180154312628097 0.4857406717413262 C -0.6344987937739445 0.8730075187498744, 1.7817664048472412 -0.7455314741323827, 1.9813655987980552 0.7128873733933379" />
<path style="fill:none; stroke-width:0.01; stroke:%230F4E8A; stroke-opacity:0.4528048975000649; stroke-linecap:round;" d="M -0.9991626846144261 0.5222421988777164 C -0.7461750132407884 1.1613565867482705, 1.7768533699295048 -0.4215489161017235, 1.9619255838238565 0.8435182791464954" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A6A; stroke-opacity:0.478890892837973; stroke-linecap:round;" d="M -0.9475960844016705 0.44141124173052965 C -0.6548264017032748 0.6424896788727407, 1.8907784968288623 -0.8518048128894687, 1.9762965797313121 0.8462223287464602" />
<path style="fill:none; stroke-width:0.01; stroke:%230F618A; stroke-opacity:0.45832124321650514; stroke-linecap:round;" d="M -0.9701247283139413 0.5190889719814873 C -0.7065529827272693 1.3703837820934983, 1.7109234526533537 -0.30383863560561064, 1.964715120820109 0.70328473599814" />
<path style="fill:none; stroke-width:0.01; stroke:%230F7E8A; stroke-opacity:0.41895378168830866; stroke-linecap:round;" d="M -0.9541339028435009 0.5784859396770468 C -0.6358602281049359 0.5279903941290682, 1.7430628592661703 -1.1922577783058923, 1.9789715858667272 0.7026673492802098" />
<path style="fill:none; stroke-width:0.01; stroke:%23248A0F; stroke-opacity:0.3531935639467617; stroke-linecap:round;" d="M -0.99790824332714 0.4601871338894855 C -0.7398456342313358 1.1313856395483723, 1.7869310769236626 -0.48753293048369944, 1.9884398657479128 0.7555222924023454" />
<path style="fill:none; stroke-width:0.01; stroke:%238A850F; stroke-opacity:0.3457355663334545; stroke-linecap:round;" d="M -1.096149188590622 0.43108580670241786 C -0.7994174298531633 0.796707077242033, 1.7957438138201298 -0.8638177688752979, 1.9696528967555145 0.7361468149027087" />
<path style="fill:none; stroke-width:0.01; stroke:%23338A0F; stroke-opacity:0.5179260465402076; stroke-linecap:round;" d="M -1.039105255943654 0.5367202574744719 C -0.7361325056261562 0.7689392589669602, 1.783721857011991 -0.8661944505421287, 1.9518589130539294 0.8150394926201006" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A18; stroke-opacity:0.2492256756050891; stroke-linecap:round;" d="M -1.0605982596083399 0.4364572582035319 C -0.8077610938151254 1.0791533714006554, 1.8445883382701964 -0.5122634917984714, 2.007258663165891 0.8311964679915925" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A31; stroke-opacity:0.2882295739788191; stroke-linecap:round;" d="M -1.0444187447782978 0.5011180616710931 C -0.7789370394681794 1.1649115635230716, 1.7957053645924512 -0.48698709932011974, 1.9999338764227668 0.800233121265949" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A72; stroke-opacity:0.3419432424355989; stroke-linecap:round;" d="M -0.9701137570873943 0.5876980057204828 C -0.6514234537680952 0.6126650365002767, 1.7498575500608544 -1.1333862841849234, 1.9965294774437152 0.7054842223465959" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A65; stroke-opacity:0.3480443327301854; stroke-linecap:round;" d="M -1.0842112324420774 0.4166153321177475 C -0.8130459598181059 1.0407597792509173, 1.7168025315256374 -0.6158374038944561, 1.9278979223713673 0.6842831408815923" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A3E; stroke-opacity:0.286793056877283; stroke-linecap:round;" d="M -1.0396688061943569 0.41698376491916184 C -0.821030920864059 1.438085762880918, 1.875646820923643 -0.20717053748938563, 2.0963433967713794 0.7969398147609653" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A57; stroke-opacity:0.45726484128616984; stroke-linecap:round;" d="M -0.9986789480261703 0.5020971238758345 C -0.7274286724619022 1.3047452667946058, 1.846247247546291 -0.4186026617360577, 2.08919379954897 0.7445382894886542" />
<path style="fill:none; stroke-width:0.01; stroke:%231D8A0F; stroke-opacity:0.3438431655832181; stroke-linecap:round;" d="M -0.914234743241108 0.4114350289053709 C -0.6903722224672689 1.0439816285322394, 1.8492185832982124 -0.41040196998542694, 1.9802042920973035 0.8438419935521154" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A1A; stroke-opacity:0.48945735835662296; stroke-linecap:round;" d="M -1.0322938176332777 0.5730136263773379 C -0.7255605597072693 1.0171131107411688, 1.831597861271621 -0.749750957046, 2.069583522120226 0.7710661273572548" />
<path style="fill:none; stroke-width:0.01; stroke:%23348A0F; stroke-opacity:0.3732141560440491; stroke-linecap:round;" d="M -0.9912108558542744 0.5446153023238959 C -0.7027869487827273 1.1743825752382742, 1.819452301443948 -0.5600186715590365, 2.0631432493664645 0.74650517378185" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A63; stroke-opacity:0.48349014962177156; stroke-linecap:round;" d="M -1.091849857168901 0.521814553352759 C -0.8099916975259294 1.0773710014293565, 1.8134081751406155 -0.603218618129318, 2.008549091452807 0.828628374196313" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A58; stroke-opacity:0.250712290727494; stroke-linecap:round;" d="M -1.092292677394322 0.40120260850825734 C -0.7859247397015745 0.6091722027728289, 1.8845046317101548 -0.9468088718139575, 1.9677934572470404 0.834957125195266" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A11; stroke-opacity:0.1461544436746431; stroke-linecap:round;" d="M -1.0234611575264583 0.4314817476403726 C -0.7384693254115966 1.058001610415161, 1.8757006078962757 -0.6681285298233051, 2.097916371787898 0.6968343823398552" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A28; stroke-opacity:0.2787432688876746; stroke-linecap:round;" d="M -1.0165221796408206 0.4703742540192534 C -0.6942440824463657 0.6894635226222207, 1.8748412369091385 -1.082252357660999, 2.097722422643271 0.6720103016895889" />
<path style="fill:none; stroke-width:0.01; stroke:%23478A0F; stroke-opacity:0.34970613523429206; stroke-linecap:round;" d="M -1.0039762115141722 0.42185003586675146 C -0.6920209082980127 0.6367855030097677, 1.9281941395634465 -1.0120225655093402, 2.0742275074797267 0.7516330072668345" />
<path style="fill:none; stroke-width:0.01; stroke:%230F1D8A; stroke-opacity:0.43651010489626113; stroke-linecap:round;" d="M -1.0217536938933927 0.5657105019851901 C -0.7319783904920278 1.0972029555632379, 1.7767912654968305 -0.6110078603731524, 2.005798407418821 0.7798077984009117" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A1D; stroke-opacity:0.24717523068100533; stroke-linecap:round;" d="M -1.028763300247652 0.5396473162386616 C -0.777511158365864 1.6706635685890765, 1.6595039242824847 -0.02430969309825881, 1.9342706492799822 0.7196658842732189" />
<path style="fill:none; stroke-width:0.01; stroke:%23258A0F; stroke-opacity:0.3710458036801019; stroke-linecap:round;" d="M -1.0581203182118857 0.4896784075185572 C -0.778353865103838 1.1282236375447892, 1.68520300691288 -0.5641082859261021, 1.9241073128661998 0.6882184722255863" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A3D; stroke-opacity:0.42615046123658096; stroke-linecap:round;" d="M -0.9800774245413839 0.556588797493355 C -0.6751914348173738 0.7035703694890056, 1.7404051834677545 -0.9420030893503462, 1.9355327281354706 0.762103926655919" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A18; stroke-opacity:0.46337794825929707; stroke-linecap:round;" d="M -0.9828284937413952 0.4304034523263448 C -0.7465714448880627 1.2259616663373534, 1.7516619345759432 -0.3536364426527574, 1.9567504516541643 0.7389092512676431" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A48; stroke-opacity:0.5598111960750585; stroke-linecap:round;" d="M -1.094122600550218 0.41631518923774 C -0.7798006562844745 0.7367188793562538, 1.9249371761411118 -0.9866499274052065, 2.0966233349492662 0.7399618505308864" />
<path style="fill:none; stroke-width:0.01; stroke:%233F8A0F; stroke-opacity:0.37667882427134275; stroke-linecap:round;" d="M -0.9279291554834054 0.4455890012275326 C -0.742446244333699 1.4605358864360631, 1.7536658505156104 -0.03802285488343227, 1.9597631231750077 0.8163816589415929" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A17; stroke-opacity:0.2805651701204694; stroke-linecap:round;" d="M -0.9936305812386871 0.5360769099460814 C -0.6850094862854181 1.0217004925668163, 1.8331238240267762 -0.7699437933916323, 2.092975833254602 0.6904966558346564" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A43; stroke-opacity:0.4388789109247049; stroke-linecap:round;" d="M -0.9780402373558209 0.5685299971363401 C -0.6928222118138211 1.386382137363006, 1.7598756426682853 -0.36538380693813344, 2.0324975386819797 0.7136953788351553" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A47; stroke-opacity:0.28842227154264255; stroke-linecap:round;" d="M -1.0798601281301416 0.42437693630561 C -0.8785448632688411 1.5337068135820477, 1.8119284065353054 -0.09109667737222149, 2.0386076246417866 0.8165397528364402" />
<path style="fill:none; stroke-width:0.01; stroke:%23118A0F; stroke-opacity:0.1590696507013829; stroke-linecap:round;" d="M -1.054209426212067 0.49255020923719794 C -0.7810657245536419 1.1416508094436337, 1.8304419458758887 -0.5404306121726492, 2.037780764319751 0.7908233781846238" />
<path style="fill:none; stroke-width:0.01; stroke:%231B8A0F; stroke-opacity:0.4783375906757754; stroke-linecap:round;" d="M -1.0122930123813227 0.5028201139779113 C -0.749339907437756 1.2118280757953035, 1.718021366374455 -0.43304671977906783, 1.9435101950676104 0.7409632378732818" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A31; stroke-opacity:0.48037343495368656; stroke-linecap:round;" d="M -1.010759994756841 0.5881255053881779 C -0.6880963833066533 0.7575844141012823, 1.9125702539292857 -0.9654025795490279, 2.098071977664128 0.8475766676005851" />
<path style="fill:none; stroke-width:0.01; stroke:%230F658A; stroke-opacity:0.3260537253750355; stroke-linecap:round;" d="M -0.9020672655307242 0.49937245697103466 C -0.6070717603088206 0.916921143436834, 1.8111946157703627 -0.7815372458701525, 2.048412098319596 0.6650368447429325" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A1D; stroke-opacity:0.39678687015598807; stroke-linecap:round;" d="M -1.0073784710597922 0.45756200803758706 C -0.6776419440342993 0.4726886330219271, 1.867239264350755 -1.2382663048085993, 2.0502153559537954 0.6918847621320974" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A23; stroke-opacity:0.1918393189708868; stroke-linecap:round;" d="M -1.078191775844825 0.4573972078743483 C -0.7604753082872231 0.7687071274151661, 1.8216207408968412 -1.0098383981036103, 2.050496408965489 0.6617362295592729" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A44; stroke-opacity:0.37895960533071915; stroke-linecap:round;" d="M -1.0938069112849074 0.595730755465228 C -0.7745150056710091 1.0589634994629078, 1.678115066587985 -0.7852814821505831, 1.9739889129772583 0.6682745642660026" />
<path style="fill:none; stroke-width:0.01; stroke:%23378A0F; stroke-opacity:0.4943018286865427; stroke-linecap:round;" d="M -0.9774679030234877 0.41369558587037003 C -0.7577708076720797 1.1955786237900385, 1.7818721013240348 -0.32466284687685765, 1.9578255615813123 0.7944481446247943" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A67; stroke-opacity:0.5288455622572711; stroke-linecap:round;" d="M -1.0961061272313992 0.5229979872136054 C -0.8003380534504105 1.065808120661758, 1.879465665274002 -0.6787512985014639, 2.0882032491827918 0.8145615877555346" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A62; stroke-opacity:0.3375759823061649; stroke-linecap:round;" d="M -0.9076411980409382 0.5764643141389738 C -0.5958321890873054 0.5185961605478923, 1.7389472127952144 -1.1483048183669444, 1.957758961550449 0.7151569757176952" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A88; stroke-opacity:0.4410785224833894; stroke-linecap:round;" d="M -1.0109857458983753 0.43296565328390546 C -0.7008592920326198 0.5033547545636485, 1.8368004784676377 -0.9904503441787254, 1.906368120993147 0.8332370601782983" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A14; stroke-opacity:0.34306322469636663; stroke-linecap:round;" d="M -1.0243105343893188 0.45311921316793613 C -0.742289337462384 1.093089986760774, 1.8373953460344221 -0.621943115450456, 2.0631251454989257 0.7058097957018058" />
</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:%23DBBDDA; fill-opacity:0.25;" d="M 0.08703755991696915 0.23269597852119828 A 0.43558128694592324 0.43558128694592324 0 0 0 -0.3485437270289541 0.6682772654671215 A 0.43558128694592324 0.43558128694592324 0 0 0 0.5226188468628924 0.6682772654671214 A 0.43558128694592324 0.43558128694592324 0 0 0 -0.3485437270289541 0.6682772654671216 A 0.43558128694592324 0.43558128694592324 0 0 0 0.5226188468628924 0.6682772654671213" />
<path style="fill:%23DBBDD5; fill-opacity:0.25;" d="M 0.2167502047302412 -0.13072073299593234 A 0.7131866595774066 0.7131866595774066 0 0 0 -0.49643645484716536 0.5824659265814743 A 0.7131866595774066 0.7131866595774066 0 0 0 0.9299368643076478 0.582465926581474 A 0.7131866595774066 0.7131866595774066 0 0 0 -0.49643645484716536 0.5824659265814744 A 0.7131866595774066 0.7131866595774066 0 0 0 0.9299368643076478 0.5824659265814739" />
<path style="fill:%23DBBDD9; fill-opacity:0.25;" d="M 0.8374361525874702 -0.5443973250886011 A 0.5567976449740454 0.5567976449740454 0 0 0 0.2806385076134248 0.01240031988544439 A 0.5567976449740454 0.5567976449740454 0 0 0 1.3942337975615156 0.012400319885444185 A 0.5567976449740454 0.5567976449740454 0 0 0 0.2806385076134248 0.012400319885444527 A 0.5567976449740454 0.5567976449740454 0 0 0 1.3942337975615156 0.01240031988544405" />
<path style="fill:%23DBBDD5; fill-opacity:0.25;" d="M 0.41198521904781804 0.1457489340645723 A 0.38808188044778685 0.38808188044778685 0 0 0 0.023903338600031188 0.5338308145123591 A 0.38808188044778685 0.38808188044778685 0 0 0 0.800067099495605 0.533830814512359 A 0.38808188044778685 0.38808188044778685 0 0 0 0.023903338600031188 0.5338308145123593 A 0.38808188044778685 0.38808188044778685 0 0 0 0.800067099495605 0.5338308145123589" />
<path style="fill:%23D8BDDB; fill-opacity:0.25;" d="M 0.38866315849437805 0.38736168074439503 A 0.5739661536601852 0.5739661536601852 0 0 0 -0.18530299516580717 0.9613278344045804 A 0.5739661536601852 0.5739661536601852 0 0 0 0.9626293121545633 0.9613278344045801 A 0.5739661536601852 0.5739661536601852 0 0 0 -0.18530299516580717 0.9613278344045805 A 0.5739661536601852 0.5739661536601852 0 0 0 0.9626293121545633 0.9613278344045799" />
<path style="fill:%23DBBDDB; fill-opacity:0.25;" d="M 0.2957487523890979 0.4491721847877493 A 0.41958512425621514 0.41958512425621514 0 0 0 -0.12383637186711721 0.8687573090439644 A 0.41958512425621514 0.41958512425621514 0 0 0 0.715333876645313 0.8687573090439643 A 0.41958512425621514 0.41958512425621514 0 0 0 -0.12383637186711721 0.8687573090439645 A 0.41958512425621514 0.41958512425621514 0 0 0 0.715333876645313 0.8687573090439642" />
<path style="fill:%23DABDDB; fill-opacity:0.25;" d="M 0.8127318349083613 0.49680503667247566 A 0.43902613022202996 0.43902613022202996 0 0 0 0.37370570468633135 0.9358311668945056 A 0.43902613022202996 0.43902613022202996 0 0 0 1.2517579651303912 0.9358311668945055 A 0.43902613022202996 0.43902613022202996 0 0 0 0.37370570468633135 0.9358311668945057 A 0.43902613022202996 0.43902613022202996 0 0 0 1.2517579651303912 0.9358311668945054" />
<path style="fill:%23D7BDDB; fill-opacity:0.25;" d="M 0.9896686757776892 0.6821755133092686 A 0.2572407227090001 0.2572407227090001 0 0 0 0.7324279530686891 0.9394162360182687 A 0.2572407227090001 0.2572407227090001 0 0 0 1.2469093984866895 0.9394162360182686 A 0.2572407227090001 0.2572407227090001 0 0 0 0.7324279530686891 0.9394162360182688 A 0.2572407227090001 0.2572407227090001 0 0 0 1.2469093984866895 0.9394162360182686" />
<path style="fill:none; stroke-width:0.02; stroke:%23490D59; stroke-opacity:0.36528497730786486; stroke-linecap:round;" d="M -0.13946113286930534 1.0528182604912117 C -1.0297064220032797 -0.0808011620233983, 0.6518185291893963 -0.3135700867832461, 1.0610473032157126 -0.1473846509808821" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D58; stroke-opacity:0.3417295926312699; stroke-linecap:round;" d="M -0.1224633512403433 1.0708708459802587 C -0.7292010315339206 0.21076649991410012, 0.9759651820843225 -0.017226301206535677, 1.0997798745279372 -0.13978766511672178" />
<path style="fill:none; stroke-width:0.02; stroke:%233D0D59; stroke-opacity:0.46728118336216895; stroke-linecap:round;" d="M -0.08650174954563361 1.1438652412054264 C -0.0944706807846174 0.9024858934826132, 1.5852246647842678 0.5900400259761396, 1.0644731270974623 -0.11877315017353805" />
<path style="fill:none; stroke-width:0.05; stroke:%23590D3A; stroke-opacity:0.5092388590748851; stroke-linecap:round;" d="M -0.07731076393264748 1.080196576303173 C -0.15794120616462282 0.7530895539676026, 1.5363186944992826 0.5253114971981097, 1.1363646518080195 -0.12371016400941123" />
<path style="fill:none; stroke-width:0.02; stroke:%23410D59; stroke-opacity:0.2240500326014473; stroke-linecap:round;" d="M -0.12270454410118098 1.076882771593929 C -0.7972424536876421 0.14275774678561032, 0.8234925107517588 -0.05546083483837176, 1.0501727043139408 -0.05908879108164331" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D14; stroke-opacity:0.41028891371947723; stroke-linecap:round;" d="M -0.12993664408801575 1.0954249128568192 C -0.944932341261287 0.057060552103923995, 0.7455671417034052 -0.19716666750914788, 1.0647813998311335 -0.12730513773901328" />
<path style="fill:none; stroke-width:0.02; stroke:%230D0D59; stroke-opacity:0.3587844799384677; stroke-linecap:round;" d="M -0.09456473366350117 1.1017853236996231 C -0.47650262002165766 0.4494760132786319, 1.2109887214427033 0.26057096224109394, 1.1371677346260756 -0.06703770498604995" />
<path style="fill:none; stroke-width:0.05; stroke:%23360D59; stroke-opacity:0.6133221511613351; stroke-linecap:round;" d="M -0.08586863539480818 1.1148699135551479 C -0.8542730695536711 0.149736633041107, 0.769049189662542 -0.1123564344779662, 1.0505320643936584 -0.07360027236819729" />
<path style="fill:none; stroke-width:0.05; stroke:%230D2959; stroke-opacity:0.5577232151682111; stroke-linecap:round;" d="M -0.06370625463159792 1.0894559987989114 C -0.2994763860045101 0.6350259214071303, 1.3414888770258107 0.35964714369858003, 1.0787479137822167 -0.1202542717858781" />
<path style="fill:none; stroke-width:0.05; stroke:%23590D21; stroke-opacity:0.33088394519605335; stroke-linecap:round;" d="M -0.11539053978648801 1.0838419352103061 C -0.6009776878811781 0.33321409200038177, 1.1071570792428371 0.12257984292327262, 1.1196935919195254 -0.1147649048961959" />
<path style="fill:none; stroke-width:0.02; stroke:%23160D59; stroke-opacity:0.47792066319090687; stroke-linecap:round;" d="M -0.08679130249986926 1.0813366225272416 C -0.5693044748903893 0.34006775569795095, 1.0713420781484997 0.14281084237571223, 1.1025449388618163 -0.06588206056481105" />
<path style="fill:none; stroke-width:0.05; stroke:%233C0D59; stroke-opacity:0.45942965471360236; stroke-linecap:round;" d="M -0.1466640323096651 1.110738453950829 C -0.48148899131144496 0.5046260551002706, 1.2509228485914803 0.30474711353042877, 1.1142695724004026 -0.09393943612261028" />
</svg>)
