stroke looper animation

description.md

http://bouboucle.com?gist=103984b03ed0b8fe6e2f76825c111584

looper.jsonp

load({"width":1536,"height":696,"speed":1,"lineData":[{"start":1713363870298,"last":758,"beat":2000,"lifetime":500,"color":"#303F9F","multiPeriod":1,"strokeWidth":50,"times":[1,4,21,38,54,71,88,104,121,138,154,171,188,204,221,238,254,271,287,304,321,338,354,371,387,404,421,437,454,471,487,504,521,537,554,571,588,604,620,637,654,671,687,704,721],"segments":[[533,129.8],[533,133.8],[533,145.8],[533,155.8],[532,171.8],[530,187.8],[527,201.8],[526,225.8],[524,260.8],[524,288.8],[536,322.8],[545,344.8],[551,355.8],[565,370.8],[589,384.8],[616,400.8],[647,411.8],[708,424.8],[745,437.8],[798,440.8],[872,444.8],[967,436.8],[1033,420.8],[1079,392.8],[1121,354.8],[1127,345.8],[1142,312.8],[1145,296.8],[1150,283.8],[1148,277.8],[1138,257.8],[1118,240.8],[1076,220.8],[1039,205.8],[1005,198.8],[984,195.8],[967,192.8],[944,192.8],[918,192.8],[906,192.8],[896,195.8],[886,199.8],[880,200.8],[877,202.8],[874,203.8]]},{"start":1713363878687,"last":766,"beat":2000,"lifetime":500,"color":"#26A69A","multiPeriod":1,"strokeWidth":50,"times":[0,7,24,41,57,74,91,108,124,141,158,174,191,207,224,241,257,274,291,307,324,341,357,374,390,407,424,440,457,474,490,507,524,540,557,574,590,607,624,640,657,673,690,706,723,740,766],"segments":[[404,241.8],[402,247.8],[401,256.8],[401,270.8],[402,296.8],[415,324.8],[426,364.8],[434,380.8],[452,405.8],[457,414.8],[476,424.8],[498,433.8],[523,446.8],[552,458.8],[580,466.8],[593,471.8],[636,474.8],[691,474.8],[750,474.8],[802,474.8],[854,474.8],[896,474.8],[935,468.8],[980,456.8],[996,447.8],[1019,424.8],[1028,409.8],[1032,392.8],[1032,374.8],[1033,360.8],[1033,342.8],[1021,322.8],[1000,295.8],[965,266.8],[921,236.8],[895,222.8],[879,211.8],[852,200.8],[828,192.8],[814,193.8],[804,198.8],[791,198.8],[785,200.8],[772,202.8],[768,204.8],[764,206.8],[761,208.8]]},{"start":1713363891587,"last":603,"beat":500,"lifetime":50,"color":"#26A69A","multiPeriod":1,"strokeWidth":50,"times":[0,12,29,46,62,79,95,112,128,145,162,178,195,212,229,245,262,279,295,312,329,345,362,379,395,412,428,445,462,478,495,512],"segments":[[198,173.8],[194,184.8],[189,204.8],[179,225.8],[170,237.8],[169,240.8],[164,264.8],[156,299.8],[155,318.8],[155,335.8],[164,362.8],[175,393.8],[198,436.8],[215,461.8],[219,468.8],[225,478.8],[241,492.8],[251,498.8],[254,503.8],[270,512.8],[285,515.8],[299,520.8],[320,525.8],[344,533.8],[372,545.8],[389,548.8],[402,550.8],[418,550.8],[434,551.8],[440,552.8],[445,552.8],[449,552.8]]},{"start":1713363897026,"last":396,"beat":4000,"lifetime":1000,"color":"#26A69A","multiPeriod":1,"strokeWidth":50,"times":[0,35,51,68,84,101,118,135,151,168,185,201,218,235,268,284],"segments":[[1381,210.8],[1362,210.8],[1312,205.8],[1121,179.8],[1013,179.8],[864,184.8],[696,184.8],[547,184.8],[378,172.8],[212,159.8],[56,152.8],[0,138.8],[0,122.8],[0,108.8],[0,104.8],[0,101.8]]}],"backgroundColor":"rgb(255,255,255)"});