How to give color kml line? - colors

Kml Line Color
Hi,
I am trying to change color kml lines. I want to change color of line each one. For example first blue, second red, etc..
My codes at below..
How can I make it?
I can just make to change general color .
<StyleMap id="m_ylw-pushpin">
<Pair>
<key>normal</key>
<styleUrl>#s_ylw-pushpin</styleUrl>
</Pair>
</StyleMap>
<Style id="s_ylw-pushpin">
<LineStyle>
<color>50000000</color>
<width>8</width>
</LineStyle>
</Style>
<Placemark id="ID_00000">
<Snippet maxLines="0"></Snippet>
<styleUrl>#s_ylw-pushpin</styleUrl>
<MultiGeometry>
<LineString>
<tessellate>first</tessellate>
<coordinates>
30.55208275199055,39.77545668999021,0 30.55329917229911,39.7743291838848,0 30.553487499178,39.774210036146,0 30.55376134193491,39.77410216245037,0 30.55400914652402,39.77403635753819,0 30.5543003791806,39.77395726162271,0 30.55445586388359,39.7738989798837,0 30.55478077235974,39.77373535569645,0 30.55492616951969,39.77361530054731,0 30.55606546970367,39.77263540786894,0 30.55616710016928,39.7725381058988,0 30.55624520637499,39.77241189584878,0 30.5563118851529,39.77226176801565,0 30.55635319812838,39.77213478272165,0 30.55634200076624,39.77193092483321,0 30.55631906111245,39.771191719873,0 30.55622198159202,39.76863626781003,0 30.5561935513482,39.76798883121545,0 30.55618640911133,39.76765631919049,0 30.55607976315839,39.76463444473299,0 30.55606261438817,39.76439102113691,0 30.55597382368099,39.76429917777359,0 30.5558409415722,39.76423955310673,0 30.55570672038415,39.7642177832708,0 30.55555839482443,39.76424780545259,0 30.55536018072171,39.76430045304888,0 30.55513162700265,39.76436656311772,0 30.55279513132897,39.76499929438431,0 30.55145698551002,39.76535935794406,0 30.55081176257757,39.76555882903507,0 30.55003743872202,39.76576504058954,0 30.54755947208565,39.76642772092054,0 30.54481359682516,39.76720306212964,0 30.54441797766511,39.76728466001697,0 30.54413457737936,39.76731654324124,0 30.54385151335529,39.76733896210897,0 30.5434574609685,39.7673410865186,0 30.5429489871468,39.76735299552406,0 30.54265322200134,39.76736014071452,0 30.5396982877813,39.7674829780168,0 30.53625772778702,39.76767351479073,0 30.53578812258117,39.76769356874716,0 30.53546027699203,39.76776710492464,0 30.53526305210735,39.76779132657096,0 30.53509749830203,39.76778780860342,0 30.5349264883377,39.76776523291016,0 30.53474376966929,39.76773377407705,0 30.53409731811554,39.76761501777818,0 30.53376210730966,39.7675510664405,0 30.53327495925238,39.76744600005959,0 30.53188114065927,39.76712749227719,0 30.53113741386012,39.76697452767301,0 30.53035581760766,39.76680972424368,0 30.5299373607711,39.76674516861281,0 30.52944053972674,39.76673932321968,0 30.52887593384736,39.76674150239134,0 30.52842101785435,39.76676495764476,0 30.5264080559429,39.76694461098736,0 30.52603301732562,39.76696502484203,0 30.5254183412927,39.76699453147431,0 30.52517919109393,39.76701539095011,0 30.52502985254563,39.76704780277677,0 30.52491863768399,39.76706910659861,0 30.52464836541708,39.7671815661829,0 30.52313805091433,39.76778402332261,0 30.52291273317693,39.76790706690503,0 30.52269269774701,39.76805389973553,0 30.52218638569389,39.76848347496803,0 30.52173268572158,39.768814729151,0 30.52101160142468,39.76941491890977,0 30.52013484831262,39.77024854457439,0 30.51982504669052,39.77050236611645,0 30.51956599656533,39.77070991840461,0 30.51879199775974,39.77124988034783,0 30.51755808101385,39.77211124992451,0 30.51738690626452,39.77226385344608,0 30.51728284201428,39.77242736395041,0 30.51723992680929,39.7725969186458,0 30.51725918166938,39.77274412724389,0 30.51750656489119,39.77388591078061,0 30.5177954103205,39.77495738852652,0 30.51794771780237,39.77554996733092,0 30.51828023883764,39.77677683564761,0 30.51820802148492,39.77690788068335,0 30.51806119506965,39.77706574135599,0 30.51789034869962,39.77720888170314,0 30.51770825740611,39.77732336892879,0 30.51726009072993,39.77749845576437,0 30.51668740173768,39.77772296382176,0 30.51621418970355,39.77791171640408,0 30.51609563098926,39.77796600181452,0 30.51543044021505,39.77837320173492,0 30.51487638467662,39.77871901780135,0 30.51347263904215,39.77956717557719,0 30.51293398971048,39.77986816027232,0 30.50940917331127,39.7814546336846,0 30.50897220102404,39.78165834042027,0 30.50891325053533,39.78176125214873,0 30.50889654620845,39.78188401266556,0 30.50893537811716,39.78199849529264,0 30.50926958246813,39.78243185509649,0 30.51034946834446,39.78384936729862,0 30.51049997210012,39.78405408717125,0 30.5105381252234,39.78418749612191,0 30.51051546061802,39.78430539356028,0 30.5102723884096,39.78472356402966,0 30.50995303781935,39.78526406794016,0 30.50974449048328,39.78560053589698,0 30.50959029772633,39.78579137459551,0 30.50943661623847,39.78596801798854,0 30.50918207214894,39.78621826070349,0 30.50774449937931,39.78772721749933,0 30.50757995595733,39.78792171627243,0 30.50749152715242,39.78799084613388,0 30.50736153206627,39.78802119974625,0 30.50720854161327,39.78800844078165,0 30.50698217389574,39.78796453381413,0 30.50366684079857,39.78733087221538,0 30.50107737938489,39.78682709975562,0 30.50036845723828,39.78668088485895,0 30.49997360018618,39.78660257591444,0 30.49987087935947,39.78655774346461,0 30.49973375928648,39.7864458744634,0 30.49961641006889,39.78629654875916,0 30.49952222254462,39.78618560509537,0 30.4993709521726,39.78612551942442,0 30.49921813934804,39.78610801843487,0 30.49908149734451,39.78615242547821,0 30.49883188798869,39.78626542638547,0 30.49836997996701,39.78647802531139,0 30.49799358993334,39.78670193798943,0 30.49759999875201,39.7868923308432,0 30.49682610585513,39.78724498721488,0 30.49632687137183,39.78747097823592,0 30.49588403411171,39.7876650373705,0 30.49523690955533,39.78790677171427,0 30.49479458177331,39.78808663158435,0 30.49412784749101,39.78836108345269,0 30.49300660985405,39.78885622157366,0 30.49205577601575,39.78925854440151,0 30.4916152240481,39.78943377758046,0 30.49132231375628,39.78955529614549,0 30.49098732894288,39.78965222701463,0 30.490474303658,39.78975003983367,0 30.48992023625294,39.78979487334162,0
</coordinates>
</LineString>
<LineString>
<coordinates>
30.55306933599353,39.76485789392094,0 30.55300989599834,39.76350172117805,0 30.55290770929984,39.76319929571931,0 30.55271870544885,39.76303568701522,0 30.55233428302535,39.76233800830583,0 30.55207013880492,39.76173258834482,0 30.5530882462863,39.76136711590753,0 30.55394543879455,39.76077178288264,0 30.55485307971753,39.76002821940597,0 30.5562854777982,39.75884462102884,0 30.55769800110098,39.75787713281138,0 30.56010341467413,39.75631251912146,0 30.56138934332899,39.7553640209978,0 30.56249988826194,39.75453464454295,0 30.56411346344861,39.75374027906172,0 30.56591261023536,39.75279843401238,0 30.56686029302946,39.7522528553724,0 30.56795085882791,39.75182902978272,0 30.56917600041085,39.75133123256144,0 30.57016876765188,39.75070560072842,0 30.57133100654567,39.74994553252327,0 30.57334756283363,39.74868460140477,0 30.57473200832074,39.747854457198,0 30.57536390725456,39.74742405091067,0 30.5772214658438,39.74637542629831,0 30.57876980431123,39.74524139381695,0 30.58048514615319,39.74386005927328,0 30.58116351679419,39.74328740894802,0 30.58333468728289,39.74158877889896,0 30.58419701353435,39.74090530604617,0 30.58466554236851,39.74057589329816,0 30.58483597077077,39.74054515231796,0 30.5852932925947,39.74089013625106,0 30.58584679429913,39.74147189526373,0 30.58588054308298,39.74169270778833,0 30.58569951637363,39.7418626449796,0 30.58487176671997,39.74226175784619,0 30.58462700110762,39.74238665552747,0 30.58443520707476,39.74224005544104,0 30.58398210011705,39.74174800819539,0 30.58363983638915,39.74142605588357,0 30.58355117447062,39.74139069967891,0
</coordinates>
</LineString>
<LineString>
<tessellate>Second</tessellate>
<coordinates>
30.48992023625294,39.78979487334162,0 30.48974953456908,39.78976276661288,0 30.48965449843945,39.78967547341377,0 30.48958588897028,39.78953666344139,0 30.48958474637002,39.78939931385141,0 30.48956424732863,39.78861280365207,0 30.48950297689107,39.78844100510051,0 30.48936828011946,39.78826288166847,0 30.48914754698165,39.78808763078132,0 30.48851608986794,39.78761406332554,0 30.48800658277246,39.78722476828875,0 30.48780236152633,39.78710196125918,0 30.48767391053074,39.78708970809034,0 30.48754322073225,39.78713896570044,0 30.48741659712587,39.78724513533282,0 30.48643288176931,39.78813300438152,0 30.4861293550517,39.78837739850085,0 30.48517107487605,39.78907165888082,0 30.48499365368644,39.78922407761424,0 30.48493941502303,39.78936496149789,0 30.48496050002262,39.78946012548996,0 30.48502649330161,39.78963369602742,0 30.48523793839278,39.78997043293963,0 30.48532686640588,39.79005867758058,0 30.48545710181452,39.79009704344957,0 30.48558844632427,39.7901049686169,0 30.48578647961555,39.7900889522391,0 30.48795752585592,39.78993290085895,0 30.48953446884828,39.78982487904978,0 30.48992023625294,39.78979487334162,0
</coordinates>
</LineString>
<LineString>
<tessellate>3th</tessellate>
<coordinates>
30.49611653728566,39.75432453676714,0 30.49605875478015,39.75407051619083,0 30.49603664825351,39.75365353749095,0 30.49598419841209,39.75356048773647,0 30.49588608679008,39.7534951765129,0 30.49529081512401,39.75323676336507,0 30.49469866973588,39.7529898429372,0 30.4945683152915,39.75299277243268,0 30.49447368877226,39.75303668741122,0 30.49435373361962,39.75316335550571,0 30.49423427052028,39.75337907923379,0 30.49425634551964,39.75348870817842,0 30.49435414333986,39.75356263126024,0 30.49611653728566,39.75432453676714,0 30.49656684816477,39.75452958072573,0 30.49693280213702,39.75459779878342,0 30.49716707145498,39.75460285362102,0 30.49747716715195,39.75456932989535,0 30.49774802120129,39.75448900006627,0 30.49800152882333,39.75437382635829,0 30.49822009215217,39.75426043103318,0 30.49960014668696,39.75359539913496,0 30.50027036630723,39.75327664227446,0 30.50040919645484,39.75324516473538,0 30.50052777316547,39.7532592094536,0 30.50063374125603,39.75331319635579,0 30.50069353051743,39.75340927462425,0 30.50071468167764,39.75354473436862,0 30.50079782161338,39.75487918907888,0 30.5008162010926,39.75522308206036,0 30.50084868873363,39.7557048133442,0 30.50090185525877,39.75588117672425,0 30.50098229811126,39.75602365859866,0 30.50107865381155,39.75613775896716,0 30.50122829891328,39.75632194539564,0 30.50154286415268,39.75678256429374,0 30.50203506891666,39.75747680186019,0 30.50301820541598,39.75888547967088,0 30.50317213826812,39.7591039161989,0 30.50323522673362,39.7592119129278,0 30.50323753526588,39.75932183287247,0 30.50321178306606,39.75939721830651,0 30.50313896002642,39.75950067383786,0 30.50297565371167,39.75971413671145,0 30.50280861175659,39.75995243240502,0 30.5026257584609,39.7602619490957,0 30.50256123377141,39.76042536522466,0 30.50242037262338,39.7608472716019,0 30.50238148392942,39.76093853135615,0 30.50228325417023,39.76110768451728,0 30.50201024930185,39.76153643925402,0 30.50181664609877,39.76179563513943,0 30.50148571363092,39.76214720126151,0 30.50131024348911,39.76236800911423,0 30.50124577188756,39.76252980981867,0 30.5012150629965,39.76268425911924,0 30.50112176748208,39.76317989651739,0 30.50086690280881,39.7644718121037,0 30.5008024529845,39.76477259712826,0 30.50077317005722,39.76506118315579,0 30.50078911490467,39.76525703090461,0 30.50079892995804,39.76538653500465,0 30.50084567904266,39.76577690124235,0 30.50092489535301,39.76636512052181,0 30.5009972046291,39.76691279748212,0 30.50103788366962,39.76723520551142,0 30.50112997263391,39.76735190678099,0 30.50126774774906,39.76742112007317,0 30.50144964236865,39.76742826984719,0 30.5031127846798,39.76752386562182,0 30.50418521134848,39.76756956654074,0 30.5053090558675,39.76760172355328,0 30.50619363853631,39.76763049980637,0 30.50685152806495,39.76765760660097,0 30.5075373296829,39.76768365550365,0 30.50839421440024,39.76778446798019,0 30.5090746115072,39.76784432220885,0 30.50932293231115,39.7678674277671,0 30.50949535516517,39.76790506056739,0 30.50965702661818,39.76795054097278,0 30.50996636251142,39.76808159388293,0 30.51038884614202,39.76826839398031,0 30.51086892275666,39.76848389605051,0 30.51113246913588,39.76860750028934,0 30.51181531098852,39.76894852952182,0 30.51310288299504,39.76957941234593,0 30.5134729308797,39.76978063552057,0 30.51391298602259,39.77000334585159,0 30.51432764725705,39.7702335890366,0 30.51475608530194,39.77048836203,0 30.51532586875268,39.77083017980958,0 30.51572996422598,39.771121589793,0 30.51610064353886,39.7713525004382,0 30.51685787692144,39.77183889416126,0 30.51701451042994,39.77196665925323,0 30.51712040811258,39.77210787974151,0 30.51717208166821,39.77224309222113,0 30.51718870933933,39.7723630128509,0 30.51723992680929,39.7725969186458,0 30.51725918166938,39.77274412724389,0 30.51750656489119,39.77388591078061,0 30.5177954103205,39.77495738852652,0 30.51794771780237,39.77554996733092,0 30.51816632200101,39.77621485229454,0 30.51831507302844,39.77650402085485,0 30.51841586312475,39.77661281610521,0 30.51851519555427,39.77664564037181,0 30.51859046364411,39.77664886642732,0 30.51867880821611,39.77663783053732,0 30.51875930529875,39.77661208505388,0 30.51887653313104,39.77655481047705,0 30.51904781060363,39.7764502197592,0 30.51939658315195,39.77624278625924,0 30.52004984459871,39.77595299683984,0 30.5204796684102,39.77584141186959,0 30.52093181194936,39.77570848568271,0 30.52113034901332,39.77566102533609,0 30.52129843371335,39.77564522865377,0 30.52153725317179,39.77564225342155,0 30.52207557756077,39.77569576459578,0 30.52286755063847,39.77579993145269,0 30.52350852782338,39.77591056345738,0 30.52375799213584,39.77596113035281,0 30.52388354323221,39.77602197736064,0 30.52397021599631,39.77611592481994,0 30.5240113280026,39.77625414034385,0 30.52410540523959,39.77690082877881,0 30.52416228166096,39.77712501495996,0 30.52426080107525,39.77753105283742,0 30.52447206756974,39.77823840890682,0 30.52466094610998,39.778886723574,0 30.52469108015091,39.77902186962818,0 30.5248442308531,39.7795412822563,0 30.52500342798525,39.78006422417006,0 30.52508694252848,39.78036330228639,0 30.52529066473786,39.78104787541239,0 30.52535225364643,39.78125761984605,0 30.525439580594,39.78139197365125,0 30.52555160394561,39.78147999785195,0 30.52580484477562,39.78165095229672,0 30.5259523867246,39.78175336046768,0 30.52607762060272,39.7817767616032,0 30.52619160529969,39.7817680306526,0 30.52632594635272,39.78171030112468,0 30.526356228988,39.78167267656754,0 30.52637876465446,39.78162053537065,0 30.52639028936387,39.78158729454488,0 30.52638804286219,39.78153462480223,0 30.52637541340293,39.78148332821803,0 30.52633995288514,39.78143473389911,0 30.52628389779053,39.78138410572269,0 30.52622362921051,39.78135028298729,0 30.52615952090598,39.78133680408053,0 30.52609779418761,39.78132910906757,0 30.52601891809282,39.78133858882605,0 30.52590206956408,39.78136958293604,0 30.52576858536721,39.78140341124442,0 30.52568758687982,39.78141444010055,0 30.52559522522062,39.78139652366104,0 30.52546476753162,39.78134590234594,0 30.52535225364643,39.78125761984605,0
</coordinates>
</LineString>
</MultiGeometry>
</Placemark>


