stroke looper animation

description.md

http://bouboucle.com?gist=c02b8f4bfb85bc565c614406867665fc

looper.jsonp

load({"width":377,"height":608,"speed":0,"lineData":[{"start":1713887767890,"last":594,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":600,"times":[1,36,53,70,86,103,120,136,153,170,187,203,220,237,254,271,288,304,321,338,354,371,389,404,422,437,454,471,488,504,521,538,555,571,588],"segments":[[36.807900731121265,112.02580834942431],[34.197095219646656,125.08955957012743],[28.975484196697437,152.2622280271587],[28.45362979606267,167.93880273418995],[36.807900731121265,160.10079003887745],[71.79206973746892,116.72916223126025],[111.9978497667658,66.041357055479],[151.68126041129705,26.327306762510247],[179.87721378043767,5.947904601865716],[193.45309573844548,9.08312799053759],[192.40887576774236,40.43626214581103],[175.69984561637517,97.916845336729],[148.02621585563298,172.64212609844776],[115.65286380485173,255.72783471661182],[89.54532748893376,338.8134670408306],[71.26969272330876,409.8806667478618],[65.00387698844548,457.95516015606495],[72.83628970817205,478.33455468731495],[92.15612918571111,471.01888085918995],[122.96292239860173,432.8729458005962],[169.95636111930486,372.77950097637745],[221.12721378043767,305.8927211912212],[270.20913821891423,255.20491601543995],[304.67144900992986,232.2126674802837],[319.8133557482111,235.34844018536182],[317.72491580680486,266.7010708005962],[299.449799840008,325.7497463377056],[271.775727574383,400.9968776853618],[248.80133182242986,476.24446679668995],[234.70309573844548,533.725179687315],[233.65887576774236,567.16829492169],[244.6239483995783,580.232503906065],[264.9880383653986,579.1872768552837],[293.70587283805486,564.5559291990337],[336.52240115836736,541.0407314451274]]},{"start":1713887772431,"last":534,"beat":2000,"lifetime":500,"color":"black","multiPeriod":1,"strokeWidth":600,"times":[0,41,57,74,90,107,124,140,158,174,191,207,224,241,257,275,291,308,325,342,358,375,392,408,424,441,458,477,491,509,525],"segments":[[55.6053822679865,248.41216088848682],[72.83628970817205,216.01378442364307],[118.26366550162908,145.46944238262745],[161.07972842887517,87.46599389629931],[189.27572757438298,59.77091027813525],[207.02899295524236,52.977636352354],[212.25058109000798,60.293294921689935],[205.98477298453923,86.94362451153368],[184.05462772086736,130.3152523191509],[154.29206973746892,186.7511196287212],[127.13978702262517,248.41216088848682],[106.77623874381658,306.93794824200245],[94.76694614127751,354.4900417478618],[98.42196017936345,389.5007534177837],[114.08627444938298,407.2678127439556],[139.6714337511408,400.4745083005962],[177.78877383903142,356.5800075681743],[226.34884769157048,287.0809230955181],[273.3422558946955,219.1489467771587],[309.8925488634455,179.9577846677837],[327.12396365836736,173.1644954832134],[330.25662357047673,190.40865136700245],[318.2472851915705,238.48360253887745],[297.36135989860173,317.38887597637745],[272.8199475450861,417.7186794431743],[257.155610386883,510.2104702146587],[250.3674328966486,561.9430141599712],[249.84555179313298,573.4392299802837],[257.155610386883,570.8263759763774],[278.0415051622736,558.8078823240337],[310.4149182482111,540.5184536130962]]},{"start":1713887778268,"last":475,"beat":2000,"lifetime":500,"color":"#F48FB1","multiPeriod":1,"strokeWidth":600,"times":[0,35,51,69,85,104,119,134,157,168,187,203,219,235,252,268,288,302,319,338,355,369,386,402,419,436,453,470],"segments":[[27.931264225994312,232.2126674802837],[47.25111896232244,201.9048061521587],[93.20034915641423,132.928075805479],[139.6714337511408,70.22179223614306],[173.08955508903142,36.77868463116259],[191.36465579703923,24.75970269756884],[198.15236026481267,32.598234191709466],[190.3204358263361,61.33853723126025],[158.99128848746892,142.3342495115337],[145.93728763297673,175.7773647459087],[119.3078854723322,244.75407983379932],[101.55462009147283,311.6407680662212],[89.54532748893376,362.8509426267681],[87.45637637809392,390.02364160137745],[96.85538608268376,395.77168847637745],[116.17471439078923,382.70796777325245],[146.98199588492986,345.60677148418995],[183.53224307731267,293.35140039043995],[221.12721378043767,248.41216088848682],[249.84555179313298,222.8070278318462],[268.6430676622736,220.1942348630962],[275.95306522086736,242.66405297833057],[274.90884525016423,294.9189663084087],[266.03225833610173,370.1666164548931],[260.810639683758,451.16182519512745],[259.24405032828923,525.3641567380962],[259.76641971305486,584.4129848630962],[259.76641971305486,658.6147670896587]]},{"start":1713887784629,"last":463,"beat":2000,"lifetime":500,"color":"#C2185B","multiPeriod":1,"strokeWidth":600,"times":[1,39,56,73,90,106,122,139,156,172,190,206,223,240,256,273,290,307,323,339,356,374,390,407,424,441,457],"segments":[[23.754388157879077,133.45044519024464],[23.232022587810718,141.2890072019634],[22.710168187175952,164.8036098630962],[23.232022587810718,189.36345483379932],[30.542071644817554,202.42769433575245],[46.20689899161931,197.20198632793995],[69.18125278190251,172.64212609844776],[96.85538608268376,138.67613793926807],[125.57371646598455,103.66544152813525],[150.11465579703923,76.49272729473681],[166.82370120719548,64.473730102354],[176.7445538683283,70.74417687969775],[177.26643497184392,97.3945064695415],[159.51316959098455,173.1644954832134],[142.28224307731267,255.72783471661182],[131.83955508903142,339.3358364255962],[129.75058109000798,410.4030666502056],[135.49458438590642,453.2523403318462],[145.93728763297673,466.83833886700245],[162.1239483995783,455.86519433575245],[183.01040775016423,427.12483789043995],[207.55133182242986,396.2940578611431],[233.65887576774236,374.8694362791118],[258.1998303575861,367.0313930662212],[284.3073743028986,375.9146633298931],[314.5922558946955,408.3125515134868],[375.16165286735173,472.0641079099712]]}],"backgroundColor":"rgb(255,255,255)"});