stroke looper animation

description.md

http://bouboucle.com?gist=a7edc52915bb51bc8fd94cde592ed436

looper.jsonp

load({"width":414,"height":628,"speed":1,"lineData":[{"start":1711891067068,"last":481,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,120,136,153,170,188,205,221,236,255,272,287,304,322,338,353,372,388,403,421,438,455,472,481],"segments":[[125,84],[118,81],[112,75],[103,69],[95,65],[87,62],[80,62],[73,63],[68,70],[63,80],[60,95],[60,111],[60,128],[62,143],[68,159],[74,171],[81,182],[90,190],[97,193],[103,194],[107,194],[108,191],[109,188],[110,185]]},{"start":1711891067709,"last":482,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,79,95,112,129,146,164,179,196,214,230,246,262,279,295,312,329,345,363,379,397,414,430,445,482],"segments":[[204,145],[201,134],[192,134],[180,134],[169,134],[159,138],[152,144],[148,152],[147,161],[147,168],[147,175],[153,181],[162,185],[175,186],[190,185],[203,177],[211,168],[215,159],[216,150],[216,142],[210,138],[203,135],[197,135],[194,135],[196,138]]},{"start":1711891068342,"last":389,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,79,96,112,129,146,162,179,196,212,229,246,264,279,297,312,329,346],"segments":[[250,123],[247,131],[249,138],[251,146],[253,157],[255,168],[259,178],[263,186],[267,189],[273,189],[281,181],[288,171],[293,163],[297,153],[298,144],[298,135],[295,130],[292,127]]},{"start":1711891069026,"last":399,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[1,78,95,112,128,145,162,178,195,213,228,245,263,280,295,313,331,345,363,380,395],"segments":[[165,262],[162,251],[156,251],[146,250],[130,250],[114,250],[99,251],[90,256],[84,264],[82,276],[82,287],[82,301],[84,313],[92,321],[103,324],[114,326],[121,326],[127,326],[131,326],[135,326],[140,326]]},{"start":1711891069583,"last":408,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,90,104,121,138,155,171,188,206,221,238,256,271,289,304,323,338,355,371,388],"segments":[[222,274],[215,269],[207,273],[198,280],[191,289],[187,299],[187,308],[187,315],[194,317],[204,318],[215,317],[226,311],[236,304],[243,296],[247,288],[248,281],[248,277],[243,274],[237,272],[234,272]]},{"start":1711891070159,"last":382,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,62,79,97,114,128,145,162,180,197,212,228,245,263,278,295,312,330,345],"segments":[[302,248],[297,254],[297,259],[297,267],[297,278],[298,292],[302,303],[308,310],[316,313],[323,313],[328,309],[333,301],[335,291],[336,280],[336,267],[334,254],[329,241],[326,232],[323,227]]},{"start":1711891070932,"last":83,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,39,57,72,83],"segments":[[99,415],[92,403],[92,398],[93,393],[94,390]]},{"start":1711891071123,"last":700,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,131,148,167,181,200,217,231,248,265,282,298,314,331,348,365,383,398,416,431,449,464,481,499,514,531,549,566,583,598,614,631,649,664,681,699],"segments":[[110,377],[119,379],[119,386],[118,397],[116,408],[115,420],[115,432],[115,442],[115,453],[115,464],[116,474],[119,482],[125,486],[133,487],[147,485],[161,476],[177,467],[190,456],[198,446],[203,437],[203,430],[198,424],[188,418],[178,416],[169,416],[161,419],[156,428],[154,438],[154,448],[154,457],[159,463],[165,468],[171,472],[178,475],[186,476],[195,476]]},{"start":1711891071957,"last":375,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[1,48,64,81,99,114,132,147,164,180,197,214,232,247,264,282,297,315,333,349,375],"segments":[[272,406],[264,403],[258,404],[250,410],[242,417],[236,425],[232,432],[231,439],[231,447],[231,452],[239,455],[247,458],[254,461],[257,465],[257,470],[249,476],[236,480],[224,482],[214,482],[208,482],[208,479]]},{"start":1711891072681,"last":375,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,56,73,90,108,125,140,156,173,190,208,223,241,258,273,291,306,325,357,373],"segments":[[71,572],[73,564],[73,558],[76,552],[80,544],[85,530],[93,515],[103,499],[112,491],[118,491],[122,492],[128,500],[134,508],[142,519],[149,533],[154,548],[157,560],[158,568],[157,571],[151,571]]},{"start":1711891073198,"last":133,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,40,58,73,89,106,123,132],"segments":[[69,557],[77,553],[90,550],[106,544],[120,540],[132,538],[143,538],[148,538]]},{"start":1711891073548,"last":633,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[0,59,74,76,89,108,122,139,156,172,206,223,241,256,274,289,308,325,339,358,373,389,406,423,439,473,489,508,525,539,558,575,591,608],"segments":[[178,493],[177,501],[177,505],[177,509],[178,519],[180,530],[182,543],[183,555],[183,563],[183,566],[185,555],[185,540],[185,526],[185,515],[185,506],[184,498],[184,492],[184,489],[187,486],[195,484],[204,478],[212,473],[218,469],[223,467],[226,467],[228,473],[228,485],[227,503],[226,523],[226,541],[226,557],[226,569],[226,575],[228,578]]},{"start":1711891074358,"last":316,"beat":4000,"lifetime":1000,"color":"#303F9F","multiPeriod":1,"strokeWidth":20,"times":[1,47,63,65,79,97,114,129,164,181,198,215,229,246,263,279,296,314],"segments":[[295,474],[282,485],[279,492],[275,499],[268,515],[264,530],[261,542],[261,549],[266,550],[274,542],[284,533],[294,520],[303,505],[307,493],[307,484],[300,481],[290,480],[283,480]]}],"backgroundColor":"rgb(255,255,255)"});