stroke looper animation

description.md

http://bouboucle.com?gist=c6f80ce1f727dbe90937176ec14c2f82

looper.jsonp

load({"width":667,"height":295.33,"speed":1,"lineData":[{"start":1599592500163,"last":5445,"beat":500,"lifetime":50,"color":"#B2EBF2","multiPeriod":1,"strokeWidth":50,"times":[0,144,161,177,194,211,261,294,311,328,344,361,411,428,444,461,478,494,511,544,561,577,594,611,627,661,678,695,711,727,744,794,811,828,845,861,877,894,927,944,962,977,994,1010,1060,1077,1094,1111,1127,1144,1178,1195,1211,1227,1244,1261,1294,1311,1328,1345,1361,1377,1394,1411,1444,1460,1477,1493,1511,1527,1545,1578,1595,1611,1628,1644,1661,1677,1728,1745,1761,1778,1794,1827,1845,1860,1876,1893,1909,1926,1943,1994,2011,2027,2044,2061,2077,2111,2128,2145,2161,2178,2194,2211,2228,2261,2278,2294,2311,2328,2344,2361,2411,2428,2444,2461,2478,2494,2527,2545,2561,2578,2594,2611,2644,2663,2677,2694,2711,2727,2744,2761,2794,2811,2827,2844,2861,2877,2894,2944,2962,2978,2994,3010,3027,3077,3095,3111,3127,3144,3161,3194,3211,3228,3244,3261,3277,3294,3327,3345,3361,3377,3394,3411,3427,3461,3479,3494,3511,3528,3544,3561,3594,3611,3627,3651,3661,3677,3693,3710,3745,3761,3779,3794,3811,3827,3844,3877,3895,3912,3928,3945,3961,3978,3994,4011,4027,4044,4061,4077,4094,4111,4144,4161,4178,4194,4211,4228,4244,4277,4294,4311,4327,4344,4361,4383,4427,4444,4461,4479,4494,4511,4544,4562,4578,4594,4611,4628,4644,4661,4694,4711,4728,4744,4761,4777,4794,4827,4844,4861,4877,4898,4911,4927,4960,4977,4994,5011,5027,5044,5061,5094,5111,5127,5144,5161,5177,5194,5227,5245,5261,5278,5294,5311,5328,5361,5379,5395,5411,5428],"segments":[[87,98],[91,92],[95,87],[100,82],[104,78],[107,75],[110,73],[109,82],[107,88],[105,95],[104,101],[103,105],[105,100],[109,93],[116,84],[122,77],[127,74],[132,71],[135,70],[136,73],[136,81],[133,93],[131,100],[130,104],[130,107],[130,103],[134,95],[140,84],[145,77],[149,72],[152,69],[154,73],[153,84],[150,96],[147,108],[145,116],[145,119],[144,122],[147,106],[151,95],[158,81],[163,74],[166,69],[169,65],[170,78],[168,90],[164,104],[162,113],[161,119],[160,123],[160,115],[166,100],[171,88],[178,77],[182,71],[186,67],[190,66],[190,71],[190,83],[187,96],[184,111],[180,124],[178,130],[177,133],[177,126],[180,111],[186,95],[191,83],[196,74],[200,69],[203,65],[206,66],[206,78],[206,95],[202,114],[198,131],[196,143],[194,148],[197,128],[202,111],[210,93],[217,82],[222,76],[227,74],[228,78],[228,94],[227,112],[223,132],[221,150],[219,162],[218,168],[220,147],[225,130],[232,111],[238,98],[243,90],[245,86],[248,84],[248,91],[247,109],[243,127],[238,145],[236,157],[234,164],[233,167],[233,157],[238,134],[245,111],[252,95],[257,84],[261,77],[264,74],[266,87],[262,109],[257,133],[254,150],[252,162],[251,166],[251,150],[255,129],[263,106],[270,91],[276,81],[279,77],[283,75],[283,84],[283,102],[279,126],[275,144],[272,158],[271,166],[270,169],[269,160],[275,139],[282,117],[290,96],[297,82],[302,72],[305,68],[307,76],[307,99],[303,125],[298,148],[294,164],[292,173],[292,163],[300,137],[309,110],[316,92],[322,79],[327,72],[331,70],[331,89],[330,114],[325,139],[320,157],[317,168],[316,172],[316,162],[325,138],[336,111],[346,88],[354,72],[358,63],[361,60],[363,71],[363,95],[362,124],[359,150],[356,167],[354,178],[353,182],[353,176],[357,153],[364,127],[370,100],[376,81],[381,67],[383,60],[385,57],[386,74],[386,101],[384,129],[380,153],[377,170],[376,178],[375,182],[376,164],[383,141],[391,114],[399,91],[404,76],[409,69],[411,66],[414,66],[416,80],[417,103],[417,129],[417,152],[417,168],[416,177],[415,180],[415,165],[420,140],[428,112],[436,87],[442,70],[446,60],[448,56],[451,62],[451,85],[451,111],[450,137],[448,156],[447,170],[446,176],[446,157],[452,131],[458,107],[463,90],[467,77],[469,72],[472,74],[472,96],[473,121],[474,149],[476,174],[477,191],[477,203],[477,207],[477,195],[479,169],[484,140],[490,110],[496,84],[500,67],[502,60],[505,63],[505,89],[505,118],[505,149],[505,174],[505,188],[505,194],[508,183],[513,155],[521,118],[527,91],[533,66],[536,52],[538,47],[542,58],[544,84],[548,112],[553,141],[556,159],[559,171],[560,175],[567,159],[574,134],[581,105],[587,77],[592,59],[595,48],[597,44],[601,57],[604,80],[608,98],[612,117],[615,129]]},{"start":1599592516779,"last":62,"beat":1000,"lifetime":2000,"color":"#B2EBF2","multiPeriod":1,"strokeWidth":50,"times":[1],"segments":[[106,71]]},{"start":1599592530028,"last":982,"beat":500,"lifetime":50,"color":"#B2EBF2","multiPeriod":1,"strokeWidth":50,"times":[0,80,96,113,130,147,196,214,230,247,263,280,296,330,347,363,380,396,413,446,480,497,513,530,546,597,614,630,647,663,696,730,747,763,780,797,846,864,896,930],"segments":[[113,74],[114,68],[114,61],[114,55],[114,51],[115,48],[115,52],[112,61],[108,72],[104,80],[101,86],[98,90],[95,92],[93,88],[93,79],[93,70],[95,63],[97,57],[100,52],[103,50],[104,53],[104,60],[104,67],[104,73],[103,76],[101,73],[101,62],[101,55],[101,50],[102,47],[104,44],[105,48],[105,54],[105,60],[104,65],[103,68],[102,64],[102,59],[102,55],[102,60]]},{"start":1599592547061,"last":96,"beat":1000,"lifetime":2000,"color":"#3949AB","multiPeriod":1,"strokeWidth":7,"times":[0],"segments":[[107,48]]},{"start":1599592653546,"last":4515,"beat":2000,"lifetime":500,"color":"#3949AB","multiPeriod":1,"strokeWidth":7,"times":[1,30,63,97,130,163,181,198,217,230,247,264,281,313,331,347,380,413,431,463,481,513,531,563,597,632,663,697,730,764,796,830,863,881,897,914,931,947,964,997,1030,1063,1097,1130,1164,1197,1230,1263,1297,1330,1364,1397,1430,1464,1497,1530,1563,1597,1630,1663,1697,1730,1764,1797,1815,1847,1865,1897,1930,1963,1981,2000,2030,2048,2064,2080,2113,2147,2180,2213,2247,2280,2299,2330,2364,2397,2430,2463,2497,2530,2564,2597,2630,2664,2697,2715,2731,2763,2781,2814,2847,2865,2897,2930,2963,2997,3030,3048,3080,3114,3147,3180,3214,3247,3280,3298,3314,3347,3380,3398,3430,3447,3464,3481,3497,3514,3531,3548,3580,3601,3630,3663,3681,3713,3747,3764,3781,3813,3831,3864,3881,3898,3914,3931,3947,3964,3981,3997,4014,4031,4064,4097,4115,4147,4180,4214,4232,4264,4314,4364,4397,4430,4463,4481,4498],"segments":[[24,264],[28,264],[31,264],[34,264],[38,264],[43,264],[46,264],[49,264],[52,264],[55,264],[58,264],[61,264],[64,264],[69,264],[72,264],[75,264],[80,264],[84,264],[87,264],[91,264],[94,264],[98,264],[101,264],[105,264],[109,264],[112,264],[116,264],[120,264],[124,264],[129,264],[133,264],[137,263],[141,263],[144,262],[147,262],[150,262],[153,262],[157,262],[160,262],[165,262],[170,262],[175,261],[179,261],[184,261],[188,261],[192,260],[195,260],[198,259],[202,259],[206,259],[210,259],[214,259],[217,259],[220,259],[223,258],[227,258],[230,258],[233,258],[236,258],[240,258],[243,258],[247,258],[250,258],[254,258],[257,258],[261,258],[264,258],[269,258],[274,258],[278,258],[281,258],[284,258],[288,258],[291,258],[294,258],[297,258],[301,257],[306,256],[309,256],[313,255],[317,255],[322,255],[325,255],[330,254],[335,254],[339,254],[343,253],[347,253],[352,253],[356,253],[360,253],[364,253],[368,253],[372,253],[377,253],[380,253],[383,253],[387,253],[390,253],[394,253],[399,254],[402,255],[408,255],[413,255],[418,256],[422,256],[426,256],[429,256],[434,256],[439,256],[443,256],[447,256],[452,256],[457,257],[462,257],[465,257],[468,257],[473,257],[478,257],[481,257],[486,257],[489,257],[492,257],[495,257],[498,257],[501,257],[504,257],[507,257],[512,257],[515,257],[521,257],[525,257],[528,257],[533,257],[538,257],[541,257],[544,257],[549,257],[552,257],[556,257],[559,257],[562,257],[565,257],[568,257],[571,257],[574,257],[577,257],[580,257],[583,257],[586,257],[590,257],[594,256],[597,256],[601,256],[606,256],[609,256],[612,256],[615,256],[619,256],[622,256],[625,256],[628,255],[633,255],[636,255],[639,255]]},{"start":1599592747600,"last":1431,"beat":1000,"lifetime":2000,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[0,181,213,246,296,346,396,463,529,579,713,780,829,929,979,1012,1046,1079,1129,1179,1230,1296],"segments":[[62,44],[66,45],[69,45],[72,45],[76,45],[79,45],[82,45],[85,46],[88,47],[91,49],[93,52],[93,55],[93,58],[90,60],[87,62],[84,63],[80,64],[77,64],[73,65],[70,65],[67,65],[64,65]]},{"start":1599592753799,"last":799,"beat":1000,"lifetime":2000,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[0,181,230,264,297,330,364,397,431,481,531,581,631,681,715,747,780],"segments":[[109,19],[105,18],[102,20],[102,24],[102,28],[102,31],[103,34],[107,36],[111,37],[115,37],[118,37],[120,34],[122,31],[122,27],[122,24],[120,21],[115,19]]},{"start":1599592792001,"last":114,"beat":1000,"lifetime":2000,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[0],"segments":[[112,28]]},{"start":1599592795617,"last":148,"beat":1000,"lifetime":250,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[1],"segments":[[113,25]]},{"start":1599592797584,"last":515,"beat":1000,"lifetime":250,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[0,298],"segments":[[103,21],[108,29]]},{"start":1599592798734,"last":131,"beat":1000,"lifetime":250,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[0],"segments":[[120,23]]},{"start":1599592799217,"last":65,"beat":1000,"lifetime":250,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[1],"segments":[[109,22]]},{"start":1599592799384,"last":47,"beat":1000,"lifetime":250,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[0],"segments":[[105,39]]},{"start":1599592799917,"last":232,"beat":1000,"lifetime":250,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[0],"segments":[[106,27]]},{"start":1599592800584,"last":149,"beat":1000,"lifetime":250,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[0],"segments":[[111,30]]},{"start":1599592807601,"last":1149,"beat":1000,"lifetime":2000,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[0,198,230,281,299,330,364,383,399,430,463,485,497,530,563,597,630,663,697,730,798,863,897,916,947,999,1015,1031,1047,1080],"segments":[[61,35],[55,31],[55,28],[56,25],[59,25],[63,24],[66,25],[66,28],[66,31],[66,34],[62,36],[59,36],[56,36],[52,36],[52,32],[52,29],[55,27],[58,27],[60,30],[61,33],[56,34],[54,29],[58,26],[61,26],[65,26],[65,30],[64,33],[61,34],[58,35],[54,35]]},{"start":1599592814719,"last":198,"beat":1000,"lifetime":2000,"color":"#E91E63","multiPeriod":1,"strokeWidth":7,"times":[0],"segments":[[109,26]]}],"backgroundColor":"rgb(255,255,255)"});