stroke looper animation

description.md

http://bouboucle.com?gist=384eba9804d41da4d8467456a39f9295

looper.jsonp

load({"width":1366,"height":569.33,"speed":0,"lineData":[{"start":1713792321266,"last":0,"beat":1000,"lifetime":250,"color":"black","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],"segments":[[827,96.99999999999999],[937,71.99999999999999],[1080,63.999999999999986],[1109,83.99999999999999],[1077,253],[820,616],[824,599],[1064,222],[1276,-110.00000000000001],[1274,-97.00000000000001],[1079,325],[926,616],[947,602],[1226,293],[1365,-118.00000000000001],[1295,-2.000000000000014],[935,616],[796,616],[875,471],[1192,-151],[1183,-134],[1000,185],[866,555],[880,547],[1169,146],[1365,-151],[1336,-97.00000000000001],[1096,394],[1089,403],[1189,49.999999999999986],[1205,-48.000000000000014],[1094,32.999999999999986],[719,526],[563,616],[609,519],[795,83.99999999999999],[848,-58.000000000000014],[844,-55.000000000000014]]},{"start":1713792321266,"last":0,"beat":1000,"lifetime":250,"color":"black","multiPeriod":1,"strokeWidth":600,"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],"segments":[[862,323],[874,282],[926,213],[1102,-1.4210854715202004e-14],[1160,-31.000000000000014],[1122,354],[1067,561],[1066,565],[1091,535],[1328,151],[1365,89.99999999999999],[1364,93.99999999999999],[1315,359],[1260,601],[1283,585],[1365,190],[1346,195],[1133,557],[866,616],[799,616],[773,462],[631,118.99999999999999],[473,37.999999999999986],[263,164],[60,341],[2,404],[111,247],[440,-126.00000000000001],[778,-151],[781,-133],[520,322],[226,616],[154,615],[209,459],[456,-151],[494,-131],[403,346],[517,260],[783,-151],[850,-142],[694,163],[452,563],[403,600]]},{"start":1713792399379,"last":0,"beat":1000,"lifetime":250,"color":"#03A9F4","multiPeriod":1,"strokeWidth":600,"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,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":[[1069,16.999999999999986],[1076,34.999999999999986],[1100,115.99999999999999],[1119,178],[1131,210],[1147,264],[1166,338],[1171,372],[1185,440],[1190,450],[1177,509],[1156,586],[1146,609],[1143,616],[1140,616],[1137,616],[1134,613],[1124,588],[1123,584],[1123,577],[1123,572],[1120,554],[1119,544],[1118,539],[1115,523],[1114,501],[1111,489],[1109,484],[1089,438],[1068,395],[1061,368],[1046,125.99999999999999],[1033,75.99999999999999],[1031,68.99999999999999],[1029,58.999999999999986],[1029,53.999999999999986],[1029,45.999999999999986],[1041,68.99999999999999],[1066,205],[1072,306],[1075,459],[1078,518],[1074,527],[1067,574],[1067,578],[1067,585],[1060,590],[1050,594],[1048,586],[1044,552],[1042,544],[1041,538],[1038,526],[1035,507],[1031,482],[1030,468],[1030,463],[1028,456],[1027,441],[1027,426],[1027,400],[1025,385],[1022,371],[1020,358],[1020,354],[1019,342],[1019,330],[1016,310],[1023,121.99999999999999],[1038,37.999999999999986],[1034,36.999999999999986],[1031,36.999999999999986],[995,-42.000000000000014],[986,-68.00000000000001],[982,-95.00000000000001],[981,-99.00000000000001],[990,-78.00000000000001],[998,-30.000000000000014],[998,38.999999999999986],[990,123.99999999999999],[985,143],[984,172],[983,184],[984,189],[989,244],[989,302],[989,317],[989,323],[990,335],[990,338],[993,345],[1003,374],[1003,377],[1003,388],[1003,441],[1001,468],[1001,486],[1003,517],[1006,552],[1008,576],[1011,588],[1015,608],[1017,616]]},{"start":1713792486814,"last":0,"beat":500,"lifetime":50,"color":"#424242","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,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":[[591,315],[591,311],[592,293],[594,274],[596,267],[596,264],[601,245],[602,240],[603,236],[609,209],[615,188],[617,177],[618,174],[633,148],[636,143],[639,141],[644,139],[648,138],[651,137],[654,137],[657,140],[660,144],[662,147],[662,150],[669,163],[671,169],[671,172],[673,176],[673,179],[673,182],[675,186],[677,196],[679,203],[681,211],[683,218],[683,221],[682,244],[681,247],[680,251],[681,266],[682,283],[682,286],[682,289],[683,297],[683,303],[683,310],[683,313],[685,325],[688,334],[689,337],[688,340],[688,343],[688,346],[685,349],[681,351],[678,352],[675,353],[672,354],[669,354],[666,354],[662,354],[659,354],[649,355],[637,356],[633,356],[620,356],[617,356],[614,356],[611,355],[608,355],[605,353],[600,351],[596,346],[586,337],[571,315],[569,312],[568,308],[569,305],[572,301],[575,298],[577,294],[579,291],[581,288],[584,281],[597,247],[599,238]]},{"start":1713792486814,"last":0,"beat":500,"lifetime":50,"color":"#424242","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],"segments":[[727,413],[723,414],[710,417],[703,418],[700,418],[696,418],[690,417],[686,416],[682,415],[679,413],[676,409],[674,405],[672,402],[670,398],[667,395],[666,391],[666,384],[667,363],[668,354],[669,349],[672,337],[678,311],[679,307],[682,308],[685,308],[696,307],[711,304],[714,305],[720,309],[733,314],[738,319],[755,337],[758,343],[766,362],[769,370],[769,373],[770,378],[772,393],[772,402],[770,405],[763,421],[760,422],[754,423],[748,423],[741,423],[736,424],[731,424],[728,423],[721,420],[718,419],[715,419]]},{"start":1713792486814,"last":0,"beat":500,"lifetime":50,"color":"#424242","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],"segments":[[516,413],[513,411],[511,408],[505,400],[500,391],[499,388],[498,383],[497,380],[496,375],[496,358],[496,355],[498,349],[506,338],[518,328],[551,302],[563,295],[567,294],[570,295],[572,298],[574,304],[576,307],[578,311],[578,314],[584,328],[586,335],[586,338],[587,358],[587,361],[587,366],[587,375],[586,378],[584,386],[580,397],[576,400],[567,405],[564,406],[558,408],[547,412],[544,413],[540,413],[530,412],[505,407],[502,406]]},{"start":1713792486814,"last":0,"beat":500,"lifetime":50,"color":"#424242","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],"segments":[[853,406],[851,402],[836,290],[834,267],[834,260],[837,240],[837,215],[838,198],[839,194],[844,196],[865,210],[869,214],[873,219],[882,237],[883,242],[880,250],[867,269],[865,272],[857,275],[854,276]]},{"start":1713792486814,"last":0,"beat":500,"lifetime":50,"color":"#424242","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],"segments":[[892,327],[922,326],[944,328],[948,328],[953,327],[957,325],[959,321],[956,318],[953,316],[950,314],[938,307],[933,305],[930,305],[926,305],[921,306],[918,307],[916,311],[882,389],[881,403],[884,405],[887,406],[890,408],[894,408],[903,408],[921,407],[926,406],[930,406]]},{"start":1713792486814,"last":0,"beat":500,"lifetime":50,"color":"#424242","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],"segments":[[974,407],[979,383],[984,344],[983,341],[985,331],[985,335],[985,346],[984,369],[983,372],[986,367],[993,362],[1016,354],[1022,353],[1028,354],[1037,359],[1038,362],[1039,366],[1041,387],[1042,408],[1042,411]]},{"start":1713792486814,"last":0,"beat":500,"lifetime":50,"color":"#424242","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],"segments":[[1093,378],[1104,378],[1120,377],[1133,374],[1136,371],[1139,369],[1140,365],[1138,362],[1131,353],[1128,351],[1125,350],[1082,340],[1061,338],[1060,341],[1060,344],[1061,348],[1062,353],[1069,363],[1076,371],[1080,375],[1092,387],[1102,398],[1106,401],[1110,404],[1115,405],[1123,405],[1128,405],[1133,405],[1145,403],[1149,402]]}],"backgroundColor":"rgb(255,255,255)"});