stroke looper animation

description.md

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

looper.jsonp

load({"width":1366,"height":561,"speed":1,"lineData":[{"start":1714375174775,"last":2996,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[2,202,218,235,251,268,284,301,318,335,351,368,385,401,418,435,451,468,484,501,517,535,551,568,584,601,618,634,651,668,685,701,718,735,751,768,784,801,818,835,851,868,884,901,919,934,951,968,984,1001,1018,1034,1051,1067,1085,1101,1118,1134,1151,1168,1184,1201,1217,1234,1251,1267,1284,1317,1334,1351,1368,1384,1401,1418,1435,1451,1468,1484,1501,1518,1534,1551,1567,1584,1601,1617,1634,1650,1668,1684,1701,1718,1734,1751,1767,1784,1800,1817,1834,1851,1868,1884,1901,1917,1934,1951,1967,1984,2000,2018,2034,2051,2068,2084,2117,2134,2167,2184,2201,2218,2234,2251,2267,2284,2301,2317,2350,2384,2401,2434,2467,2485,2501,2517,2535,2551,2568,2584,2601,2617,2634,2651,2667,2684,2700,2718,2734,2751,2768,2784,2802,2817,2834,2851,2867,2885,2901,2934,2984],"segments":[[602,264],[606,245],[620,202],[627,184],[635,170],[640,161],[647,152],[650,150],[654,147],[669,139],[685,133],[710,123],[730,119],[768,115],[787,116],[803,119],[831,125],[844,131],[856,142],[868,153],[885,165],[893,171],[897,175],[900,183],[900,189],[899,199],[897,205],[893,211],[890,215],[886,220],[874,234],[864,247],[847,272],[832,288],[809,310],[795,319],[786,324],[777,328],[767,332],[745,339],[728,343],[709,347],[696,350],[678,352],[665,355],[656,355],[647,355],[641,355],[637,352],[633,350],[629,347],[623,340],[621,334],[618,326],[615,321],[612,312],[609,304],[606,296],[603,280],[600,269],[599,255],[599,246],[599,239],[601,226],[604,217],[608,208],[610,204],[614,199],[618,196],[624,194],[634,190],[653,180],[667,173],[692,164],[708,158],[721,155],[728,154],[740,154],[765,158],[782,165],[797,174],[806,183],[811,191],[814,195],[817,201],[820,208],[822,212],[822,217],[823,222],[825,228],[827,241],[829,251],[830,259],[830,264],[828,270],[826,275],[822,279],[817,285],[812,288],[803,292],[795,294],[774,300],[755,306],[737,311],[713,319],[695,324],[677,329],[671,330],[664,330],[661,330],[657,329],[650,326],[646,324],[641,321],[634,316],[631,314],[626,309],[623,306],[617,298],[612,290],[605,279],[604,274],[602,269],[602,263],[602,259],[603,255],[604,250],[605,246],[607,243],[612,238],[617,233],[620,231],[623,230],[626,228],[632,226],[646,221],[653,220],[666,216],[674,214],[681,213],[693,211],[701,211],[711,212],[718,214],[726,218],[732,221],[738,226],[749,235],[755,239],[763,247],[766,252],[771,256],[774,261],[776,266],[777,274],[778,279],[778,286],[777,289],[774,291]]},{"start":1714375178332,"last":244,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,44,60,77,94,111,127,144,160,178,193,210,227,242],"segments":[[694,266],[687,262],[681,257],[679,254],[673,243],[670,232],[668,217],[668,210],[669,201],[673,195],[678,189],[691,180],[704,172],[732,157]]},{"start":1714375178598,"last":831,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,11,28,44,61,78,94,112,127,145,161,178,195,211,228,244,261,277,294,311,328,345,361,378,394,411,428,444,462,477,495,511,528,545,561,578,594,611,628,644,662,678,695,711,728,744,761,778,794,811],"segments":[[768,151],[797,152],[815,158],[827,165],[834,173],[835,180],[836,192],[835,200],[832,220],[828,236],[819,261],[805,282],[796,288],[777,294],[760,295],[736,295],[716,291],[695,282],[679,269],[672,256],[664,233],[663,222],[667,206],[672,201],[680,198],[690,200],[706,205],[737,217],[754,227],[771,239],[777,246],[780,254],[782,264],[782,269],[780,275],[778,278],[772,282],[769,284],[764,285],[757,287],[749,287],[724,283],[701,273],[675,253],[668,241],[666,232],[663,224],[663,221],[663,214],[664,211]]},{"start":1714375179498,"last":305,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,11,28,44,61,78,94,112,128,145,161,178,194,211,228,244,262,278,295,305],"segments":[[716,220],[732,230],[749,244],[767,262],[770,266],[770,269],[770,273],[769,276],[764,282],[754,289],[727,306],[697,320],[656,326],[614,317],[596,306],[584,290],[583,281],[584,267],[587,261],[590,259]]},{"start":1714375180019,"last":261,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,90,107,124,140,157,173,190,223,240,257],"segments":[[684,292],[665,285],[599,241],[577,216],[568,200],[567,186],[567,181],[570,177],[579,170],[589,164],[605,157]]},{"start":1714375180355,"last":313,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,71,87,105,121,137,154,171,187,204,221,237,254,271,287,304,312],"segments":[[682,165],[682,173],[682,183],[679,190],[672,200],[663,210],[653,219],[637,229],[621,233],[585,232],[555,220],[540,206],[533,190],[532,177],[536,154],[545,136],[551,129]]}],"backgroundColor":"rgb(255,255,255)"});