stroke looper animation

description.md

http://bouboucle.com?gist=ef5b93a8bfe2055043f3a44a63bf1706

looper.jsonp

load({"width":1366,"height":527,"speed":1,"lineData":[{"start":1714293745519,"last":566,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,26,43,60,76,93,109,126,143,159,176,226,242,259,276,293,309,326,343,360,376,393,409,426,442,461,476,493,566],"segments":[[272,88],[286,89],[317,96],[389,110],[496,136],[628,168],[867,226],[991,257],[1076,274],[1107,278],[1113,278],[1106,271],[1073,254],[1010,237],[941,230],[827,234],[776,247],[751,261],[737,279],[728,300],[724,317],[719,323],[715,323],[707,316],[698,302],[685,281],[668,262],[656,250],[654,247]]},{"start":1714293749795,"last":0,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[493,152],[508,153],[593,165],[763,189],[961,207],[1129,214],[1227,214],[1256,214],[1256,211],[1235,201],[1159,177],[1057,168],[936,179],[837,214],[774,283],[749,380],[743,484],[744,560],[744,566],[740,566],[733,560],[692,523],[610,460],[498,398],[372,350],[273,325],[197,303],[167,290],[160,284],[168,274],[213,249],[267,223],[335,194],[402,168],[452,147],[484,134],[501,129],[509,128],[519,129],[560,152],[669,207],[833,271],[1097,344],[1226,375],[1292,389],[1307,391],[1288,379],[1208,349],[1080,320],[970,312],[910,313],[891,317],[887,318]]},{"start":1714293757550,"last":93,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":600,"times":[0,78,93],"segments":[[1178,305],[1178,302],[1178,296]]},{"start":1714293758725,"last":717,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":600,"times":[0,154,170,187,204,222,238,254,270,337,353,370,387,403,420,442,454,470,487,503,520,537,553,570,588,603,621,638,655,670],"segments":[[531,230],[568,230],[685,230],[887,230],[1140,230],[1365,229],[1365,215],[1365,187],[1365,181],[1343,183],[1244,200],[1064,220],[818,227],[554,227],[333,227],[125,227],[92,226],[61,221],[56,220],[50,218],[42,214],[30,209],[14,204],[0,201],[0,198],[0,195],[0,191],[0,186],[0,176],[0,173]]},{"start":1714293762583,"last":1167,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":600,"times":[0,12,29,63,79,96,112,129,146,163,180,196,212,229,245,263,279,296,312,345,363,379,396,412,429,446,463,479,496,513,529,546,563,580,596,612,629,646,662,679,696,713,729,746,763,779,797,813,879,896,912,929,945,962,979,996,1012,1029,1045,1062,1079,1096,1112,1129,1164],"segments":[[1269,133],[1341,120],[1351,113],[1351,109],[1331,107],[1238,107],[1021,115],[695,120],[348,120],[62,120],[0,111],[0,108],[5,103],[49,90],[149,65],[277,38],[394,20],[466,13],[478,12],[458,16],[361,31],[198,60],[0,123],[0,145],[0,154],[11,157],[32,157],[45,154],[48,152],[41,155],[15,169],[0,215],[0,297],[0,392],[3,527],[74,566],[257,566],[574,566],[933,566],[1287,566],[1365,539],[1365,508],[1365,493],[1356,485],[1318,478],[1246,476],[1172,482],[1160,486],[1155,485],[1147,480],[1132,475],[1104,468],[1067,460],[1043,451],[1037,445],[1045,434],[1059,421],[1075,406],[1086,392],[1088,384],[1088,378],[1082,375],[1077,374],[1072,375],[1069,376]]},{"start":1714293763836,"last":161,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":600,"times":[0,9,26,43,59,76,93,111,143],"segments":[[990,400],[974,404],[947,411],[922,417],[902,424],[888,428],[881,429],[877,429],[874,429]]}],"backgroundColor":"rgb(255,255,255)"});