stroke looper animation

description.md

http://bouboucle.com?gist=363cb789d0f50d3106a9115b83f437cc

looper.jsonp

load({"width":1366,"height":561.33,"speed":1,"lineData":[{"start":1718784694726,"last":34,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0],"segments":[[722,241]]},{"start":1718784697481,"last":37,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0],"segments":[[1055,360]]},{"start":1718784697552,"last":46,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0],"segments":[[1072,350]]},{"start":1718784698165,"last":463,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,28,47,66,87,110,133,156,179,200,228,255,277,297,319,341,363,390,417,443],"segments":[[1152,110],[1151,106],[1144,99],[1132,94],[1116,88],[1100,82],[1070,76],[1053,73],[1033,70],[1017,66],[992,58],[976,49],[968,41],[965,36],[966,29],[972,23],[998,15],[1024,14],[1074,15],[1119,23]]},{"start":1718784698665,"last":121,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,29,55,79,99],"segments":[[1235,63],[1263,80],[1302,113],[1320,135],[1330,158]]},{"start":1718784698823,"last":418,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,26,46,66,92,119,140,160,190,215,235,255,281,307,327,347,374,399],"segments":[[1337,261],[1328,295],[1317,323],[1303,349],[1288,374],[1265,404],[1249,422],[1235,436],[1213,455],[1197,472],[1192,480],[1190,485],[1189,488],[1196,494],[1212,498],[1233,498],[1272,496],[1280,497]]},{"start":1718784699262,"last":560,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,21,48,75,95,116,138,161,194,215,235,255,282,309,330,350,376,402,421,443,469,495,515,536],"segments":[[1312,509],[1309,510],[1281,522],[1243,530],[1164,539],[1106,544],[1052,546],[997,542],[926,537],[854,528],[811,524],[768,526],[729,531],[679,540],[649,541],[621,541],[581,535],[551,530],[524,521],[498,512],[463,513],[427,524],[416,525],[375,512]]},{"start":1718784699898,"last":246,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[1,32,60,87,108,129,157,182,202,222],"segments":[[206,350],[201,374],[201,423],[193,440],[171,439],[100,386],[52,337],[15,291],[11,285],[13,291]]},{"start":1718784700171,"last":115,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,28,48,70,93],"segments":[[73,392],[77,405],[72,407],[33,379],[26,370]]},{"start":1718784700400,"last":359,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,4,25,46,67,90,117,140,161,182,204,234,265,289,310,337],"segments":[[98,253],[101,255],[115,261],[119,250],[108,204],[91,150],[75,71],[81,42],[107,44],[161,84],[250,165],[330,213],[379,225],[395,213],[394,174],[383,138]]},{"start":1718784700780,"last":142,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,24,50,77,97,118],"segments":[[377,44],[403,75],[442,123],[478,152],[494,161],[500,164]]},{"start":1718784700964,"last":23,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,0],"segments":[[479,59],[474,31]]},{"start":1718784701053,"last":169,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,6,28,49,70,99,125,146],"segments":[[609,118],[635,137],[696,171],[720,171],[739,158],[750,114],[749,74],[751,49]]},{"start":1718784701244,"last":148,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,30,57,78,100,124],"segments":[[850,90],[956,175],[1011,206],[1039,221],[1063,224],[1069,225]]},{"start":1718784701422,"last":146,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0,1,27,48,70,94,118],"segments":[[1126,162],[1140,163],[1190,190],[1243,241],[1312,319],[1331,341],[1365,379]]},{"start":1718784704833,"last":209,"beat":1000,"lifetime":2000,"color":"#FFEB3B","multiPeriod":1,"strokeWidth":600,"times":[0],"segments":[[592,489]]},{"start":1718784879249,"last":120,"beat":1000,"lifetime":2000,"color":"#81C784","multiPeriod":1,"strokeWidth":50,"times":[0],"segments":[[630,273]]},{"start":1718784880573,"last":156,"beat":1000,"lifetime":2000,"color":"#81C784","multiPeriod":1,"strokeWidth":50,"times":[0],"segments":[[741,267]]},{"start":1718784882308,"last":938,"beat":1000,"lifetime":2000,"color":"#81C784","multiPeriod":1,"strokeWidth":50,"times":[0,39,89,122,172,222,272,308,357,455,489,523,569,620,658,706,755],"segments":[[712,316],[717,316],[740,315],[763,312],[792,304],[833,293],[855,285],[872,280],[880,276],[878,280],[869,289],[857,302],[809,349],[772,393],[748,414],[729,428],[726,430]]},{"start":1718784883580,"last":784,"beat":1000,"lifetime":2000,"color":"#81C784","multiPeriod":1,"strokeWidth":50,"times":[0,166,202,238,286,334,383,420,471,517,568,618,670],"segments":[[485,432],[500,432],[557,451],[588,466],[605,473],[632,480],[690,483],[728,479],[828,450],[882,424],[930,396],[954,383],[963,379]]},{"start":1718784905919,"last":1357,"beat":1000,"lifetime":2000,"color":"#283593","multiPeriod":1,"strokeWidth":50,"times":[0,293,330,409,476,506,536,627,660,693,734,772,805,836,880,918,950,981,1022,1063,1094,1126,1170,1208,1239,1271,1322,1356],"segments":[[14,445],[25,450],[32,453],[35,455],[39,456],[50,457],[53,458],[61,459],[76,460],[92,463],[113,467],[126,468],[142,470],[167,474],[192,478],[206,479],[230,482],[245,484],[260,486],[289,491],[314,499],[329,503],[366,507],[421,511],[427,511],[434,511],[443,511],[460,505]]},{"start":1718784907697,"last":1371,"beat":1000,"lifetime":2000,"color":"#283593","multiPeriod":1,"strokeWidth":50,"times":[1,231,292,331,363,394,436,473,505,539,586,632,665,698,729,770,818,852,882,914,966,1005,1039,1072,1137,1169,1304],"segments":[[460,505],[463,505],[467,506],[471,507],[478,508],[482,509],[488,509],[510,509],[526,509],[538,510],[551,510],[569,512],[580,513],[590,513],[602,514],[619,514],[645,514],[666,514],[690,511],[723,507],[755,503],[773,501],[792,497],[800,497],[808,496],[829,497],[832,498]]},{"start":1718784910102,"last":937,"beat":1000,"lifetime":2000,"color":"#283593","multiPeriod":1,"strokeWidth":50,"times":[0,226,259,306,353,388,430,477,529,561,594,637,680,712,746,795,832,863,897],"segments":[[826,493],[829,493],[862,490],[981,490],[1043,483],[1102,477],[1140,480],[1155,482],[1163,483],[1192,489],[1207,493],[1245,495],[1284,500],[1292,500],[1303,502],[1316,502],[1323,504],[1328,505],[1333,506]]},{"start":1718784911583,"last":5898,"beat":1000,"lifetime":2000,"color":"#283593","multiPeriod":1,"strokeWidth":50,"times":[0,279,316,348,528,583,621,653,689,734,795,828,883,929,961,992,1162,1221,1261,1293,1326,1391,1495,1564,1596,1665,1729,1829,1862,1895,1932,1981,2012,2044,2076,2119,2158,2208,2244,2283,2330,2362,2394,2426,2474,2514,2547,2579,2624,2782,2829,2861,2893,2942,2981,3013,3046,3088,3127,3157,3189,3237,3278,3325,3357,3402,3441,3473,3506,3553,3593,3623,3677,3716,3764,3797,3827,3888,3927,3960,3994,4042,4081,4112,4145,4191,4230,4264,4296,4340,4379,4411,4479,4554,4586,4640,4679,4710,4795,4833,4882,4914,4946,4979,5026,5067,5103,5157,5196,5242,5278,5308,5339,5382,5439,5468,5500,5544],"segments":[[1335,506],[1348,507],[1365,509],[1365,512],[1365,515],[1364,518],[1355,527],[1349,534],[1344,539],[1341,542],[1337,545],[1334,546],[1331,547],[1316,545],[1279,536],[1272,534],[1272,538],[1255,529],[1218,513],[1214,511],[1211,510],[1208,510],[1204,510],[1191,518],[1176,528],[1173,529],[1165,530],[1162,530],[1146,530],[1131,531],[1100,532],[1070,532],[1054,532],[1042,532],[1031,532],[1019,531],[1011,530],[1017,529],[1029,530],[1036,531],[1047,535],[1072,539],[1147,555],[1175,561],[1213,562],[1243,565],[1291,570],[1349,572],[1365,572],[1364,569],[1355,554],[1339,536],[1336,534],[1330,532],[1322,530],[1311,529],[1282,529],[1227,545],[1110,575],[1064,587],[1044,587],[960,584],[924,583],[923,579],[918,567],[917,564],[930,564],[941,566],[977,566],[1038,567],[1059,569],[1070,569],[1075,569],[1098,564],[1134,555],[1156,543],[1159,541],[1159,538],[1146,528],[1132,523],[1087,520],[1050,517],[1040,519],[1007,527],[973,536],[947,546],[934,546],[917,539],[910,535],[908,532],[898,522],[889,518],[885,518],[883,521],[885,524],[922,539],[992,580],[998,580],[1000,577],[1001,573],[997,553],[984,546],[959,537],[926,535],[897,537],[887,538],[884,539],[881,540],[875,540],[866,540],[863,540],[860,538],[856,537],[853,537],[845,536],[827,534],[813,535],[809,536]]},{"start":1718784919445,"last":2899,"beat":1000,"lifetime":2000,"color":"#283593","multiPeriod":1,"strokeWidth":50,"times":[0,270,306,354,391,421,460,505,544,606,658,699,827,878,909,940,975,1045,1079,1109,1244,1319,1390,1420,1450,1485,1539,1577,1610,1642,1687,1729,1761,1792,1843,1881,1911,1943,2000,2042,2074,2106,2157,2195,2226,2284,2324,2354,2451,2484,2516,2567,2604,2634,2666,2710,2752,2783,2814,2865,2898],"segments":[[9,480],[9,485],[10,491],[11,499],[13,506],[13,510],[13,523],[13,536],[13,539],[15,551],[22,581],[25,592],[27,587],[32,555],[34,543],[35,533],[35,528],[35,525],[35,520],[49,486],[52,486],[55,489],[60,500],[60,509],[56,519],[53,525],[54,532],[64,542],[71,546],[78,549],[83,550],[95,551],[107,553],[117,554],[159,559],[173,559],[194,561],[217,563],[259,568],[292,570],[322,571],[358,570],[454,566],[506,565],[520,565],[524,565],[550,568],[559,569],[563,570],[571,571],[591,573],[612,577],[689,583],[736,588],[766,592],[774,593],[781,593],[786,593],[791,593],[799,593],[804,593]]},{"start":1718784923260,"last":1611,"beat":1000,"lifetime":2000,"color":"#283593","multiPeriod":1,"strokeWidth":50,"times":[0,153,194,227,260,311,348,379,411,458,497,646,677,712,756,797,951,987,1020,1066,1105,1135,1165,1213,1257,1291,1323,1395,1506,1548,1580,1610],"segments":[[825,559],[810,556],[805,555],[779,551],[764,549],[756,548],[737,547],[721,548],[716,549],[705,549],[702,548],[710,547],[795,531],[890,514],[904,515],[919,521],[915,521],[905,521],[849,525],[805,524],[774,524],[752,525],[691,528],[617,538],[552,545],[517,545],[500,543],[497,543],[502,539],[531,542],[579,542],[640,540]]},{"start":1718784924906,"last":957,"beat":1000,"lifetime":2000,"color":"#283593","multiPeriod":1,"strokeWidth":50,"times":[0,1,34,86,262,293,327,380,420,451,482,527,567,600,631,682,722,752,783,827,868],"segments":[[668,540],[694,544],[736,555],[750,562],[745,562],[731,562],[706,557],[662,550],[645,547],[589,539],[524,529],[483,524],[461,525],[454,525],[440,523],[368,511],[361,510],[351,510],[324,514],[303,520],[300,520]]},{"start":1718784925935,"last":480,"beat":1000,"lifetime":2000,"color":"#283593","multiPeriod":1,"strokeWidth":50,"times":[0,51,87,135,175,206,289,324,357,389,435,479],"segments":[[312,522],[360,543],[409,558],[423,561],[471,572],[477,573],[469,571],[431,556],[357,539],[289,531],[264,532],[242,522]]},{"start":1718784928235,"last":2418,"beat":1000,"lifetime":2000,"color":"#283593","multiPeriod":1,"strokeWidth":50,"times":[0,311,361,395,460,514,546,580,637,698,728,761,806,857,891,1037,1092,1139,1178,1209,1240,1289,1332,1366,1410,1467,1511,1553,1599,1665,1710,1748,1786,1901,1940,1981,2032,2142,2190,2247,2293,2359],"segments":[[207,503],[207,506],[207,510],[207,513],[207,517],[207,522],[207,527],[206,530],[203,534],[201,537],[198,537],[195,535],[185,526],[132,480],[112,467],[109,469],[108,472],[108,488],[110,499],[111,502],[115,505],[125,510],[150,543],[166,576],[167,580],[125,564],[107,552],[102,549],[97,546],[85,534],[82,531],[71,514],[68,510],[76,508],[97,508],[108,512],[111,512],[114,508],[115,502],[113,496],[108,493],[105,491]]},{"start":1718784948965,"last":888,"beat":1000,"lifetime":2000,"color":"#A1887F","multiPeriod":1,"strokeWidth":50,"times":[1,128,162,211,252,283,419,469,517,595,658],"segments":[[146,389],[200,402],[224,405],[287,411],[332,412],[337,412],[340,412],[343,412],[363,412],[366,413],[369,415]]},{"start":1718784950673,"last":6211,"beat":1000,"lifetime":2000,"color":"#A1887F","multiPeriod":1,"strokeWidth":50,"times":[0,160,192,225,274,313,345,380,426,498,590,624,659,707,744,776,809,864,904,935,969,1017,1057,1089,1121,1224,1256,1288,1660,1745,1831,1922,1990,2029,2288,2348,2381,2436,2492,2586,2687,2810,2875,2922,2963,2995,3028,3086,3126,3161,3195,3246,3284,3317,3349,3395,3438,3514,3572,3613,3646,3701,3765,3944,3977,4038,4073,4106,4139,4188,4229,4260,4294,4349,4388,4424,4461,4537,4570,4601,4634,4689,4730,4763,4797,4845,4884,4917,4951,5041,5081,5115,5171,5214,5315,5357,5393,5426,5491,5526,5559,5592,5643,5685,5721,5753,5948,6045,6160],"segments":[[143,393],[137,389],[110,375],[98,364],[80,350],[72,342],[66,334],[59,324],[57,320],[54,319],[54,323],[59,329],[66,337],[69,340],[78,345],[93,352],[117,366],[160,388],[175,394],[194,402],[215,409],[228,411],[239,411],[259,405],[266,404],[288,398],[383,384],[415,376],[416,373],[418,370],[421,367],[424,364],[434,349],[453,302],[450,304],[446,308],[443,311],[441,314],[438,316],[435,319],[431,319],[427,322],[423,324],[412,323],[402,320],[392,315],[361,308],[291,301],[253,301],[236,301],[217,301],[181,297],[156,295],[132,293],[113,292],[103,291],[100,291],[97,291],[92,291],[82,291],[72,292],[68,292],[65,292],[76,294],[84,297],[94,300],[110,304],[157,319],[186,328],[205,333],[209,333],[219,333],[254,337],[287,339],[299,339],[312,341],[318,342],[323,347],[327,350],[333,359],[335,367],[330,372],[308,372],[283,354],[271,341],[236,324],[176,318],[155,318],[151,318],[149,321],[151,327],[157,333],[171,343],[174,346],[183,350],[197,355],[206,359],[228,364],[277,368],[293,366],[307,363],[321,362],[336,360],[354,358],[369,356],[379,356],[381,353],[383,349],[383,346]]},{"start":1718784958125,"last":3859,"beat":1000,"lifetime":2000,"color":"#A1887F","multiPeriod":1,"strokeWidth":50,"times":[0,105,137,170,204,267,309,342,376,431,471,506,565,840,969,1031,1097,1138,1190,1247,1286,1323,1357,1409,1448,1481,1516,1566,1608,1642,1677,1728,1770,1803,1837,1896,1940,1973,2045,2213,2315,2359,2395,2429,2485,2527,2561,2647,2686,2723,2759,2822,2863,2897,2931,2982,3024,3057,3092,3142,3183,3234,3316,3351,3385,3434,3511,3551,3613,3781],"segments":[[130,258],[139,249],[163,229],[185,207],[204,183],[218,160],[223,150],[233,128],[239,114],[243,103],[247,88],[248,81],[248,78],[245,76],[242,79],[241,82],[241,87],[241,90],[241,93],[239,97],[238,102],[237,108],[237,113],[237,119],[237,122],[238,130],[239,150],[241,181],[242,194],[242,205],[242,216],[242,227],[242,238],[241,243],[241,247],[240,251],[240,254],[240,257],[239,261],[236,263],[233,263],[225,259],[205,235],[191,217],[181,213],[147,215],[143,215],[142,218],[148,223],[160,230],[168,239],[182,248],[192,253],[204,259],[212,262],[217,263],[220,259],[222,255],[223,252],[225,242],[227,234],[228,231],[226,227],[217,235],[206,257],[202,267],[209,245],[228,214],[238,199],[233,198]]},{"start":1718784962899,"last":5363,"beat":1000,"lifetime":2000,"color":"#A1887F","multiPeriod":1,"strokeWidth":50,"times":[0,186,221,261,317,358,392,427,478,524,558,594,646,689,722,760,813,891,925,979,1027,1080,1145,1232,1369,1402,1437,1488,1539,1574,1610,1661,1765,1803,1863,1908,1944,1979,2048,2105,2198,2241,2281,2318,2376,2426,2462,2496,2580,2615,2650,2685,2743,2789,2824,2859,2913,2956,2989,3025,3093,3131,3165,3200,3259,3341,3413,3475,3511,3573,3620,3797,3832,3888,3930,3974,4054,4102,4273,4314,4371,4413,4455,4491,4548,4591,4626,4662,4725,4762,4800,4912,4947,5033,5079,5115,5186,5229,5311,5363],"segments":[[275,74],[283,87],[291,102],[293,113],[296,131],[298,143],[304,155],[309,163],[311,168],[313,172],[319,184],[324,195],[330,216],[334,230],[336,236],[336,239],[339,243],[344,249],[348,256],[351,265],[353,271],[353,274],[353,277],[353,280],[350,279],[345,272],[340,268],[333,265],[314,258],[265,257],[250,258],[246,258],[250,253],[259,238],[271,220],[282,190],[293,158],[295,146],[295,133],[292,132],[283,144],[277,163],[277,188],[278,208],[288,239],[292,253],[295,260],[295,263],[298,264],[304,241],[308,221],[311,211],[304,164],[296,134],[294,129],[287,125],[277,125],[271,127],[268,130],[263,134],[252,166],[239,187],[194,218],[128,255],[84,285],[82,288],[81,291],[87,291],[104,283],[156,265],[187,265],[186,269],[169,284],[147,303],[138,313],[135,316],[132,314],[131,309],[130,317],[129,321],[128,333],[129,356],[134,372],[138,375],[194,376],[256,369],[281,365],[290,362],[309,360],[330,360],[337,362],[356,362],[367,360],[367,355],[357,348],[352,346],[348,345],[345,345],[346,336],[352,327]]},{"start":1718784981879,"last":1313,"beat":1000,"lifetime":2000,"color":"#1976D2","multiPeriod":1,"strokeWidth":50,"times":[0,224,265,301,359,406,442,516,558,593,665,711,751,844,899,934,984,1069,1122,1182,1223,1264],"segments":[[1012,116],[1012,121],[1015,127],[1017,156],[1021,236],[1023,268],[1023,274],[1025,296],[1039,350],[1052,359],[1057,364],[1064,385],[1065,390],[1065,393],[1063,400],[1053,434],[1050,440],[1049,443],[1047,453],[1046,465],[1044,472],[1041,474]]},{"start":1718784983659,"last":3328,"beat":1000,"lifetime":2000,"color":"#1976D2","multiPeriod":1,"strokeWidth":50,"times":[0,309,345,401,449,500,538,594,669,705,798,855,891,960,1119,1156,1192,1275,1349,1466,1505,1543,1874,1913,1955,2041,2077,2117,2206,2250,2350,2389,2429,2468,2528,2586,2625,2678,2722,2822,2881,2918,2981,3022,3061,3099,3152,3199,3239,3281,3327],"segments":[[1073,470],[1121,461],[1160,459],[1188,457],[1216,457],[1233,457],[1272,459],[1291,462],[1300,463],[1312,463],[1315,463],[1319,463],[1329,462],[1333,462],[1335,459],[1335,456],[1334,451],[1333,448],[1331,445],[1328,441],[1309,399],[1309,395],[1309,390],[1314,363],[1315,349],[1315,343],[1311,260],[1310,247],[1308,233],[1308,220],[1306,214],[1304,190],[1299,180],[1297,176],[1291,161],[1283,144],[1266,123],[1251,105],[1246,94],[1242,93],[1239,91],[1236,90],[1232,89],[1219,84],[1182,78],[1171,78],[1151,80],[1136,83],[1130,84],[1119,88],[1115,89]]},{"start":1718784992003,"last":1051,"beat":1000,"lifetime":2000,"color":"#1976D2","multiPeriod":1,"strokeWidth":50,"times":[0,215,270,323,375,416,471,514,552,605,694,749,801,840,880,1013],"segments":[[1012,131],[1015,131],[1022,131],[1037,127],[1048,127],[1051,127],[1055,127],[1075,125],[1090,124],[1103,124],[1106,124],[1113,124],[1144,125],[1160,126],[1164,127],[1156,121]]},{"start":1718784993717,"last":1584,"beat":1000,"lifetime":2000,"color":"#1976D2","multiPeriod":1,"strokeWidth":50,"times":[0,257,298,351,401,444,481,562,599,638,682,815,857,916,967,1007,1077,1122,1159,1198,1257,1310,1347,1383,1443,1488,1546,1584],"segments":[[1052,164],[1053,174],[1068,267],[1085,358],[1108,516],[1120,543],[1122,550],[1117,472],[1119,298],[1105,114],[1095,74],[1095,85],[1103,130],[1125,238],[1151,337],[1153,342],[1149,328],[1172,114],[1197,-9],[1198,-25],[1203,-16],[1207,88],[1212,358],[1219,430],[1218,437],[1207,394],[1244,182],[1248,156]]},{"start":1718784995407,"last":591,"beat":1000,"lifetime":2000,"color":"#1976D2","multiPeriod":1,"strokeWidth":50,"times":[0,9,68,125,207,251,386,428,555],"segments":[[1267,96],[1267,105],[1268,234],[1268,244],[1267,239],[1267,223],[1264,232],[1264,239],[1264,243]]},{"start":1718785182476,"last":220,"beat":1000,"lifetime":2000,"color":"#1976D2","multiPeriod":1,"strokeWidth":50,"times":[0],"segments":[[1284,4]]}],"backgroundColor":"rgb(255,255,255)"});