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:%23C0BDDB; fill-opacity:0.5;" d="M 0.21463176571239706 -0.25065347422905926 A 0.5818202717193544 0.5818202717193544 0 0 0 -0.3671885060069573 0.33116679749029515 A 0.5818202717193544 0.5818202717193544 0 0 0 0.7964520374317514 0.33116679749029493 A 0.5818202717193544 0.5818202717193544 0 0 0 -0.3671885060069573 0.3311667974902953 A 0.5818202717193544 0.5818202717193544 0 0 0 0.7964520374317514 0.3311667974902948" />
<path style="fill:%23BDC3DB; fill-opacity:0.5;" d="M 0.3953614195658879 -0.21897815085333394 A 0.8547612812116336 0.8547612812116336 0 0 0 -0.45939986164574576 0.6357831303582998 A 0.8547612812116336 0.8547612812116336 0 0 0 1.2501227007775215 0.6357831303582995 A 0.8547612812116336 0.8547612812116336 0 0 0 -0.45939986164574576 0.6357831303583 A 0.8547612812116336 0.8547612812116336 0 0 0 1.2501227007775215 0.6357831303582993" />
<path style="fill:%23BDCBDB; fill-opacity:0.5;" d="M 0.7037373509413164 -1.2123089949689114 A 1.6269042771272555 1.6269042771272555 0 0 0 -0.9231669261859391 0.4145952821583442 A 1.6269042771272555 1.6269042771272555 0 0 0 2.330641628068572 0.41459528215834357 A 1.6269042771272555 1.6269042771272555 0 0 0 -0.9231669261859391 0.41459528215834457 A 1.6269042771272555 1.6269042771272555 0 0 0 2.330641628068572 0.4145952821583432" />
<path style="fill:none; stroke-width:0.05; stroke:%23052F61; stroke-opacity:0.3995462491474195; stroke-linecap:round;" d="M -0.1218947705999148 1.1066075511126452 C -0.11623976515321055 0.7563282552410128, 1.6936307571577298 0.8637056900052417, 1.3288994924143434 0.019245041444623717" />
<path style="fill:none; stroke-width:0.02; stroke:%23196105; stroke-opacity:0.43791338069699937; stroke-linecap:round;" d="M -0.3284741019103735 1.0063725141032214 C -0.6735352240575241 0.2369720161740437, 1.1721943349649782 0.27153751982926166, 1.1026479825396582 -0.15973295217833908" />
<path style="fill:none; stroke-width:0.05; stroke:%23166105; stroke-opacity:0.44080208175109525; stroke-linecap:round;" d="M -0.008764340336477633 1.2786379820211748 C -0.5661292009287587 0.6895473106534119, 1.0526844672294082 0.17873607322212226, 0.8968028446793955 -0.15713145835712347" />
<path style="fill:none; stroke-width:0.02; stroke:%23051461; stroke-opacity:0.41138047218522217; stroke-linecap:round;" d="M 0.07669965849437335 0.8524769779220351 C -0.3489782383162031 0.1046435720408263, 0.9451638093872906 0.1123949971319832, 1.069487508333033 0.022274587273907714" />
<path style="fill:none; stroke-width:0.05; stroke:%23052261; stroke-opacity:0.5449369528978687; stroke-linecap:round;" d="M -0.023621325933477183 1.2020545422918107 C -0.6111559033266574 0.5546440804615205, 0.8652261170023685 0.1904133393918675, 0.8679347274996954 -0.02981221441429935" />
<path style="fill:none; stroke-width:0.05; stroke:%23050761; stroke-opacity:0.46062646954712116; stroke-linecap:round;" d="M -0.16562834822936903 0.9866396525198393 C -0.04528206078189523 0.816479369071844, 1.6852894590125689 0.6592084352302979, 1.0536554432344207 -0.2514875491960419" />
<path style="fill:none; stroke-width:0.02; stroke:%23053761; stroke-opacity:0.43062639902499245; stroke-linecap:round;" d="M -0.21453968354511213 1.221453790915361 C -0.6702387399634768 0.404405587894994, 1.1117942415333224 0.34400614709042926, 1.1066097970353952 0.02401749216969054" />
<path style="fill:none; stroke-width:0.05; stroke:%233A6105; stroke-opacity:0.3390640128022331; stroke-linecap:round;" d="M -0.06898175585325825 0.9373971720562058 C -0.3345421115702764 0.19249634129751353, 1.2720929330881063 0.3788398552100452, 1.2777073379145072 0.041613405386666164" />
<path style="fill:none; stroke-width:0.05; stroke:%232E6105; stroke-opacity:0.30493933632717946; stroke-linecap:round;" d="M 0.0719336801602092 0.988509585969172 C -0.5419553542009515 0.3391787733954038, 0.8578615144090457 -0.014287359977209563, 0.9120046433827493 -0.18567368330221287" />
<path style="fill:none; stroke-width:0.02; stroke:%23052861; stroke-opacity:0.14384730697198234; stroke-linecap:round;" d="M -0.058487154727594054 1.1489422782101428 C -0.3722107635189065 0.5784080234400409, 1.4950109419156605 0.2947060682388948, 1.1834131170649873 -0.2739728322417909" />
<path style="fill:none; stroke-width:0.05; stroke:%23052E61; stroke-opacity:0.39818980952700994; stroke-linecap:round;" d="M -0.3044688744703764 1.0868927808086233 C -1.0974933320310294 -0.17735794526299295, 0.9233557064922445 -0.215341403368599, 1.2134442499286375 -0.24772826142296325" />
<path style="fill:none; stroke-width:0.02; stroke:%23050C61; stroke-opacity:0.38131111264808276; stroke-linecap:round;" d="M -0.0952136227690106 1.1475378195437056 C -0.881665988807796 0.04284680899008192, 0.9816680077947038 -0.10681339615611568, 1.2303209223294227 -0.17055547368319493" />
<path style="fill:none; stroke-width:0.05; stroke:%23196105; stroke-opacity:0.32643048422220805; stroke-linecap:round;" d="M 0.08511172303250517 0.9213463313871274 C -0.3453913223070343 0.3356070234576648, 1.1844569219239478 0.04497739568631362, 1.0650291220116856 -0.2888863413221372" />
<path style="fill:none; stroke-width:0.02; stroke:%23054361; stroke-opacity:0.3953246522441248; stroke-linecap:round;" d="M -0.3275110049118246 1.1288763682948522 C -0.486096789364991 0.5030081766826808, 1.4396303229155856 0.6804033296156127, 1.2569501402818792 0.020103699697703176" />
</svg>)
SwiftUI in late 2021
November 2021
I've been reviewing the state of declarative UI frameworks such as Flutter and React Native, now we get to the third (and final) one…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDC1DB; fill-opacity:0.5;" d="M 0.587062332860008 0.4920412437433727 A 0.47427062551590654 0.47427062551590654 0 0 0 0.11279170734410143 0.9663118692592794 A 0.47427062551590654 0.47427062551590654 0 0 0 1.0613329583759146 0.9663118692592791 A 0.47427062551590654 0.47427062551590654 0 0 0 0.11279170734410143 0.9663118692592795 A 0.47427062551590654 0.47427062551590654 0 0 0 1.0613329583759146 0.966311869259279" />
<path style="fill:%23BDBEDB; fill-opacity:0.5;" d="M 0.1321941065602561 0.21241991865227405 A 0.5659158782371614 0.5659158782371614 0 0 0 -0.4337217716769053 0.7783357968894355 A 0.5659158782371614 0.5659158782371614 0 0 0 0.6981099847974175 0.7783357968894353 A 0.5659158782371614 0.5659158782371614 0 0 0 -0.4337217716769053 0.7783357968894357 A 0.5659158782371614 0.5659158782371614 0 0 0 0.6981099847974175 0.7783357968894352" />
<path style="fill:%23C3BDDB; fill-opacity:0.5;" d="M 0.15399727234277516 0.050429141162397995 A 0.497299019733694 0.497299019733694 0 0 0 -0.34330174739091884 0.5477281608960921 A 0.497299019733694 0.497299019733694 0 0 0 0.6512962920764691 0.5477281608960919 A 0.497299019733694 0.497299019733694 0 0 0 -0.34330174739091884 0.5477281608960922 A 0.497299019733694 0.497299019733694 0 0 0 0.6512962920764691 0.5477281608960918" />
<path style="fill:%23BDC0DB; fill-opacity:0.5;" d="M 0.6934862457288721 0.40761559070536024 A 0.4573369648403883 0.4573369648403883 0 0 0 0.23614928088848375 0.8649525555457487 A 0.4573369648403883 0.4573369648403883 0 0 0 1.1508232105692604 0.8649525555457485 A 0.4573369648403883 0.4573369648403883 0 0 0 0.23614928088848375 0.8649525555457488 A 0.4573369648403883 0.4573369648403883 0 0 0 1.1508232105692604 0.8649525555457483" />
<path style="fill:%23BDD8DB; fill-opacity:0.5;" d="M 0.8679572707569011 0.45637742490720623 A 0.2403931276074018 0.2403931276074018 0 0 0 0.6275641431494993 0.6967705525146081 A 0.2403931276074018 0.2403931276074018 0 0 0 1.1083503983643028 0.696770552514608 A 0.2403931276074018 0.2403931276074018 0 0 0 0.6275641431494993 0.6967705525146082 A 0.2403931276074018 0.2403931276074018 0 0 0 1.1083503983643028 0.696770552514608" />
<path style="fill:%23C2BDDB; fill-opacity:0.5;" d="M 0.29070362756076273 0.12770944927200711 A 0.43310194967206017 0.43310194967206017 0 0 0 -0.14239832211129744 0.5608113989440673 A 0.43310194967206017 0.43310194967206017 0 0 0 0.7238055772328229 0.5608113989440672 A 0.43310194967206017 0.43310194967206017 0 0 0 -0.14239832211129744 0.5608113989440674 A 0.43310194967206017 0.43310194967206017 0 0 0 0.7238055772328229 0.5608113989440671" />
<path style="fill:%23C0BDDB; fill-opacity:0.5;" d="M 0.19282765332497154 0.43072503435905685 A 0.5471003854961644 0.5471003854961644 0 0 0 -0.3542727321711928 0.9778254198552213 A 0.5471003854961644 0.5471003854961644 0 0 0 0.7399280388211359 0.9778254198552211 A 0.5471003854961644 0.5471003854961644 0 0 0 -0.3542727321711928 0.9778254198552214 A 0.5471003854961644 0.5471003854961644 0 0 0 0.7399280388211359 0.977825419855221" />
<path style="fill:%23BDC2DB; fill-opacity:0.5;" d="M 0.5838788927455223 -0.38842715597299293 A 0.691530092840319 0.691530092840319 0 0 0 -0.10765120009479667 0.30310293686732614 A 0.691530092840319 0.691530092840319 0 0 0 1.2754089855858413 0.30310293686732587 A 0.691530092840319 0.691530092840319 0 0 0 -0.10765120009479667 0.3031029368673263 A 0.691530092840319 0.691530092840319 0 0 0 1.2754089855858413 0.3031029368673257" />
<path style="fill:none; stroke-width:0.01; stroke:%2329590D; stroke-opacity:0.40651646480535225; stroke-linecap:round;" d="M -0.13499152366408346 1.1143622003509634 C 0.15521163128568383 1.3780343855660786, 1.504746078888732 0.30906927866291856, 1.0503826569322128 -0.13416400162455266" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1559; stroke-opacity:0.3889143748872759; stroke-linecap:round;" d="M -0.1358647859329076 1.0550971126727995 C -0.18453988893846512 0.9918539511020249, 1.156900538708532 0.038948434145841815, 1.05785634483846 -0.07738741575185704" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1E59; stroke-opacity:0.27541736703505104; stroke-linecap:round;" d="M -0.14086294821013337 1.1341327060826623 C -0.0052789900340701745 1.2635165259463668, 1.3877542189842254 0.2654559490843449, 1.0975705913949367 -0.05032869239987982" />
<path style="fill:none; stroke-width:0.01; stroke:%2321590D; stroke-opacity:0.3219775393790953; stroke-linecap:round;" d="M -0.052499785176237206 1.0898987831193723 C 0.12070354475458056 1.2517027263452944, 1.4372681362338537 0.2646699809957804, 1.1117832104874148 -0.07286562549385017" />
<path style="fill:none; stroke-width:0.01; stroke:%2317590D; stroke-opacity:0.2699414369750216; stroke-linecap:round;" d="M -0.0888267513974008 1.0694272965266507 C 0.2890825127191974 1.445125636003643, 1.5917408471928658 0.491795969171619, 1.0664397430417243 -0.05801029237222262" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3059; stroke-opacity:0.2619753355589592; stroke-linecap:round;" d="M -0.07153653360096834 1.1043497263195934 C 0.002400000027311555 1.164155663488247, 1.2852851845226905 0.16102635931757237, 1.057134325212536 -0.06960295158053023" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3659; stroke-opacity:0.48873691660362056; stroke-linecap:round;" d="M -0.06554129787543395 1.1137391350836932 C -0.2040871419341208 0.9746992494953624, 1.082054388908499 -0.07478892492711003, 1.0598184899139977 -0.10656853662755877" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1D59; stroke-opacity:0.45757078188243033; stroke-linecap:round;" d="M -0.08719873318596784 1.080542105989499 C 0.1535346693955395 1.3081574377843974, 1.5079842570426367 0.2861856859720937, 1.109665850125317 -0.12215283296834195" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3759; stroke-opacity:0.5806636799285199; stroke-linecap:round;" d="M -0.06295859652697877 1.1272392786776086 C -0.05082522963449032 1.127165207310783, 1.244114394473709 0.07935548514236623, 1.0713480341963664 -0.09264690923222697" />
<path style="fill:none; stroke-width:0.01; stroke:%231F590D; stroke-opacity:0.36790386784350976; stroke-linecap:round;" d="M -0.05559078383590047 1.1262867189064074 C -0.08387375033040312 1.08570321856534, 1.2737293836130235 0.07760910397832776, 1.146352095404718 -0.0631136881057798" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4159; stroke-opacity:0.4337025447774546; stroke-linecap:round;" d="M -0.14281006058806453 1.09633591993514 C -0.1261409333734571 1.101421510963478, 1.2544335129780892 0.10715808381326258, 1.0838243784031736 -0.08261001502880948" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3C59; stroke-opacity:0.3907929811583224; stroke-linecap:round;" d="M -0.11200343322718406 1.0684116470823204 C -0.047957851658428474 1.12139464691588, 1.3344224066094 0.10306808909020893, 1.1130267665442652 -0.1346116970260266" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3559; stroke-opacity:0.4556962905054024; stroke-linecap:round;" d="M -0.12213444757120345 1.1289445827194056 C -0.008524425981120243 1.2300784071341428, 1.3190182948275848 0.22642950705495823, 1.0506747897417044 -0.05181757922340139" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1C59; stroke-opacity:0.41074443351869444; stroke-linecap:round;" d="M -0.1024048179227889 1.0966145024631149 C 0.12899786684989356 1.3295451145826587, 1.510165702301045 0.35399236084339836, 1.1274546044709057 -0.06389123477497395" />
<path style="fill:none; stroke-width:0.01; stroke:%232D590D; stroke-opacity:0.23755109734692495; stroke-linecap:round;" d="M -0.13717059198356202 1.060834133135285 C 0.36346483512629624 1.5968327135432248, 1.7426010488781398 0.6563482409562, 1.095620837595147 -0.06466710205566203" />
<path style="fill:none; stroke-width:0.01; stroke:%2330590D; stroke-opacity:0.4594037121294681; stroke-linecap:round;" d="M -0.11165645020210968 1.0941547065664166 C 0.3279268085663476 1.533396072036207, 1.6932687951042078 0.5362955145918958, 1.0994976965066539 -0.08545281069051974" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2959; stroke-opacity:0.4124406613958661; stroke-linecap:round;" d="M -0.10604731717327334 1.1261832070297577 C 0.3812114911367157 1.5693963191057017, 1.7370418499826217 0.4773119355586446, 1.0823009378868873 -0.14611891410776726" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3059; stroke-opacity:0.4632539299807747; stroke-linecap:round;" d="M -0.1479683462929471 1.1284892022679986 C -0.20388276736969835 1.0546480587547342, 1.2385841515581237 0.0654863657764756, 1.1406597149871902 -0.05413051122325492" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2559; stroke-opacity:0.26933079305180396; stroke-linecap:round;" d="M -0.09627398961501016 1.1389962107758205 C -0.09751083004543026 1.1262621649572147, 1.2243091724253747 0.05190948292783304, 1.060903029056846 -0.11095704905966558" />
<path style="fill:none; stroke-width:0.01; stroke:%2321590D; stroke-opacity:0.38091462728775777; stroke-linecap:round;" d="M -0.06720123439624628 1.0968245259639988 C -0.1779370570265265 0.9789177621107702, 1.1438629710251695 -0.05641070510367918, 1.0954569937710952 -0.11449136745805283" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2959; stroke-opacity:0.24515816543018293; stroke-linecap:round;" d="M -0.09268223990047574 1.0815128530616913 C -0.30976186435939035 0.8403884039303624, 1.0501184764282039 -0.12470275227347316, 1.1175769493800467 -0.06563499085621088" />
<path style="fill:none; stroke-width:0.01; stroke:%2315590D; stroke-opacity:0.5871109740825863; stroke-linecap:round;" d="M -0.1382565386476576 1.076463313745737 C -0.43473481547730974 0.7577926665840312, 0.9903445849726923 -0.2771260267661536, 1.1267075612245279 -0.14900550489761882" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1B59; stroke-opacity:0.5630873802460069; stroke-linecap:round;" d="M -0.08044396480899774 1.134658725630037 C 0.02696536965529639 1.2255008340752254, 1.4226803740308696 0.13245534256554947, 1.147255199148596 -0.1442171802992915" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2C59; stroke-opacity:0.4189984870660297; stroke-linecap:round;" d="M -0.14364044121754752 1.1407791566326533 C -0.1602467530430195 1.1129102395707424, 1.20133553910925 0.04388638216517404, 1.0536530022850272 -0.10950351386656466" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1259; stroke-opacity:0.43854064491048667; stroke-linecap:round;" d="M -0.08536027105291477 1.1412261743680885 C 0.09264540398016774 1.2998908032273624, 1.4649258071907512 0.22418916188299576, 1.1215831380083339 -0.11717564283910882" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3259; stroke-opacity:0.5257287707156222; stroke-linecap:round;" d="M -0.11856340099198891 1.1153864646025005 C -0.015725441881100255 1.2020247194852525, 1.3305884974869446 0.14488789765247734, 1.0652897835586606 -0.12097558627122708" />
<path style="fill:none; stroke-width:0.01; stroke:%2337590D; stroke-opacity:0.43828739006631945; stroke-linecap:round;" d="M -0.07884562275859013 1.0691688435763556 C -0.26943943494355355 0.8742713382255092, 1.037257390851495 -0.14652304774273145, 1.0709089843794537 -0.12562909596487715" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2A59; stroke-opacity:0.29129021618884876; stroke-linecap:round;" d="M -0.057251051667503806 1.0789002493006998 C -0.1218052952138512 1.0066628703235692, 1.143370264693508 0.001817678200598527, 1.053645139130024 -0.09425477489307323" />
<path style="fill:none; stroke-width:0.01; stroke:%233A590D; stroke-opacity:0.28144611165145555; stroke-linecap:round;" d="M -0.14368476990949006 1.1460509203955425 C -0.271543458035019 1.0045290356087557, 1.132059751376898 -0.038505641007310576, 1.0988735264213416 -0.08442548584491677" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2859; stroke-opacity:0.4534867622397718; stroke-linecap:round;" d="M -0.05167927973015407 1.1226198750957832 C 0.37710730610008436 1.5037167394450246, 1.6851132194694438 0.4284669517835792, 1.0916951270714546 -0.1262742521809311" />
<path style="fill:none; stroke-width:0.01; stroke:%2316590D; stroke-opacity:0.5268378735503615; stroke-linecap:round;" d="M -0.07190034005273815 1.1176566076780574 C 0.5048726037238355 1.6414445359198397, 1.7921852041921222 0.5973563389897596, 1.0553800229884085 -0.09747008423309836" />
<path style="fill:none; stroke-width:0.01; stroke:%231E590D; stroke-opacity:0.3044444536257758; stroke-linecap:round;" d="M -0.09888540373093066 1.0546009472652011 C 0.15720885715070032 1.311969601670834, 1.4930929267974573 0.36043283420745686, 1.0895277938394292 -0.07574525598901755" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2259; stroke-opacity:0.463141501394833; stroke-linecap:round;" d="M -0.14811265145309072 1.1436933775285971 C -0.42928978025851283 0.8686468583638469, 0.9505349750711157 -0.24139111023938514, 1.0614596138821804 -0.14976538953472088" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2359; stroke-opacity:0.3682690793918285; stroke-linecap:round;" d="M -0.14962921328057355 1.1333987755881365 C -0.05909201167572098 1.2129602539066235, 1.374921415625244 0.1573221157516863, 1.1212590229482344 -0.11384197078840519" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3559; stroke-opacity:0.43783698495452783; stroke-linecap:round;" d="M -0.06547235083527214 1.0841795942106338 C 0.047179540180934176 1.1835072743114758, 1.3684964844729248 0.1759625327411799, 1.1006241045914438 -0.09956190213910848" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1659; stroke-opacity:0.5170561858063231; stroke-linecap:round;" d="M -0.10590625081583697 1.1282797526817556 C -0.13616656699797525 1.0851883241323097, 1.2445904176858797 0.06994467589659203, 1.1179514613574277 -0.07146264316422045" />
<path style="fill:none; stroke-width:0.01; stroke:%2322590D; stroke-opacity:0.6037680236787286; stroke-linecap:round;" d="M -0.13066061209239047 1.0994544835550806 C 0.03570665717171173 1.2558813047986392, 1.4477162630446505 0.2125546788173973, 1.120178987099401 -0.13249595077763726" />
<path style="fill:none; stroke-width:0.01; stroke:%2313590D; stroke-opacity:0.339413778932679; stroke-linecap:round;" d="M -0.13492140045024203 1.0537351760895124 C -0.310570951723801 0.8583689899775095, 1.0649487614085738 -0.13000594236073543, 1.0875388397934527 -0.118668529599671" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2B59; stroke-opacity:0.3063495864655552; stroke-linecap:round;" d="M -0.07392890849440925 1.073108886195051 C -0.1839707704621299 0.9556068093273932, 1.0939954800089289 -0.03917345653349602, 1.0510490412665467 -0.091884730629073" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2659; stroke-opacity:0.41384550370129336; stroke-linecap:round;" d="M -0.13866153661393688 1.1273213717209436 C -0.42025454904359294 0.8327512398851095, 1.0034052046934874 -0.2344217620309531, 1.1203504162522409 -0.12987957203043565" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2059; stroke-opacity:0.39935065106997825; stroke-linecap:round;" d="M -0.09907169205970745 1.0525907806012365 C 0.05293270202118794 1.1951674248654975, 1.3656191110361138 0.22426128040193016, 1.0636451053712006 -0.09366137261009931" />
<path style="fill:none; stroke-width:0.01; stroke:%2323590D; stroke-opacity:0.23586916639756436; stroke-linecap:round;" d="M -0.0964169353611681 1.0816003635214273 C 0.5173511844670423 1.7005395168462214, 1.8964915954024106 0.6950030696986068, 1.12720870454167 -0.10830388178135883" />
<path style="fill:none; stroke-width:0.01; stroke:%2331590D; stroke-opacity:0.42001906908873493; stroke-linecap:round;" d="M -0.07400886320702191 1.092522386516347 C 0.2361463896629905 1.3854689142049512, 1.5755664844300958 0.36139544268530366, 1.1076800340405493 -0.11013467826065877" />
<path style="fill:none; stroke-width:0.01; stroke:%2315590D; stroke-opacity:0.29058623487944435; stroke-linecap:round;" d="M -0.13308650432672364 1.079966409806885 C -0.26934703402733035 0.9215656623548931, 1.1696823927262614 -0.08625218958306174, 1.1495085539161947 -0.1206386169685522" />
<path style="fill:none; stroke-width:0.01; stroke:%2325590D; stroke-opacity:0.3510058358974758; stroke-linecap:round;" d="M -0.12627946545624896 1.1033384931047088 C -0.1507024981079077 1.0659161207118237, 1.2491644758705083 0.041303360904221154, 1.1151767177512577 -0.10837327029939736" />
<path style="fill:none; stroke-width:0.01; stroke:%232A590D; stroke-opacity:0.27915054883437157; stroke-linecap:round;" d="M -0.10121388264103184 1.0583694025536725 C -0.20255948969536336 0.939238504703615, 1.1752594102352691 -0.039076648279148474, 1.124940646897107 -0.10439907365079128" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3C59; stroke-opacity:0.42958266061084094; stroke-linecap:round;" d="M -0.05993816381024278 1.124654221258875 C 0.23351987571450072 1.4046550471696593, 1.5883494459431002 0.3821031497343885, 1.1372208286089345 -0.07866863408136335" />
<path style="fill:none; stroke-width:0.01; stroke:%2310590D; stroke-opacity:0.2945528499579657; stroke-linecap:round;" d="M -0.12551990043314332 1.149336758068892 C 0.07670047005451686 1.3317844100059268, 1.4520387416847023 0.2570435013398965, 1.0845862717682673 -0.10854496696372795" />
</svg>)
Flutter in late 2021
October 2021
It had been some time since I'd used Flutter and I wanted to take another look. I've mostly been working in React and React Native for the…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBBDC3; fill-opacity:0.5;" d="M 0.9574120480311807 0.4645626032138906 A 0.40493146554617215 0.40493146554617215 0 0 0 0.5524805824850085 0.8694940687600627 A 0.40493146554617215 0.40493146554617215 0 0 0 1.362343513577353 0.8694940687600626 A 0.40493146554617215 0.40493146554617215 0 0 0 0.5524805824850085 0.8694940687600629 A 0.40493146554617215 0.40493146554617215 0 0 0 1.362343513577353 0.8694940687600625" />
<path style="fill:%23DBBEBD; fill-opacity:0.5;" d="M 0.15452068435151822 -0.024739530074953442 A 0.4910310776852116 0.4910310776852116 0 0 0 -0.33651039333369337 0.4662915476102582 A 0.4910310776852116 0.4910310776852116 0 0 0 0.6455517620367298 0.46629154761025804 A 0.4910310776852116 0.4910310776852116 0 0 0 -0.33651039333369337 0.4662915476102583 A 0.4910310776852116 0.4910310776852116 0 0 0 0.6455517620367298 0.46629154761025793" />
<path style="fill:%23DBC4BD; fill-opacity:0.5;" d="M 0.16953157100498328 0.4028554203203135 A 0.23823316148905682 0.23823316148905682 0 0 0 -0.06870159048407354 0.6410885818093703 A 0.23823316148905682 0.23823316148905682 0 0 0 0.4077647324940401 0.6410885818093702 A 0.23823316148905682 0.23823316148905682 0 0 0 -0.06870159048407354 0.6410885818093705 A 0.23823316148905682 0.23823316148905682 0 0 0 0.4077647324940401 0.6410885818093702" />
<path style="fill:%23DBBDBD; fill-opacity:0.5;" d="M 0.6327917040512689 -0.4383949555140672 A 0.4558632149069262 0.4558632149069262 0 0 0 0.17692848914434273 0.017468259392859065 A 0.4558632149069262 0.4558632149069262 0 0 0 1.088654918958195 0.017468259392858898 A 0.4558632149069262 0.4558632149069262 0 0 0 0.17692848914434273 0.017468259392859176 A 0.4558632149069262 0.4558632149069262 0 0 0 1.088654918958195 0.017468259392858787" />
<path style="fill:%23DBC9BD; fill-opacity:0.5;" d="M 0.0991678264700071 -0.19573408747803922 A 0.3371039162201698 0.3371039162201698 0 0 0 -0.23793608975016267 0.14136982874213058 A 0.3371039162201698 0.3371039162201698 0 0 0 0.4362717426901769 0.14136982874213047 A 0.3371039162201698 0.3371039162201698 0 0 0 -0.23793608975016267 0.14136982874213067 A 0.3371039162201698 0.3371039162201698 0 0 0 0.4362717426901769 0.1413698287421304" />
<path style="fill:%23DBBDC4; fill-opacity:0.5;" d="M 0.5191873781745262 -0.19767456375210185 A 0.3071026261786087 0.3071026261786087 0 0 0 0.21208475199591753 0.10942806242650686 A 0.3071026261786087 0.3071026261786087 0 0 0 0.8262900043531349 0.10942806242650675 A 0.3071026261786087 0.3071026261786087 0 0 0 0.21208475199591753 0.10942806242650693 A 0.3071026261786087 0.3071026261786087 0 0 0 0.8262900043531349 0.10942806242650667" />
<path style="fill:%23DBBDC5; fill-opacity:0.5;" d="M 0.5069663034085357 0.16803669933914833 A 0.211908751986555 0.211908751986555 0 0 0 0.29505755142198065 0.37994545132570334 A 0.211908751986555 0.211908751986555 0 0 0 0.7188750553950907 0.3799454513257033 A 0.211908751986555 0.211908751986555 0 0 0 0.29505755142198065 0.3799454513257034 A 0.211908751986555 0.211908751986555 0 0 0 0.7188750553950907 0.37994545132570323" />
<path style="fill:%23DBC6BD; fill-opacity:0.5;" d="M 0.9845500788165527 0.26882191968841607 A 0.43851661608791903 0.43851661608791903 0 0 0 0.5460334627286336 0.7073385357763351 A 0.43851661608791903 0.43851661608791903 0 0 0 1.4230666949044717 0.707338535776335 A 0.43851661608791903 0.43851661608791903 0 0 0 0.5460334627286336 0.7073385357763352 A 0.43851661608791903 0.43851661608791903 0 0 0 1.4230666949044717 0.7073385357763349" />
<path style="fill:%23DBC1BD; fill-opacity:0.5;" d="M 0.904763402369064 -0.13586668249393802 A 0.3879875409135774 0.3879875409135774 0 0 0 0.5167758614554867 0.25212085841963944 A 0.3879875409135774 0.3879875409135774 0 0 0 1.2927509432826414 0.25212085841963927 A 0.3879875409135774 0.3879875409135774 0 0 0 0.5167758614554867 0.25212085841963955 A 0.3879875409135774 0.3879875409135774 0 0 0 1.2927509432826414 0.2521208584196392" />
<path style="fill:%23DBD8BD; fill-opacity:0.5;" d="M 0.17388899953600334 -0.016882297893202308 A 0.21239879909220497 0.21239879909220497 0 0 0 -0.038509799556201624 0.19551650119900268 A 0.21239879909220497 0.21239879909220497 0 0 0 0.3862877986282083 0.1955165011990026 A 0.21239879909220497 0.21239879909220497 0 0 0 -0.038509799556201624 0.19551650119900274 A 0.21239879909220497 0.21239879909220497 0 0 0 0.3862877986282083 0.19551650119900255" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1B59; stroke-opacity:0.588101319479578; stroke-linecap:round;" d="M -1.0171274113866737 0.5178129672920355 C -0.9956532406217121 0.7616283264527584, 1.852708160293326 1.6228998549775075, 1.9518196587043297 0.7185730506454822" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D23; stroke-opacity:0.29526023464216894; stroke-linecap:round;" d="M -1.0420216684465737 0.45868377361965784 C -0.9507459169355887 -0.0336869528183219, 1.906987625677382 0.9531354602950315, 1.9642068007375142 0.7796975843276" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D25; stroke-opacity:0.2724887342334451; stroke-linecap:round;" d="M -0.9939853074094716 0.4906334649900593 C -0.990769549770896 0.8581928130273936, 1.9021967620296394 1.8272048218333095, 2.042586062981757 0.7863912492379205" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D23; stroke-opacity:0.4157256523586849; stroke-linecap:round;" d="M -1.047747310996031 0.49808489318128396 C -1.016869577254274 0.6046773949269648, 1.9251006300676679 1.533539680884531, 2.027579179907161 0.7437285810572113" />
<path style="fill:none; stroke-width:0.01; stroke:%230D4759; stroke-opacity:0.6021056984848888; stroke-linecap:round;" d="M -1.0097087540821044 0.47184325203554006 C -0.9833504741598862 0.6028674714368578, 1.8665392230928646 1.538736427220488, 1.9774520493469818 0.744959204267946" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2B; stroke-opacity:0.4114068834104874; stroke-linecap:round;" d="M -1.0276994209324386 0.45080051661189974 C -1.0354155352684673 0.8729356280437528, 1.8351509774342478 1.8760715896466926, 1.9946927568863124 0.7848355219201879" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3559; stroke-opacity:0.17575068985448433; stroke-linecap:round;" d="M -1.0180278890409173 0.4936746203441516 C -0.9766997796724651 0.4514418622587129, 1.8779526199771799 1.3381023895357327, 1.9627421151465252 0.7177670021714495" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D21; stroke-opacity:0.4132923143343038; stroke-linecap:round;" d="M -0.9786420357009835 0.4543864255222754 C -0.8931671452704086 -0.007548073166886771, 1.9095124742931073 0.9485784116782375, 1.9670520798111581 0.757828483873002" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2859; stroke-opacity:0.34002932362054983; stroke-linecap:round;" d="M -0.9541045326922889 0.5356859801700913 C -0.9196543477620543 0.597702242818515, 1.9580406796088643 1.4489179443620146, 2.041174996514341 0.7200697729101603" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2F59; stroke-opacity:0.5241305828057354; stroke-linecap:round;" d="M -1.0182718606712091 0.4508490531396377 C -0.9255652991137939 -0.051084721689120705, 1.9214418443141206 0.9354016293292602, 1.97742791299207 0.7739401572401831" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2759; stroke-opacity:0.5233660583602887; stroke-linecap:round;" d="M -0.9957045100959302 0.5308178602872486 C -0.9870268629484416 0.8757377915898061, 1.9050563946767325 1.8128355742033158, 2.0328512874758187 0.7956717902364574" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D22; stroke-opacity:0.43303586844475417; stroke-linecap:round;" d="M -1.0050196260928226 0.4790305069021991 C -0.9835190028809412 0.6442545375846889, 1.8939022125632516 1.6340400698634272, 2.0210596696437904 0.7985181387611565" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2F; stroke-opacity:0.4688337716068264; stroke-linecap:round;" d="M -1.004616660078043 0.524406370251295 C -0.9606313029919299 0.44122273655732863, 1.8749783419174348 1.3166864695905383, 1.9550850733396532 0.7418562618671335" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D23; stroke-opacity:0.4999266456637789; stroke-linecap:round;" d="M -1.0231580404883478 0.4900584245688176 C -0.9823833407371056 0.46636699302335916, 1.867928377346356 1.4231958048078506, 1.9691131276044005 0.7835060722092011" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D28; stroke-opacity:0.4352641052515142; stroke-linecap:round;" d="M -1.0232883685578316 0.482597828136115 C -1.0160672442533145 0.7957571554782594, 1.896747217499649 1.788354056567765, 2.037913510735051 0.7968902888529125" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D16; stroke-opacity:0.5715859711644979; stroke-linecap:round;" d="M -1.0155324272309254 0.5245392401004277 C -0.971526939993305 0.4363828410663685, 1.8968036656918414 1.29812071405764, 1.9729800713695254 0.721276808872962" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D22; stroke-opacity:0.3180638203003355; stroke-linecap:round;" d="M -1.0355730797479483 0.481788426313957 C -1.0302631466366439 0.8075610549636514, 1.836822793156085 1.7845552680663006, 1.9775662862792958 0.7911274627936062" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D31; stroke-opacity:0.35383787693090224; stroke-linecap:round;" d="M -1.0483521167394185 0.5146230722469761 C -1.0433610368229633 0.9096804478299565, 1.8837633206120161 1.8562063729193117, 2.0164665269470023 0.7808091200923252" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D20; stroke-opacity:0.49190553693466305; stroke-linecap:round;" d="M -0.9945812118513568 0.5252607613702673 C -1.0104395144883018 1.129069379636606, 1.8207626248274933 2.0521322765810757, 1.9714966874224271 0.7900862903916754" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D10; stroke-opacity:0.5548637032502292; stroke-linecap:round;" d="M -0.9747586692699208 0.4826735410271509 C -0.9461802047415878 0.6008460580122115, 1.8665350604783035 1.4783258478189658, 1.9630834637785188 0.7072209658747778" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2C59; stroke-opacity:0.41357316201071365; stroke-linecap:round;" d="M -0.9844009871426067 0.45746526457905995 C -1.0184848521245466 1.1036603068598307, 1.793309499436502 2.0902616347386993, 1.9770081347400856 0.7885629366834492" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2E; stroke-opacity:0.4337216908381747; stroke-linecap:round;" d="M -1.0326931713936809 0.5309211358097199 C -0.9862389674105527 0.4395165676300294, 1.9618316561467286 1.3606482317645003, 2.0468452822605667 0.7676633091066657" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D29; stroke-opacity:0.3910439551900179; stroke-linecap:round;" d="M -0.9838485932235947 0.529405165970935 C -0.9240418020449246 0.24725080810419064, 1.8881323882483247 1.1311552927327986, 1.9549066202025538 0.7603350472307938" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D24; stroke-opacity:0.585714951770405; stroke-linecap:round;" d="M -0.9557289855720597 0.5492764498033027 C -0.9344207761101928 0.8040407086769721, 1.8846339521892634 1.6442029797611355, 1.9799248493386101 0.736035022498366" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D29; stroke-opacity:0.5184857994119196; stroke-linecap:round;" d="M -0.9932602732197866 0.45280877748412574 C -0.8887411980477684 -0.18966827173651973, 1.996351141387116 0.7913459448430624, 2.0383283917561785 0.7620285481753762" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D35; stroke-opacity:0.3090302837758017; stroke-linecap:round;" d="M -1.0364851707381502 0.5270311573240375 C -0.9776064989802582 0.280691185371768, 1.9578323442272727 1.2062377123760375, 2.031732840603355 0.7709077874894016" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2E59; stroke-opacity:0.4208738566794262; stroke-linecap:round;" d="M -0.9816505972667914 0.5266903590575536 C -0.9574780132594967 0.7532443950849744, 1.9042310762419348 1.5988056353955669, 1.9967822260781805 0.70914758931166" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D35; stroke-opacity:0.374762432246895; stroke-linecap:round;" d="M -0.953838316290136 0.517370799886886 C -0.9058767786484956 0.3726661308989021, 1.955567410314384 1.238702338803689, 2.028926726983167 0.7198411843344525" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D16; stroke-opacity:0.4294694650150647; stroke-linecap:round;" d="M -0.9783397359406727 0.49739939410185396 C -0.9622825538425914 0.7709095536503849, 1.888438338633192 1.6741697356397018, 2.0023203929880746 0.7385502990965642" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3059; stroke-opacity:0.4210205652341747; stroke-linecap:round;" d="M -1.0221838128190348 0.5453875337083465 C -0.9754736860773179 0.43902680096720464, 1.8727004848520614 1.3402884070345884, 1.955546352960598 0.7851616989689436" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1459; stroke-opacity:0.31638965517616; stroke-linecap:round;" d="M -0.9869059208668821 0.5144285889177713 C -0.9793200797653185 0.8700536025405812, 1.8559593390034743 1.783197190563507, 1.9809216127063127 0.7686732069652992" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D25; stroke-opacity:0.4941073093127043; stroke-linecap:round;" d="M -1.0092629028915454 0.5401446405603485 C -1.026196080977861 1.2408440224887298, 1.84458625365391 2.144499697445185, 1.991036659450247 0.7771833039182361" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1C; stroke-opacity:0.5289783314488947; stroke-linecap:round;" d="M -0.9536008093131014 0.47789734537926876 C -0.9107108267300164 0.42066536188276166, 1.877094069867904 1.3426437188261282, 1.9699414022625272 0.7513953696917182" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1C; stroke-opacity:0.41570507098297965; stroke-linecap:round;" d="M -0.983033936086673 0.4538712214498039 C -0.9336013316099776 0.34621936131520614, 1.9372057363476953 1.3136836133563659, 2.031595268687702 0.7530886309277803" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D2A; stroke-opacity:0.46330925990626515; stroke-linecap:round;" d="M -1.0268649763159392 0.5103460553695587 C -0.983124695857152 0.43007004647162794, 1.9122004843108273 1.2963869226179838, 1.9889815213639888 0.7054940280529409" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D3B; stroke-opacity:0.4280989929756524; stroke-linecap:round;" d="M -1.0097630080714368 0.4721564389853059 C -0.9861775429772016 0.6422579471763599, 1.885940820802198 1.5751791673786832, 1.998399751332998 0.7374161449244897" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1B; stroke-opacity:0.5123196860119893; stroke-linecap:round;" d="M -1.026830730544244 0.5324641948263817 C -0.9467164173417218 0.05982264508085966, 1.9516682349006467 0.9980154474533263, 2.0081115533589333 0.7969725314703952" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3359; stroke-opacity:0.43554837122081014; stroke-linecap:round;" d="M -1.0473626525594304 0.5008194393956682 C -1.054459618119881 1.1105786273964635, 1.866860926304605 2.019551984800853, 2.003380834620503 0.731710026420785" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D20; stroke-opacity:0.4161041300248766; stroke-linecap:round;" d="M -0.9720472165155045 0.4873730249127773 C -0.9807704678082005 0.9961179209488225, 1.8442418626599142 1.925151812377743, 1.9893371039824461 0.7594052748930693" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2959; stroke-opacity:0.4903685979355421; stroke-linecap:round;" d="M -0.9731987533157369 0.5444466603072355 C -0.9327826061055653 0.5126075627136486, 1.9449375498549526 1.3766920259690771, 2.024990371760524 0.7413659989596232" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2C59; stroke-opacity:0.4776467895208867; stroke-linecap:round;" d="M -0.9829734139522956 0.4903054996630059 C -0.9131992419401816 0.059597474849757415, 1.9189922008895435 0.9360981284881542, 1.9736296017902293 0.7095322589070868" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1D; stroke-opacity:0.5740801204820797; stroke-linecap:round;" d="M -1.0285998219000176 0.5381306703740876 C -1.0364655025524605 1.302351600696597, 1.8296319355741246 2.145734125180981, 1.9536211856710157 0.7174808012450602" />
<path style="fill:none; stroke-width:0.01; stroke:%230D1859; stroke-opacity:0.39642417047995; stroke-linecap:round;" d="M -1.001995153182994 0.549592927520562 C -0.9595685733473589 0.4859649451779038, 1.8837962162288213 1.3548634256961065, 1.9637924188163505 0.7589060274992032" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1B; stroke-opacity:0.5261706012361709; stroke-linecap:round;" d="M -1.043822672653762 0.514969983455468 C -1.0088280644434726 0.5736062318055355, 1.9249160153315805 1.470769456906209, 2.0163803333355053 0.7315657826355717" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D39; stroke-opacity:0.47776660813048255; stroke-linecap:round;" d="M -0.9988335509046926 0.547263143375027 C -0.9724002268006987 0.7464538348967195, 1.9063394548812784 1.5910366448111084, 1.9959769817902466 0.7249486828901753" />
</svg>)
Generative Animated Videos with Remotion (and Solandra)
October 2021
Getting started Remotion is a React powered library for creating videos. Let's try it out with Solandra, a library for creating 2D graphics…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDBDDB; fill-opacity:0.5;" d="M 0.8906461025065271 -0.3415797404536608 A 0.9610241980075765 0.9610241980075765 0 0 0 -0.07037809550104945 0.6194444575539159 A 0.9610241980075765 0.9610241980075765 0 0 0 1.8516703005141038 0.6194444575539155 A 0.9610241980075765 0.9610241980075765 0 0 0 -0.07037809550104945 0.6194444575539161 A 0.9610241980075765 0.9610241980075765 0 0 0 1.8516703005141038 0.6194444575539153" />
<path style="fill:%23BDC6DB; fill-opacity:0.5;" d="M 0.3403045698168117 -0.11926392180142464 A 0.3720734048325941 0.3720734048325941 0 0 0 -0.031768835015782426 0.2528094830311695 A 0.3720734048325941 0.3720734048325941 0 0 0 0.7123779746494058 0.25280948303116935 A 0.3720734048325941 0.3720734048325941 0 0 0 -0.031768835015782426 0.25280948303116957 A 0.3720734048325941 0.3720734048325941 0 0 0 0.7123779746494058 0.2528094830311693" />
<path style="fill:%23CABDDB; fill-opacity:0.5;" d="M 0.1448765430833756 0.1613737097752973 A 0.2656312921052467 0.2656312921052467 0 0 0 -0.12075474902187111 0.4270050018805441 A 0.2656312921052467 0.2656312921052467 0 0 0 0.4105078351886223 0.42700500188054397 A 0.2656312921052467 0.2656312921052467 0 0 0 -0.12075474902187111 0.42700500188054413 A 0.2656312921052467 0.2656312921052467 0 0 0 0.4105078351886223 0.4270050018805439" />
<path style="fill:%23BDBDDB; fill-opacity:0.5;" d="M 0.36715179645479634 0.4208934624980878 A 0.435099779910491 0.435099779910491 0 0 0 -0.06794798345569464 0.8559932424085788 A 0.435099779910491 0.435099779910491 0 0 0 0.8022515763652873 0.8559932424085787 A 0.435099779910491 0.435099779910491 0 0 0 -0.06794798345569464 0.8559932424085789 A 0.435099779910491 0.435099779910491 0 0 0 0.8022515763652873 0.8559932424085785" />
<path style="fill:%23C0BDDB; fill-opacity:0.5;" d="M 0.7826779345379428 0.40925165119457196 A 0.5558572550239842 0.5558572550239842 0 0 0 0.22682067951395857 0.9651089062185563 A 0.5558572550239842 0.5558572550239842 0 0 0 1.3385351895619269 0.965108906218556 A 0.5558572550239842 0.5558572550239842 0 0 0 0.22682067951395857 0.9651089062185564 A 0.5558572550239842 0.5558572550239842 0 0 0 1.3385351895619269 0.9651089062185559" />
<path style="fill:%23C2BDDB; fill-opacity:0.5;" d="M 0.6140764491268812 0.11267069851741307 A 0.33919237419963433 0.33919237419963433 0 0 0 0.27488407492724687 0.45186307271704745 A 0.33919237419963433 0.33919237419963433 0 0 0 0.9532688233265155 0.45186307271704734 A 0.33919237419963433 0.33919237419963433 0 0 0 0.27488407492724687 0.4518630727170475 A 0.33919237419963433 0.33919237419963433 0 0 0 0.9532688233265155 0.45186307271704723" />
<path style="fill:%23C3BDDB; fill-opacity:0.5;" d="M 0.18253078181940352 0.5942412666844932 A 0.38666696635933057 0.38666696635933057 0 0 0 -0.20413618453992705 0.9809082330438238 A 0.38666696635933057 0.38666696635933057 0 0 0 0.569197748178734 0.9809082330438237 A 0.38666696635933057 0.38666696635933057 0 0 0 -0.20413618453992705 0.9809082330438239 A 0.38666696635933057 0.38666696635933057 0 0 0 0.569197748178734 0.9809082330438236" />
<path style="fill:none; stroke-width:0.02; stroke:%23388A0F; stroke-opacity:0.4760962365774905; stroke-linecap:round;" d="M -0.26873703411424305 -0.25726522835239246 C -0.33237171399311527 0.10592898932340453, 1.6682175970546111 0.3776799593704757, 1.1329592078667794 1.1958190177999837" />
<path style="fill:none; stroke-width:0.03; stroke:%230F118A; stroke-opacity:0.3170896340960785; stroke-linecap:round;" d="M -0.25236638474939 -0.10173636054714891 C -0.48373240659118444 0.43741126003795067, 1.3863166564768634 0.6032475786734728, 1.1125166053789317 1.1873251609166782" />
<path style="fill:none; stroke-width:0.01; stroke:%232A8A0F; stroke-opacity:0.578329830413258; stroke-linecap:round;" d="M -0.23087059595542417 -0.15543213225107444 C -0.1734087108637361 0.09073538965725342, 1.7396435182288061 0.1977451505982291, 1.204218298360315 1.1141110082464112" />
<path style="fill:none; stroke-width:0.02; stroke:%234E8A0F; stroke-opacity:0.3611700604381807; stroke-linecap:round;" d="M -0.13411230379368122 -0.11912758694962629 C -0.0725836005524847 0.11257149556757565, 1.8582523365059989 0.37864297099406663, 1.2163596727126371 1.2862716042210747" />
<path style="fill:none; stroke-width:0.02; stroke:%230F1A8A; stroke-opacity:0.3611384360036626; stroke-linecap:round;" d="M -0.1438241192654487 -0.11518181026944269 C -0.3431962960954019 0.3972897926183135, 1.5178778419691143 0.5399057805738384, 1.228405291370537 1.150093935162646" />
<path style="fill:none; stroke-width:0.03; stroke:%230F1D8A; stroke-opacity:0.3027419034247284; stroke-linecap:round;" d="M -0.2212377729726666 -0.10488761511174571 C -0.6694778229935173 0.6129560476077686, 1.2249775358569375 0.8708909684245186, 1.1057243293701768 1.271580004921435" />
<path style="fill:none; stroke-width:0.02; stroke:%230F1E8A; stroke-opacity:0.5214712200705245; stroke-linecap:round;" d="M -0.16965110018846402 -0.17207957804956447 C -0.07373200168238936 0.01093243216472603, 1.7532194223298667 0.26240710211185647, 1.108335997030915 1.157484258201337" />
<path style="fill:none; stroke-width:0.02; stroke:%230F4E8A; stroke-opacity:0.43472080582224937; stroke-linecap:round;" d="M -0.15089414820149757 -0.2995753724707083 C -0.7149987940514427 0.526448486035096, 1.238467377323476 0.811194953775854, 1.2057652363530178 1.134504802379075" />
<path style="fill:none; stroke-width:0.02; stroke:%230F408A; stroke-opacity:0.35569641135821334; stroke-linecap:round;" d="M -0.284544428575158 -0.19349243658375767 C -0.3192139491904472 0.16590242498604885, 1.774387531836549 0.3885474000380537, 1.2205818338914143 1.2786939919325992" />
<path style="fill:none; stroke-width:0.01; stroke:%230F538A; stroke-opacity:0.5059855775242019; stroke-linecap:round;" d="M -0.11418700421146913 -0.1875755294314911 C -0.34549419533343184 0.32527126433429154, 1.6471598619704904 0.6285121566406479, 1.2617664964517028 1.2853050478283556" />
<path style="fill:none; stroke-width:0.01; stroke:%230F418A; stroke-opacity:0.276548051938459; stroke-linecap:round;" d="M -0.11965356545435671 -0.22352139069694366 C -0.25441765755615786 0.20788096457618824, 1.7811037566790937 0.5076803067098744, 1.2920759750318012 1.2732240044430616" />
<path style="fill:none; stroke-width:0.02; stroke:%230F408A; stroke-opacity:0.5816315558070055; stroke-linecap:round;" d="M -0.20030619446515552 -0.19755851173632868 C -0.9529821508611196 0.9131147200556061, 1.0779908595246983 1.0994330297543649, 1.2781802919512757 1.2073057489410615" />
<path style="fill:none; stroke-width:0.01; stroke:%23568A0F; stroke-opacity:0.34574515366935515; stroke-linecap:round;" d="M -0.21650896407487724 -0.10420112418943735 C -0.054996950499981434 0.0343179510008848, 1.9201237931137647 0.13303056797765817, 1.2724345733326619 1.19729542786748" />
<path style="fill:none; stroke-width:0.02; stroke:%234F8A0F; stroke-opacity:0.4513083817670884; stroke-linecap:round;" d="M -0.20583763209566505 -0.14440894803627882 C -0.3266529994529671 0.2541570457783632, 1.5872219266121053 0.5424863399711587, 1.117529324592266 1.2679475623593175" />
<path style="fill:none; stroke-width:0.03; stroke:%230F398A; stroke-opacity:0.4922320796566707; stroke-linecap:round;" d="M -0.17915272535466828 -0.2135191266804466 C -0.22669315040642946 0.114854891822053, 1.6953533924104986 0.4219225106038237, 1.1390149523929685 1.2186077561760322" />
<path style="fill:none; stroke-width:0.03; stroke:%230F5D8A; stroke-opacity:0.36421064675324677; stroke-linecap:round;" d="M -0.18929129168913308 -0.20407433776978778 C -0.28003587776971484 0.18210543870428364, 1.6599457747709634 0.4180600173922716, 1.1870225295274197 1.1833562518189586" />
<path style="fill:none; stroke-width:0.02; stroke:%230F508A; stroke-opacity:0.35239068798937867; stroke-linecap:round;" d="M -0.10998166836665864 -0.2462142987891476 C -0.39836097366180134 0.3034325427943496, 1.5640524609874253 0.634198100503859, 1.2251807054703934 1.2295274733879717" />
<path style="fill:none; stroke-width:0.01; stroke:%230F3F8A; stroke-opacity:0.5557164836402076; stroke-linecap:round;" d="M -0.26295303634634426 -0.2663247246901001 C 0.004998267548842028 -0.21250529713136987, 2.0800121386365005 0.06326301713429125, 1.1946635901635243 1.2360349188310855" />
<path style="fill:none; stroke-width:0.03; stroke:%230F1B8A; stroke-opacity:0.3622097611506953; stroke-linecap:round;" d="M -0.2963805647737904 -0.2507260405946822 C -0.5712424515871952 0.32817927029385185, 1.4185420660056336 0.56403385059471, 1.1190816030100548 1.1674899729496853" />
<path style="fill:none; stroke-width:0.02; stroke:%23140F8A; stroke-opacity:0.24729088335572547; stroke-linecap:round;" d="M -0.13186021491566963 -0.17565302915869868 C -0.8742504786837183 0.9111544378584369, 1.0143159122594234 1.074898080604417, 1.2488524544459803 1.1232417002955224" />
<path style="fill:none; stroke-width:0.02; stroke:%23228A0F; stroke-opacity:0.3083723549794969; stroke-linecap:round;" d="M -0.18371860451601219 -0.1331469343935357 C -0.09878547868347276 0.08568521212021289, 1.8495805747105245 0.22294154837516594, 1.2603408976247346 1.1820191137301423" />
<path style="fill:none; stroke-width:0.02; stroke:%230F608A; stroke-opacity:0.3573951388024289; stroke-linecap:round;" d="M -0.16668423520978423 -0.19910963835839088 C -0.4911673366586256 0.452635702251974, 1.41392882889444 0.6051351467074915, 1.233969633144452 1.1012042551413859" />
<path style="fill:none; stroke-width:0.02; stroke:%23328A0F; stroke-opacity:0.42355902282792834; stroke-linecap:round;" d="M -0.19038074379428907 -0.24003663229686173 C -0.5101581978318491 0.3769166487381259, 1.4462190947404365 0.6124882855774871, 1.1990380508334024 1.1572541463569495" />
<path style="fill:none; stroke-width:0.01; stroke:%23328A0F; stroke-opacity:0.360785545669008; stroke-linecap:round;" d="M -0.191437317479921 -0.2941601934256125 C 0.28795523696099234 -0.4628783810060707, 2.253251501364896 -0.20404107751705322, 1.1905630476957538 1.1269172665362663" />
<path style="fill:none; stroke-width:0.01; stroke:%230F4C8A; stroke-opacity:0.3913189977758494; stroke-linecap:round;" d="M -0.14237597005763336 -0.1896303820982728 C 0.17306211711429798 -0.1997890926475128, 2.0527109499516256 0.11008433197464276, 1.1407782414584147 1.2184237871517674" />
<path style="fill:none; stroke-width:0.02; stroke:%230F5B8A; stroke-opacity:0.5071490365791776; stroke-linecap:round;" d="M -0.23472249021646602 -0.12058890788113935 C -0.5196210226557965 0.4592598342835539, 1.345073553442898 0.6574602061460884, 1.105901482952138 1.190554338337199" />
<path style="fill:none; stroke-width:0.03; stroke:%230F118A; stroke-opacity:0.3682880062493721; stroke-linecap:round;" d="M -0.16234509893531085 -0.1462664812214582 C -0.34305588684274824 0.31113505429274757, 1.5389856896683438 0.5695595019519658, 1.1545710258062951 1.2228922426889142" />
<path style="fill:none; stroke-width:0.01; stroke:%230F1B8A; stroke-opacity:0.4964760458477913; stroke-linecap:round;" d="M -0.22304870543066027 -0.12220324698645478 C -0.6142086452550188 0.6070543271323967, 1.280962597117802 0.7467638454320309, 1.1777420584768339 1.1619221453222233" />
<path style="fill:none; stroke-width:0.01; stroke:%231A8A0F; stroke-opacity:0.5015623147481858; stroke-linecap:round;" d="M -0.1402627216198193 -0.2822260001356412 C -0.5830528205455965 0.4051109357025092, 1.4454593904330089 0.7712888303625726, 1.2248296288536404 1.262270977946812" />
<path style="fill:none; stroke-width:0.02; stroke:%23448A0F; stroke-opacity:0.39191716218914374; stroke-linecap:round;" d="M -0.16052047842865969 -0.179932785479965 C -0.6084732784251898 0.5318089287459016, 1.267264856770129 0.7924363028697936, 1.1500833671655408 1.1870484652628608" />
<path style="fill:none; stroke-width:0.01; stroke:%23308A0F; stroke-opacity:0.1846884508291512; stroke-linecap:round;" d="M -0.23220655151963118 -0.1916336027717171 C -0.19314527950482419 0.07105520355579073, 1.748380837947316 0.2559957613990056, 1.1769338835904108 1.156717207967841" />
<path style="fill:none; stroke-width:0.03; stroke:%230F258A; stroke-opacity:0.3529065524256397; stroke-linecap:round;" d="M -0.1443364887491998 -0.1461639613129335 C -0.6352494599929969 0.6139113777022176, 1.2898433339597077 0.8818651868914278, 1.2004616210545653 1.2571533773727457" />
<path style="fill:none; stroke-width:0.03; stroke:%23328A0F; stroke-opacity:0.5170325184903408; stroke-linecap:round;" d="M -0.22687895830971588 -0.128538932209256 C -0.7914248066304099 0.8706283583684432, 1.1429577486137377 0.92546545984942, 1.2572829588477907 1.1132768276323828" />
<path style="fill:none; stroke-width:0.03; stroke:%23408A0F; stroke-opacity:0.30051530940759075; stroke-linecap:round;" d="M -0.100427366252763 -0.20549908653151597 C -0.06871259195938084 0.032576598156753095, 1.7244212414914766 0.2975014978480095, 1.1426835516548093 1.113663296544041" />
<path style="fill:none; stroke-width:0.01; stroke:%230F8A14; stroke-opacity:0.4703572638254336; stroke-linecap:round;" d="M -0.19334131595806697 -0.14038843640389 C -0.0015030186086724129 -0.0296436485832363, 1.9912564566992772 0.1546539278404362, 1.256406645935954 1.239208160463972" />
<path style="fill:none; stroke-width:0.02; stroke:%230F438A; stroke-opacity:0.22220230622043785; stroke-linecap:round;" d="M -0.23688753378388205 -0.21484118471559055 C -0.5534141971949595 0.4143097852661132, 1.450634348342978 0.637404701486764, 1.1976767922520024 1.202200490388367" />
<path style="fill:none; stroke-width:0.01; stroke:%230F278A; stroke-opacity:0.4079107822150989; stroke-linecap:round;" d="M -0.25285089367920477 -0.22354077483844678 C -0.565165883489085 0.3853884273392609, 1.359958169586414 0.6079814794093599, 1.1200827841686807 1.1441958236302778" />
<path style="fill:none; stroke-width:0.03; stroke:%230F3E8A; stroke-opacity:0.29338544555491786; stroke-linecap:round;" d="M -0.2618760870945999 -0.27475904672971774 C -0.09275577726695894 -0.12662140539797775, 1.976009293542054 0.12775749685403062, 1.204091822491343 1.2069412037172396" />
<path style="fill:none; stroke-width:0.03; stroke:%230F478A; stroke-opacity:0.21766145058121966; stroke-linecap:round;" d="M -0.2015090399982692 -0.1279649051523471 C -0.2171696324249025 0.16757651804765492, 1.6426657602319819 0.42122632360539103, 1.1009381352484136 1.2236849264721759" />
<path style="fill:none; stroke-width:0.02; stroke:%230F428A; stroke-opacity:0.3603097597527481; stroke-linecap:round;" d="M -0.1812520846092651 -0.21127317839182044 C -0.5817828351357183 0.492608442432671, 1.3234824592900023 0.6959657379619643, 1.1880168174121883 1.1290598793759414" />
<path style="fill:none; stroke-width:0.03; stroke:%23338A0F; stroke-opacity:0.3286591601672101; stroke-linecap:round;" d="M -0.16095823704489431 -0.2618370361245084 C -0.4043975625001205 0.23875059122330441, 1.4702176764391424 0.5413706994752896, 1.1227405360263893 1.1374051459144097" />
<path style="fill:none; stroke-width:0.03; stroke:%230F318A; stroke-opacity:0.5143308408136055; stroke-linecap:round;" d="M -0.1675465141027658 -0.29082456153983793 C 0.07327794487694561 -0.21452415844092027, 2.110519769409387 0.0747006045603193, 1.2520865356844635 1.1986878483142065" />
<path style="fill:none; stroke-width:0.03; stroke:%230F398A; stroke-opacity:0.4243827489110832; stroke-linecap:round;" d="M -0.16900239276366072 -0.276249807660125 C -0.7042420556448485 0.5871129533978806, 1.3364677868496568 0.8035641443481133, 1.298451778449619 1.1582975197942427" />
<path style="fill:none; stroke-width:0.03; stroke:%230F388A; stroke-opacity:0.5631587369514673; stroke-linecap:round;" d="M -0.22549386377594846 -0.256624814996618 C -0.2353939438269559 0.0435493105938439, 1.7253842301694609 0.350876422510743, 1.1229104299551036 1.199708547248293" />
<path style="fill:none; stroke-width:0.03; stroke:%230F388A; stroke-opacity:0.46738579042905415; stroke-linecap:round;" d="M -0.259668001441046 -0.22715817797377405 C 0.2527572014530097 -0.46088701363232304, 2.321151515160664 -0.321473498402483, 1.2772554488291852 1.1640849615300104" />
<path style="fill:none; stroke-width:0.02; stroke:%230F3B8A; stroke-opacity:0.4114063254449289; stroke-linecap:round;" d="M -0.20323154855090808 -0.2468590109869514 C -0.5059314182579536 0.33745463529832537, 1.550266198315939 0.6627110120950619, 1.2089488557693893 1.2826791071078074" />
<path style="fill:none; stroke-width:0.01; stroke:%230F448A; stroke-opacity:0.30744365216773767; stroke-linecap:round;" d="M -0.13762610144001483 -0.11361039369722224 C 0.05448164393433874 -0.036134327575701994, 1.8456693229122667 0.11073348976314144, 1.177119940895292 1.111692140885915" />
<path style="fill:none; stroke-width:0.03; stroke:%230F258A; stroke-opacity:0.39924786514920774; stroke-linecap:round;" d="M -0.11218822289988975 -0.14022076942773032 C 0.20542934334045548 -0.1586800532665895, 2.052331172806137 0.13836009449620798, 1.1532184829146788 1.2374675429078816" />
<path style="fill:none; stroke-width:0.02; stroke:%230F3B8A; stroke-opacity:0.585263809706374; stroke-linecap:round;" d="M -0.2177427280454295 -0.2906373008838613 C -0.6140705982179182 0.4596102746976153, 1.4288986410245674 0.6244699604704812, 1.2834570306107524 1.1048200840243159" />
<path style="fill:none; stroke-width:0.01; stroke:%230F128A; stroke-opacity:0.5504946233940147; stroke-linecap:round;" d="M -0.23865078437628906 -0.14365214156824369 C -0.5237147616053447 0.45270602763031476, 1.4413917085114116 0.6597311696185042, 1.1753097351270783 1.2366443836739724" />
<path style="fill:none; stroke-width:0.02; stroke:%230F2B8A; stroke-opacity:0.3613840430813962; stroke-linecap:round;" d="M -0.159187630061158 -0.24797038738927873 C -0.48544918345928084 0.3432655762890764, 1.4199620419806926 0.6269940640908349, 1.160388048171508 1.1555301727245155" />
</svg>)
Flutter, an ideal framework for Algorithmic Art?
October 2021
Flutter is a cross platform framework for Apps. On most of its target platforms it uses a low level renderer called Skia to draw user…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBC2BD; fill-opacity:0.5;" d="M 0.6682772654671215 -0.26830709288987464 A 0.43558128694592324 0.43558128694592324 0 0 0 0.23269597852119828 0.16727419405604865 A 0.43558128694592324 0.43558128694592324 0 0 0 1.1038585524130449 0.1672741940560485 A 0.43558128694592324 0.43558128694592324 0 0 0 0.23269597852119828 0.16727419405604876 A 0.43558128694592324 0.43558128694592324 0 0 0 1.1038585524130449 0.16727419405604838" />
<path style="fill:%23DBBDCC; fill-opacity:0.5;" d="M 0.5768347697635509 0.1509937789572608 A -0.043341069073009 -0.043341069073009 0 0 0 0.6201758388365599 0.1076527098842518 A -0.043341069073009 -0.043341069073009 0 0 0 0.5334937006905418 0.10765270988425181 A -0.043341069073009 -0.043341069073009 0 0 0 0.6201758388365599 0.10765270988425178 A -0.043341069073009 -0.043341069073009 0 0 0 0.5334937006905418 0.10765270988425182" />
<path style="fill:%23DBC9BD; fill-opacity:0.5;" d="M 0.6598712557826882 -0.04743364910061798 A 0.5019372337661587 0.5019372337661587 0 0 0 0.1579340220165295 0.4545035846655408 A 0.5019372337661587 0.5019372337661587 0 0 0 1.161808489548847 0.45450358466554064 A 0.5019372337661587 0.5019372337661587 0 0 0 0.1579340220165295 0.4545035846655409 A 0.5019372337661587 0.5019372337661587 0 0 0 1.161808489548847 0.4545035846655405" />
<path style="fill:%23DBCBBD; fill-opacity:0.5;" d="M 0.6231308997400475 0.5423971088343931 A 0.11004708333559593 0.11004708333559593 0 0 0 0.5130838164044516 0.652444192169989 A 0.11004708333559593 0.11004708333559593 0 0 0 0.7331779830756435 0.652444192169989 A 0.11004708333559593 0.11004708333559593 0 0 0 0.5130838164044516 0.652444192169989 A 0.11004708333559593 0.11004708333559593 0 0 0 0.7331779830756435 0.652444192169989" />
<path style="fill:%23DBCBBD; fill-opacity:0.5;" d="M 0.24795989133929408 -0.33635380676593796 A 0.6321025591550359 0.6321025591550359 0 0 0 -0.3841426678157418 0.295748752389098 A 0.6321025591550359 0.6321025591550359 0 0 0 0.88006245049433 0.29574875238909776 A 0.6321025591550359 0.6321025591550359 0 0 0 -0.3841426678157418 0.29574875238909815 A 0.6321025591550359 0.6321025591550359 0 0 0 0.88006245049433 0.2957487523890976" />
<path style="fill:%23DBBDBF; fill-opacity:0.5;" d="M 0.8127318349083613 0.4211954580390338 A 0.5146357088554718 0.5146357088554718 0 0 0 0.2980961260528895 0.9358311668945057 A 0.5146357088554718 0.5146357088554718 0 0 0 1.3273675437638333 0.9358311668945055 A 0.5146357088554718 0.5146357088554718 0 0 0 0.2980961260528895 0.9358311668945059 A 0.5146357088554718 0.5146357088554718 0 0 0 1.3273675437638333 0.9358311668945054" />
<path style="fill:%23DBCCBD; fill-opacity:0.5;" d="M 0.9394162360182687 0.10644726853222453 A 0.2572407227090001 0.2572407227090001 0 0 0 0.6821755133092686 0.3636879912412247 A 0.2572407227090001 0.2572407227090001 0 0 0 1.1966569587272688 0.3636879912412246 A 0.2572407227090001 0.2572407227090001 0 0 0 0.6821755133092686 0.36368799124122475 A 0.2572407227090001 0.2572407227090001 0 0 0 1.1966569587272688 0.36368799124122453" />
<path style="fill:%23DBBDBE; fill-opacity:0.5;" d="M 0.3052863350420135 -0.3126825315754721 A 0.5326932364422152 0.5326932364422152 0 0 0 -0.2274069014002017 0.22001070486674318 A 0.5326932364422152 0.5326932364422152 0 0 0 0.8379795714842287 0.22001070486674298 A 0.5326932364422152 0.5326932364422152 0 0 0 -0.2274069014002017 0.22001070486674332 A 0.5326932364422152 0.5326932364422152 0 0 0 0.8379795714842287 0.22001070486674287" />
<path style="fill:none; stroke-width:0.03; stroke:%23590E0D; stroke-opacity:0.3470318190887607; stroke-linecap:round;" d="M -0.15702945590760886 -0.1673753823723078 C 0.6992261534452732 -0.7588319849433267, 0.9742466351288798 1.1357067525548443, 1.2053932046622655 1.1775104072739175" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D1A; stroke-opacity:0.372256356361277; stroke-linecap:round;" d="M -0.2223253763399264 -0.19820315419565918 C 0.7911295059120395 -0.9291872272105597, 1.0591820580624944 1.015873447143559, 1.1650239385010004 1.1911762310852951" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D30; stroke-opacity:0.31986231742471927; stroke-linecap:round;" d="M -0.2257600065065417 -0.2209638871453836 C 0.5083759539862476 -0.658623379438182, 0.7921305227155748 1.391033683461829, 1.2372211967080282 1.2423531426917997" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D27; stroke-opacity:0.4477178887130894; stroke-linecap:round;" d="M -0.16517979669413002 -0.24880916754260643 C 0.5615648742624335 -0.6628866685234812, 0.777715354903812 1.2892764532627932, 1.1850649314141446 1.17755020462124" />
<path style="fill:none; stroke-width:0.01; stroke:%230D0D59; stroke-opacity:0.434074199778059; stroke-linecap:round;" d="M -0.20273250945494253 -0.16035371449199148 C 0.08742304412448618 -0.1785561296861896, 0.41694223972131006 1.7580472624689634, 1.2285313194080743 1.1851942969003924" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D23; stroke-opacity:0.6287536069980826; stroke-linecap:round;" d="M -0.18316945697515646 -0.16921621496985687 C 0.273305824203738 -0.3634343228500476, 0.5816562951985309 1.5448635616763955, 1.2141344622349242 1.1665317352104745" />
<path style="fill:none; stroke-width:0.02; stroke:%230D2359; stroke-opacity:0.3583708347831572; stroke-linecap:round;" d="M -0.1629648576837956 -0.24150312024698814 C 0.47325398325724566 -0.5390297244525639, 0.6306223179620011 1.4364617854079045, 1.1544788928269727 1.2389270410705464" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D23; stroke-opacity:0.6516729439324922; stroke-linecap:round;" d="M -0.22208845817172468 -0.2489940413488877 C 0.4725996757954519 -0.6305058911477905, 0.7315031973976397 1.4400823807130951, 1.2337041785656453 1.2460091773389919" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D2C; stroke-opacity:0.46806616567769843; stroke-linecap:round;" d="M -0.21021231158055648 -0.2331882847534688 C 0.3622689115399539 -0.5137893592606718, 0.6360457522870505 1.4931481499413048, 1.2190364125222841 1.2020817278301212" />
<path style="fill:none; stroke-width:0.02; stroke:%230D2D59; stroke-opacity:0.5530526351203926; stroke-linecap:round;" d="M -0.1810949391240891 -0.21947128130439672 C 0.4859869672082575 -0.5857177296767568, 0.7124106839400719 1.348574090004212, 1.166559341929754 1.186437848739438" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D1E; stroke-opacity:0.3943784350411132; stroke-linecap:round;" d="M -0.21180407924299421 -0.21602171840177342 C -0.002598073375949944 -0.1363477076420968, 0.2919307809168984 1.8666678312625131, 1.2316272143079678 1.2035995676820117" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D31; stroke-opacity:0.31191971770782306; stroke-linecap:round;" d="M -0.2074773211889448 -0.17734889320231514 C 0.8065063066002984 -0.8990674268126243, 1.075426528535605 1.0864571778684762, 1.2049785684448826 1.243775450899386" />
<path style="fill:none; stroke-width:0.02; stroke:%23590E0D; stroke-opacity:0.4889245361273871; stroke-linecap:round;" d="M -0.19418288074681556 -0.2155434946424259 C 1.1529013222845177 -1.2387382598421495, 1.3900607529958924 0.7218488478988689, 1.1778984689702778 1.2048575657535994" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D31; stroke-opacity:0.4926134723682399; stroke-linecap:round;" d="M -0.20311410334817662 -0.23355997613481974 C 0.6565650673118908 -0.8346162433354782, 0.9666476363157146 1.1350188903251084, 1.2325800325151568 1.1500570617762509" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D24; stroke-opacity:0.38740307542944485; stroke-linecap:round;" d="M -0.15671374285949585 -0.17772735830092914 C 0.3216572128045613 -0.3835281330058924, 0.5718067990415725 1.4820209287229864, 1.168383859024108 1.159046542811136" />
<path style="fill:none; stroke-width:0.03; stroke:%230D2959; stroke-opacity:0.39738966673499665; stroke-linecap:round;" d="M -0.20498295517611376 -0.20897224222868072 C 0.10012089176677827 -0.22943661524599723, 0.3973178323764349 1.7599895788808706, 1.2323766625587198 1.1982022077564756" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D37; stroke-opacity:0.36772216547328573; stroke-linecap:round;" d="M -0.21738185901121884 -0.17178639670867438 C 0.8608989408248564 -1.0476039239001675, 1.2040959559393039 0.8709965789789399, 1.2139271562644673 1.1511522200162192" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D2A; stroke-opacity:0.3492648254061883; stroke-linecap:round;" d="M -0.17373038179137618 -0.23169295961288855 C 0.9235488702896645 -0.9627576583114117, 1.1115679768527926 1.0278217689201472, 1.1772597883468547 1.2422755613332652" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D0F; stroke-opacity:0.23998231749474047; stroke-linecap:round;" d="M -0.15938364826369358 -0.23105638621187904 C 1.0215335232877227 -1.1255642118587252, 1.2912105252422372 0.838279008252014, 1.240593891912049 1.1723212413572541" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D0D; stroke-opacity:0.36929005698084133; stroke-linecap:round;" d="M -0.22388585190983532 -0.18574656024490488 C 0.8561025813501045 -1.0174751691356425, 1.1752153341585718 0.9736457615671746, 1.2319733626556166 1.2095560797055525" />
<path style="fill:none; stroke-width:0.02; stroke:%23590D45; stroke-opacity:0.3447800429694058; stroke-linecap:round;" d="M -0.231595020230197 -0.22519979091835954 C 0.28307514297872755 -0.44385906977831024, 0.5353962529419765 1.5473864689624361, 1.1710755220149087 1.2105021586539852" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D17; stroke-opacity:0.2598835454469709; stroke-linecap:round;" d="M -0.17612039761279527 -0.17511245268986722 C 0.452152700433734 -0.5238896677487466, 0.7044248517882137 1.373466833687679, 1.1698614621766923 1.1857460135033375" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D20; stroke-opacity:0.43742638391397043; stroke-linecap:round;" d="M -0.24414096895154516 -0.15102222319802466 C 0.32765669779936335 -0.46154286612211837, 0.6564889975899425 1.5065317191580048, 1.2055637965526744 1.2200373478948743" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D0D; stroke-opacity:0.39798466321620635; stroke-linecap:round;" d="M -0.24596747069727037 -0.18008156924992705 C 0.3928730303298976 -0.5854133046118384, 0.7689021306966753 1.3809328348558556, 1.2403321031217729 1.161122591714198" />
<path style="fill:none; stroke-width:0.01; stroke:%230D2359; stroke-opacity:0.42065989388737013; stroke-linecap:round;" d="M -0.22981329054442282 -0.20195496700567633 C 0.7087376403059746 -0.8817172971542317, 1.0240644743969884 1.1146268102849854, 1.2261782919750488 1.1997972647519872" />
<path style="fill:none; stroke-width:0.01; stroke:%230D3F59; stroke-opacity:0.39114574724349993; stroke-linecap:round;" d="M -0.17131976932641915 -0.1565517254703087 C 0.8488943925750528 -0.9453664960680771, 1.169300925071424 0.9834807935176829, 1.2479972648227444 1.1883093711425357" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D29; stroke-opacity:0.33122503016898097; stroke-linecap:round;" d="M -0.15152543654458078 -0.21950574130485637 C 0.5386863230996025 -0.6077375846249239, 0.7533318696732699 1.2965615824520795, 1.1686395843090625 1.1695919320459331" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1E; stroke-opacity:0.49871179825797674; stroke-linecap:round;" d="M -0.2315096892787491 -0.16038103680296262 C 0.19655480811580503 -0.32309327972483026, 0.5263771041057322 1.6250330175831873, 1.206948403029491 1.1941731828088076" />
<path style="fill:none; stroke-width:0.02; stroke:%230D2F59; stroke-opacity:0.56646798530103; stroke-linecap:round;" d="M -0.248064690953102 -0.19193775684620273 C 0.8272170231562705 -1.020159035016912, 1.1424023599142206 0.9539338245400275, 1.19438836196956 1.192155305333869" />
<path style="fill:none; stroke-width:0.02; stroke:%230D2759; stroke-opacity:0.5424397489198842; stroke-linecap:round;" d="M -0.23486715860349147 -0.2220240073913498 C 0.5401248532413777 -0.7235416858279923, 0.8276629178124669 1.2362459905986225, 1.1769069310189932 1.1673426811115533" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D27; stroke-opacity:0.3625879509238053; stroke-linecap:round;" d="M -0.19809275849852703 -0.2474208839919321 C 0.8297133943094279 -0.9351298620722454, 1.0539669614853209 1.095005482729536, 1.2056598239776155 1.2362292997765059" />
<path style="fill:none; stroke-width:0.02; stroke:%230D1459; stroke-opacity:0.45408057095162524; stroke-linecap:round;" d="M -0.18442726840852333 -0.2190508010279076 C 0.597087888181388 -0.7072069535821506, 0.8551168667989416 1.2599395985074995, 1.208254530142002 1.1939891556579219" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D3A; stroke-opacity:0.4001306657744314; stroke-linecap:round;" d="M -0.20586996812001568 -0.17269978889275844 C 0.8730990406089653 -0.9697365425529335, 1.1486884422979977 0.9984633721587447, 1.2014511815277922 1.2305847882149457" />
<path style="fill:none; stroke-width:0.01; stroke:%23590D1F; stroke-opacity:0.37020781613966275; stroke-linecap:round;" d="M -0.2432793083395489 -0.2496736905007164 C 0.3488834458800144 -0.5747798720226589, 0.6873177010161854 1.4433356651258968, 1.2442757688447432 1.155498170402146" />
<path style="fill:none; stroke-width:0.03; stroke:%23590D0F; stroke-opacity:0.4518577377650635; stroke-linecap:round;" d="M -0.1921428300225701 -0.20835607575366474 C 0.863237509049823 -1.000865884626811, 1.1478829353761681 0.9278161971758273, 1.1985563678069089 1.1579503805552813" />
<path style="fill:none; stroke-width:0.03; stroke:%230D1559; stroke-opacity:0.31407718790361844; stroke-linecap:round;" d="M -0.17343576770718877 -0.21258765855131595 C 0.18665762006591652 -0.2884197451332895, 0.43555700475016684 1.6500457042607772, 1.1946602591381592 1.183088687712642" />
</svg>)
React Native Setup in Late 2021
August 2021
React Native is a leading, cross-platform, declarative UI framework with hot reloading. If you want to make mobile apps, along with Flutter…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23BDBDDB; fill-opacity:0.5;" d="M 0.8151731355255514 -0.44638253290506535 A 0.5542418288602672 0.5542418288602672 0 0 0 0.2609313066652842 0.1078592959552019 A 0.5542418288602672 0.5542418288602672 0 0 0 1.3694149643858187 0.10785929595520169 A 0.5542418288602672 0.5542418288602672 0 0 0 0.2609313066652842 0.10785929595520204 A 0.5542418288602672 0.5542418288602672 0 0 0 1.3694149643858187 0.10785929595520155" />
<path style="fill:%23BDD8DB; fill-opacity:0.5;" d="M 0.8689743909733801 -0.6356334280662096 A 0.9615608530320605 0.9615608530320605 0 0 0 -0.09258646205868037 0.32592742496585103 A 0.9615608530320605 0.9615608530320605 0 0 0 1.8305352440054405 0.3259274249658507 A 0.9615608530320605 0.9615608530320605 0 0 0 -0.09258646205868037 0.32592742496585125 A 0.9615608530320605 0.9615608530320605 0 0 0 1.8305352440054405 0.3259274249658505" />
<path style="fill:%23BDD6DB; fill-opacity:0.5;" d="M 0.9506683393084348 -0.2276476580126744 A 0.9176946088616632 0.9176946088616632 0 0 0 0.03297373044677154 0.6900469508489889 A 0.9176946088616632 0.9176946088616632 0 0 0 1.8683629481700978 0.6900469508489886 A 0.9176946088616632 0.9176946088616632 0 0 0 0.03297373044677154 0.6900469508489891 A 0.9176946088616632 0.9176946088616632 0 0 0 1.8683629481700978 0.6900469508489884" />
<path style="fill:%23BDCEDB; fill-opacity:0.5;" d="M 0.09127748343932729 -0.10510045575668586 A 0.36275706800273294 0.36275706800273294 0 0 0 -0.27147958456340565 0.25765661224604713 A 0.36275706800273294 0.36275706800273294 0 0 0 0.45403455144206023 0.25765661224604697 A 0.36275706800273294 0.36275706800273294 0 0 0 -0.27147958456340565 0.2576566122460472 A 0.36275706800273294 0.36275706800273294 0 0 0 0.45403455144206023 0.2576566122460469" />
<path style="fill:%23BDBDDB; fill-opacity:0.5;" d="M 0.25858762264506896 0.29669439925814933 A 0.09670163893658079 0.09670163893658079 0 0 0 0.16188598370848817 0.3933960381947301 A 0.09670163893658079 0.09670163893658079 0 0 0 0.35528926158164975 0.3933960381947301 A 0.09670163893658079 0.09670163893658079 0 0 0 0.16188598370848817 0.3933960381947302 A 0.09670163893658079 0.09670163893658079 0 0 0 0.35528926158164975 0.39339603819473007" />
<path style="fill:none; stroke-width:0.02; stroke:%231F397A; stroke-opacity:0.3653575360455131; stroke-linecap:round;" d="M -0.22621675093852633 -0.20024876717165124 C -0.6920186475060157 0.5056878357277672, 1.2499795357725458 0.8678607890961627, 1.1531209228878168 1.2139484515967043" />
<path style="fill:none; stroke-width:0.05; stroke:%231F4B7A; stroke-opacity:0.350382061310792; stroke-linecap:round;" d="M -0.24522134883950059 -0.15678121120499192 C -0.7165398779770079 0.6340185751469136, 1.2782434681681458 0.88351403285298, 1.2421475527599048 1.195676674286824" />
<path style="fill:none; stroke-width:0.02; stroke:%231F567A; stroke-opacity:0.41708606019702466; stroke-linecap:round;" d="M -0.15180342291475168 -0.17532257413032223 C -0.7619928761931329 0.6626352733934648, 1.123740465442171 1.0164583163884922, 1.1863372677686448 1.199653961468258" />
<path style="fill:none; stroke-width:0.02; stroke:%231F417A; stroke-opacity:0.5428595803723666; stroke-linecap:round;" d="M -0.17681691608087713 -0.19464684566852122 C -0.8034817998573334 0.679609017358614, 1.091046538791141 1.0090060337493616, 1.182577749601597 1.1654215949855915" />
<path style="fill:none; stroke-width:0.05; stroke:%23417A1F; stroke-opacity:0.40490856245465784; stroke-linecap:round;" d="M -0.22819211080221896 -0.24020722107674217 C -0.27727624071087953 0.06366323267758711, 1.676658212234822 0.40904682683793137, 1.1705712885272892 1.1671344667231658" />
<path style="fill:none; stroke-width:0.05; stroke:%231F3C7A; stroke-opacity:0.22295168634307552; stroke-linecap:round;" d="M -0.16045863153513382 -0.16173975067648255 C -0.3364099881784378 0.2801427885240606, 1.5799914361544207 0.5617197449973156, 1.2443518526484347 1.1718222108122514" />
<path style="fill:none; stroke-width:0.05; stroke:%23447A1F; stroke-opacity:0.31793135776947923; stroke-linecap:round;" d="M -0.20375101984248997 -0.16398350075263501 C -0.5701463440347108 0.4706222148811276, 1.3628111872353281 0.7747462170709474, 1.2016153148365678 1.1975456732837746" />
<path style="fill:none; stroke-width:0.02; stroke:%236C7A1F; stroke-opacity:0.18430181422347203; stroke-linecap:round;" d="M -0.19010414851882115 -0.18714293101762858 C -0.3988363302486252 0.28160939801848006, 1.5742768865152015 0.6184474677301645, 1.2292604772218372 1.2242534380336987" />
<path style="fill:none; stroke-width:0.05; stroke:%231F617A; stroke-opacity:0.40680260708584043; stroke-linecap:round;" d="M -0.23921904907433778 -0.1868962839341656 C -0.671994359458635 0.5476929365439126, 1.2869987375384877 0.8074751145445626, 1.2129639756067239 1.1533668234135308" />
<path style="fill:none; stroke-width:0.05; stroke:%233E7A1F; stroke-opacity:0.35751504086517333; stroke-linecap:round;" d="M -0.1722688190730977 -0.19757906206896675 C -0.45453982978724794 0.31897917969106604, 1.4679472561537428 0.6987301672859639, 1.180995593803734 1.2197574671400655" />
<path style="fill:none; stroke-width:0.02; stroke:%231F417A; stroke-opacity:0.5507949126317531; stroke-linecap:round;" d="M -0.18395336373379712 -0.17271714788485237 C -0.8380541785399681 0.745211933961733, 1.0909560031766543 1.0653736781556398, 1.2089520233942337 1.1996524838548592" />
<path style="fill:none; stroke-width:0.05; stroke:%23437A1F; stroke-opacity:0.5793112516177107; stroke-linecap:round;" d="M -0.19220229027711172 -0.18985933508771474 C -0.6769880931662924 0.5414781751909239, 1.2691791822784182 0.8933533253123038, 1.196472969333781 1.2183182846142355" />
<path style="fill:none; stroke-width:0.05; stroke:%231F487A; stroke-opacity:0.28078488958332937; stroke-linecap:round;" d="M -0.1552113093368555 -0.19439207463802233 C -0.2254396711605533 0.12752981872366023, 1.6800699807856918 0.44546174815727524, 1.2197629183725722 1.1626243654055552" />
<path style="fill:none; stroke-width:0.02; stroke:%236D7A1F; stroke-opacity:0.3327898052667126; stroke-linecap:round;" d="M -0.16172292248520798 -0.16662902238894103 C -0.4226391984454435 0.33811588716704777, 1.4680269294419785 0.6761351452431887, 1.1895497500210634 1.1982656953489954" />
</svg>)
An Introduction to React Native Reanimated 2
August 2021
React Native Reanimated 2 is the main third party approach to animation for React Native. In version 1 a animation node graph approach was…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBC9BD; fill-opacity:0.5;" d="M 0.41719687061031174 0.440002001638653 A 0.09699829118659098 0.09699829118659098 0 0 0 0.32019857942372076 0.537000292825244 A 0.09699829118659098 0.09699829118659098 0 0 0 0.5141951617969027 0.537000292825244 A 0.09699829118659098 0.09699829118659098 0 0 0 0.32019857942372076 0.537000292825244 A 0.09699829118659098 0.09699829118659098 0 0 0 0.5141951617969027 0.537000292825244" />
<path style="fill:%23DBCFBD; fill-opacity:0.5;" d="M 0.9635366436054172 -0.48097467455706344 A 0.9262353321506664 0.9262353321506664 0 0 0 0.037301311454750796 0.4452606575936031 A 0.9262353321506664 0.9262353321506664 0 0 0 1.8897719757560836 0.4452606575936028 A 0.9262353321506664 0.9262353321506664 0 0 0 0.037301311454750796 0.44526065759360334 A 0.9262353321506664 0.9262353321506664 0 0 0 1.8897719757560836 0.44526065759360256" />
<path style="fill:%23DBBDC0; fill-opacity:0.5;" d="M 0.9286716324036381 -0.5209038747105491 A 0.7647613642817711 0.7647613642817711 0 0 0 0.16391026812186704 0.24385748957122208 A 0.7647613642817711 0.7647613642817711 0 0 0 1.6934329966854094 0.2438574895712218 A 0.7647613642817711 0.7647613642817711 0 0 0 0.16391026812186704 0.24385748957122227 A 0.7647613642817711 0.7647613642817711 0 0 0 1.6934329966854094 0.24385748957122164" />
<path style="fill:%23DBDABD; fill-opacity:0.5;" d="M 0.10163587088145998 -0.5748559562500561 A 0.7209229774874082 0.7209229774874082 0 0 0 -0.6192871066059482 0.14606702123735213 A 0.7209229774874082 0.7209229774874082 0 0 0 0.8225588483688682 0.14606702123735188 A 0.7209229774874082 0.7209229774874082 0 0 0 -0.6192871066059482 0.14606702123735232 A 0.7209229774874082 0.7209229774874082 0 0 0 0.8225588483688682 0.14606702123735169" />
<path style="fill:none; stroke-width:0.05; stroke:%23863213; stroke-opacity:0.41899316634341766; stroke-linecap:round;" d="M 0.40500961841528194 -0.16041008643943366 C 0.5665415548347208 -0.1670316059827639, 0.877097877889401 1.1653206108915866, 0.5209650229436144 1.2027340745941342" />
<path style="fill:none; stroke-width:0.02; stroke:%23291386; stroke-opacity:0.4275951340527505; stroke-linecap:round;" d="M 0.5603244337412567 -0.22477852473646762 C 0.07413336115586636 -0.2676382551748402, 0.13280302639145233 1.162188437122056, 0.41300394873429364 1.1986480361794274" />
<path style="fill:none; stroke-width:0.05; stroke:%23863313; stroke-opacity:0.327754467222407; stroke-linecap:round;" d="M 0.5610175535493734 -0.2821561983962896 C 0.5875685600134746 -0.27299831791411305, 0.7312833640696788 1.2333275076095243, 0.4868718654031865 1.2291921580304175" />
<path style="fill:none; stroke-width:0.05; stroke:%23401386; stroke-opacity:0.42454736195072934; stroke-linecap:round;" d="M 0.5091703995669193 -0.16571094585133994 C 0.7667943267395164 -0.13869248071193163, 0.8556004116885748 1.1962066772713482, 0.40530930150143885 1.1681013179313415" />
<path style="fill:none; stroke-width:0.02; stroke:%23864613; stroke-opacity:0.4988855143366403; stroke-linecap:round;" d="M 0.5061610839096239 -0.17818258513804122 C 2.41444629542624 -0.23915073203178439, 2.6548086303830543 1.0837743615957178, 0.5540045431409616 1.1655494784907192" />
<path style="fill:none; stroke-width:0.05; stroke:%23862513; stroke-opacity:0.34118489454793904; stroke-linecap:round;" d="M 0.5702314501103568 -0.15526469741545657 C 0.15533676249220563 -0.17340346659094147, 0.2623766851181998 1.0882377380619956, 0.4949379480651243 1.1086684348600042" />
<path style="fill:none; stroke-width:0.02; stroke:%23863313; stroke-opacity:0.6296119338988428; stroke-linecap:round;" d="M 0.4922838139844984 -0.12496212440361346 C -0.14226888692437129 -0.095838020899641, 0.08720563203342573 1.1687135866115077, 0.5377371913686506 1.1594378574534079" />
<path style="fill:none; stroke-width:0.05; stroke:%23861320; stroke-opacity:0.3890040386239664; stroke-linecap:round;" d="M 0.46695456023998716 -0.18180001047301672 C -0.5822481247487985 -0.1300995742959643, -0.3183310358939071 1.269756381192904, 0.5270580812846257 1.241448559758245" />
<path style="fill:none; stroke-width:0.02; stroke:%23862813; stroke-opacity:0.5098942813366688; stroke-linecap:round;" d="M 0.5957513838498647 -0.14802229446278115 C -0.0956090367597667 -0.14793324184661039, 0.08799869396989565 1.2144959771582777, 0.5817543798382112 1.2266519431152216" />
<path style="fill:none; stroke-width:0.05; stroke:%23862913; stroke-opacity:0.48234058394559237; stroke-linecap:round;" d="M 0.4102869861405272 -0.10064681883932068 C 0.09748199825434667 -0.05786589432545852, 0.41910726943508325 1.153723121158615, 0.5545430994309569 1.144576426720321" />
<path style="fill:none; stroke-width:0.05; stroke:%23862B13; stroke-opacity:0.40550616308160764; stroke-linecap:round;" d="M 0.5803629002825424 -0.2915707760113477 C 0.21186883227710446 -0.30781786671298145, 0.32546682272026733 1.1069048567092903, 0.48957067535479304 1.1247984059086498" />
<path style="fill:none; stroke-width:0.05; stroke:%23231386; stroke-opacity:0.5750073063970538; stroke-linecap:round;" d="M 0.43497765493807783 -0.2416691942218748 C -0.16734901869466395 -0.24731975069795925, 0.002496857712068687 1.1285480121499596, 0.40543118304603315 1.144327461104263" />
<path style="fill:none; stroke-width:0.02; stroke:%23861322; stroke-opacity:0.28130143302467187; stroke-linecap:round;" d="M 0.4850186561745198 -0.19620461383507515 C 0.06314644961381041 -0.18689174743389447, 0.277870900655496 1.2497872825852983, 0.49115037057908634 1.2564190907940702" />
<path style="fill:none; stroke-width:0.02; stroke:%23862F13; stroke-opacity:0.32662208782695845; stroke-linecap:round;" d="M 0.5572568667958676 -0.13415356394917816 C -0.10568746494762975 -0.12336127532564656, 0.10138431606281288 1.2509467850042786, 0.5647742989521245 1.255646729399623" />
<path style="fill:none; stroke-width:0.05; stroke:%23863C13; stroke-opacity:0.3525583356368677; stroke-linecap:round;" d="M 0.40098827427552614 -0.22928135033060684 C -0.1730972447308148 -0.1803274014434838, 0.13400450663045885 1.2170502163650876, 0.5041846178008582 1.1977176710861988" />
<path style="fill:none; stroke-width:0.05; stroke:%23131786; stroke-opacity:0.260137697429892; stroke-linecap:round;" d="M 0.4685368089288561 -0.10392133617466037 C -0.617931779302615 -0.09209218887738446, -0.4233260785455658 1.206420867309554, 0.4746047060950169 1.2090793174729553" />
<path style="fill:none; stroke-width:0.02; stroke:%23261386; stroke-opacity:0.4444785910627186; stroke-linecap:round;" d="M 0.5636955087145608 -0.1340029757303695 C -0.4047684111755158 -0.16901401550232864, -0.27049229737496444 1.1576521157462123, 0.5060155092069819 1.1981929994159881" />
<path style="fill:none; stroke-width:0.05; stroke:%232E1386; stroke-opacity:0.5136095520158859; stroke-linecap:round;" d="M 0.4893969675530932 -0.15979211638497687 C -0.08018048163826255 -0.11439522951032499, 0.18879630667616323 1.1348246160782214, 0.5761452399227687 1.1151092415659398" />
</svg>)
Valtio: A great state management solution for React
August 2021
Valtio is a fantastic and relatively new state management library for React. It is extraordinarily clear, concise and easy to use, yet…
![](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<path style="fill:%23DBDABD; fill-opacity:0.5;" d="M 0.06684120692986495 0.14040739223396093 A 0.48433107807774056 0.48433107807774056 0 0 0 -0.4174898711478756 0.6247384703117016 A 0.48433107807774056 0.48433107807774056 0 0 0 0.5511722850076055 0.6247384703117014 A 0.48433107807774056 0.48433107807774056 0 0 0 -0.4174898711478756 0.6247384703117017 A 0.48433107807774056 0.48433107807774056 0 0 0 0.5511722850076055 0.6247384703117013" />
<path style="fill:%23DBD4BD; fill-opacity:0.5;" d="M 0.1250953131787389 0.2849765919838253 A 0.6462141866160256 0.6462141866160256 0 0 0 -0.5211188734372867 0.931190778599851 A 0.6462141866160256 0.6462141866160256 0 0 0 0.7713094997947645 0.9311907785998508 A 0.6462141866160256 0.6462141866160256 0 0 0 -0.5211188734372867 0.9311907785998511 A 0.6462141866160256 0.6462141866160256 0 0 0 0.7713094997947645 0.9311907785998506" />
<path style="fill:%23DBD9BD; fill-opacity:0.5;" d="M 0.2186719339012303 0.09080609797288064 A 0.4891955785271527 0.4891955785271527 0 0 0 -0.2705236446259224 0.5800016765000334 A 0.4891955785271527 0.4891955785271527 0 0 0 0.707867512428383 0.5800016765000332 A 0.4891955785271527 0.4891955785271527 0 0 0 -0.2705236446259224 0.5800016765000335 A 0.4891955785271527 0.4891955785271527 0 0 0 0.707867512428383 0.5800016765000331" />
<path style="fill:%23DBD2BD; fill-opacity:0.5;" d="M 0.22569914423610404 0.19836901638851268 A 0.5263305872246606 0.5263305872246606 0 0 0 -0.3006314429885566 0.7246996036131734 A 0.5263305872246606 0.5263305872246606 0 0 0 0.7520297314607647 0.7246996036131732 A 0.5263305872246606 0.5263305872246606 0 0 0 -0.3006314429885566 0.7246996036131735 A 0.5263305872246606 0.5263305872246606 0 0 0 0.7520297314607647 0.7246996036131731" />
<path style="fill:%23DBD3BD; fill-opacity:0.5;" d="M 0.4047190138991291 0.08870690987186625 A 0.4734960466726388 0.4734960466726388 0 0 0 -0.06877703277350966 0.5622029565445051 A 0.4734960466726388 0.4734960466726388 0 0 0 0.8782150605717679 0.5622029565445049 A 0.4734960466726388 0.4734960466726388 0 0 0 -0.06877703277350966 0.5622029565445053 A 0.4734960466726388 0.4734960466726388 0 0 0 0.8782150605717679 0.5622029565445048" />
<path style="fill:%23DBD2BD; fill-opacity:0.5;" d="M 0.9995814003346102 0.19823721068562572 A 0.26944798352353283 0.26944798352353283 0 0 0 0.7301334168110774 0.4676851942091586 A 0.26944798352353283 0.26944798352353283 0 0 0 1.269029383858143 0.4676851942091585 A 0.26944798352353283 0.26944798352353283 0 0 0 0.7301334168110774 0.46768519420915866 A 0.26944798352353283 0.26944798352353283 0 0 0 1.269029383858143 0.46768519420915844" />
<path style="fill:%23DBDBBD; fill-opacity:0.5;" d="M 0.4826911255029489 0.6235791041187497 A 0.1930160235926373 0.1930160235926373 0 0 0 0.2896751019103116 0.816595127711387 A 0.1930160235926373 0.1930160235926373 0 0 0 0.6757071490955862 0.816595127711387 A 0.1930160235926373 0.1930160235926373 0 0 0 0.2896751019103116 0.8165951277113871 A 0.1930160235926373 0.1930160235926373 0 0 0 0.6757071490955862 0.8165951277113869" />
<path style="fill:none; stroke-width:0.02; stroke:%23481966; stroke-opacity:0.4498431166255936; stroke-linecap:round;" d="M 0.5063964785403582 -0.05327173913277601 C 3.166878437572905 -0.11796240061826879, 3.542211874688548 1.365854996604781, 0.5538927504274572 1.4765430736715892" />
<path style="fill:none; stroke-width:0.05; stroke:%23663C19; stroke-opacity:0.5615134481666453; stroke-linecap:round;" d="M 0.5678807665171672 -0.06358526548771679 C 2.0515490670962304 0.032989379855325573, 2.3172283650161374 1.6336539344770822, 0.4831628248359513 1.5567651213493336" />
<path style="fill:none; stroke-width:0.02; stroke:%23331966; stroke-opacity:0.38509446807950076; stroke-linecap:round;" d="M 0.4428364987210484 -0.11941902969906726 C 0.5237439349093335 -0.10587654942550073, 0.9593635406938786 1.416820204986151, 0.5408487331265265 1.4613287201796115" />
<path style="fill:none; stroke-width:0.02; stroke:%23662C19; stroke-opacity:0.35418848954059495; stroke-linecap:round;" d="M 0.5951080105192366 -0.018406180828777846 C 2.466244690794947 0.1792333200884808, 2.643840993774611 1.6440298193730998, 0.45358246558316095 1.4503142661178376" />
<path style="fill:none; stroke-width:0.02; stroke:%23663D19; stroke-opacity:0.24094618335672732; stroke-linecap:round;" d="M 0.5280396964276343 -0.19087068485485703 C 2.501448970858226 -0.15728142723690908, 2.8533802084375774 1.4961793176081306, 0.5162036473914576 1.4995872231306864" />
<path style="fill:none; stroke-width:0.05; stroke:%23664219; stroke-opacity:0.4480901597571924; stroke-linecap:round;" d="M 0.5734670782451925 -0.08841328630124495 C -0.5840293453319243 -0.05362682720155543, -0.22425577140881955 1.4768430792218963, 0.5957360063342902 1.4836170104179291" />
<path style="fill:none; stroke-width:0.05; stroke:%23663319; stroke-opacity:0.5338416532678734; stroke-linecap:round;" d="M 0.4822507191118801 -0.00004127539850411199 C -1.099977377509794 0.06862104200953312, -0.7481405034842328 1.4490269273041152, 0.5290360886325913 1.4237286228922301" />
<path style="fill:none; stroke-width:0.05; stroke:%23663519; stroke-opacity:0.24462753496284395; stroke-linecap:round;" d="M 0.43393802987336083 -0.11585607372641658 C -0.7383129452409998 -0.0809281714760659, -0.383547104855362 1.4270748472125168, 0.45614730113408886 1.4331560805669168" />
<path style="fill:none; stroke-width:0.02; stroke:%233A1966; stroke-opacity:0.4867862063823827; stroke-linecap:round;" d="M 0.4444276124472324 -0.1634387599415706 C -0.00587157602680663 -0.11340281010637032, 0.44069773508560406 1.4019251227639935, 0.5547179026468068 1.4124669941098185" />
<path style="fill:none; stroke-width:0.05; stroke:%23664A19; stroke-opacity:0.3963226556703183; stroke-linecap:round;" d="M 0.5054320276455971 -0.18656480174271595 C 1.0102122817140993 -0.1511591490254609, 1.3117819366104024 1.463329230400711, 0.45279245101632376 1.4550033689491726" />
</svg>)
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…