You can't change the polyline styles within a MultiGeometry, they will all be the same. Separate them out as individual Placemarks, then you can control them separately.
example
<Placemark id="ID_00000">
<Snippet maxLines="0"></Snippet>
<Style>
<LineStyle>
<color>7fff0000</color>
<width>8</width>
</LineStyle>
</Style>
<LineString>
<tessellate>0</tessellate>
<coordinates>30.55208275199055,39.77545668999021 30.55329917229911,39.7743291838848 30.553487499178,39.774210036146 30.55376134193491,39.77410216245037 30.55400914652402,39.77403635753819 30.5543003791806,39.77395726162271 30.55445586388359,39.7738989798837 30.55478077235974,39.77373535569645 30.55492616951969,39.77361530054731 30.55606546970367,39.77263540786894 30.55616710016928,39.7725381058988 30.55624520637499,39.77241189584878 30.5563118851529,39.77226176801565 30.55635319812838,39.77213478272165 30.55634200076624,39.77193092483321 30.55631906111245,39.771191719873 30.55622198159202,39.76863626781003 30.5561935513482,39.76798883121545 30.55618640911133,39.76765631919049 30.55607976315839,39.76463444473299 30.55606261438817,39.76439102113691 30.55597382368099,39.76429917777359 30.5558409415722,39.76423955310673 30.55570672038415,39.7642177832708 30.55555839482443,39.76424780545259 30.55536018072171,39.76430045304888 30.55513162700265,39.76436656311772 30.55279513132897,39.76499929438431 30.55145698551002,39.76535935794406 30.55081176257757,39.76555882903507 30.55003743872202,39.76576504058954 30.54755947208565,39.76642772092054 30.54481359682516,39.76720306212964 30.54441797766511,39.76728466001697 30.54413457737936,39.76731654324124 30.54385151335529,39.76733896210897 30.5434574609685,39.7673410865186 30.5429489871468,39.76735299552406 30.54265322200134,39.76736014071452 30.5396982877813,39.7674829780168 30.53625772778702,39.76767351479073 30.53578812258117,39.76769356874716 30.53546027699203,39.76776710492464 30.53526305210735,39.76779132657096 30.53509749830203,39.76778780860342 30.5349264883377,39.76776523291016 30.53474376966929,39.76773377407705 30.53409731811554,39.76761501777818 30.53376210730966,39.7675510664405 30.53327495925238,39.76744600005959 30.53188114065927,39.76712749227719 30.53113741386012,39.76697452767301 30.53035581760766,39.76680972424368 30.5299373607711,39.76674516861281 30.52944053972674,39.76673932321968 30.52887593384736,39.76674150239134 30.52842101785435,39.76676495764476 30.5264080559429,39.76694461098736 30.52603301732562,39.76696502484203 30.5254183412927,39.76699453147431 30.52517919109393,39.76701539095011 30.52502985254563,39.76704780277677 30.52491863768399,39.76706910659861 30.52464836541708,39.7671815661829 30.52313805091433,39.76778402332261 30.52291273317693,39.76790706690503 30.52269269774701,39.76805389973553 30.52218638569389,39.76848347496803 30.52173268572158,39.768814729151 30.52101160142468,39.76941491890977 30.52013484831262,39.77024854457439 30.51982504669052,39.77050236611645 30.51956599656533,39.77070991840461 30.51879199775974,39.77124988034783 30.51755808101385,39.77211124992451 30.51738690626452,39.77226385344608 30.51728284201428,39.77242736395041 30.51723992680929,39.7725969186458 30.51725918166938,39.77274412724389 30.51750656489119,39.77388591078061 30.5177954103205,39.77495738852652 30.51794771780237,39.77554996733092 30.51828023883764,39.77677683564761 30.51820802148492,39.77690788068335 30.51806119506965,39.77706574135599 30.51789034869962,39.77720888170314 30.51770825740611,39.77732336892879 30.51726009072993,39.77749845576437 30.51668740173768,39.77772296382176 30.51621418970355,39.77791171640408 30.51609563098926,39.77796600181452 30.51543044021505,39.77837320173492 30.51487638467662,39.77871901780135 30.51347263904215,39.77956717557719 30.51293398971048,39.77986816027232 30.50940917331127,39.7814546336846 30.50897220102404,39.78165834042027 30.50891325053533,39.78176125214873 30.50889654620845,39.78188401266556 30.50893537811716,39.78199849529264 30.50926958246813,39.78243185509649 30.51034946834446,39.78384936729862 30.51049997210012,39.78405408717125 30.5105381252234,39.78418749612191 30.51051546061802,39.78430539356028 30.5102723884096,39.78472356402966 30.50995303781935,39.78526406794016 30.50974449048328,39.78560053589698 30.50959029772633,39.78579137459551 30.50943661623847,39.78596801798854 30.50918207214894,39.78621826070349 30.50774449937931,39.78772721749933 30.50757995595733,39.78792171627243 30.50749152715242,39.78799084613388 30.50736153206627,39.78802119974625 30.50720854161327,39.78800844078165 30.50698217389574,39.78796453381413 30.50366684079857,39.78733087221538 30.50107737938489,39.78682709975562 30.50036845723828,39.78668088485895 30.49997360018618,39.78660257591444 30.49987087935947,39.78655774346461 30.49973375928648,39.7864458744634 30.49961641006889,39.78629654875916 30.49952222254462,39.78618560509537 30.4993709521726,39.78612551942442 30.49921813934804,39.78610801843487 30.49908149734451,39.78615242547821 30.49883188798869,39.78626542638547 30.49836997996701,39.78647802531139 30.49799358993334,39.78670193798943 30.49759999875201,39.7868923308432 30.49682610585513,39.78724498721488 30.49632687137183,39.78747097823592 30.49588403411171,39.7876650373705 30.49523690955533,39.78790677171427 30.49479458177331,39.78808663158435 30.49412784749101,39.78836108345269 30.49300660985405,39.78885622157366 30.49205577601575,39.78925854440151 30.4916152240481,39.78943377758046 30.49132231375628,39.78955529614549 30.49098732894288,39.78965222701463 30.490474303658,39.78975003983367 30.48992023625294,39.78979487334162</coordinates>
</LineString>
</Placemark>
<Placemark id="ID_00001">
<Snippet maxLines="0"></Snippet>
<Style>
<LineStyle>
<color>7f00ff00</color>
<width>8</width>
</LineStyle>
</Style>
<LineString>
<coordinates>30.55306933599353,39.76485789392094 30.55300989599834,39.76350172117805 30.55290770929984,39.76319929571931 30.55271870544885,39.76303568701522 30.55233428302535,39.76233800830583 30.55207013880492,39.76173258834482 30.5530882462863,39.76136711590753 30.55394543879455,39.76077178288264 30.55485307971753,39.76002821940597 30.5562854777982,39.75884462102884 30.55769800110098,39.75787713281138 30.56010341467413,39.75631251912146 30.56138934332899,39.7553640209978 30.56249988826194,39.75453464454295 30.56411346344861,39.75374027906172 30.56591261023536,39.75279843401238 30.56686029302946,39.7522528553724 30.56795085882791,39.75182902978272 30.56917600041085,39.75133123256144 30.57016876765188,39.75070560072842 30.57133100654567,39.74994553252327 30.57334756283363,39.74868460140477 30.57473200832074,39.747854457198 30.57536390725456,39.74742405091067 30.5772214658438,39.74637542629831 30.57876980431123,39.74524139381695 30.58048514615319,39.74386005927328 30.58116351679419,39.74328740894802 30.58333468728289,39.74158877889896 30.58419701353435,39.74090530604617 30.58466554236851,39.74057589329816 30.58483597077077,39.74054515231796 30.5852932925947,39.74089013625106 30.58584679429913,39.74147189526373 30.58588054308298,39.74169270778833 30.58569951637363,39.7418626449796 30.58487176671997,39.74226175784619 30.58462700110762,39.74238665552747 30.58443520707476,39.74224005544104 30.58398210011705,39.74174800819539 30.58363983638915,39.74142605588357 30.58355117447062,39.74139069967891</coordinates>
</LineString>
</Placemark>
<Placemark id="ID_00002">
<Snippet maxLines="0"></Snippet>
<Style>
<LineStyle>
<color>7f0000ff</color>
<width>8</width>
</LineStyle>
</Style>
<LineString>
<tessellate>0</tessellate>
<coordinates>30.48992023625294,39.78979487334162 30.48974953456908,39.78976276661288 30.48965449843945,39.78967547341377 30.48958588897028,39.78953666344139 30.48958474637002,39.78939931385141 30.48956424732863,39.78861280365207 30.48950297689107,39.78844100510051 30.48936828011946,39.78826288166847 30.48914754698165,39.78808763078132 30.48851608986794,39.78761406332554 30.48800658277246,39.78722476828875 30.48780236152633,39.78710196125918 30.48767391053074,39.78708970809034 30.48754322073225,39.78713896570044 30.48741659712587,39.78724513533282 30.48643288176931,39.78813300438152 30.4861293550517,39.78837739850085 30.48517107487605,39.78907165888082 30.48499365368644,39.78922407761424 30.48493941502303,39.78936496149789 30.48496050002262,39.78946012548996 30.48502649330161,39.78963369602742 30.48523793839278,39.78997043293963 30.48532686640588,39.79005867758058 30.48545710181452,39.79009704344957 30.48558844632427,39.7901049686169 30.48578647961555,39.7900889522391 30.48795752585592,39.78993290085895 30.48953446884828,39.78982487904978 30.48992023625294,39.78979487334162</coordinates>
</LineString>
</Placemark>
<Placemark id="ID_00003">
<Snippet maxLines="0"></Snippet>
<Style>
<LineStyle>
<color>7fffff00</color>
<width>8</width>
</LineStyle>
</Style>
<LineString>
<tessellate>0</tessellate>
<coordinates>30.49611653728566,39.75432453676714 30.49605875478015,39.75407051619083 30.49603664825351,39.75365353749095 30.49598419841209,39.75356048773647 30.49588608679008,39.7534951765129 30.49529081512401,39.75323676336507 30.49469866973588,39.7529898429372 30.4945683152915,39.75299277243268 30.49447368877226,39.75303668741122 30.49435373361962,39.75316335550571 30.49423427052028,39.75337907923379 30.49425634551964,39.75348870817842 30.49435414333986,39.75356263126024 30.49611653728566,39.75432453676714 30.49656684816477,39.75452958072573 30.49693280213702,39.75459779878342 30.49716707145498,39.75460285362102 30.49747716715195,39.75456932989535 30.49774802120129,39.75448900006627 30.49800152882333,39.75437382635829 30.49822009215217,39.75426043103318 30.49960014668696,39.75359539913496 30.50027036630723,39.75327664227446 30.50040919645484,39.75324516473538 30.50052777316547,39.7532592094536 30.50063374125603,39.75331319635579 30.50069353051743,39.75340927462425 30.50071468167764,39.75354473436862 30.50079782161338,39.75487918907888 30.5008162010926,39.75522308206036 30.50084868873363,39.7557048133442 30.50090185525877,39.75588117672425 30.50098229811126,39.75602365859866 30.50107865381155,39.75613775896716 30.50122829891328,39.75632194539564 30.50154286415268,39.75678256429374 30.50203506891666,39.75747680186019 30.50301820541598,39.75888547967088 30.50317213826812,39.7591039161989 30.50323522673362,39.7592119129278 30.50323753526588,39.75932183287247 30.50321178306606,39.75939721830651 30.50313896002642,39.75950067383786 30.50297565371167,39.75971413671145 30.50280861175659,39.75995243240502 30.5026257584609,39.7602619490957 30.50256123377141,39.76042536522466 30.50242037262338,39.7608472716019 30.50238148392942,39.76093853135615 30.50228325417023,39.76110768451728 30.50201024930185,39.76153643925402 30.50181664609877,39.76179563513943 30.50148571363092,39.76214720126151 30.50131024348911,39.76236800911423 30.50124577188756,39.76252980981867 30.5012150629965,39.76268425911924 30.50112176748208,39.76317989651739 30.50086690280881,39.7644718121037 30.5008024529845,39.76477259712826 30.50077317005722,39.76506118315579 30.50078911490467,39.76525703090461 30.50079892995804,39.76538653500465 30.50084567904266,39.76577690124235 30.50092489535301,39.76636512052181 30.5009972046291,39.76691279748212 30.50103788366962,39.76723520551142 30.50112997263391,39.76735190678099 30.50126774774906,39.76742112007317 30.50144964236865,39.76742826984719 30.5031127846798,39.76752386562182 30.50418521134848,39.76756956654074 30.5053090558675,39.76760172355328 30.50619363853631,39.76763049980637 30.50685152806495,39.76765760660097 30.5075373296829,39.76768365550365 30.50839421440024,39.76778446798019 30.5090746115072,39.76784432220885 30.50932293231115,39.7678674277671 30.50949535516517,39.76790506056739 30.50965702661818,39.76795054097278 30.50996636251142,39.76808159388293 30.51038884614202,39.76826839398031 30.51086892275666,39.76848389605051 30.51113246913588,39.76860750028934 30.51181531098852,39.76894852952182 30.51310288299504,39.76957941234593 30.5134729308797,39.76978063552057 30.51391298602259,39.77000334585159 30.51432764725705,39.7702335890366 30.51475608530194,39.77048836203 30.51532586875268,39.77083017980958 30.51572996422598,39.771121589793 30.51610064353886,39.7713525004382 30.51685787692144,39.77183889416126 30.51701451042994,39.77196665925323 30.51712040811258,39.77210787974151 30.51717208166821,39.77224309222113 30.51718870933933,39.7723630128509 30.51723992680929,39.7725969186458 30.51725918166938,39.77274412724389 30.51750656489119,39.77388591078061 30.5177954103205,39.77495738852652 30.51794771780237,39.77554996733092 30.51816632200101,39.77621485229454 30.51831507302844,39.77650402085485 30.51841586312475,39.77661281610521 30.51851519555427,39.77664564037181 30.51859046364411,39.77664886642732 30.51867880821611,39.77663783053732 30.51875930529875,39.77661208505388 30.51887653313104,39.77655481047705 30.51904781060363,39.7764502197592 30.51939658315195,39.77624278625924 30.52004984459871,39.77595299683984 30.5204796684102,39.77584141186959 30.52093181194936,39.77570848568271 30.52113034901332,39.77566102533609 30.52129843371335,39.77564522865377 30.52153725317179,39.77564225342155 30.52207557756077,39.77569576459578 30.52286755063847,39.77579993145269 30.52350852782338,39.77591056345738 30.52375799213584,39.77596113035281 30.52388354323221,39.77602197736064 30.52397021599631,39.77611592481994 30.5240113280026,39.77625414034385 30.52410540523959,39.77690082877881 30.52416228166096,39.77712501495996 30.52426080107525,39.77753105283742 30.52447206756974,39.77823840890682 30.52466094610998,39.778886723574 30.52469108015091,39.77902186962818 30.5248442308531,39.7795412822563 30.52500342798525,39.78006422417006 30.52508694252848,39.78036330228639 30.52529066473786,39.78104787541239 30.52535225364643,39.78125761984605 30.525439580594,39.78139197365125 30.52555160394561,39.78147999785195 30.52580484477562,39.78165095229672 30.5259523867246,39.78175336046768 30.52607762060272,39.7817767616032 30.52619160529969,39.7817680306526 30.52632594635272,39.78171030112468 30.526356228988,39.78167267656754 30.52637876465446,39.78162053537065 30.52639028936387,39.78158729454488 30.52638804286219,39.78153462480223 30.52637541340293,39.78148332821803 30.52633995288514,39.78143473389911 30.52628389779053,39.78138410572269 30.52622362921051,39.78135028298729 30.52615952090598,39.78133680408053 30.52609779418761,39.78132910906757 30.52601891809282,39.78133858882605 30.52590206956408,39.78136958293604 30.52576858536721,39.78140341124442 30.52568758687982,39.78141444010055 30.52559522522062,39.78139652366104 30.52546476753162,39.78134590234594 30.52535225364643,39.78125761984605</coordinates>
</LineString>
</Placemark>

