stroke looper animation

description.md

http://bouboucle.com?gist=667ad96d3a7a7a9b07758e0679b79dec

looper.jsonp

load({"width":375,"height":555,"speed":1,"lineData":[{"start":1712691438277,"last":683,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[1,51,66,83,99,116,132,149,165,182,233,249,266,283,299,316,333,350,366,383,399,416,433,449,466,483,499,516,533,549,566,583,599,632,667],"segments":[[158,323],[162,313],[178,294],[192,278],[208,261],[225,245],[239,233],[250,225],[256,222],[259,221],[261,229],[261,239],[261,250],[260,265],[259,281],[259,297],[259,310],[259,319],[262,326],[265,332],[267,337],[270,343],[274,348],[278,354],[282,359],[286,363],[290,366],[292,369],[295,373],[298,377],[302,381],[305,384],[308,387],[312,390],[314,393]]},{"start":1712691450502,"last":558,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[1,59,75,92,109,125,142,158,176,192,209,225,242,258,275,291,309,325,342,358,375,391,408,425,442,458,475,491,525,542],"segments":[[129,144],[136,150],[139,156],[142,162],[145,168],[148,174],[153,182],[158,192],[165,204],[171,217],[177,231],[182,245],[188,259],[194,272],[201,285],[208,297],[214,310],[222,323],[229,336],[237,348],[245,360],[254,370],[262,382],[268,395],[273,409],[276,421],[278,431],[279,438],[281,441],[284,443]]},{"start":1712691453946,"last":826,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,26,43,60,76,93,109,127,143,160,176,193,209,226,243,260,276,293,309,326,342,359,376,393,409,426,442,460,476,493,509,526,542,559,576,592,609,626,642,659,675,692,708,725,742,759,775,792,808],"segments":[[50,271],[53,259],[59,246],[66,231],[75,213],[89,190],[107,163],[129,134],[153,108],[176,86],[192,74],[198,74],[198,81],[192,98],[176,123],[158,155],[142,190],[134,222],[131,249],[131,269],[134,278],[142,281],[153,281],[168,270],[189,254],[209,240],[225,234],[234,234],[238,237],[240,244],[240,255],[237,269],[231,285],[229,296],[229,302],[233,305],[241,306],[253,305],[266,299],[277,297],[285,297],[289,305],[290,323],[290,344],[289,366],[286,382],[286,390],[286,395],[291,399]]},{"start":1712691459334,"last":1213,"beat":1000,"lifetime":250,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[1,30,47,63,80,97,113,132,147,163,180,197,213,230,246,263,280,296,313,330,346,363,379,396,413,430,446,463,480,497,513,531,547,563,580,597,613,630,647,663,680,696,713,730,746,763,779,796,812,829,846,863,879,896,913,930,946,963,979,996,1013,1029,1047,1062,1079,1096,1112,1130,1146,1163,1179,1196],"segments":[[217,196],[206,189],[201,190],[195,196],[186,206],[174,222],[158,246],[141,277],[131,302],[129,319],[129,328],[132,333],[140,335],[151,335],[166,335],[182,333],[198,329],[215,326],[230,323],[244,321],[258,319],[270,315],[283,307],[294,296],[303,282],[309,264],[311,243],[313,216],[318,190],[321,170],[322,160],[317,160],[305,162],[291,171],[276,184],[259,202],[243,225],[230,249],[222,274],[219,302],[219,336],[227,371],[241,399],[256,416],[271,427],[286,433],[300,438],[311,438],[318,437],[321,424],[320,399],[308,364],[294,317],[285,269],[279,234],[275,216],[271,211],[264,210],[253,211],[240,222],[225,237],[210,258],[195,286],[185,316],[182,348],[182,374],[189,394],[199,414],[212,435],[228,450],[243,459],[259,462]]}],"backgroundColor":"rgb(255,255,255)"});