Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="controls">
  <button id="center">CENTER</button>
  <button id="reset">RESET</button>
</div>
<div class="stage">
  <svg id="mySvg" xmlns="http://www.w3.org/2000/svg" width="720" height="500" viewBox="0 0 720 500">
    <g>
        <path d="M 35.31261970632048 1.4055341055341033L 38.1969947046283 2.9201224124888157L 39.845842985842985 5.458102680994267L 39.756336336336325 8.943213705508809L 38.55799002886382 10.611881111881114L 35.97747747747748 12.269294483400289L 28.635135135135137 12.274040958251465L 27.3480657127716 12.731773010123527L 26.932014488715524 13.950450450450452L 27.686852954649588 25.6981981981982L 27.262436349392868 46.25675675675676L 27.787562730515738 69.28607178607177L 28.25715656484887 71.22072072072072L 29.142693028599084 103.52702702702703L 29.732167461579234 107.93243243243244L 30.143338632750407 131.42792792792793L 29.5983241305822 133.95821205821207L 26.89923035618399 136.8822393822394L 21.772292700864146 136.82230189373047L 19.107033957033963 133.60202410202413L 18.457307424520522 131.42792792792793L 18.97011717599953 105.44733194733197L 19.490581490581505 103.52702702702703L 19.490581490581505 91.77927927927928L 18.97011717599953 89.85897435897435L 18.06711205587612 66.81531531531532L 17.476843040223322 63.878378378378386L 17.090629282649218 21.292792792792795L 16.175572519083968 14.658922079974712L 13.950450450450452 13.87274531550989L 6.608108108108109 14.489223011407294L 2.6999618666285388 13.453191286524637L 1.2065055004753413 12.009710715740876L 0.46501501501500947 9.545045045045045L 1.1673309253954502 7.041204799269304L 2.7107134161188164 5.647650353055754L 6.608108108108109 4.049149741457439L 13.950450450450452 2.5304117676999147L 33.04054054054054 1.1255327183470776L 35.31261970632048 1.4055341055341033" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
        <path d="M 60.94144144144145 18.65723574814485L 68.28378378378379 20.229265629265637L 75.17216409958345 23.23353252750237L 77.05097671929356 25.6981981981982L 77.02851351351353 28.635135135135137L 75.25530075530075 31.156222594275683L 72.6891891891892 32.827853041958846L 69.75225225225226 32.85787738958471L 60.94144144144145 30.185947629872885L 59.608595857003486 30.44460778770403L 59.05758051629611 31.572072072072075L 59.1015368309486 43.31981981981982L 58.14400900900901 58.00450450450451L 58.551921744229446 63.34783493170588L 59.472972972972975 63.77986087353176L 68.28378378378379 63.97953953953955L 70.54942084942086 64.54967824967825L 72.26700450450451 65.78807680920356L 73.62061776061776 68.41259680733366L 73.6752966558792 69.75225225225226L 72.37149168399168 72.48004368004366L 70.98911663341195 73.7490403446925L 66.81531531531532 74.63443313443314L 60.94144144144145 74.13701653460689L 58.59003307104575 74.74412147997054L 59.1015368309486 78.56306306306307L 59.08167448886013 96.1846846846847L 58.51206239796846 99.12162162162163L 58.10027418723071 125.55405405405406L 58.72726632882883 127.76814023325652L 73.5129641836959 127.70355137746444L 76.6525163907363 128.95168698109876L 77.9900021973193 130.51864447228687L 78.37364145472256 132.8963963963964L 77.91491146318735 135.18518173345763L 76.55134614383171 136.75855335103893L 72.6891891891892 138.411690760528L 53.5990990990991 138.50203003003003L 49.93958243958244 136.55581981981982L 47.98027501185396 132.8963963963964L 47.43648142524549 103.52702702702703L 46.77145251563857 99.12162162162163L 47.43648142524549 90.31081081081082L 47.397709663015775 28.635135135135137L 48.28799158439877 23.280193727562153L 50.042808114236706 20.67583208208209L 52.37357578166401 18.784997326093233L 60.94144144144145 18.65723574814485" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
        <path d="M 103.3778856981982 15.943957924404858L 107.1981981981982 17.62162162162162L 110.12366272522523 20.589151651651665L 110.27075801916565 25.1118305805806L 108.96789096789098 26.714830214830197L 104.9954954954955 27.4801599352161L 100.5900900900901 27.0985797827903L 98.11060799018915 29.067284427284417L 96.64641961549178 31.80758116607173L 95.08555828555829 37.44594594594595L 94.58024691358027 41.851351351351354L 94.96096096096096 49.193693693693696L 97.76078958539694 58.00450450450451L 111.88161462433305 84.52037264537266L 114.64822822822822 93.74787831309573L 115.37864205669084 100.5900900900901L 114.8901758901759 115.27477477477478L 112.0827880512091 124.08558558558559L 107.034021599239 131.98826458036984L 103.05793293293293 135.3463800588153L 100.23164503085763 136.81484852728377L 93.24774774774775 138.42425183804494L 90.54535785785788 138.23929862065458L 87.76894407097456 136.87266033156445L 84.95049968000787 133.94860608640138L 84.68302643302644 129.95945945945948L 86.41341611882153 127.53053323593865L 88.84234234234235 127.34130769424887L 91.77927927927928 128.2614242149126L 96.1846846846847 128.29818147059527L 100.1926605504587 125.18330211399518L 103.3531294452347 118.21171171171171L 105.09890876792285 109.40090090090091L 105.1917759343502 100.5900900900901L 103.42479188048812 91.77927927927928L 100.47292505271228 84.43693693693695L 90.59320859320859 66.81531531531532L 86.41896814847632 56.32625482625484L 84.74405430361108 49.193693693693696L 84.74117764173015 34.50900900900901L 86.3898486114981 28.864583333333336L 89.30759967888682 23.183234959097014L 92.58369766825652 19.159257083170147L 95.07415540540542 17.334920634920636L 99.12162162162163 15.768050471220521L 103.3778856981982 15.943957924404858" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
        <path d="M 156.3918918918919 19.729922779922777L 158.4372586872587 20.72052199258084L 159.36856385797563 22.761261261261264L 158.89771881973718 26.825772200772196L 155.69053381739948 29.40224552911119L 153.45495495495496 29.8459435688987L 147.5810810810811 28.73525798525798L 145.48606606606606 29.66850183516849L 145.20380520380522 31.572072072072075L 145.75403310287032 34.50900900900901L 146.20838229533882 55.06756756756757L 150.03170703170704 99.12162162162163L 151.02557591148198 129.95945945945948L 149.64611486486487 133.48486354001062L 147.03981866481865 135.2772269310731L 144.64414414414415 135.66821845769218L 141.08753434285353 133.50732411801113L 140.25672665984473 131.42792792792793L 140.25840572715575 112.33783783783784L 139.38453159041396 106.06347256347256L 138.44275470806082 87.37387387387388L 137.93681519357193 85.40802092414995L 136.93579379984214 60.94144144144145L 136.447594653477 59.072481572481564L 135.36159734864398 29.00749678249679L 123.35135135135135 26.432432432432435L 120.31951339094195 23.59960333467798L 120.4313582813583 20.637226512226494L 121.81994851994853 19.027155727155726L 126.22153972153976 17.604807097173502L 156.3918918918919 19.729922779922777" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
        <path d="M 197.50900900900902 18.42317370675582L 199.6404268346016 19.14447781114448L 201.37737451737456 21.606185453746438L 201.28366285748837 23.6344046749452L 198.6837837837838 26.741408829644126L 187.67761261261265 27.621533728850807L 187.35179844857265 103.52702702702703L 187.95818259204088 123.35708755630631L 196.04054054054055 123.66146270494097L 200.08304856580716 124.52068735402071L 201.53234682646445 125.88292980480483L 202.31428967428974 128.490990990991L 201.34135354867067 132.32333553065263L 198.9774774774775 134.10458077124744L 172.54504504504504 134.29411424272237L 170.42000173250173 133.571677516933L 168.93282698757153 132.03189479802384L 168.44388034443287 129.95945945945948L 168.8516243516244 127.73207661442957L 171.59779223668113 124.6226254826255L 176.5931668275418 123.82839619280298L 176.97011743886745 122.61711711711713L 176.62293488824102 103.52702702702703L 176.11699537375213 101.56117407730311L 175.68522387724383 80.03153153153154L 176.09225459225462 64.27171814671814L 176.58333333333334 62.40990990990991L 176.66170665047073 34.50900900900901L 175.41904761904763 28.785630350847754L 174.01351351351352 28.243836651022292L 168.13963963963965 28.3800853485064L 164.18390878917197 26.716992111728942L 162.8760383760384 23.83638996138997L 162.93706563706564 21.948359073359093L 164.07894514232544 20.194661767030183L 166.67117117117118 18.534068048631156L 197.50900900900902 18.42317370675582" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
        <path d="M 220.896174863388 18.760950605778202L 223.1846153846154 20.581867581867577L 227.7203003003003 27.782994673505605L 236.59824109824106 49.60518760518759L 241.21393151076148 63.878378378378386L 255.36480784582054 113.36576576576576L 256.37962477040145 110.86936936936938L 257.42747241623647 99.12162162162163L 258.3304775363599 75.85047547547548L 258.89594088470494 72.6891891891892L 259.24518951022293 22.761261261261264L 260.03879389593675 20.705405405405397L 262.7612953862954 19.004007455731575L 265.8150423150423 19.06784056784059L 268.9111287758347 21.8456279809221L 269.5085669781932 24.22972972972973L 268.99330099330103 80.03153153153154L 266.205283935621 122.61711711711713L 264.4854976928148 132.53444994290066L 262.99526741931805 135.2385106625613L 255.16387816387817 136.70697913102978L 252.44867770996808 135.22699796570765L 250.75515277889167 131.42792792792793L 248.7294951201201 119.68018018018019L 235.4347925390179 80.03153153153154L 222.07554343334164 44.86105023942861L 221.221672376602 44.86105023942861L 220.6656271656272 46.25675675675676L 220.8735329924519 125.55405405405406L 222.13312741312743 128.490990990991L 221.9201377848437 132.3793300342596L 219.06953362201983 135.34889012724065L 213.6621621621622 135.56509309309308L 211.4765346742091 133.61096364221365L 209.89177014852694 129.46996996996995L 209.4507396285174 125.55405405405406L 209.47665431929394 50.66216216216217L 210.97509551436258 25.6981981981982L 212.7432959275065 21.84239502660557L 216.5990990990991 18.15404878562775L 220.896174863388 18.760950605778202" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
        <path d="M 309.1126126126126 18.479904562096333L 313.01000730460186 20.33233503774044L 313.83632765713696 22.761261261261264L 312.9929790125321 26.64162766118073L 310.5810810810811 28.356086544765773L 301.9207654859829 28.97777777777776L 297.826599795672 33.39716859716859L 294.515040464193 43.31981981981982L 291.6130597098339 62.40990990990991L 291.1355790573182 91.77927927927928L 291.68319890571195 102.05855855855856L 294.6699380945191 115.27477477477478L 296.3442792792793 119.36705087440382L 299.3511170129667 123.56655793724761L 304.7072072072072 126.75139020422041L 307.64414414414415 126.85474909799235L 310.20550504421476 125.18350593584239L 313.31634834834836 118.21171171171171L 314.69196314959026 109.40090090090091L 315.00447440759245 93.24774774774775L 314.6275275275275 92.1463963963964L 303.8959553959554 91.12206262206261L 302.18015831365346 89.88166934057344L 300.91207441207445 86.98053410553412L 302.1593805787354 83.28663663663664L 303.60822435338565 81.95844869259504L 307.64414414414415 81.17158183824849L 320.8603603603604 81.81291876835051L 324.80934989043095 83.44312494312496L 326.6780335891448 85.90540540540542L 326.4299935294411 91.77927927927928L 325.29664477561676 97.65315315315316L 325.7360595890008 121.14864864864866L 324.9289802623136 125.55405405405406L 322.9943936742498 129.1488648648649L 320.28022466911364 132.3162607051496L 314.9864864864865 135.54879269513415L 310.5810810810811 137.10781893004116L 298.83333333333337 137.08911430322013L 293.5902110163855 135.20258177640727L 289.4796341796342 131.96606233562756L 286.1667193509299 127.94138875717822L 283.2081688430003 122.1913846619729L 281.7549601624746 117.97061987360493L 280.1082134766346 109.40090090090091L 278.94607464607463 94.1134866209493L 278.90978816654496 64.41145254843886L 279.44871990634704 62.40990990990991L 280.11794094979933 47.72522522522523L 283.2081688430003 36.25281531531532L 286.14510577993724 29.134037884037888L 289.35796014993093 25.033635825606638L 295.03426329555367 20.43065969195001L 298.83333333333337 18.68657325881124L 309.1126126126126 18.479904562096333" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
    </g>
    <g>
        <path d="M 19.824324324324326 192.18393137164472L 26.907088907088923 193.59309309309307L 35.48021831355167 198.00626817293488L 39.87760340986148 202.41969388743587L 42.849909909909925 206.70162162162163L 47.20310310310311 216.82426426426423L 48.909153055494514 223.94144144144147L 50.284183591875895 234.22072072072075L 50.52417382579797 275.33783783783787L 48.738282586383846 290.02252252252254L 45.99118267203375 300.30180180180184L 41.31431145431145 308.5755727155728L 38.444504504504515 311.57963963963965L 33.04054054054054 314.69917743830786L 25.6981981981982 315.6337003670337L 20.162760416666668 314.5094205881008L 17.392666860408795 313.0127385449966L 13.031584215794759 308.56301037879985L 10.008010473527726 303.0289575289575L 5.548043484213687 290.02252252252254L 4.377802614644725 282.0092420006213L 2.7173984615845166 260.6531531531532L 3.287213819323906 251.84234234234236L 2.8129753129753188 250.02923331494762L 3.3935195699901515 225.4099099099099L 5.379311954441492 209.25675675675677L 7.002786570354134 203.3828828828829L 10.017316311286153 196.48025143787856L 12.895965114050231 193.55113685113687L 15.951830863121202 192.28328673501088L 19.824324324324326 192.18393137164472M 21.292792792792795 203.52596442596445L 18.6742406122937 205.1839531839532L 17.00331910858225 207.7882882882883L 15.62373162636319 212.19369369369372L 15.027620434806076 218.06756756756758L 15.060339409176617 235.6891891891892L 14.054317732366503 245.96846846846847L 14.47063673843337 269.463963963964L 17.168185182349504 290.02252252252254L 18.780559971736434 295.71124167645905L 21.650076415701434 301.58079046788725L 24.664119616999187 305.7351351351351L 27.166666666666668 306.43333571038056L 28.635135135135137 306.04492163396276L 31.12053764994941 304.2497523701712L 34.41722972972973 298.83333333333337L 37.158092751842766 290.02252252252254L 38.940873305738165 278.2747747747748L 39.45020696372049 269.463963963964L 38.88249118683902 244.50000000000003L 38.06020726608962 239.87024524524526L 36.931567160380716 215.26618156618161L 34.198117035954894 209.3999093433056L 29.925475771629603 205.1660231660232L 27.166666666666668 203.55376604225714L 21.292792792792795 203.52596442596445" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
        <path d="M 68.28378378378379 194.19168566156517L 72.19193002526337 195.06933123599794L 75.12084665310472 198.01428848203048L 78.35150404641932 203.3828828828829L 84.17136285221393 216.5990990990991L 91.27399980625788 237.29209491181325L 105.48110014776681 286.8977582233396L 107.26686758701148 288.20162162162165L 109.59718133975561 248.90540540540542L 110.18872887486026 198.4530244530245L 111.33233479785206 196.50350596902322L 113.29035792549307 195.36483222352786L 116.2085291813553 195.18633339221574L 118.90700928200928 196.81589189189194L 120.50049704877294 199.59052742062454L 120.72972972972974 231.2837837837838L 120.15133374416762 234.22072072072075L 119.22099242099243 270.93243243243245L 117.81703324946568 292.9594594594595L 116.11669669669669 305.7248300932511L 114.82724152724154 310.2799922224383L 113.49629629629631 311.5933263360448L 108.70464429947191 312.8005983082319L 105.64814814814818 312.8653653653654L 102.5865472213787 310.08217833217833L 100.92993564993567 304.7072072072072L 98.92137592137594 292.9594594594595L 90.06882375333082 266.52702702702703L 71.9720301697046 218.77648337993168L 71.52331422331424 219.53603603603605L 71.31649040344692 300.30180180180184L 72.53059459459459 303.23873873873873L 72.97868725868727 307.64414414414415L 72.03197253197253 309.9238644238645L 70.4340411840412 311.2718051384718L 68.28378378378379 311.9989655626399L 64.31815409159158 311.59110085695454L 61.29057299374305 307.64414414414415L 60.61392587923199 301.7702702702703L 60.582041500960436 254.7792792792793L 60.08723429311665 252.89860913545124L 60.14427284427285 237.76038725292455L 60.65269764146171 235.6891891891892L 61.24855880811559 204.85135135135135L 62.923472652980834 199.45117698343506L 66.81531531531532 194.63929069914983L 68.28378378378379 194.19168566156517" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
        <path d="M 146.11261261261262 194.92433473936362L 157.4876808626809 197.99596228352706L 160.23453093812378 199.54024383665103L 161.63501420883972 201.07669750287204L 161.91974733354044 204.85135135135135L 160.31779738922594 207.30878838021698L 157.79973551533186 208.8445550813972L 154.92342342342343 209.1287709728077L 146.11261261261262 206.45251275371757L 143.72309291540063 206.8579542275195L 143.138456428779 238.62612612612614L 143.56998665331997 239.71166860640548L 153.45495495495496 240.21668821441037L 157.3171119095975 242.10631151382597L 158.21661602430834 245.96846846846847L 157.42119222025767 248.51065581710748L 155.9723294723295 249.91090844539121L 151.98648648648648 250.85064935064932L 144.64414414414415 250.4181811121466L 143.5922124047124 250.7993180095984L 143.69586196365861 272.4009009009009L 143.27144535840188 275.33783783783787L 143.23245645645648 303.23873873873873L 143.70468916121092 304.16506913890635L 158.6132615666514 303.9561584485249L 161.70299940659223 305.26997356638077L 163.15765765765767 308.01126126126127L 163.08608263435852 310.0304054054054L 161.5372232697814 312.7894755220337L 156.3918918918919 314.76172090457806L 138.7702702702703 314.76172090457806L 134.90811331562776 312.9747695672552L 133.5582413399315 311.38770460601444L 132.94489934125468 309.1126126126126L 132.52927927927928 288.55405405405406L 132.03820053820056 286.6922458172458L 131.65269350983635 269.463963963964L 132.03820053820056 253.70415057915062L 132.52927927927928 251.84234234234236L 132.9160633848134 235.6891891891892L 132.0421892480716 203.78337428337426L 133.3376263587531 199.06160848348352L 134.9276312240384 196.60330689971408L 137.30180180180182 194.87631277686526L 146.11261261261262 194.92433473936362" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
    </g>
    <g>
        <path d="M 6.3878378378378295 370.09240957375295L 34.50900900900901 371.6958833833834L 38.406403700998304 372.76476747017296L 39.691838897721254 374.41626921038693L 39.84275654965312 377.9081354081355L 38.36800754242615 380.52116069557934L 35.517723330807435 381.9766194766195L 33.04054054054054 382.27575194241865L 27.166666666666668 381.13702215729245L 26.057157157157153 381.436273936274L 25.61958997722097 382.5360360360361L 25.84876268673738 397.22072072072075L 29.732167461579234 442.7432432432433L 30.199373286329806 454.490990990991L 31.2006359300477 463.30180180180184L 31.44408628812297 482.39189189189193L 30.923920472196357 484.68067722895313L 29.621644721644724 486.31533841533843L 26.996633475580857 487.7981937161042L 24.22972972972973 487.96152506097263L 21.762702702702693 486.32738738738743L 20.495624195624195 484.657528957529L 20.360116873630396 464.7702702702703L 19.027155727155726 449.48285599031874L 18.06133251895963 426.59009009009014L 17.522400779157522 424.58854745156117L 16.553644553644567 398.6891891891892L 16.03318023906259 396.7688842688843L 15.626859942649439 382.5360360360361L 15.161750583070393 381.26167546857204L 5.13963963963964 379.4382668382669L 1.528294961628301 377.3290915915916L 0.7522221553401925 375.1936936936937L 1.157576495414329 372.6459009009009L 2.62568546807678 371.24451150179306L 6.3878378378378295 370.09240957375295" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
        <path d="M 100.03941441441442 368.5913217905406L 102.25880425880425 368.62909576242913L 105.93892495847804 369.8448588253058L 106.88880389823787 372.2567567567568L 106.98415025194689 379.59909909909913L 105.28499356499358 386.94144144144144L 104.60419701138265 392.81531531531533L 104.55127227541021 410.43693693693695L 103.10810810810813 432.463963963964L 99.24216754067503 464.7702702702703L 98.63531063531063 483.8603603603604L 96.9018437041693 490.44371899989875L 94.31056194315862 493.68996508470195L 88.84234234234235 493.9955375936685L 86.49648705309086 492.0800895234858L 85.61666160542568 488.2657657657658L 85.61088206850918 479.454954954955L 84.40662451442267 463.30180180180184L 78.05443152649858 417.9107839182467L 77.59267161898742 417.9107839182467L 76.69991613234855 435.4009009009009L 72.34317075696386 470.64414414414415L 69.26276276276275 483.7611395178963L 66.18456375838926 490.57195114577667L 64.65068401735067 491.97500834167505L 61.444042256542254 492.15193370165747L 58.261486486486504 488.2657657657658L 55.29972903494756 479.454954954955L 52.40155128390423 460.3648648648649L 49.807955013837365 432.38529601029603L 48.90494989371396 416.31081081081084L 46.11663571968918 388.4099099099099L 43.99111969111969 375.8649935649936L 45.25125371677097 374.1881906537079L 47.977275783245936 372.803163628745L 51.55049493938383 372.83689244800354L 54.4945067018238 375.7667545594375L 56.06537306537307 381.0675675675676L 56.63990331795209 400.1576576576577L 61.85707472178061 438.57468759081667L 62.94467010362966 452.82749155405406L 63.39063706563707 452.82749155405406L 65.20222495222497 444.21171171171176L 69.45772891535603 403.09459459459464L 70.20408870408873 385.7296564857541L 71.4795081967213 384.45852374113247L 75.62612612612614 382.8431534027102L 77.86170498857065 383.2373941105285L 81.04377678649521 385.84009009009014L 85.63716516516516 407.5L 88.28950715421304 426.82693984306894L 90.72426309804953 451.52281004408667L 91.37056761194692 451.52281004408667L 93.21743532523348 432.463963963964L 93.44173061950839 403.09459459459464L 96.15437226217041 381.0675675675676L 95.9517824275889 372.2567567567568L 96.85122356398952 369.98635869912465L 100.03941441441442 368.5913217905406" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
        <path d="M 131.42792792792793 368.40014758786094L 138.51069251069254 369.8093093093093L 147.08382191715526 374.22248438915113L 151.48120701346508 378.6359101036521L 154.45351351351354 382.91783783783785L 158.8067067067067 393.0404804804805L 160.51275665909813 400.1576576576577L 161.88778719547952 410.43693693693695L 162.1277774294016 451.55405405405406L 160.34188618998746 466.2387387387388L 157.59478627563738 476.51801801801804L 152.91791505791505 484.791788931789L 150.04810810810812 487.7958558558559L 144.64414414414415 490.9153936545241L 137.30180180180182 491.84991658325L 131.7663640202703 490.72563680431705L 128.9962704640124 489.22895476121283L 124.63518781939837 484.7792265950161L 121.61161407713134 479.24517374517376L 117.1516470878173 466.2387387387388L 115.98140621824831 458.2254582168376L 114.32100206518813 436.8693693693694L 114.89081742292751 428.0585585585586L 114.41657891657893 426.24544953116384L 114.99712317359378 401.62612612612617L 116.98291555804511 385.472972972973L 118.60639017395776 379.59909909909913L 121.62091991488977 372.69646765409476L 124.49956871765384 369.7673530673531L 127.55543446672482 368.4995029512271L 131.42792792792793 368.40014758786094M 132.8963963963964 379.7421806421807L 130.27784421589732 381.40016940016943L 128.60692271218585 384.00450450450455L 127.2273352299668 388.4099099099099L 126.63122403840968 394.2837837837838L 126.66394301278022 411.9054054054054L 125.65792133597012 422.1846846846847L 126.07424034203699 445.68018018018023L 128.7717887859531 466.2387387387388L 130.38416357534004 471.9274578926753L 133.25368001930505 477.7970066841035L 136.2677232206028 481.9513513513514L 137.30180180180182 482.50264230711156L 140.23873873873876 482.26113785017895L 142.72414125355303 480.4659685863875L 146.02083333333334 475.04954954954957L 148.7616963554464 466.2387387387388L 150.54447690934177 454.490990990991L 151.0538105673241 445.68018018018023L 150.48609479044262 420.71621621621625L 149.66381086969324 416.0864614614615L 148.53517076398433 391.48239778239787L 145.8017206395585 385.61612555952183L 141.5290793752332 381.38223938223945L 138.7702702702703 379.76998225847336L 132.8963963963964 379.7421806421807" stroke="#rgba(0, 0, 0, 0)" stroke-width="1" fill="#rgb(0, 0, 0)" />
    </g>
</svg>
</div>

              
            
!

CSS

              
                .controls
  padding: 5px 0 25px 5px
button
  color: white
  background: green
  border: none
  font-size: 18px
  padding: 4px 10px
  cursor: pointer
.stage
  margin-left: 20px
  width: 720px
  height: 500px
  border: 1px gray dashed
  svg
    display: inline-block
              
            
!

JS

              
                let svg = document.getElementById('mySvg'),
    groups = Array.from(svg.getElementsByTagName('g'));

function centerGroups() {
  for (let i = 0; i < groups.length; i++) {
    w = groups[i].getBBox().width;
    TweenLite.set(groups[i], {x: 360-w/2});
   
  }
  
}

function resetGroups() {
  TweenMax.set(groups,{clearProps: 'all'});
}

$('button#center').on('click', centerGroups);
$('button#reset').on('click', resetGroups);
              
            
!
999px

Console