stroke looper animation

description.md

http://bouboucle.com?gist=588b2fe339a995e887db8687b9734638

looper.jsonp

load({"width":1366,"height":841.33,"speed":1,"lineData":[{"start":1599592534550,"last":894,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,27,60,92,109,125,140,156,172,190,209,225,239,255,273,290,306,322,339,358,374,389,405,422,439,456,472,489,508,522,541,555,575,588,605,623,639,656,674,690,707,722,739,756,772,789,809,823,839,856,876,893],"segments":[[798,234],[788,222],[779,210],[766,197],[757,192],[746,188],[733,186],[718,185],[701,186],[682,190],[662,196],[642,203],[620,215],[596,229],[573,246],[551,265],[532,286],[514,308],[501,332],[490,358],[484,385],[482,413],[483,441],[488,469],[496,495],[509,521],[524,545],[542,567],[562,590],[584,609],[608,627],[634,641],[660,652],[687,660],[714,664],[741,663],[767,658],[794,650],[820,638],[845,621],[869,600],[889,578],[907,554],[922,528],[935,500],[945,469],[953,435],[955,400],[952,364],[943,326],[929,289],[914,261]]},{"start":1599592537541,"last":1019,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,20,32,48,67,83,101,115,132,148,165,183,198,215,233,249,265,281,298,314,331,348,366,381,399,414,432,448,465,481,498,518,533,549,565,582,599,615,631,648,668,685,699,714,731,748,765,781,798,817,833,850,864,885,901,914,931,949,966,982,1000,1018],"segments":[[871,69],[855,59],[837,50],[818,42],[797,36],[771,31],[742,29],[710,30],[673,36],[634,47],[595,61],[555,80],[518,102],[481,129],[445,162],[415,197],[390,236],[371,278],[358,319],[351,363],[350,408],[354,451],[362,494],[374,538],[389,580],[408,622],[431,659],[456,692],[486,722],[519,749],[554,770],[592,787],[631,799],[670,806],[710,809],[751,809],[792,803],[831,792],[871,775],[908,755],[945,729],[981,699],[1012,668],[1042,635],[1070,597],[1093,557],[1111,514],[1124,469],[1130,426],[1131,381],[1126,335],[1118,290],[1105,244],[1085,197],[1060,155],[1031,115],[997,78],[960,47],[919,21],[874,-2],[827,-20],[783,-31]]},{"start":1599592540829,"last":673,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,13,27,44,60,80,96,114,127,144,161,177,194,211,230,244,261,277,293,312,327,343,360,376,394,412,427,443,460,477,494,510,529,543,564,578,593,610,627,644,661,672],"segments":[[1031,11],[1014,3],[995,-4],[974,-11],[951,-16],[926,-21],[897,-26],[865,-30],[831,-33],[793,-34],[754,-34],[714,-33],[672,-30],[629,-24],[587,-18],[544,-8],[500,5],[458,20],[415,38],[372,59],[332,83],[294,108],[258,135],[228,165],[199,199],[173,238],[152,276],[137,316],[127,356],[122,398],[120,444],[123,492],[131,535],[145,578],[164,621],[187,660],[215,698],[247,734],[282,765],[322,795],[366,823],[387,834]]},{"start":1599592541701,"last":93,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,24,39,55,72,93],"segments":[[939,838],[987,785],[1017,754],[1042,723],[1066,691],[1083,666]]},{"start":1599592544069,"last":358,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,24,37,54,70,87,105,121,139,156,171,188,204,221,238,254,274,288,305,321,337,338,358],"segments":[[1060,761],[1077,752],[1091,739],[1109,728],[1131,712],[1154,692],[1174,667],[1192,639],[1208,610],[1220,579],[1231,545],[1241,509],[1250,469],[1259,428],[1267,383],[1275,338],[1279,291],[1280,241],[1280,194],[1275,144],[1267,104],[1264,90],[1253,47]]},{"start":1599592545629,"last":436,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[2,14,35,45,60,81,94,112,128,144,160,177,194,211,227,245,262,277,294,311,327,344,364,378,394,412,427,436],"segments":[[252,20],[248,10],[245,8],[240,8],[233,10],[222,18],[208,32],[191,51],[172,76],[151,107],[130,143],[110,184],[90,231],[73,280],[59,330],[48,384],[41,436],[39,490],[41,538],[48,582],[60,623],[77,664],[96,702],[120,737],[146,769],[177,801],[211,829],[220,838]]},{"start":1599592547367,"last":165,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,26,43,60,73,90,106,123,140,156,164],"segments":[[1224,758],[1234,741],[1242,724],[1253,705],[1264,686],[1276,664],[1289,639],[1302,611],[1316,582],[1329,547],[1332,537]]},{"start":1599592575065,"last":108,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,33,48,64,78,94,106],"segments":[[815,345],[812,344],[807,350],[796,365],[781,387],[761,417],[751,435]]},{"start":1599592580886,"last":103,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,10,28,41,57,76,94,102],"segments":[[892,505],[884,509],[873,517],[857,524],[837,530],[813,534],[787,538],[772,539]]},{"start":1599592582002,"last":137,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,12,25,42,58,76,92,108,126,137],"segments":[[912,542],[899,547],[881,556],[861,564],[836,573],[807,583],[778,593],[749,601],[724,608],[714,610]]},{"start":1599592582719,"last":145,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,12,27,45,61,78,91,108,125,145],"segments":[[841,612],[809,626],[788,634],[756,643],[724,651],[693,656],[665,657],[641,653],[626,645],[620,638]]},{"start":1599592584777,"last":99,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,22,37,52,69,87,99],"segments":[[899,592],[877,609],[851,628],[833,640],[810,655],[788,668],[779,673]]},{"start":1599592585139,"last":131,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,23,39,55,71,89,105,123,131],"segments":[[867,654],[831,671],[806,682],[780,694],[753,705],[729,716],[708,724],[694,729],[691,730]]},{"start":1599592585490,"last":111,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,23,38,53,74,88,105],"segments":[[845,701],[812,730],[788,748],[759,768],[729,786],[698,803],[669,817]]},{"start":1599592587222,"last":127,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,24,39,55,72,89,106,122],"segments":[[553,249],[521,277],[495,301],[467,325],[434,353],[405,377],[378,398],[357,413]]},{"start":1599592587589,"last":127,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,23,38,56,74,89,106,122],"segments":[[487,384],[460,418],[441,442],[421,466],[401,489],[383,510],[369,527],[360,538]]},{"start":1599592587927,"last":131,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,21,37,51,68,85,102,117,130],"segments":[[492,519],[478,550],[462,579],[445,606],[426,633],[406,659],[387,681],[369,701],[361,710]]},{"start":1599592589957,"last":141,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,25,37,54,71,88,106,125,141],"segments":[[1175,45],[1154,59],[1134,74],[1110,96],[1085,119],[1059,145],[1035,169],[1018,188],[1007,200]]},{"start":1599592590315,"last":122,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,16,30,48,65,81,97,116,122],"segments":[[1129,172],[1109,194],[1089,215],[1067,239],[1047,262],[1029,283],[1015,302],[1007,314],[1006,317]]},{"start":1599592590638,"last":136,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,26,40,57,73,90,107,123,136],"segments":[[1177,288],[1157,312],[1138,333],[1115,358],[1090,386],[1065,412],[1045,436],[1033,453],[1029,460]]},{"start":1599592590994,"last":113,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,20,35,51,67,84,101,112],"segments":[[1185,465],[1163,491],[1142,513],[1121,535],[1098,558],[1076,581],[1057,600],[1048,609]]},{"start":1599592592837,"last":100,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,11,28,41,58,76,93,100],"segments":[[255,90],[239,111],[219,142],[198,173],[179,202],[164,225],[152,242],[150,245]]},{"start":1599592593189,"last":109,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,27,40,57,73,89,108],"segments":[[269,216],[246,255],[228,283],[211,311],[195,336],[182,358],[174,370]]},{"start":1599592593535,"last":130,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,14,27,44,60,77,93,110,129],"segments":[[288,348],[279,364],[266,390],[251,418],[234,448],[216,477],[200,505],[186,529],[177,543]]},{"start":1599592593917,"last":75,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,15,31,49,64,73],"segments":[[279,502],[256,549],[236,592],[217,631],[202,666],[195,682]]},{"start":1599592596220,"last":134,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,16,30,43,59,76,92,109,125,133],"segments":[[463,41],[454,47],[442,59],[425,76],[405,99],[384,124],[365,148],[351,168],[341,182],[340,185]]},{"start":1599592596545,"last":155,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,22,35,50,67,84,100,117,134,152],"segments":[[485,96],[481,110],[472,125],[459,146],[441,170],[419,197],[397,226],[377,253],[361,274],[353,287]]},{"start":1599592596919,"last":139,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,18,30,45,62,78,93,110,126,139],"segments":[[524,192],[509,214],[491,240],[468,271],[445,304],[424,333],[406,361],[394,381],[388,392],[387,395]]},{"start":1599592597270,"last":121,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,8,26,42,59,76,92,109,120],"segments":[[549,307],[538,324],[522,349],[501,381],[478,415],[452,453],[427,493],[405,530],[396,548]]},{"start":1599592602786,"last":218,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,22,27,45,80,96,111,127,147,162,177,193,210],"segments":[[1196,107],[1200,103],[1204,100],[1208,97],[1211,95],[1208,97],[1197,103],[1180,115],[1157,132],[1132,151],[1111,168],[1094,182],[1086,191]]},{"start":1599592603191,"last":157,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,26,42,57,73,90,105,123,139,157],"segments":[[1226,135],[1204,155],[1184,172],[1160,193],[1136,214],[1113,235],[1093,253],[1080,267],[1071,277],[1070,281]]},{"start":1599592603533,"last":152,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,17,32,49,63,81,98,113,129,146],"segments":[[1203,253],[1182,271],[1160,291],[1134,314],[1107,338],[1083,361],[1062,381],[1048,396],[1041,406],[1041,410]]},{"start":1599592603874,"last":126,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1,25,40,57,75,93,107,126],"segments":[[1236,360],[1207,386],[1180,408],[1148,434],[1112,464],[1078,495],[1044,526],[1020,550]]},{"start":1599592623174,"last":510,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":200,"times":[1,10,27,42,57,74,92,111,126,142,159,176,192,209,224,242,259,276,292,309,325,343,359,375,392,409,425,444,461,478,494,509],"segments":[[44,839],[47,828],[52,814],[60,797],[70,776],[83,753],[99,727],[118,698],[141,668],[166,634],[196,598],[231,559],[268,519],[310,478],[355,438],[403,396],[455,355],[511,314],[569,274],[631,236],[694,200],[759,167],[827,137],[895,110],[963,87],[1030,68],[1095,53],[1159,41],[1219,32],[1274,28],[1324,26],[1356,27]]},{"start":1599592625923,"last":531,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":200,"times":[1,12,25,43,58,75,92,109,127,144,158,176,192,209,226,245,260,277,293,312,326,342,359,379,395,411,428,442,459,477,492,510,528],"segments":[[1302,807],[1297,803],[1291,793],[1283,778],[1277,762],[1270,743],[1262,720],[1251,696],[1238,668],[1221,639],[1203,609],[1181,575],[1157,537],[1131,500],[1101,461],[1067,422],[1032,385],[994,345],[954,305],[911,266],[866,229],[817,192],[764,157],[709,125],[652,95],[591,67],[527,42],[458,22],[386,8],[313,1],[239,-1],[164,5],[86,19]]},{"start":1599592628407,"last":334,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":200,"times":[1,13,28,44,61,75,92,109,125,142,159,177,194,210,226,241,258,275,292,312,326,334],"segments":[[8,431],[23,415],[44,396],[69,375],[101,351],[138,326],[179,302],[228,276],[282,250],[342,225],[409,201],[482,179],[560,160],[644,144],[734,134],[828,130],[926,133],[1027,141],[1131,157],[1232,182],[1327,217],[1351,228]]},{"start":1599592630606,"last":352,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":200,"times":[0,12,31,45,60,76,94,112,126,143,161,177,193,213,228,245,262,277,294,310,327,345,352],"segments":[[899,824],[905,822],[915,815],[927,803],[942,788],[960,767],[977,742],[994,715],[1011,683],[1027,648],[1042,609],[1056,566],[1068,519],[1078,471],[1086,418],[1090,361],[1092,302],[1090,240],[1082,179],[1070,119],[1052,59],[1028,-3],[1021,-20]]},{"start":1599592631890,"last":355,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":200,"times":[0,12,27,47,60,76,92,109,127,143,162,176,193,209,227,242,261,276,294,310,327,343,355],"segments":[[725,829],[712,833],[697,833],[679,827],[660,817],[638,801],[613,779],[583,753],[553,723],[520,690],[483,650],[445,606],[408,556],[374,503],[345,447],[318,382],[297,308],[289,228],[293,144],[311,59],[342,-25],[384,-104],[409,-142]]},{"start":1599592639240,"last":34,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":200,"times":[0,12],"segments":[[704,368],[694,378]]},{"start":1599592641618,"last":42,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":200,"times":[1,16],"segments":[[88,694],[86,701]]},{"start":1599592643474,"last":55,"beat":500,"lifetime":50,"color":"black","multiPeriod":1,"strokeWidth":200,"times":[1,14,29,55],"segments":[[1229,741],[1222,746],[1218,750],[1223,749]]},{"start":1599592660161,"last":30,"beat":500,"lifetime":50,"color":"#EC407A","multiPeriod":1,"strokeWidth":7,"times":[0,7],"segments":[[135,68],[132,68]]},{"start":1599592661277,"last":113,"beat":500,"lifetime":50,"color":"#EC407A","multiPeriod":1,"strokeWidth":7,"times":[0,9,58,76,95,109],"segments":[[778,488],[777,492],[782,494],[786,494],[790,492],[795,488]]},{"start":1599592662443,"last":30,"beat":500,"lifetime":50,"color":"#EC407A","multiPeriod":1,"strokeWidth":7,"times":[0],"segments":[[998,798]]},{"start":1599592663194,"last":55,"beat":500,"lifetime":50,"color":"#EC407A","multiPeriod":1,"strokeWidth":7,"times":[0,15],"segments":[[1011,757],[1010,764]]},{"start":1599592664168,"last":44,"beat":500,"lifetime":50,"color":"#EC407A","multiPeriod":1,"strokeWidth":7,"times":[0,10,27,44],"segments":[[326,779],[324,782],[317,788],[317,785]]},{"start":1599592665293,"last":91,"beat":500,"lifetime":50,"color":"#EC407A","multiPeriod":1,"strokeWidth":7,"times":[1,28,76,91],"segments":[[1174,252],[1171,252],[1176,251],[1179,249]]},{"start":1599592668161,"last":79,"beat":500,"lifetime":50,"color":"#EC407A","multiPeriod":1,"strokeWidth":7,"times":[1,17,30,79],"segments":[[671,451],[668,452],[664,454],[664,451]]},{"start":1599592670194,"last":24,"beat":500,"lifetime":50,"color":"#EC407A","multiPeriod":1,"strokeWidth":7,"times":[1,23],"segments":[[720,340],[717,342]]},{"start":1599592672281,"last":92,"beat":500,"lifetime":50,"color":"#EC407A","multiPeriod":1,"strokeWidth":7,"times":[0],"segments":[[1059,791]]},{"start":1599592674525,"last":44,"beat":500,"lifetime":50,"color":"#EC407A","multiPeriod":1,"strokeWidth":7,"times":[0,18],"segments":[[45,223],[42,227]]}],"backgroundColor":"rgb(255,255,255)"});