stroke looper animation

description.md

http://bouboucle.com?gist=6ad174fbb5312696786f0f3c5927bd88

looper.jsonp

load({"width":1366,"height":561.33,"speed":1,"lineData":[{"start":1718783997841,"last":589,"beat":1000,"lifetime":2000,"color":"#D1C4E9","multiPeriod":1,"strokeWidth":7,"times":[0,132,148,168,181,199,215,232,248,265,281,299,315,348,398,432,481,531],"segments":[[48,55],[52,58],[57,64],[61,70],[67,76],[73,83],[82,92],[89,98],[93,102],[97,106],[101,110],[103,113],[106,117],[109,120],[111,123],[113,126],[115,129],[118,133]]},{"start":1718784000568,"last":368,"beat":1000,"lifetime":2000,"color":"#D1C4E9","multiPeriod":1,"strokeWidth":600,"times":[0,38,55,71,88,104,121,138,155,171,187,204,221,238,254,271,288,305,321,338,355,368],"segments":[[360,192],[357,196],[353,203],[348,214],[345,228],[346,239],[350,250],[357,259],[367,266],[387,270],[412,269],[428,265],[445,260],[462,255],[479,249],[494,244],[516,238],[537,234],[552,232],[567,232],[580,232],[591,233]]},{"start":1718784000960,"last":1969,"beat":1000,"lifetime":2000,"color":"#D1C4E9","multiPeriod":1,"strokeWidth":600,"times":[0,29,46,63,79,96,112,129,145,162,179,195,212,229,246,262,279,296,312,329,346,362,379,395,412,429,446,463,479,495,512,529,545,562,579,596,612,629,645,662,679,695,712,729,746,762,779,795,812,829,845,862,879,897,912,929,945,962,979,996,1012,1029,1046,1062,1079,1095,1112,1129,1145,1162,1179,1196,1212,1229,1245,1262,1279,1295,1312,1329,1346,1362,1379,1395,1412,1429,1445,1462,1479,1495,1512,1529,1545,1562,1579,1595,1612,1629,1646,1662,1679,1695,1712,1729,1745,1763,1779,1795,1812,1829,1845,1862,1879,1895,1912,1929,1946,1962],"segments":[[623,244],[627,251],[630,255],[630,261],[624,273],[616,280],[607,287],[587,302],[558,319],[537,329],[516,338],[492,347],[467,354],[444,361],[414,368],[390,373],[374,374],[358,376],[342,376],[327,377],[314,377],[291,376],[282,375],[274,373],[268,371],[263,369],[258,367],[252,364],[244,359],[232,353],[224,349],[208,340],[202,336],[189,330],[183,326],[175,320],[169,314],[166,309],[164,304],[162,298],[161,290],[163,269],[164,259],[167,248],[169,239],[172,230],[175,222],[182,210],[188,200],[193,194],[198,190],[202,185],[208,181],[220,176],[237,170],[250,168],[265,165],[281,164],[298,163],[317,164],[343,167],[369,172],[384,177],[401,184],[418,191],[436,200],[464,214],[492,228],[511,236],[533,245],[557,253],[584,260],[614,268],[654,274],[690,276],[715,277],[743,276],[775,274],[807,271],[834,268],[887,257],[910,248],[933,238],[944,232],[967,220],[995,204],[1020,187],[1044,171],[1059,163],[1074,157],[1089,151],[1103,146],[1123,141],[1141,138],[1153,136],[1165,136],[1176,136],[1186,137],[1195,138],[1211,142],[1217,145],[1222,148],[1226,151],[1230,156],[1233,162],[1235,176],[1233,191],[1231,201],[1229,211],[1228,220],[1226,232],[1225,256],[1228,295],[1231,312],[1232,324],[1233,341],[1233,347],[1233,356]]},{"start":1718784003287,"last":935,"beat":1000,"lifetime":2000,"color":"#D1C4E9","multiPeriod":1,"strokeWidth":600,"times":[1,35,52,69,88,102,118,135,152,168,185,202,218,236,268,302,318,335,352,368,385,402,418,435,452,468,485,502,518,535,552,568,585,602,618,635,652,668,685,702,719,735,752,768,785,802,818,835,852,870,885,902,918],"segments":[[1052,434],[1047,435],[1040,436],[1031,438],[1018,442],[1008,445],[1001,447],[995,449],[990,451],[985,453],[979,455],[972,457],[965,459],[961,459],[956,461],[951,462],[946,463],[942,464],[937,464],[931,465],[924,465],[916,465],[902,465],[885,464],[874,465],[861,465],[847,464],[832,464],[816,462],[792,459],[767,456],[751,454],[735,452],[719,451],[704,451],[689,452],[668,454],[648,456],[635,457],[623,458],[610,459],[597,459],[584,458],[566,456],[550,453],[541,450],[534,448],[527,445],[522,443],[516,441],[511,440],[507,440],[504,441]]}],"backgroundColor":"rgb(255,255,255)"});