stroke looper animation

description.md

http://bouboucle.com?gist=5dd732e6a356b136df59c50b3a08fa40

looper.jsonp

load({"width":1366,"height":561,"speed":0,"lineData":[{"start":1717574554337,"last":0,"beat":2000,"lifetime":500,"color":"#B3E5FC","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[565,124],[565,127],[565,131],[564,136],[563,139],[562,143],[560,148],[558,154],[557,158],[555,164],[554,168],[551,176],[550,182],[548,188],[545,196],[544,201],[542,207],[541,210],[539,214],[538,217],[536,223],[536,226],[535,231],[533,235],[532,239],[531,243],[528,249],[526,256],[525,260],[523,264],[522,269],[520,274],[519,277],[518,280],[517,283],[516,287],[515,290],[514,293],[512,297],[512,300],[511,304],[510,307],[508,311],[507,315],[507,319],[505,322],[505,325],[504,328],[503,331],[502,334],[500,337],[499,340],[498,343],[497,346],[497,349],[496,353],[495,356],[495,359],[495,362],[493,365]]},{"start":1717574554337,"last":0,"beat":2000,"lifetime":500,"color":"#B3E5FC","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[529,253],[532,253],[535,254],[538,254],[541,254],[544,254],[547,255],[550,255],[553,255],[556,255],[559,255],[562,256],[565,256],[568,256],[571,257],[574,257]]},{"start":1717574554337,"last":0,"beat":2000,"lifetime":500,"color":"#B3E5FC","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0],"segments":[[566,124],[569,126],[570,129],[573,131]]},{"start":1717574554337,"last":0,"beat":2000,"lifetime":500,"color":"#B2EBF2","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[574,126],[574,129],[574,132],[575,135],[576,138],[576,141],[577,145],[578,149],[579,152],[579,155],[580,158],[581,161],[582,164],[582,168],[583,172],[583,176],[585,179],[585,182],[585,186],[587,190],[587,193],[588,197],[589,200],[589,203],[590,206],[591,210],[592,214],[593,218],[593,221],[593,224],[594,227],[595,230],[595,234],[596,237],[597,241],[598,244],[599,248],[600,252],[601,256],[602,259],[602,262],[603,265],[603,268],[604,271],[605,274],[606,280],[607,284],[607,288],[607,291],[608,294],[609,297],[609,301],[610,304],[611,308],[611,312],[612,316],[613,320],[613,324],[614,328],[614,331],[614,334],[614,337],[615,340],[615,343],[615,346],[615,349],[615,352],[615,355],[615,358],[615,361],[615,364],[615,367],[615,370]]},{"start":1717574554337,"last":0,"beat":2000,"lifetime":500,"color":"#B2EBF2","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0],"segments":[[573,127],[572,124],[569,124],[569,121],[569,118],[566,115],[565,118],[565,121],[565,125],[565,128]]},{"start":1717574554337,"last":0,"beat":4000,"lifetime":1000,"color":"black","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[1031,441],[1024,436],[1014,424],[1001,402],[984,362],[977,322],[979,298],[985,276],[995,257],[1010,241],[1030,229],[1065,225],[1103,244],[1128,271],[1148,308],[1162,349],[1170,388],[1170,423],[1156,470],[1130,505],[1107,519],[1084,525],[1060,523],[1035,516],[1011,502],[987,482],[947,440],[909,384],[886,343],[867,300],[837,224],[826,195],[814,161],[805,139],[801,130],[799,126],[799,136],[805,207],[808,261],[804,310],[793,354],[775,385],[754,407],[718,425],[690,424],[636,399],[599,369],[564,333],[531,289],[502,247],[481,213],[452,163],[442,149],[437,143],[434,139],[437,142],[465,189],[514,274],[558,342],[603,407],[638,456],[655,479],[659,486],[646,457],[623,399],[605,334],[593,261],[584,188],[580,120],[578,62],[578,-2],[577,-7],[573,12],[571,73],[582,171],[636,362],[737,550],[776,600]]},{"start":1717574560803,"last":0,"beat":4000,"lifetime":1000,"color":"#FFF9C4","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[409,303],[412,301],[415,299],[419,299],[422,299],[425,300],[428,304],[432,308],[433,312],[434,316],[434,319],[434,322],[434,326],[434,330],[434,333],[434,336],[434,339],[434,343],[434,347],[434,350],[434,347],[434,342],[434,334],[435,327],[436,322],[438,319],[441,318],[444,318],[447,318],[450,318],[453,318],[456,318],[459,320],[461,323],[461,326],[461,329],[461,333],[461,336],[461,340],[461,343],[462,346],[463,349],[464,352],[464,355],[467,355],[468,351],[469,348],[471,343],[473,340],[474,336],[475,333],[475,330],[478,327],[481,327],[484,327],[487,327],[490,327],[493,327],[496,330],[497,333],[499,337],[500,340],[500,343],[500,346],[500,349],[501,352],[504,353],[507,354],[510,355]]},{"start":1717574560803,"last":0,"beat":4000,"lifetime":1000,"color":"#FFF9C4","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[531,324],[531,327],[531,330],[531,333],[531,336],[531,339],[531,342],[531,345],[531,348],[531,351],[531,355],[531,358],[531,361],[531,364]]},{"start":1717574560803,"last":0,"beat":4000,"lifetime":1000,"color":"#FFF9C4","multiPeriod":1,"strokeWidth":20,"times":[0],"segments":[[528,295]]},{"start":1717574560803,"last":0,"beat":4000,"lifetime":1000,"color":"#FFF9C4","multiPeriod":1,"strokeWidth":20,"times":[0,0,0],"segments":[[571,321],[568,323],[565,323]]},{"start":1717574560803,"last":0,"beat":4000,"lifetime":1000,"color":"#FFF9C4","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[564,324],[561,326],[559,329],[556,332],[556,335],[556,338],[556,341],[555,344],[554,347],[553,350],[553,353],[553,356],[554,359],[556,362],[556,365],[559,365],[562,365],[565,366],[568,366],[571,366],[574,366],[577,366],[580,366],[583,366],[586,366],[589,366]]},{"start":1717574560803,"last":0,"beat":4000,"lifetime":1000,"color":"#FFF9C4","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[612,236],[612,239],[612,242],[612,246],[612,249],[612,252],[612,255],[612,259],[612,262],[612,265],[612,268],[612,271],[612,275],[612,279],[612,282],[612,285],[612,288],[612,291],[612,294],[612,297],[612,300],[612,304],[612,308],[612,311],[612,314],[612,317],[613,320],[613,324],[613,327],[613,330],[613,333],[613,336],[613,339],[613,342],[613,345],[613,348],[613,351],[613,354],[613,357],[613,360],[613,363],[613,366],[613,369],[616,367],[617,364],[619,360],[621,357],[622,354],[623,351],[624,348],[627,345],[630,343],[633,343],[636,343],[639,343],[642,343],[644,346],[644,349],[644,352],[644,355],[645,358],[645,362],[646,366],[648,369],[650,372],[650,375],[652,378],[655,378]]},{"start":1717574560803,"last":0,"beat":4000,"lifetime":1000,"color":"#FFF9C4","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[674,335],[674,338],[674,341],[674,344],[674,347],[674,351],[674,355],[674,358],[674,361],[674,364],[674,367],[674,370],[674,373],[674,376],[674,380],[674,383]]},{"start":1717574560803,"last":0,"beat":4000,"lifetime":1000,"color":"#FFF9C4","multiPeriod":1,"strokeWidth":20,"times":[0],"segments":[[673,294]]},{"start":1717574560803,"last":0,"beat":500,"lifetime":50,"color":"#DCEDC8","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[571,77],[568,76],[565,75],[561,74],[558,73],[555,73],[551,72],[545,72],[542,72],[538,72],[534,72],[531,72],[527,72],[523,72],[520,73],[517,73],[511,74],[508,74],[505,75],[501,76],[498,77],[491,78],[487,80],[484,81],[479,82],[476,83],[472,85],[469,85],[466,86],[461,88],[458,89],[452,91],[447,94],[444,95],[440,98],[436,100],[433,101],[429,104],[425,106],[421,109],[416,112],[414,115],[410,118],[407,122],[404,124],[401,127],[397,132],[395,135],[391,139],[389,142],[386,145],[384,149],[381,153],[380,156],[378,159],[376,162],[375,165],[373,168],[372,172],[370,175],[369,178],[367,182],[365,186],[364,189],[363,193],[362,197],[361,200],[361,203],[360,206],[359,210],[358,214],[357,218],[356,224],[356,228],[355,232],[355,236],[354,241],[354,244],[354,249],[354,252],[354,258],[353,262],[353,265],[353,268],[353,272],[353,276],[353,281],[353,284],[353,287],[353,291],[352,294],[352,297],[352,302],[352,305],[352,310],[352,313],[352,316],[352,319],[352,324],[352,327],[352,331],[353,335],[353,339],[355,343],[355,347],[356,351],[357,355],[358,358],[359,363],[361,367],[363,371],[364,374],[366,377],[369,382],[372,386],[374,389],[376,392],[379,396],[383,400],[388,404],[392,407],[397,411],[402,415],[405,417],[410,420],[416,423],[420,425],[423,426],[426,427],[430,429],[433,430],[437,432],[442,434],[445,435],[449,436],[452,437],[456,438],[459,439],[464,440],[468,441],[471,441],[476,443],[479,443],[482,444],[485,445],[488,445],[491,447],[494,447],[497,448],[500,448],[506,449],[511,450],[516,451],[520,451],[524,452],[528,452],[532,452],[536,453],[542,454],[545,454],[551,456],[556,456],[560,457],[565,457],[570,457],[575,458],[583,459],[587,459],[592,459],[596,459],[600,459],[603,460],[607,460],[614,460],[621,460],[626,460],[631,459],[636,459],[641,459],[646,458],[653,457],[657,457],[663,456],[667,454],[671,453],[675,452],[679,451],[683,450],[688,447],[692,446],[698,443],[702,440],[706,437],[710,435],[712,432],[715,430],[718,427],[721,424],[725,419],[727,416],[731,411],[733,408],[736,405],[737,402],[740,397],[742,394],[746,387],[748,383],[751,377],[752,373],[754,369],[755,365],[757,360],[758,356],[759,349],[761,341],[762,337],[762,332],[763,328],[763,324],[763,319],[763,312],[763,305],[763,299],[762,295],[762,291],[761,287],[761,284],[761,279],[760,274],[759,271],[759,268],[759,265],[758,262],[758,258],[757,254],[756,251],[755,248],[755,245],[753,240],[752,236],[750,230],[749,227],[747,222],[744,217],[743,213],[741,209],[740,206],[739,203],[737,200],[734,195],[731,191],[729,188],[727,185],[725,182],[724,179],[720,174],[718,170],[715,166],[713,163],[709,158],[707,155],[704,151],[698,144],[694,139],[691,136],[688,133],[686,130],[681,126],[676,121],[673,118],[670,115],[666,111],[662,109],[657,105],[653,102],[647,98],[644,95],[640,93],[636,92],[633,90],[628,88],[623,85],[617,83],[613,81],[609,79],[604,77],[596,73],[593,73]]},{"start":1717574560803,"last":0,"beat":500,"lifetime":50,"color":"#DCEDC8","multiPeriod":1,"strokeWidth":20,"times":[0],"segments":[[567,68]]},{"start":1717574560803,"last":0,"beat":500,"lifetime":50,"color":"#DCEDC8","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0],"segments":[[556,69],[548,69],[544,69],[531,70],[514,72],[498,75],[483,82],[475,87]]},{"start":1717574560803,"last":0,"beat":500,"lifetime":50,"color":"#DCEDC8","multiPeriod":1,"strokeWidth":20,"times":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"segments":[[594,76],[591,75],[588,74],[583,72],[579,71],[574,70],[571,69],[567,69],[563,69],[560,69],[557,69],[553,69],[549,69],[546,69],[543,71]]},{"start":1717574560803,"last":0,"beat":500,"lifetime":50,"color":"#DCEDC8","multiPeriod":1,"strokeWidth":20,"times":[0],"segments":[[580,78]]}],"backgroundColor":"rgb(255,255,255)"});