Related

Endless SVG drawing animation

i have created sample animation, but there is some kind of issue with the moving road. When animation is finished, it starts from the begining, which i understand, but i want it to look like it's endless drawing, loop this effect. Can't figure this out, can anyone help?
.loader {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
position: relative;
width: 300px;
}
#small-cloud {
transform: translate(0px, 0px);
animation: cloud 10s linear infinite;
}
#road {
transform: translate(39px, 0px);
animation: road 1s linear infinite;
}
#keyframes road {
0% {
-webkit-transform: translateX(39px);
}
100% {
-webkit-transform: translateX(0px);
}
}
#keyframes cloud {
0% {
-webkit-transform: translateX(0px);
}
50% {
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0px);
}
}
<div class="loader">
<svg width="245" height="176" viewBox="0 0 245 176" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="small-cloud">
<path d="M112.222 85.9652C111.448 85.9582 110.679 86.1049 109.962 86.3965C109.244 86.6882 108.591 87.1192 108.041 87.6646C107.49 88.21 107.054 88.8589 106.756 89.574C106.457 90.2891 106.304 91.056 106.304 91.8307C106.304 92.6054 106.457 93.3727 106.756 94.0878C107.054 94.8029 107.49 95.4518 108.041 95.9971C108.591 96.5425 109.244 96.9733 109.962 97.2649C110.679 97.5566 111.448 97.7032 112.222 97.6962C113.315 97.6962 115.73 97.7541 118.203 97.8115C121.136 97.869 124.185 97.9268 125.852 97.9268C131.488 97.9268 136.088 93.3839 136.088 87.7476C136.089 85.1929 135.134 82.7302 133.412 80.8436C131.689 78.9571 129.323 77.783 126.779 77.5524C124.234 77.3218 121.696 78.0513 119.662 79.5974C117.628 81.1435 116.246 83.3944 115.788 85.9077C115.767 86.0272 115.72 86.1404 115.65 86.2397C115.581 86.3391 115.49 86.4222 115.385 86.4829C115.279 86.5395 115.161 86.569 115.04 86.569C114.92 86.569 114.802 86.5395 114.696 86.4829C113.916 86.1413 113.074 85.9649 112.222 85.9652ZM125.851 99.537C124.183 99.537 121.136 99.4795 118.203 99.4224C115.673 99.3646 113.315 99.3071 112.222 99.3071C110.254 99.285 108.374 98.4875 106.99 97.0879C105.606 95.6883 104.83 93.7993 104.83 91.831C104.83 89.8627 105.606 87.9741 106.99 86.5745C108.374 85.1749 110.254 84.3774 112.222 84.3553C112.983 84.3572 113.739 84.4735 114.465 84.7002C115.034 82.5744 116.186 80.6501 117.792 79.1455C119.398 77.6408 121.393 76.6156 123.551 76.186C125.709 75.7563 127.945 75.9395 130.004 76.7144C132.064 77.4893 133.865 78.8252 135.205 80.571C136.545 82.3167 137.369 84.4026 137.585 86.5926C137.801 88.7826 137.399 90.9893 136.426 92.9629C135.452 94.9365 133.946 96.5983 132.077 97.7602C130.208 98.9221 128.052 99.5377 125.851 99.5374L125.851 99.537Z" fill="#7099B7"/>
</g>
<path d="M201.456 175.516H90.2948C90.1928 175.512 90.0925 175.488 89.9997 175.446C89.9069 175.403 89.8232 175.343 89.7538 175.268C89.6843 175.193 89.6305 175.106 89.5951 175.01C89.5597 174.914 89.5434 174.812 89.5475 174.71C89.5475 174.308 89.8923 173.905 90.2948 173.905H201.456C201.664 173.92 201.861 174.009 202.009 174.157C202.157 174.305 202.246 174.502 202.261 174.71C202.256 174.923 202.17 175.125 202.02 175.275C201.87 175.425 201.668 175.511 201.456 175.516Z" fill="#7099B7"/>
<path d="M109.215 140.494C104.868 140.494 100.7 142.221 97.6261 145.294C94.5525 148.368 92.8255 152.537 92.8255 156.883C92.8255 161.23 94.5525 165.399 97.6261 168.472C100.7 171.546 104.868 173.273 109.215 173.273C118.243 173.273 125.547 165.912 125.547 156.883C125.547 147.855 118.243 140.494 109.215 140.494ZM109.215 174.825C105.667 174.825 102.198 173.773 99.2471 171.801C96.2966 169.83 93.9969 167.028 92.6389 163.749C91.2809 160.471 90.9254 156.863 91.6176 153.383C92.3099 149.903 94.0188 146.706 96.528 144.196C99.0373 141.687 102.234 139.978 105.715 139.286C109.195 138.594 112.803 138.949 116.081 140.307C119.36 141.665 122.162 143.965 124.133 146.915C126.105 149.866 127.157 153.335 127.157 156.883C127.151 161.64 125.259 166.2 121.895 169.563C118.532 172.927 113.972 174.819 109.215 174.825Z" fill="#7099B7"/>
<path d="M164.709 140.494C161.467 140.494 158.299 141.455 155.603 143.256C152.908 145.057 150.808 147.617 149.567 150.612C148.327 153.606 148.002 156.902 148.635 160.081C149.267 163.26 150.828 166.181 153.12 168.473C155.413 170.765 158.333 172.325 161.512 172.958C164.691 173.59 167.987 173.266 170.981 172.025C173.976 170.785 176.536 168.684 178.337 165.989C180.137 163.293 181.099 160.125 181.099 156.883C181.091 152.539 179.362 148.375 176.29 145.303C173.217 142.231 169.053 140.501 164.709 140.494ZM164.709 174.825C161.16 174.825 157.691 173.773 154.741 171.801C151.79 169.83 149.491 167.028 148.133 163.749C146.775 160.471 146.42 156.863 147.112 153.383C147.804 149.902 149.513 146.705 152.022 144.196C154.532 141.687 157.728 139.978 161.209 139.286C164.689 138.594 168.297 138.949 171.575 140.307C174.854 141.665 177.656 143.965 179.627 146.915C181.599 149.866 182.651 153.335 182.651 156.883C182.645 161.64 180.753 166.2 177.389 169.564C174.026 172.927 169.466 174.819 164.709 174.825Z" fill="#7099B7"/>
<path d="M165.112 157.516C164.958 157.51 164.809 157.464 164.678 157.384C164.547 157.303 164.439 157.19 164.364 157.056L147.515 120.654C147.473 120.56 147.451 120.458 147.448 120.355C147.446 120.252 147.464 120.149 147.502 120.053C147.539 119.957 147.595 119.869 147.666 119.795C147.737 119.72 147.823 119.661 147.917 119.619C148.012 119.578 148.113 119.555 148.216 119.553C148.319 119.55 148.422 119.569 148.518 119.606C148.614 119.643 148.702 119.699 148.776 119.77C148.851 119.842 148.911 119.927 148.952 120.021L165.802 156.366C165.975 156.769 165.802 157.286 165.457 157.458C165.348 157.505 165.23 157.525 165.112 157.516Z" fill="#7099B7"/>
<path d="M126.409 121.171H110.537C110.325 121.167 110.123 121.081 109.973 120.931C109.823 120.78 109.737 120.578 109.732 120.366C109.73 120.26 109.749 120.154 109.788 120.055C109.828 119.956 109.887 119.866 109.962 119.791C110.037 119.716 110.127 119.657 110.226 119.617C110.325 119.578 110.431 119.559 110.537 119.561H126.409C126.621 119.566 126.824 119.652 126.974 119.802C127.124 119.952 127.21 120.154 127.214 120.366C127.2 120.575 127.111 120.772 126.963 120.92C126.815 121.068 126.618 121.157 126.409 121.171Z" fill="#7099B7"/>
<path d="M148.032 121.114H140.441V119.561H148.032V121.114Z" fill="#7099B7"/>
<path d="M137.393 156.653C137.255 156.645 137.12 156.605 137 156.535C136.88 156.465 136.778 156.367 136.703 156.251L116.173 121.114C116.09 120.926 116.073 120.716 116.125 120.517C116.177 120.318 116.295 120.143 116.461 120.021C116.648 119.934 116.86 119.915 117.059 119.968C117.259 120.02 117.433 120.141 117.553 120.309L138.083 155.445C138.313 155.79 138.141 156.308 137.795 156.538C137.67 156.603 137.534 156.642 137.393 156.653Z" fill="#7099B7"/>
<path d="M110.192 155.215H137.565L151.08 130.2H123.189L110.192 155.215ZM138.026 156.768H108.869C108.728 156.773 108.588 156.737 108.466 156.666C108.344 156.595 108.245 156.49 108.179 156.365C108.123 156.249 108.093 156.121 108.093 155.992C108.093 155.862 108.123 155.734 108.179 155.618L121.981 129.049C122.154 128.762 122.384 128.589 122.671 128.589H152.402C152.533 128.598 152.66 128.639 152.77 128.709C152.881 128.78 152.972 128.877 153.035 128.992C153.114 129.109 153.161 129.245 153.171 129.387C153.181 129.528 153.154 129.669 153.092 129.797L138.716 156.365C138.646 156.487 138.546 156.589 138.425 156.659C138.303 156.73 138.166 156.768 138.026 156.768Z" fill="#7099B7"/>
<g id="road">
<path id="third" d="M83.9697 175.516H77.5287C77.4267 175.512 77.3264 175.488 77.2336 175.446C77.1407 175.403 77.0571 175.343 76.9876 175.268C76.9182 175.193 76.8644 175.106 76.829 175.01C76.7936 174.914 76.7773 174.812 76.7814 174.71C76.7814 174.308 77.1265 173.905 77.5287 173.905H83.9697C84.1786 173.92 84.3753 174.009 84.5234 174.157C84.6714 174.305 84.7607 174.502 84.7748 174.71C84.7704 174.923 84.6842 175.125 84.5341 175.275C84.3841 175.425 84.1818 175.511 83.9697 175.516Z" fill="#7099B7"/>
<path id="second" d="M70.9725 175.516H64.9914C64.885 175.518 64.7791 175.499 64.6803 175.459C64.5815 175.42 64.4918 175.36 64.4165 175.285C64.3412 175.21 64.2821 175.12 64.2425 175.021C64.2029 174.923 64.1838 174.817 64.1862 174.71C64.1906 174.498 64.2769 174.296 64.427 174.146C64.577 173.996 64.7792 173.91 64.9914 173.905H70.9725C71.1846 173.91 71.3869 173.996 71.5369 174.146C71.687 174.296 71.7732 174.498 71.7776 174.71C71.7801 174.817 71.7609 174.923 71.7214 175.021C71.6818 175.12 71.6226 175.21 71.5474 175.285C71.4721 175.36 71.3821 175.42 71.2833 175.459C71.1845 175.499 71.0789 175.518 70.9725 175.516Z" fill="#7099B7"/>
<path id="first" d="M57.7865 175.516H51.8053C51.6989 175.518 51.593 175.499 51.4942 175.459C51.3954 175.42 51.3057 175.36 51.2305 175.285C51.1552 175.21 51.0961 175.12 51.0565 175.021C51.0169 174.923 50.9977 174.817 51.0002 174.71C51.0046 174.498 51.0909 174.296 51.2409 174.146C51.391 173.996 51.5932 173.91 51.8053 173.905H57.7865C57.9986 173.91 58.2008 173.996 58.3509 174.146C58.5009 174.296 58.5872 174.498 58.5916 174.71C58.5941 174.817 58.5749 174.923 58.5353 175.021C58.4957 175.12 58.4366 175.21 58.3613 175.285C58.2861 175.36 58.1961 175.42 58.0973 175.459C57.9985 175.499 57.8929 175.518 57.7865 175.516Z" fill="#7099B7"/>
</g>
<rect x="167" y="52" width="6" height="34" fill="white"/>
<rect x="174.5" y="52" width="5" height="34" fill="white"/>
<rect x="208" y="52" width="5" height="34" fill="white"/>
</svg>
</div>

