stroke looper animation

description.md

http://bouboucle.com?gist=7754edc466fc6e9b18f1b11a68135f70

looper.jsonp

load({"width":1470,"height":788,"speed":1,"lineData":[{"start":1718786947749,"last":584,"beat":500,"lifetime":50,"color":"#F9A825","multiPeriod":1,"strokeWidth":600,"times":[0,58,75,92,109,125,142,159,175,192,209,226,241,259,441,458,475],"segments":[[310,495],[316,496],[331,493],[357,489],[390,489],[425,489],[468,489],[514,489],[585,489],[627,489],[662,489],[689,489],[703,489],[707,489],[713,489],[719,488],[722,488]]},{"start":1718786954284,"last":449,"beat":500,"lifetime":50,"color":"#F9A825","multiPeriod":1,"strokeWidth":50,"times":[0,57,74,91,106,124,139,157,174,189,290,306,323,339,441,449],"segments":[[478,446],[481,446],[489,446],[503,446],[529,446],[558,446],[590,446],[622,446],[650,446],[664,446],[673,446],[683,446],[690,446],[696,446],[701,444],[706,441]]},{"start":1718786956052,"last":489,"beat":500,"lifetime":50,"color":"#F9A825","multiPeriod":1,"strokeWidth":50,"times":[1,22,39,55,72,88,105,122,138,156,172,189,206,222,240,255,273,289,305,322,339,355,372,388],"segments":[[1375,270],[1356,273],[1324,277],[1297,284],[1283,287],[1279,290],[1273,293],[1265,297],[1242,307],[1210,319],[1166,332],[1117,339],[1068,339],[1025,339],[990,339],[964,341],[932,346],[907,352],[875,363],[840,370],[802,376],[765,380],[740,384],[730,385]]},{"start":1718786958213,"last":328,"beat":500,"lifetime":50,"color":"#F9A825","multiPeriod":1,"strokeWidth":50,"times":[0,28,45,61,78,94,111,128,144,161,177,194,211,228,245,261,278,294,311],"segments":[[82,161],[87,166],[98,177],[125,193],[160,213],[203,237],[252,265],[309,298],[335,315],[353,328],[366,337],[385,348],[404,358],[432,370],[460,381],[489,395],[509,403],[516,409],[519,411]]}],"backgroundColor":"rgb(255,255,255)"});