stroke looper animation

description.md

http://bouboucle.com?gist=d1b49aaac87ba351d4972dd8e0ba3747

looper.jsonp

load({"width":377,"height":608.33,"speed":1,"lineData":[{"start":1713887843278,"last":1344,"beat":2000,"lifetime":500,"color":"#1A237E","multiPeriod":1,"strokeWidth":200,"times":[1,52,69,86,102,119,136,153,170,186,203,220,236,253,271,288,303,320,336,354,370,387,404,420,438,454,471,488,504,521,538,555,572,587,604,621,637,654,671,688,704,721,738,755,771,788,804,823,838,855,872,888,905,922,938,955,971,988,1005,1022,1039,1055,1072,1089,1106,1123,1139,1156,1172,1189,1208,1223,1239,1256,1273,1290,1306,1323,1339],"segments":[[40.0708412893216,606.4007473701082],[34.3121083414242,605.3527404601493],[23.31787328237593,599.0657393576206],[13.893875773657317,585.9672747164554],[11.276127586713939,567.6292039078825],[11.276127586713939,547.1949968844242],[14.417631570069522,528.3331980095488],[19.129374059965443,513.6629371946386],[24.364870433852204,502.1363299247022],[31.170606270489984,493.22934214601827],[39.54759897804685,487.9898583735781],[47.40033770342501,486.9417290686517],[55.77733232340324,491.13338952358436],[64.15382206414019,499.51646564351455],[74.10105232202672,512.0912634158612],[85.09528738107498,526.7614018358038],[97.66028590632925,541.431662650714],[112.84302210020937,555.5781342018381],[128.54897383146508,567.6292039078825],[143.73173297440164,576.0123412252965],[158.91444621922534,579.6796616390889],[172.52644954564136,580.7276685490476],[184.56766645679494,578.1078654653438],[194.51490436436694,571.2964019267072],[201.84438930394214,560.8177403692459],[206.0329133878304,548.2431261893506],[207.07991053930667,534.6208110869154],[204.98591623635411,520.9980676020938],[200.79739215246587,505.8040787208812],[193.99168117730588,487.4660079123082],[184.56766645679494,469.6517875650052],[174.09720536216187,452.88600251004755],[162.57921163806935,435.59587741394967],[149.49044679808534,418.30593591030316],[137.44921458756082,400.4915931680325],[126.45499482788348,380.5817873831983],[116.5077569203115,357.00459998708794],[109.17826433105083,333.9512630522475],[104.46653235947242,314.0414266686715],[103.41901502938391,296.7513321713154],[103.9427660447427,281.03312564393013],[106.03676034769525,266.88662349406417],[109.70151811685378,252.21639327789578],[115.98399825526724,238.0698911280298],[124.88425431073391,224.97142648686457],[135.35525088335015,212.92041797830404],[146.34948594239842,202.9660658632411],[158.39071815292297,196.6784527858745],[170.9556784297499,193.53489103712636],[182.4736721538424,193.53489103712636],[194.51490436436694,196.15469412083024],[204.98591623635411,200.87002144458148],[214.93315414392615,208.20509065455283],[223.83339490002186,216.58828916945058],[233.25685884317863,224.97142648686457],[243.20409675075064,232.3065568943197],[254.1983318097989,237.02182302058716],[266.2400994983067,239.11786743924677],[278.2812858107183,237.02182302058716],[289.27556676787947,231.78279822927544],[299.74651744238287,223.39959971437764],[306.55228961502667,212.39672051074362],[310.21703973449974,198.7744972045341],[311.26455706458825,183.056229479665],[310.21703973449974,166.81366761176847],[307.5998069451151,151.61969402992682],[303.4112981605978,137.4731765806899],[296.08176732290974,123.85044839523911],[286.1345753134506,109.70446642398537],[274.0928382236848,95.03373132857573],[262.0515907137893,82.45953023169605],[254.1983318097989,72.504612039908],[248.96334605241756,66.74124720745601],[246.86884687022373,61.50167163879016],[248.96334605241756,55.214548141293896],[254.72209047484318,47.35518478829512],[264.66931308304424,39.49629571579574],[276.71052999419777,32.684931623070355],[293.46407555239676,22.206254766238047]]},{"start":1713887873630,"last":984,"beat":2000,"lifetime":500,"color":"#880E4F","multiPeriod":1,"strokeWidth":50,"times":[0,48,63,80,98,113,131,147,164,180,197,214,230,247,264,281,298,314,331,347,364,381,398,414,431,449,480,485,500,514,532,549,565,581,598,615,632,648,665,682,698,715,732,750,769,782,799,816,833,849,865,882,899,915,933,949,965,982],"segments":[[56.300574634678,516.2827402783425],[72.53031180487713,522.5699249733225],[95.04252528864697,527.2856806794604],[116.5077569203115,525.7140069006829],[133.26073640178538,513.6629371946386],[146.87321400870078,490.609661457282],[155.24972669849416,458.6492755462739],[158.39071815292297,424.06923954527133],[157.86744906774908,391.06093852053],[155.24972669849416,362.7679954182818],[152.10819976608215,340.76263479465837],[150.5379794275448,323.4725402973024],[150.5379794275448,308.8017899025218],[152.63197373049735,295.1795665963123],[157.3437210014467,283.12864988397746],[164.14996745458987,272.64992712903233],[173.05020821068558,264.2667898116183],[182.9974461182576,258.50348617665014],[194.51490436436694,254.83613516411586],[207.07991053930667,253.26440018785465],[220.16862948117782,254.31191751794316],[232.73362035674663,257.4559382478197],[244.77485256727118,261.6469867279145],[257.33984344284,266.362834230278],[270.4280881042117,270.55440288898495],[283.5168223454538,272.1262296614719],[301.8405117453354,267.93459980528104],[306.55228961502667,264.7910992540168],[313.88178985397275,255.88365249420437],[318.5939961060506,243.833194762998],[320.16423174395885,231.78279822927544],[318.0702374410063,219.2080310556707],[314.4055485190171,206.6333250795497],[310.21703973449974,194.58286734834334],[306.02905112859463,182.00819197096425],[301.3172732589034,169.9577342397579],[295.55806985534934,158.95479383864003],[288.75232828144743,148.47611698180773],[281.94603593019144,137.4731765806899],[274.6165356912453,126.99453032259947],[266.76330738599677,115.99158992148162],[261.004593562313,105.51289776527838],[257.33984344284,95.03373132857573],[257.33984344284,85.07881313678769],[259.4338377457925,75.64814318991425],[263.6223159315679,66.2169989625414],[269.9048496177797,55.73830680633815],[277.7575271456741,45.259645248876794],[286.65781379988266,36.876500281777346],[296.08176732290974,30.065143838737427],[306.02905112859463,24.301786655970897],[315.97624313805375,20.63396901262269],[325.39973767995247,18.53843712288984],[333.77672465024517,16.442920532527943],[341.6294633756234,14.870634778912583],[348.9589942133114,13.823125098509543],[355.76519476834176,12.251336574450002],[361.0007007043354,10.679050820834645]]},{"start":1713887883419,"last":304,"beat":2000,"lifetime":500,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,46,62,79,96,113,129,146,162,180,196,213,229,246,263,279,297],"segments":[[61.536076745828865,88.74660783107946],[58.39508529140005,97.6535344122796],[52.63582834004766,119.13512107148786],[49.494844535304324,145.3320809525602],[48.971089695102805,170.4815082041731],[50.018086846579074,195.63038467843185],[51.06508399805534,219.2080310556707],[53.15958318024918,238.59364979307404],[56.82432947487952,252.21639327789578],[61.536076745828865,259.5514624878671],[67.81855688424231,260.5995305953098],[77.76581009118524,257.4559382478197],[90.85403945318606,250.64456650540887],[104.46653235947242,242.2614597867368],[117.03099540674351,235.9743668879824],[126.9782333143155,232.83025436188015],[141.11396470703386,227.59122957056846]]},{"start":1713887883924,"last":384,"beat":2000,"lifetime":500,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,42,58,75,92,109,125,142,159,176,192,209,226,243,259,276,292,309,326,343,359,376],"segments":[[154.20272954701787,117.5633401971138],[149.49044679808534,119.65889503590306],[136.40221743608453,128.56628059823163],[124.88425431073391,143.76028477881522],[118.60175122326405,164.71814337172108],[118.60175122326405,188.29525427097673],[123.3134908445279,210.8248937382567],[131.69050076387708,227.59122957056846],[143.73173297440164,237.54610186424364],[159.43771530439923,239.64162610429102],[176.7149277314168,233.35456380427854],[191.89715139637013,219.2080310556707],[203.41514512046265,199.29819467209458],[209.6976329085616,177.81662331225726],[210.22139157360584,158.95479383864003],[206.55664145413277,143.76028477881522],[199.75039500098958,131.18608368193551],[191.37391290993813,120.70691724523287],[182.9974461182576,114.94355241278087],[175.66744100007017,113.3717715384068],[170.4324552426888,114.41979374773662],[161.5322144865931,115.46781595706642]]},{"start":1713887884558,"last":367,"beat":2000,"lifetime":500,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,60,76,93,110,127,143,160,177,193,209,227,243,260,277,293,310,334,361],"segments":[[218.5978736646573,116.51534858652587],[221.73886511908614,125.42224456898411],[229.59210872370556,145.85632919747482],[237.96860611412797,166.81366761176847],[245.29862653168638,179.91214755230465],[253.15133465832264,188.29525427097673],[261.52783204874504,191.96312546212323],[270.951846769256,191.96312546212323],[279.32828296219463,187.77155680341627],[286.1345753134506,178.34035137855963],[290.32256391935573,164.19438470667683],[291.37008124944424,147.95185343752217],[289.7993254329237,130.1380614726057],[286.1345753134506,113.3717715384068],[282.99303308166765,99.74954823219733],[280.3752801136709,89.27036649612371],[279.85204162723886,83.50701696304266],[279.85204162723886,80.36347051366549],[279.85204162723886,77.21993936365925]]},{"start":1713887885112,"last":382,"beat":2000,"lifetime":500,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[0,73,90,107,124,140,156,174,191,207,224,240,257,274,291,307,325,340,357,375],"segments":[[313.35855136754077,101.8451030709866],[317.5469989545743,103.94114748964621],[329.58827706321165,107.0846939390234],[343.20021919214395,107.0846939390234],[351.5767471813082,101.32132910657138],[355.76519476834176,92.41391294550091],[356.2884944522576,81.41150802236625],[352.6237443327845,70.40855232187745],[345.81800275888264,61.50167163879016],[336.39401863711356,58.358125189412974],[327.4942827602592,59.40561192075959],[319.1172345924826,65.6932249981262],[311.7877955510202,78.26796157298907],[307.0760482800709,97.6535344122796],[306.02905112859463,122.27866752086506],[309.6938012480677,146.38010316189002],[317.02324028953007,165.7661655810509],[326.9705240952149,179.91214755230465],[339.0117104076266,188.29525427097673],[355.76519476834176,201.39378010962574]]},{"start":1713887931752,"last":3,"beat":2000,"lifetime":500,"color":"black","multiPeriod":1,"strokeWidth":50,"times":[1],"segments":[[221.73886511908614,256.9316594041632]]}],"backgroundColor":"rgb(255,255,255)"});