I was working on my own answer when Kaiido brought a solution, then I made a mixture from his answer and the SMIL animation approach I was carring on. I worked over opacity applied to #first in order so simulate the vanishing of the road. But it's really time comsuming seting the right values to avoid flashing, so I increased the road speed to minimize it when it appears once every 2 or 2.5 seconds. You can pulish it more. I also reedited your svg to make it smaller joining the bike and road in a single path.
This is the code:
.loader {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
position: relative;
width: 300px;
}
#small-cloud {
transform: translate(0px, 0px);
animation: cloud 5s linear infinite;
}
#road {
transform: translate(10px, 0px);
animation: road 0.2s linear infinite;
}
#keyframes road {
0% {
transform: translateX(13px);
}
100% {
transform: translateX(0px);
}
}
#keyframes cloud {
0% {
-webkit-transform: translateX(0px);
}
50% {
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0px);
}
}
<html>
<head>
</head>
<body>
<div class="loader">
<svg width="245" height="176" viewBox="0 0 245 176" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="small-cloud">
<path d="M112.222 85.9652C111.448 85.9582 110.679 86.1049 109.962 86.3965C109.244 86.6882 108.591 87.1192 108.041 87.6646C107.49 88.21 107.054 88.8589 106.756 89.574C106.457 90.2891 106.304 91.056 106.304 91.8307C106.304 92.6054 106.457 93.3727 106.756 94.0878C107.054 94.8029 107.49 95.4518 108.041 95.9971C108.591 96.5425 109.244 96.9733 109.962 97.2649C110.679 97.5566 111.448 97.7032 112.222 97.6962C113.315 97.6962 115.73 97.7541 118.203 97.8115C121.136 97.869 124.185 97.9268 125.852 97.9268C131.488 97.9268 136.088 93.3839 136.088 87.7476C136.089 85.1929 135.134 82.7302 133.412 80.8436C131.689 78.9571 129.323 77.783 126.779 77.5524C124.234 77.3218 121.696 78.0513 119.662 79.5974C117.628 81.1435 116.246 83.3944 115.788 85.9077C115.767 86.0272 115.72 86.1404 115.65 86.2397C115.581 86.3391 115.49 86.4222 115.385 86.4829C115.279 86.5395 115.161 86.569 115.04 86.569C114.92 86.569 114.802 86.5395 114.696 86.4829C113.916 86.1413 113.074 85.9649 112.222 85.9652ZM125.851 99.537C124.183 99.537 121.136 99.4795 118.203 99.4224C115.673 99.3646 113.315 99.3071 112.222 99.3071C110.254 99.285 108.374 98.4875 106.99 97.0879C105.606 95.6883 104.83 93.7993 104.83 91.831C104.83 89.8627 105.606 87.9741 106.99 86.5745C108.374 85.1749 110.254 84.3774 112.222 84.3553C112.983 84.3572 113.739 84.4735 114.465 84.7002C115.034 82.5744 116.186 80.6501 117.792 79.1455C119.398 77.6408 121.393 76.6156 123.551 76.186C125.709 75.7563 127.945 75.9395 130.004 76.7144C132.064 77.4893 133.865 78.8252 135.205 80.571C136.545 82.3167 137.369 84.4026 137.585 86.5926C137.801 88.7826 137.399 90.9893 136.426 92.9629C135.452 94.9365 133.946 96.5983 132.077 97.7602C130.208 98.9221 128.052 99.5377 125.851 99.5374L125.851 99.537Z" fill="#7099B7"/>
</g>
<g id="bike">
<path d="m 110.192,155.215 27.373,0 13.515,-25.015 -27.891,0 -12.997,25.015 z m 27.834,1.553 -29.157,0 c -0.141,0.005 -0.281,-0.031 -0.403,-0.102 -0.122,-0.071 -0.221,-0.176 -0.287,-0.301 -0.056,-0.116 -0.086,-0.244 -0.086,-0.373 0,-0.13 0.03,-0.258 0.086,-0.374 l 13.802,-26.569 c 0.173,-0.287 0.403,-0.46 0.69,-0.46 l 29.731,0 c 0.131,0.009 0.258,0.05 0.368,0.12 0.111,0.071 0.202,0.168 0.265,0.283 0.079,0.117 0.126,0.253 0.136,0.395 0.01,0.141 -0.017,0.282 -0.079,0.41 l -14.376,26.568 c -0.07,0.122 -0.17,0.224 -0.291,0.294 -0.122,0.071 -0.259,0.109 -0.399,0.109 z m -0.633,-0.115 c -0.138,-0.008 -0.273,-0.048 -0.393,-0.118 -0.12,-0.07 -0.222,-0.168 -0.297,-0.284 l -20.53,-35.137 c -0.083,-0.188 -0.1,-0.398 -0.048,-0.597 0.052,-0.199 0.17,-0.374 0.336,-0.496 0.187,-0.087 0.399,-0.106 0.598,-0.053 0.2,0.052 0.374,0.173 0.494,0.341 l 20.53,35.136 c 0.23,0.345 0.058,0.863 -0.288,1.093 -0.125,0.065 -0.261,0.104 -0.402,0.115 z m 10.639,-35.539 -7.591,0 0,-1.553 7.591,0 0,1.553 z m -21.623,0.057 -15.872,0 c -0.212,-0.004 -0.414,-0.09 -0.564,-0.24 -0.15,-0.151 -0.236,-0.353 -0.241,-0.565 -0.002,-0.106 0.017,-0.212 0.056,-0.311 0.04,-0.099 0.099,-0.189 0.174,-0.264 0.075,-0.075 0.165,-0.134 0.264,-0.174 0.099,-0.039 0.205,-0.058 0.311,-0.056 l 15.872,0 c 0.212,0.005 0.415,0.091 0.565,0.241 0.15,0.15 0.236,0.352 0.24,0.564 -0.014,0.209 -0.103,0.406 -0.251,0.554 -0.148,0.148 -0.345,0.237 -0.554,0.251 z m 38.703,36.345 c -0.154,-0.006 -0.303,-0.052 -0.434,-0.132 -0.131,-0.081 -0.239,-0.194 -0.314,-0.328 l -16.849,-36.402 c -0.042,-0.094 -0.064,-0.196 -0.067,-0.299 -0.002,-0.103 0.016,-0.206 0.054,-0.302 0.037,-0.096 0.093,-0.184 0.164,-0.258 0.071,-0.075 0.157,-0.134 0.251,-0.176 0.095,-0.041 0.196,-0.064 0.299,-0.066 0.103,-0.003 0.206,0.016 0.302,0.053 0.096,0.037 0.184,0.093 0.258,0.164 0.075,0.072 0.135,0.157 0.176,0.251 l 16.85,36.345 c 0.173,0.403 0,0.92 -0.345,1.092 -0.109,0.047 -0.227,0.067 -0.345,0.058 z m -0.403,-17.022 c -3.242,0 -6.41,0.961 -9.106,2.762 -2.695,1.801 -4.795,4.361 -6.036,7.356 -1.24,2.994 -1.565,6.29 -0.932,9.469 0.632,3.179 2.193,6.1 4.485,8.392 2.293,2.292 5.213,3.852 8.392,4.485 3.179,0.632 6.475,0.308 9.469,-0.933 2.995,-1.24 5.555,-3.341 7.356,-6.036 1.8,-2.696 2.762,-5.864 2.762,-9.106 -0.008,-4.344 -1.737,-8.508 -4.809,-11.58 -3.073,-3.072 -7.237,-4.802 -11.581,-4.809 z m 0,34.331 c -3.549,0 -7.018,-1.052 -9.968,-3.024 -2.951,-1.971 -5.25,-4.773 -6.608,-8.052 -1.358,-3.278 -1.713,-6.886 -1.021,-10.366 0.692,-3.481 2.401,-6.678 4.91,-9.187 2.51,-2.509 5.706,-4.218 9.187,-4.91 3.48,-0.692 7.088,-0.337 10.366,1.021 3.279,1.358 6.081,3.658 8.052,6.608 1.972,2.951 3.024,6.42 3.024,9.968 -0.006,4.757 -1.898,9.317 -5.262,12.681 -3.363,3.363 -7.923,5.255 -12.68,5.261 z m -55.494,-34.331 c -4.347,0 -8.515,1.727 -11.5889,4.8 -3.0736,3.074 -4.8006,7.243 -4.8006,11.589 0,4.347 1.727,8.516 4.8006,11.589 3.0739,3.074 7.2419,4.801 11.5889,4.801 9.028,0 16.332,-7.361 16.332,-16.39 0,-9.028 -7.304,-16.389 -16.332,-16.389 z m 0,34.331 c -3.548,0 -7.017,-1.052 -9.9679,-3.024 -2.9505,-1.971 -5.2502,-4.773 -6.6082,-8.052 -1.358,-3.278 -1.7135,-6.886 -1.0213,-10.366 0.6923,-3.48 2.4012,-6.677 4.9104,-9.187 2.5093,-2.509 5.706,-4.218 9.187,-4.91 3.48,-0.692 7.088,-0.337 10.366,1.021 3.279,1.358 6.081,3.658 8.052,6.608 1.972,2.951 3.024,6.42 3.024,9.968 -0.006,4.757 -1.898,9.317 -5.262,12.68 -3.363,3.364 -7.923,5.256 -12.68,5.262 z m 92.241,0.691 -111.1612,0 c -0.102,-0.004 -0.2023,-0.028 -0.2951,-0.07 -0.0928,-0.043 -0.1765,-0.103 -0.2459,-0.178 -0.0695,-0.075 -0.1233,-0.162 -0.1587,-0.258 -0.0354,-0.096 -0.0517,-0.198 -0.0476,-0.3 0,-0.402 0.3448,-0.805 0.7473,-0.805 l 111.1612,0 c 0.208,0.015 0.405,0.104 0.553,0.252 0.148,0.148 0.237,0.345 0.252,0.553 -0.005,0.213 -0.091,0.415 -0.241,0.565 -0.15,0.15 -0.352,0.236 -0.564,0.241 z" fill="#7099B7"/>
</g>
<g id="road">
<path id="third" d="M83.9697 175.516H77.5287C77.4267 175.512 77.3264 175.488 77.2336 175.446C77.1407 175.403 77.0571 175.343 76.9876 175.268C76.9182 175.193 76.8644 175.106 76.829 175.01C76.7936 174.914 76.7773 174.812 76.7814 174.71C76.7814 174.308 77.1265 173.905 77.5287 173.905H83.9697C84.1786 173.92 84.3753 174.009 84.5234 174.157C84.6714 174.305 84.7607 174.502 84.7748 174.71C84.7704 174.923 84.6842 175.125 84.5341 175.275C84.3841 175.425 84.1818 175.511 83.9697 175.516Z" fill="#7099B7"/>
<path id="second" d="M70.9725 175.516H64.9914C64.885 175.518 64.7791 175.499 64.6803 175.459C64.5815 175.42 64.4918 175.36 64.4165 175.285C64.3412 175.21 64.2821 175.12 64.2425 175.021C64.2029 174.923 64.1838 174.817 64.1862 174.71C64.1906 174.498 64.2769 174.296 64.427 174.146C64.577 173.996 64.7792 173.91 64.9914 173.905H70.9725C71.1846 173.91 71.3869 173.996 71.5369 174.146C71.687 174.296 71.7732 174.498 71.7776 174.71C71.7801 174.817 71.7609 174.923 71.7214 175.021C71.6818 175.12 71.6226 175.21 71.5474 175.285C71.4721 175.36 71.3821 175.42 71.2833 175.459C71.1845 175.499 71.0789 175.518 70.9725 175.516Z" fill="#7099B7"/>
<g>
<path id="first" d="M57.7865 175.516H51.8053C51.6989 175.518 51.593 175.499 51.4942 175.459C51.3954 175.42 51.3057 175.36 51.2305 175.285C51.1552 175.21 51.0961 175.12 51.0565 175.021C51.0169 174.923 50.9977 174.817 51.0002 174.71C51.0046 174.498 51.0909 174.296 51.2409 174.146C51.391 173.996 51.5932 173.91 51.8053 173.905H57.7865C57.9986 173.91 58.2008 173.996 58.3509 174.146C58.5009 174.296 58.5872 174.498 58.5916 174.71C58.5941 174.817 58.5749 174.923 58.5353 175.021C58.4957 175.12 58.4366 175.21 58.3613 175.285C58.2861 175.36 58.1961 175.42 58.0973 175.459C57.9985 175.499 57.8929 175.518 57.7865 175.516Z" fill="#7099B7"/>
<animate attributeName="opacity" begin="0.2s" dur="0.3s" from="1" to="0" values="1;0" calcMode="linear" repeatCount="indefinite" />
</g>
</g>
</svg>
</div>
</html>
I'm thinking that if you apply a similar animation and approach to the cloud it will simply appear in the front and disappear in the back resembling a real traveling.

