stroke looper animation

description.md

http://bouboucle.com?gist=3da43106b9eaede8a18aa97dd0574354

looper.jsonp

load({"width":1366,"height":561,"speed":1,"lineData":[{"start":1712165570139,"last":1851,"beat":2000,"lifetime":1000,"color":"#FDD835","multiPeriod":1,"strokeWidth":20,"times":[1,109,125,142,158,176,192,208,225,242,259,276,292,310,326,342,359,376,392,409,425,442,459,476,509,559,744,777,811,844,861,878,894,911,927,944,978,994,1012,1028,1045,1061,1078,1095,1112,1128,1145,1162,1179,1195,1212,1229,1245,1262,1278,1295,1312,1328,1345,1362,1379,1412],"segments":[[269,207],[269,211],[268,230],[268,243],[268,257],[275,274],[283,288],[295,303],[305,312],[318,317],[332,320],[348,320],[366,320],[392,314],[406,304],[419,294],[426,279],[432,262],[433,248],[433,239],[433,231],[433,225],[433,222],[431,219],[428,216],[423,216],[419,220],[418,224],[417,230],[415,237],[415,241],[415,244],[415,247],[415,251],[415,254],[415,257],[417,263],[419,267],[425,272],[431,277],[445,288],[457,294],[466,297],[480,302],[497,308],[512,313],[530,318],[551,323],[572,327],[594,327],[611,327],[627,327],[638,323],[650,320],[666,316],[681,310],[694,304],[705,300],[710,296],[716,292],[720,289],[724,286]]},{"start":1712165578906,"last":764,"beat":2000,"lifetime":1000,"color":"#FDD835","multiPeriod":1,"strokeWidth":20,"times":[1,90,105,121,138,155,172,189,205,222,238,255,272,289,305,322,339,356,406,423,439,456,473,490,506,523,539,556,573,589,606,623,640,656,673,690,724],"segments":[[254,122],[257,125],[263,132],[273,141],[284,147],[301,152],[324,154],[348,155],[390,155],[416,153],[438,147],[457,140],[472,134],[481,128],[489,124],[494,121],[500,118],[503,117],[506,117],[513,119],[521,127],[529,133],[535,140],[543,153],[550,165],[557,179],[563,190],[569,207],[573,221],[579,245],[582,260],[584,272],[585,283],[587,291],[588,297],[588,301],[588,304]]}],"backgroundColor":"rgb(255,255,255)"});