Animated-selector causes crash on view initialization

My goal is to create a custom switch including animated transitions between checked and unchecked state.
I easily achieved a default state and my switch looks as expected in both states and it changes its look when its state is changed.
Problem arises when I attach animated-selector instead of regular one.
I'm gettting an error like this:
android.view.InflateException: Binary XML file line #10: Binary XML
file line #10: Error inflating class android.widget.Switch
Caused by: android.content.res.Resources$NotFoundException: File
res/drawable/switch_track_animation_unchecked_checked.xml from
drawable resource ID #0x7f060072
at android.content.res.Resources.loadDrawableForCookie(Resources.java:2640)
Caused by: android.content.res.Resources$NotFoundException: File
res/drawable/switch_track_animated_selector.xml from drawable resource
ID #0x7f060070
I can assure that I'm properly accessing those drawables etc.
I went through invalidate caches and restart, clean build, rebuild etc. and it won't work.
View sample
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="#drawable/switch_thumb_selector"
android:track="#drawable/switch_track_animated_selector"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:checked="true"
android:id="#+id/switch2"/>
switch_track_animated_selector
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/checked"
android:drawable="#drawable/switch_bckg_on"
android:state_checked="true"/>
<item android:id="#+id/unchecked"
android:drawable="#drawable/switch_bckg_off"
android:state_checked="false"/>
<transition
android:fromId="#+id/unchecked"
android:toId="#+id/checked"
android:drawable="#drawable/switch_track_animation_unchecked_checked"/>
<transition
android:fromId="#+id/checked"
android:toId="#+id/unchecked"
android:drawable="#drawable/switch_track_animation_checked_unchecked"/>
</animated-selector>
switch_bckg_on.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00B05A"/>
<stroke android:width="1dp" android:color="#00B05A" />
<corners android:radius="180dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
switch_bckg_off.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#F1F1F1"/>
<stroke android:width="1dp" android:color="#E0E0E0" />
<corners android:radius="180dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
switch_track_animation_checked_unchecked.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="#drawable/switch_bckg_on">
<target android:name="android:drawable">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:interpolator="#android:interpolator/accelerate_decelerate"
android:propertyName="strokeColor"
android:valueFrom="#A0A0A0"
android:valueTo="#1E9618"
android:valueType="intType" />
</aapt:attr>
</target>
</animated-vector>
switch_track_animation_unchecked_checked.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="#drawable/switch_bckg_off">
<target android:name="android:drawable">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:interpolator="#android:interpolator/accelerate_decelerate"
android:propertyName="strokeColor"
android:valueFrom="#A0A0A0"
android:valueTo="#1E9618"
android:valueType="intType"/>
</aapt:attr>
</target>
</animated-vector>
I also checked above approach using vector drawable instead of shape and I had the same result.
Example of vectors
ic_thumb_vector_off
<vector android:height="33dp" android:viewportHeight="300"
android:viewportWidth="300" android:width="33dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:name="background_off" android:fillColor="#FFFFFF" android:fillType="nonZero"
android:pathData="M149.926,149.926m-149.176,0a149.176,149.176 0,1 1,298.352 0a149.176,149.176 0,1 1,-298.352 0"
android:strokeAlpha="0.1" android:strokeColor="#000000" android:strokeWidth="0.5"/>
<path android:name="icon_off" android:fillColor="#9B9B9B" android:fillType="evenOdd"
android:pathData="M166.88,146.104C166.13,145.354 166.13,144.228 166.88,143.478L195.019,115.339C195.77,114.588 196.145,113.463 196.145,112.712C196.145,111.962 195.77,110.836 195.019,110.086L189.767,104.833C189.016,104.083 187.891,103.708 187.14,103.708C186.015,103.708 185.264,104.083 184.514,104.833L156.375,132.972C155.624,133.723 154.499,133.723 153.748,132.972L125.609,104.833C124.859,104.083 123.733,103.708 122.983,103.708C122.233,103.708 121.107,104.083 120.357,104.833L115.104,110.086C114.354,110.836 113.979,111.962 113.979,112.712C113.979,113.463 114.354,114.588 115.104,115.339L143.243,143.478C143.994,144.228 143.994,145.354 143.243,146.104L115.104,174.243C114.354,174.993 113.979,176.119 113.979,176.869C113.979,177.62 114.354,178.745 115.104,179.496L120.357,184.748C121.107,185.499 122.233,185.874 122.983,185.874C123.733,185.874 124.859,185.499 125.609,184.748L153.748,156.609C154.499,155.859 155.624,155.859 156.375,156.609L184.514,184.748C185.264,185.499 186.39,185.874 187.14,185.874C187.891,185.874 189.016,185.499 189.767,184.748L195.019,179.496C195.77,178.745 196.145,177.62 196.145,176.869C196.145,176.119 195.77,174.993 195.019,174.243L166.88,146.104Z"
android:strokeColor="#00000000" android:strokeWidth="1"/>
</vector>
ic_thumb_vector_on
<vector android:height="33dp" android:viewportHeight="302"
android:viewportWidth="302" android:width="33dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:name="background_on" android:fillColor="#FFFFFF" android:fillType="nonZero"
android:pathData="M151,151m-150.25,0a150.25,150.25 0,1 1,300.5 0a150.25,150.25 0,1 1,-300.5 0"
android:strokeAlpha="0.1" android:strokeColor="#000000" android:strokeWidth="0.5"/>
<path android:name="icon_on" android:fillColor="#00B05A" android:fillType="evenOdd"
android:pathData="M105.523,153.198C104.806,152.5 104.448,151.453 104.448,150.754C104.448,150.056 104.806,149.009 105.523,148.31L110.536,143.422C111.968,142.026 114.117,142.026 115.549,143.422L115.907,143.772L135.602,164.371C136.318,165.069 137.393,165.069 138.109,164.371L186.093,115.841L186.451,115.841C187.883,114.444 190.032,114.444 191.464,115.841L196.477,120.728C197.91,122.125 197.91,124.22 196.477,125.616L139.183,183.573C138.467,184.272 137.751,184.621 136.676,184.621C135.602,184.621 134.886,184.272 134.17,183.573L106.239,154.246L105.523,153.198Z"
android:strokeColor="#00000000" android:strokeWidth="1"/>
</vector>
Maybe I/m missing something in gradle file?
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
android {
compileSdkVersion 28
defaultConfig {
applicationId "...customswitch"
minSdkVersion 22
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'androidx.appcompat:appcompat:1.0.2'
implementation 'androidx.core:core-ktx:1.0.2'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:runner:1.2.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}
I expect this view to load and not to throw an error on view init.

Your issue is that switch_track_animation_unchecked_checked.xml and switch_track_animation_checked_unchecked.xml are animated VectorDrawables, and these animate static VectorDrawable states. You are trying to animate ShapeDrawable, and not VectorDrawable and that's what is causing the exception, I think.
You need to replace switch_bckg_on.xml and switch_bckg_off.xml with <vector>...</vector> implementations to animate them from within an <animated-vector>...</animated-vector> block.
Alternatively you could replace the AnimatedVectorDrawables with StateListAnimator, although I'm not sure that will actually be able to do what you're trying to achieve here.

It seems like your switch_track_animated_selector does not have some default state without any id. You may try to add this state. This helped me in a similar situation

libxmljs: how to use xinclude?

I try to use libxmljs with nodejs.
In my sample I want to use the xi:include.
<ord:order xmlns:ord="http://example.org/ord"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://example.org/ord chapter04ord1.xsd"
xmlns:xi="http://www.w3.org/2001/XInclude">
<number>123ABBCC123</number>
<customer>
<name>Priscilla Walmsley</name>
<number>15466</number>
</customer>
<items>
<xi:include href="/Users/mar/ws_e/libxml/test/resources/chapter5prod.xml" />
</items>
</ord:order>
include File:
<ord:product xmlns:ord="http://example.org/ord"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://example.org/ord chapter04ord1.xsd">
<number>557</number>
<name>Short-Sleeved Linen Blouse</name>
<size system="US-DRESS">10</size>
<color value="blue"/>
</ord:product>
This is my code:
var xsdDoc = libxml.parseXml(schemaSource);
var xmlDocValid = libxml.parseXml(docSource);
var xmlDocInvalid = libxml.parseXml(xml_invalid);
xmlDocValid.validate(xsdDoc);
console.dir(xmlDocValid);
console.dir(xmlDocValid.validationErrors);
Then I get the error:
Document {
errors: [],
validationErrors:
[ { Error: Element '{http://www.w3.org/2001/XInclude}include': This element is not expected. Expected is ( product ).
So my question is how to use the x:include right at libxmljs?
Kind regards
Markus

Failed to decode downloaded font in jsf

For some reason my locally stored font is not being decoded correctly in my jsf application. I've tried everything, and at this point I'm at a loss.
This is the css reference (located in project/resources/text - same as font files)
#font-face {
font-family: 'BunkenTechSansStd-Med';
src: url("#{resource['text/30B733_0_0.eot']}");
src: url("#{resource['text/30B733_0_0.woff2']}") format('woff2'),
url("#{resource['text/30B733_0_0.woff']}") format('woff'),
url("#{resource['text/30B733_0_0.ttf']}") format('truetype');
}
The sheet is referenced in the template as:
<h:outputStylesheet library="text" name="MyFontsWebfontsKit.css"></h:outputStylesheet>
<h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>
The error I'm receiving in chrome is stated as follows (for all three files):
"failed to decode downloaded font: http://localhost:1717/javax.faces.resource/text/30B733_0_0.woff2.jsf"
Here's is the folder structure:
Furthermore the mapping is as follows:
<mime-mapping>
<extension>eot</extension>
<mime-type>application/vnd.ms-fontobject</mime-type>
</mime-mapping>
<mime-mapping>
<extension>otf</extension>
<mime-type>font/opentype</mime-type>
</mime-mapping>
<mime-mapping>
<extension>svg</extension>
<mime-type>image/svg+xml</mime-type>
</mime-mapping>
<mime-mapping>
<extension>ttf</extension>
<mime-type>application/x-font-ttf</mime-type>
</mime-mapping>
<mime-mapping>
<extension>woff</extension>
<mime-type>application/x-font-woff</mime-type>
</mime-mapping>
<mime-mapping>
<extension>woff2</extension>
<mime-type>application/x-font-woff2</mime-type>
</mime-mapping>
And lastly a pic of the error in dev tools:

JSF apparently requires folder nav as ":" instead of backslashes.
#font-face {font-family: 'BunkenTechSansStd-Med'; src: url("#{resource['text:30B733_0_0.eot']}");
src: url("#{resource['text:30B733_0_0.woff2']}") format('woff2'),
url("#{resource['text:30B733_0_0.woff']}") format('woff'),
url("#{resource['text:30B733_0_0.ttf']}") format('truetype');}

OCMod not finding blocks of code

What is up with OCMod? It will not find a block of code [that I need to replace]
Here is what I have in my mod:
<?xml version="1.0" encoding="utf-8"?>
<modification>
<file path="catalog/controller/information/information.php">
<operation>
<search><![CDATA[$data['breadcrumbs'] = array();]]></search>
<add position="after"><![CDATA[$template = 'newproducts.tpl';]]></add>
</operation>
<operation>
<search>
<![CDATA[
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/information/information.tpl')) {
$this->response->setOutput($this->load->view($this->config->get('config_template') . '/template/information/information.tpl', $data));
} else {
$this->response->setOutput($this->load->view('default/template/information/information.tpl', $data));
}
]]>
</search>
<add position="after"><![CDATA[echo 'booooooger';]]></add>
</operation>
</file>
</modification>
the First operation works just fine, the second does not find the block of code in the search [and it is there exactly - I've synced and diffed the files it IS there] Here is the error:
FILE: catalog/controller/information/information.php
CODE: $data['breadcrumbs'] = array();
LINE: 8
CODE: if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/information/information.tpl')) {
$this->response->setOutput($this->load->view($this->config->get('config_template') . '/template/information/information.tpl', $data));
} else {
$this->response->setOutput($this->load->view('default/template/information/information.tpl', $data));
}
NOT FOUND!
I've tried the search with the trim attribute set to both true and false... no luck.
How do I get this to work?

I suggest to use single line search, if you want to search multiline then you need to use regex or more.
<operation>
<search>
<![CDATA[
$this->response->setOutput($this->load->view('default/template/information/information.tpl', $data));
]]>
</search>
<add position="after" offset="1">
<![CDATA[
echo 'booooooger';
]]>
</add>
</operation>

Resources