HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs 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 its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<svg class="us" viewBox="0 0 542.460022 416.2406921">
<polygon points="118.3980026,106.9002991 110.3418045,168.6753082 157.9750977,174.214798 161.7349091,125.6010056
142.8388977,123.868103 144.5113068,110.4550018 "/>
<polygon points="146.2432098,121.6489029 210.8184052,125.7578049 212.1533966,77.5830002 151.0596008,73.3442001 "/>
<polygon points="229.7998047,129.7543945 164.5996094,125.3955002 161.0401001,174.6992035 230.3609009,177.3343964 "/>
<polygon points="55.7056084,134.4550018 98.2920074,191.4458008 98.8799057,179.2167969 103.4073029,179.0473022
105.9097061,180.6987 115.7608032,106.3012009 63.3013077,97.6298065 "/>
<polygon points="88.5674057,99.396904 94.2715073,74.7723999 91.0850067,73.4975052 92.6436081,68.5565948 101.1392059,55.7612038
97.8096008,50.654705 82.3438034,47.3974037 66.8662109,50.690403 60.2105064,49.8935051 58.0430069,47.8823051
52.1490059,48.8012047 47.5435066,46.8813057 46.5738068,39.5947037 38.5381088,39.1972046 28.154808,69.2285004
22.8433075,76.4013062 23.5572071,86.1391068 "/>
<polygon points="214.4365997,64.0727005 214.2847137,101.914505 262.3935852,101.5078049 267.7217102,104.0975952
275.3233032,102.2441025 280.1162109,104.505806 279.4786072,94.3403015 281.1679993,92.8813019 280.3847961,71.9878006
276.0635071,68.3139038 277.539093,63.6269035 "/>
<polygon points="278.9628906,61.9282036 271.4038086,25.4975052 214.7373047,25.526804 213.9911957,61.4735947 "/>
<polygon points="213.9595032,125.8143997 232.5702972,126.7851028 232.8222961,140.6259003 293.8349915,140.2597046
288.4707031,129.5731964 286.4169922,121.2807007 281.7421875,108.2050018 274.9825134,104.6211014 267.7603149,107.3330002
261.3486938,103.738205 214.2847137,104.1049042 "/>
<polygon points="232.4864044,143.1777039 232.7071075,176.9965057 303.2138977,176.5243988 301.468811,150.7070007
295.6875,145.3451996 296.6152954,142.1717987 "/>
<polygon points="161.5367126,241.3847046 176.8858032,241.5077972 177.4911957,239.0449066 216.2754059,241.0791016
217.7217102,179.7259979 161.1381989,177.3110046 154.4067993,246.5350952 160.3399048,246.6600952 "/>
<polygon points="50.2774086,45.3837051 58.6221085,44.7225914 62.2349091,48.0742035 81.6582108,45.2548027 98.5035019,48.111805
104.5391006,13.7099047 87.3057098,9.8222046 56.3995056,4.0048051 57.988308,9.1762047 57.2491074,22.0087051
56.3550072,21.4433041 53.3482056,15.6269045 44.885807,13.1543045 38.7701073,8.1528053 39.7183075,24.158205
42.6084061,26.8398037 39.539608,28.6987038 42.7520065,30.6704044 38.9737053,32.2070045 38.3814087,35.0185051
47.914608,38.1494026 "/>
<polygon points="114.0791016,35.6713028 120.3643036,45.200592 124.5826035,46.0888023 119.9195023,61.2583046
126.6211014,61.0839043 132.3462067,76.4858017 147.1161957,77.5781021 148.9707031,71.2319031 211.7828064,74.557106
213.0782013,25.3378048 113.6973038,16.1572056 111.7154007,28.4365044 "/>
<polygon points="132.093811,246.6717987 151.3648071,246.8983917 158.3457031,177.2416992 109.7364044,171.1395874
107.3677063,182.387207 101.7310028,180.8549042 99.5059052,195.9320984 103.3013077,204.1595917 99.2271042,207.1035004
95.0909042,217.7187042 97.6846008,221.8065948 93.9844055,225.4325867 "/>
<polygon points="103.6529007,55.2421036 93.7925034,71.3037033 96.6563034,73.2890015 90.922905,99.5600052
144.5879059,107.8368988 147.5424957,79.6547012 130.0292969,78.8945007 125.2085037,62.804203 117.8692017,62.3813019
121.0953064,48.5620041 112.0679016,37.8388062 111.189003,32.9902039 109.4878006,30.5649052 109.2520065,27.8320045
111.1939011,14.5068045 106.6285019,13.6318045 101.0064011,49.7612038 "/>
<path d="M19.5498066,128.1356964l2.8945999,12.0967102l4.3227005,3.675293l-0.0096989,9.0664062l5.1097984,6.0858917
l-3.3514996,3.6138l10.5067997,19.8310089c0,0-2.1894989,6.7079926-1.1450005,6.6694946
c1.0449028-0.0395966,11.6743011,4.4438019,11.6743011,4.4438019l0.5043983,4.1660004l7.7397003,1.8027954l-0.5135994,4.902298
l10.7728996,8.3144989l0.2865982,7.6611023l24.8423004,2.2080078l0.1787033-4.5400085l2.7167969-11.2617035l4.0484009-3.6391907
l-2.9297028-3.7250977l-0.8788986-4.8486023l-43.7089958-59.0415039l7.1820984-38.5527954l-35.3363991-7.7441025
l-0.4429016,9.0067902l-6.9862995,8.9805145l3.4990005,9.6342926L19.5498066,128.1356964z"/>
<polygon points="281.9873047,105.4047012 292.3681946,131.1703949 328.8799133,128.4095917 332.467804,131.0644073
337.3526001,121.8153992 334.4101868,117.7406998 342.3017883,114.3065948 343.8203125,108.3203049 336.9317017,101.2548065
332.726593,100.7153015 330.967804,91.0165939 283.0020142,95.2544022 "/>
<polygon points="355.0126953,183.8695984 359.8526001,173.2812042 354.8349915,169.6318054 355.0019836,164.7440948
344.319397,158.8670959 346.7792969,150.0565948 339.7246094,147.8807983 340.3154907,145.0673065 332.7286072,138.0283051
331.1524048,133.2060089 328.2626953,130.5249023 292.8067017,133.5957031 293.5683899,135.3099976 297.9433899,140.3773956
301.4130859,139.9002991 301.5039062,142.335907 298.1123047,144.9047089 303.5185852,149.5843964 306.8339844,182.2407074
351.0087891,179.1909027 351.7763977,181.2440948 350.4327087,183.7792969 "/>
<polygon points="414.944397,182.3769073 421.1347961,180.0527039 428.1865845,172.8144073 432.2998047,170.9154968
434.3995056,166.6419983 372.4815063,175.2480011 371.8897095,178.0615082 359.4179993,180.2714081 353.7294922,191.5019073
356.1495056,195.3895874 353.1455078,198.987793 412.780304,189.7812042 411.6054993,186.3368988 414.3526001,185.1878967 "/>
<!-- <polygon points="320.2774048,252.527298 316.1474915,244.6620941 313.9667969,242.3027039 313.5712891,222.4414062
301.5751953,218.7050018 294.2745056,219.3271027 287.7227173,221.3164062 283.1054993,219.0487976 279.3135071,220.2362976
275.4429016,219.335907 272.3486938,220.4980011 270.1542969,217.7890015 257.8876953,216.1562042 257.7837219,213.3710938
249.6958008,211.5800018 249.144104,187.539505 220.2984009,187.9985046 218.0186005,243.5312042 180.949295,240.7342987
191.0288086,255.9745941 197.4145966,258.8739929 197.6289062,258.9472046 200.2823029,270.273407 214.990799,281.2313843
221.9638977,271.9023132 230.4893036,270.2626953 234.8623047,271.7684937 238.8516083,273.0116882 253.6138,297.5693054
258.5405884,298.7782898 258.5185852,307.4979858 263.2929993,313.9453125 282.7070923,320.1922913 280.7022095,303.8778992
282.2344055,298.2402039 279.3174133,294.8623047 284.2197876,295.3778992 282.6700134,291.250885 287.9317017,292.0995789
286.8106079,288.023407 289.2471008,289.9588928 291.2969055,288.835907 289.4512024,286.1131897 291.4755859,284.2948914
296.7784119,286.188385 307.5567017,276.0195007 305.2979126,271.5722046 309.7471008,269.313385 311.6308899,273.0780945
316.7373047,269.7479858 "/> -->
<polygon points="259.4595032,211.5644073 259.9121094,214.3368988 271.4560852,215.2998047 273.3017883,218.0204926
277.4404907,216.8182983 279.2344055,218.1473999 284.0712891,216.9199066 288.3145142,218.5039062 300.8125,216.9902039
308.8760071,218.0838928 304.8623047,185.4530945 302.8731079,178.9017944 220.5337067,180.3173065 220.3814087,185.5545959
251.5166016,185.7075043 252.4165039,209.7362976 "/>
<polygon points="347.453186,186.648407 349.3203125,180.6499023 307.2998047,185.3612976 311.2597961,216.598587 315.1308899,217.5
315.8037109,226.1932983 344.6817017,224.4140015 342.9755859,216.1083984 349.7149048,200.512207 352.3037109,195.184494
350.4072876,191.0708008 353.9306946,186.3939972 "/>
<polygon points="368.0947876,262.9432983 358.2657166,261.218689 357.4522095,258.1112976 365.5126953,259.2030945
362.9042969,254.7695007 361.0078125,250.6562042 340.8222961,251.7586975 340.9101868,244.7812042 346.4912109,235.5057983
344.8554993,226.9237976 316.5,228.6835938 316.3505859,240.8193054 322.6767883,251.3925018 319.8320923,268.585907
326.4501953,268.3377991 338.0322876,270.3465881 339.6299133,266.4491882 348.8135071,269.5927124 351.4092102,273.680603
355.6133118,274.219696 359.0058899,271.6532898 360.4883118,274.0379944 363.2099915,272.1922913 360.9638977,268.0917969
373.7089844,273.1953125 374.6368103,270.0213928 365.7998047,266.8652039 "/>
<polygon points="372.1435852,198.887207 352.1416016,202.5135956 345.3370056,216.3690948 348.8652954,233.7597046
342.9229126,249.675705 361.6885071,247.9266968 368.3486938,258.1385803 372.7099915,255.8827972 377.4306946,256.2294922
373.631897,238.5858917 "/>
<polygon points="412.9541016,241.0370941 411.3447876,232.9891968 411.1103821,226.7207031 411.2539062,223.5771027
408.5743103,221.8465881 398.6582031,194.4945984 376.3135071,198.469696 376.4746094,237.6952972 379.2294922,255.3768921
380.7861938,255.0575867 382.2070923,251.0820007 385.2666016,255.9355011 388.8926086,255.0155945 388.726593,250.5760956
385.194397,247.0467987 "/>
<polygon points="401.5118103,193.8647003 411.6592102,220.4237976 413.9151001,224.7850952 412.5048828,229.023407
413.7548828,234.4687042 415.5947876,241.723587 416.9902954,244.0252991 443.5517883,240.9375 446.7929993,243.6932983
446.2969055,237.4355011 451.530304,237.5009003 454.8613892,221.6835938 428.5,195.2080078 421.6416016,193.634201
423.3037109,189.1253967 "/>
<polygon points="465.0644836,263.6698914 467.9277954,263.3016968 460.8243103,255.1992035 453.195282,240.0536957
448.4844055,239.9687042 447.6542969,245.7539062 443.6289062,243.027298 416.2842102,246.1434937 413.5751953,243.6298065
389.4228821,248.1952972 392.5010071,253.5722046 393.9892883,251.4248047 395.6152954,252.9335938 398.7197876,252.032196
400.5,250.6582031 403.3916016,251.0722046 403.1885071,252.6493988 409.2452087,253.7303925 414.6835938,259.2802124
423.6885071,255.2812042 424.8769836,252.0995941 431.2227173,253.9530945 439.8847961,261.7362976 442.5048828,261.9002991
445.6036072,267.7987976 444.9589844,278.5467834 449.069397,276.5614929 450.203186,278.8729858 447.2158813,282.9090881
453.9990845,289.4541016 455.7490845,287.2967834 456.7187805,292.2304077 459.3692017,293.1766968 461.6933899,299.3662109
465.9024048,299.993103 471.0596008,305.032196 470.3447876,306.8885803 472.2022095,307.6044922 478.7861938,305.2127991
478.7217102,307.0975952 474.6904907,311.1727905 479.7666016,307.0595093 479.6103821,302.8807983 479.4628906,302.9881897
479.757782,285.875 "/>
<polygon points="455.7988892,218.7704926 457.9931946,214.5039062 465.8447876,207.6708984 469.1123047,204.1488953
468.9755859,200.4920959 473.9062805,192.4613953 460.2637024,184.3417969 447.8154907,187.1615906 446.6240845,183.2826996
432.0469055,185.1362 425.6728821,189.559494 424.726593,192.210907 429.7276001,193.0693054 "/>
<polygon points="485.7911072,160.6313019 494.2637024,156.3905945 492.2421875,153.7528992 437.078186,165.8554077
433.1533813,172.8022003 429.6347961,175.5825043 422.5664062,182.3852081 416.2978821,183.634201 415.1083984,186.8168945
413.8417969,187.9105988 414.9356079,189.1772003 426.6005859,186.3867035 432.4609985,182.2440948 447.0673828,181.1743011
450.5801086,184.1805878 460.6972961,181.9712067 476.226593,191.589798 480.9082031,190.8915863 481.0234985,186.9638062
485.953186,178.9331055 493.9717102,176.5404968 493.8437805,173.1450043 486.8710938,175.4985046 490.7001953,173.0014038
490.8536072,170.1190948 486.3554993,168.7176971 495.1865845,167.0794983 497.0606079,161.2548065 485.0469055,161.7055054 "/>
<path d="M367.7745056,110.1264038l-3.851593-5.0868988c0,0,0.094696-4.4496994-0.679718-4.1592026
c-0.773407,0.2906036-21.6191101,2.3794022-21.6191101,2.3794022l4.1045227,4.8154984l-2.3291016,7.6713028l-6.1700134,2.8471985
l1.9649048,3.5878906l-5.3447876,10.9233093l8.2460938,10.6763l-0.1532898,2.8827972l7.1591797,2.6083984l-2.2987976,8.4561005
l9.6073914,5.1318054l0.4862976,5.9975891l3.2139282,0.9589996l1.4989929-1.8872986l4.7685852,1.6524048l-0.9111938-3.3661957
l3.5888977-1.9654083l-0.1308899-9.4428101l3.8760071-8.2529907l-3.2617188-3.2782898L371.25,140.0737L367.7745056,110.1264038z"/>
<polygon points="374.5361938,109.0888062 370.4346008,111.3348999 373.3486938,140.2568054 371.8604126,142.4051971
375.0820923,144.6381073 370.7529907,154.7387085 371.7120056,159.4105988 376.375,158.1898956 378.7637024,159.1468964
380.4853821,156.2050018 383.4161072,157.664505 385.6103821,153.3979034 390.6513977,154.2875977 394.4483032,144.9589081
397.0596008,144.8612976 399.3526001,143.2060089 392.780304,106.346199 "/>
<path d="M281.2363892,62.1045036l-3.1806946,5.8729973l4.2958984,2.9775009l1.6054993,21.910202l45.6473999-3.278801
l-1.4227905-3.0855026l-13.3916016-8.391098l-1.4160156-9.8856964l-1.7148743-3.8583984l1.9325867-4.2573051
c0,0,5.156311-2.0234985,4.381897-1.7333984c-0.7734985,0.2905006-1.2783813-6.2290001-1.2783813-6.2290001l20.4404907-19.8584099
l-9.1992188-1.2246895l-4.8066711,4.3647995l-5.6513062-4.2343998l-2.5518188,1.6646023l-4.1044922-4.8159027l-4.1885071-0.1044998
l-1.7098999,3.2026005l-10.0908813-4.0683994c0,0-1.8515015-7.5151119-2.625-7.2245998
c-0.7744141,0.2905998-1.5761108-0.2026005-2.0693054,0.6000996c-0.4931946,0.8036995,0.4267883,4.4307003,0.4267883,4.4307003
l-16.4448853,0.8773994L281.2363892,62.1045036z"/>
<path d="M317.0712891,76.1938019l13.9638977,9.6772995l3.3809204,13.4736023l4.7207031,0.346199l24.7929077-1.4512024
l-2.3437195-6.7123947l1.7539062-16.0195007l3.0137024-10.314003l-7.9961243,9.9771042l1.5546265-7.3819046l-4.5312195-9.2455978
l-18.477478-4.5390015l-5.3223267-2.4160995L328.4375,51.4443054c0,0,2.4453125-4.5371017,1.6729126-4.2471008
c-0.7744141,0.2905998-10.7842102,5.3736-10.7842102,5.3736l0.5253906,7.0419998l-5.8310852,4.9257011L317.0712891,76.1938019z"/>
<g>
<polygon points="338.9638977,53.1430054 355.7851868,55.3901024 359.6181946,59.9541054 361.4306946,66.4248047
364.7149048,56.3628044 377.8876953,51.9467049 385.5019836,52.708004 385.9462891,50.5985947 394.3037109,50.2855911
387.3067017,45.0555916 381.3399048,46.3252029 380.1484985,42.4462051 367.5654907,48.6718025 361.0361938,48.9160042
356.1679993,44.6523056 350.2099915,46.1831055 350.3544922,43.0390053 355.3721008,37.3588028 352.4697876,36.6825943
336.2626953,50.8901024 "/>
<polygon points="382.5537109,57.7875938 383.1728821,60.3798027 380.6298828,62.3055916 381.6094055,67.5 379.5205078,67.5781021
379.1611938,64.9760056 374.1524048,70.9179001 373.6817017,79.3045959 373.9072876,85.3115005 378.2060852,95.3510056
375.8027954,106.9813995 406.2431946,102.7031021 408.0185852,95.2807007 410.1846008,90.2304001 412.8056946,90.3940048
412.6103821,85.1704025 407.217804,73.8642044 402.5654907,75.3462067 398.5810852,80.7260056 396.3554993,77.1473999
401.1524048,72.5223999 400.0449829,63.9325943 398.5537109,59.0190048 384.554718,55.3588028 "/>
</g>
<polygon points="395.9092102,106.0981064 401.1308899,137.2875977 406.5214844,141.532196 415.5253906,142.0771027
418.281311,138.835907 421.9844055,142.391098 424.3769836,139.9477081 424.5401001,133.7953949 427.8378906,134.5874023
428.5361938,128.8070984 431.8984985,127.7655945 434.217804,123.363205 434.8027954,111.0488052 431.8740845,96.7412033
422.2431946,104.948204 418.3349915,105.3563995 415.0478821,108.3563995 406.0010071,104.2490005 "/>
<polygon points="494.2315063,57.7900047 496.4317017,67.6464005 501.6074829,66.1450043 499.8183899,46.334404
503.5899048,42.2700043 501.8467102,37.627903 488.4219055,42.3149033 492.4042969,57.8584023 "/>
<polygon points="497.6132812,92.1870041 497.9981079,88.5112 495.2666016,78.413002 494.914093,69.010704 492.7431946,59.9384041
490.3935852,60.0258026 485.5585938,42.6840057 474.3867798,44.6718025 463.9551086,59.4472046 466.3642883,60.925705
466.8115845,65.8784027 460.7392883,71.3369064 457.9658813,73.0835037 452.1495056,72.443306 442.5937805,75.6781998
445.6914062,81.5775909 439.2138977,90.1893997 440.3085938,92.2080002 480.5361938,83.1499023 485.1708984,88.2070007
496.5870056,92.7485046 497.2763977,97.1694031 504.7138977,93.2290039 513.0878906,86.3768997 502.2851868,91.2275009 "/>
<polygon points="502.4404907,46.4975052 503.6767883,65.5444031 513.0302734,63.8862038 516.2393188,58.7968025
505.8399048,32.5087051 504.2919922,33.0898056 503.9462891,37.8105049 505.1376953,41.6889038 "/>
<polygon points="542.460022,25.6450043 539.7315063,22.6088047 536.8779907,23.2387047 535.1542969,19.1185932 531.1875,17.959404
526.1416016,1.9325927 521.8837891,-0.0004947 517.5615845,3.3003051 513.8164062,1.0864053 510.5224915,10.8867054
510.4863892,16.9038048 510.5380859,25.2714043 507.3867798,31.9277039 517.9697876,56.1162033 519.3427734,46.1264038
522.8222656,45.9961052 528.1503906,41.611805 528.2354126,36.9008026 532.1240845,35.9707031 531.694397,33.7778053
532.3067017,33.8715057 "/>
<polygon points="482.820282,111.6704025 485.0048828,108.9076996 487.1708984,109.153801 489.9306946,104.2768021
485.0498047,98.9345016 484.1094055,94.7851028 486.0429993,90.5283051 479.2988892,85.0268021 439.2041016,94.1460037
437.6865845,91.2929001 433.632782,95.5312042 440.0527954,122.033699 "/>
<polygon points="418.1279907,141.7182007 416.1065063,143.625 406.1719055,143.7353058 402.1368103,140.7480011
401.1611938,142.6152039 398.4248047,146.3793945 395.3008118,146.7577972 392.7227173,157.2182007 386.9385071,156.3885956
385.3233032,159.6860046 381.2911072,159.2153015 381.1269836,161.8368988 376.3858032,160.9682007 371.2784119,161.7807007
372.1699829,164.6244965 368.0791016,167.1318054 368.5058899,171.5619965 362.7402954,171.2548065 360.8955078,177.8623047
369.2138977,176.5048065 371.4570923,173.543396 415.6611938,166.657196 421.2901001,163.3081055 422.2471008,160.9179077
427.7774048,154.9575043 421.5253906,148.6528015 421.3692017,144.4741058 "/>
<path d="M436.9483032,155.398407l2.2909851,0.6122894l6.6338196-4.4331055l1.4862976-6.8560028l3.0137024-7.9593811
l4.032196,0.5467987l0.7323914-5.3128967l1.9267883-0.9224091l2.9638977-2.9223938l1.0527039-5.0742035l4.8251953,1.3887024
l0.8496094-1.9169998l-2.7236023-2.8623047l-3.1699829,1.0444031l-2.1748047,3.2089996l-2.9227905-1.3828049l-2.6885071,2.7153015
l-3.3379211,3.9618988l-0.0643921-1.1611023l-0.9120789-6.4198914l-10.2579041,2.6610947l-1.835907-9.0088043l-0.4989929,9.9580002
l-3.1328125,4.9444122l-2.4296875,0.1464996l-0.9717102,6.6615906l-3.3291016-0.3990021l-0.1835938,4.3666992l-1.6600952,3.0171051
l-1.1700134,0.5756989c-0.5155945,0.1939087,0.492218,3.8179016,0.492218,3.8179016l10.6181946,8.8433075L436.9483032,155.398407z"
/>
<polygon points="451.6358032,161.1253967 491.2207031,151.9715881 490.414093,149.0379944 485.3897095,149.9228058
482.8437805,147.0541992 486.8789062,147.7743988 487.1748047,146.3690948 483.7901001,144.4033051 486.5361938,143.2543945
483.4776001,140.7539062 485.1026001,137.5541992 481.0010071,139.9194031 476.3164062,135.9100952 476.2315063,133.6464081
472.9238892,133.7705078 472.8574829,128.0731964 468.179718,123.3671036 467.4179993,126.4360046 462.1221008,125.3559036
462.0722961,128.6708984 456.8798828,133.5550995 455.6690063,138.4813995 451.6856079,139.1538086 448.9462891,145.1855011
448.8056946,150.7695007 441.851593,156.2098999 440.3897095,158.9642944 437.5537109,157.5991058 435.0263977,159.9604034
430.0234985,156.703598 424.6074829,161.0917969 424.1827087,163.7225952 420.101593,166.4911957 436.405304,164.1376953 "/>
<polygon points="497.8907166,78.6640015 499.7911072,87.4858017 499.0322876,90.4780045 504.8017883,86.2518997
513.7382812,82.778801 510.8399048,75.2143021 "/>
<polygon points="528.9981079,71.2221069 528.5214844,72.4598999 524.7304688,73.648407 520.5292969,68.574707
518.0283813,66.9248047 520.3272095,63.1772041 517.1143188,61.2050018 513.6083984,65.3471069 497.217804,69.9712067
497.1298828,76.9492035 515.2431641,71.7373047 519.7910767,76.7978058 522.6533813,74.0752029 524.8154907,75.9121017
529.9404907,73.1049042 530.0352173,71.0087051 527.1651001,68.8495941 "/>
<polygon points="512.5488892,74.2793045 514.9121094,81.5135956 517.3095703,80.3779068 515.3212891,73.8265915 "/>
<polygon points="495.4541016,96.3544998 494.695282,93.5712051 487.217804,91.618103 485.7998047,94.6889038
486.6347961,98.3193054 492.2402954,103.6889038 488.444397,110.4033051 487.039093,112.6235046 487.2392883,115.5047989
495.2315063,119.3900986 498.3760071,110.2050018 498.5263977,100.260704 494.0830078,97.9863052 "/>
<path d="M486.664093,117.5746994c-0.2616882,0.0097046-1.3222961-3.8741074-1.3222961-3.8741074l0.6953125-2.3793869
l-1.1903992-0.3476105l-0.9619141,2.2588043l5.3604126,14.6094055l4.8260803-0.9986038l-0.7987976-3.8926086
C493.2724915,122.950592,486.9238892,117.5643997,486.664093,117.5746994z"/>
<polygon points="492.3467102,140.1161957 492.3399048,136.4544983 494.2705078,128.6670074 488.2783813,129.2832031
482.7149048,113.4067001 481.4033813,113.3252029 470.4873047,116.4272003 450.1719055,120.9023056 450.3339844,125.2118988
454.6210938,120.9975052 455.631897,120.0444031 457.4942017,120.889595 465.203186,118.3291016 467.4589844,121.5629044
469.5772095,122.2685013 474.7051086,126.5223999 475.0322876,131.7411957 478.1661072,131.6240082 478.0312805,135.0288086
482.4638977,138.132309 483.6962891,136.1244965 480.8760071,134.1381073 483.7197876,133.2465057 479.6875,126.8592987
478.1572876,120.9008026 480.1142883,117.2963028 480.3399048,116.9878006 481.2861938,120.6528015 482.8740845,124.6473999
483.9024048,131.1473999 487.5635071,131.141098 488.4599915,134.1157074 490.1679993,134.3128967 490.1679993,137.0980988
488.7763977,139.0727081 489.2421875,144.5473022 490.3272095,145.5532074 491.179718,140.5541992 "/>
<g>
<path d="M322.0401001,387.7411804c0,0-1.1758118,5.2275085-1.5673828,5.2275085
c-0.3926086,0,1.3065796,6.4032898,1.3065796,6.4032898l1.9599915,0.9151001l3.2666016-2.875l2.6143188-0.2617798
l1.8291016-2.0908203l-3.2666016-4.5741882L322.0401001,387.7411804z"/>
<polygon points="314.069397,380.4237976 313.5458984,381.2070007 316.4208984,384.6054077 320.0801086,382.7752991
317.2051086,380.6845093 "/>
<polygon points="307.1426086,379.6395874 311.8477173,380.1621094 312.5010071,378.8554077 308.4501953,378.0711975 "/>
<polygon points="298.9101868,375.1961975 302.8301086,378.593689 304.5292969,376.7645874 301.5234985,373.4970093 "/>
<polygon points="285.4501953,368.531189 284.9267883,370.0995789 287.5411072,371.7987976 289.631897,369.1845093
287.6719055,367.7470093 "/>
<polygon points="309.6260071,381.3377991 310.9327087,383.2987976 312.3702087,381.9911804 311.3243103,381.0770874 "/>
<polygon points="280.092804,371.9295959 281.2685852,372.5830078 282.8370056,370.7528992 282.0517883,370.0995789 "/>
</g>
<g>
<polygon fill="none" points="118.7725067,349.8554077 119.2618027,350.1015015 119.0572052,349.8270874 "/>
<path d="M196.3984985,373.8486023l-17.0375977-15.2227173l-6.2198029-3.063385l-0.8177948-2.4179993l-1.940506-1.5215149
l-3.191391,2.8135071l-1.9116058,6.7246094l-1.2020874-0.7910156l-0.875-0.577179l-9.8130035-6.5664062l-0.8179016-2.1893921
l-6.0220032,2.2489929l-1.7920074-0.8633118l-15.8714905-84.8690796l-7.7237015-3.9785156l-6.680603,3.4941101l-3.908699-2.7832031
l-5.3920975,1.2645874l-4.4003983-3.0975952c0,0-10.8218002,0.4219055-10.0147018,0.2451172
c0.8077011-0.1768188,0.1006012-3.4062195,0.1006012-3.4062195l-2.5429001-0.7958984L85.922905,259.75l-2.1939011-2.5332031
l-3.9160004,2.2098999l0.5650024-2.8309937l-1.7084961-1.2333984l-4.3418045,3.743103l-5.2529984-0.0350952l-9.1585999,4.5419922
l-2.8721008,3.4510803l-0.7455978,0.8946228l0.1254997,0.2792969l-1.8892021,3.5712891l-0.1455002,0.023407l-9.1791992,1.5137024
l-2.0586014,4.5116882l7.429203,9.2030945l0.1313972,3.6943054l7.3276024,1.0830078l-1.6729012,5.0401001l3.9819984-0.3643188
l2.7778015,1.6768188l-7.2588005,3.3652039c0,0-6.6732979-1.5-7.4530983-1.5830078
c-0.7798004-0.0840149,0.6758003-3.8710938,0.6758003-3.8710938l-2.0235023-0.7412109l-4.8446999,1.0596008l-0.5093002,2.3105164
l-2.2557983-1.0283203l-7.1724014,3.1777039l6.5454025,5.1669922l-2.7656021,1.281311l1.2094994,5.9111023l11.4071999,1.4804993
l1.5693016,2.5332031l7.3115005-4.4776001l2.0620995,2.8486938l-3.517601,0.9393921l0.4682007,7.9356079l-1.7817001,1.9121094
l-3.5551987-1.1679993l-4.6015015,3.7149048l-2.8969994-2.4121094l-3.9434013,2.4707031l0.6514015,3.75l-2.6815987,0.5018921
l-6.0298023,7.242218l2.5912991,5.2704773l1.5596008,0.1660156l1.0776024,2.217804l-3.1641006,2.5536804l4.6816978,7.8583984
l8.3891029-2.257782L48.0249062,362.75l-0.5443993,7.5643921l7.3778992-2.6298828l6.6387024,6.7538757l1.8540001-5.0594788
l0.9389992,3.5174866l6.5424957-2.1932983l-3.0043945,5.9873047l-0.153801,1.4403992l-0.5327988,0.0635071l-1.0185013,4.6229858
l-5.1494026,3.9179993l-0.256897,2.4082031l-14.2173004,7.6133118l-3.7220993,0.3916016l-7.1065025,5.0243835l0.7621994,2.7090149
l4.3243027-1.1143188l4.3973999-4.2626953l0.6133003,1.6426086l8.1293983-2.2871094l2.2001991,1.5487976l6.0400009-4.875
l-0.8456993-1.9295959L64.9200058,391.625l2.6268997,0.0174866l6.5596008-4.8193054l-1.857399-2.3007812l11.1723022-6.1679077
l1.4277954-3.5283813l3.1635056-2.5527039l-4.1411057-3.0703125l0.4814987-2.0517883l5.9188995-6.2021179l6.3345032-10.1005859
l5.0106964-2.6201172l2.3697052,0.2528992l-0.7168045,1.5010071l1.625,2.0126953l-4.1860962-0.1835938l-3.9432983,2.4707031
l-1.8052063,9.532196l2.858902,0.304718l-1.0292969,2.2567749l-2.1900024,0.8174133l0.5849991,1.9024048l11.3662033-7.9864197
l4.5565948-0.8280945l1.2789001-4.5957031l-2.6093979-2.6434937l1.3598022-3.2842102l1.5439987,0.703125l4.8026962-0.4775085
l0.5166016,2.3592834l2.2968979-0.8583984l1.7505035,2.3409119l9.0781021,3.5975952l9.782196-0.5332031l1.9579926-1.1054993
l1.420517,1.4659119l3.8983917,0.4159851l2.6347961-1.757782l0.4008026,2.8700867l18.7704926,8.835907l0.2071075-0.3926086
l0.0903015,2.5274048l8.0717926,7.4287109l-0.5590973,0.9960938l4.6981964,5.2313843l0.7144012-1.7626953l-3.3266907-8.2402039
l-5.516098-7.4237976l-3.5483093,0.0653992l0.4849091-0.9169922l-5.2481079-3.4530945l3.844696-0.6397095l2.7862091,3.4512024
l3.2290039-0.7059937l-0.7451019-2.2061157c0.9002991,0.9277039,1.8125,2.0566101,1.8125,2.0566101l3.1566925,1.5683899
l-1.2987976,0.7324219l-1.0850067,2.7753906l4.2065125,4.9179993l2.1240997-2.6651001l-2.7769012-5.1795959l2.4135895,1.1982117
l3.0835114,5.5858765l1.1859894,0.835022l-2.4471893,1.132782l2.9627991,4.2588196c0,0,2.2958984-1.2578125,3.9711914-2.233429
l1.5240021,1.0723267l-1.940506,2.3291016l2.9805145,1.6317749l1.0883942-0.7958984l1.1493988,4.4522095l1.7158051-3.7597961
l0.8451996,1.9306946l8.0771942,5.5917053l1.1849976-6.180603l-2.2762909-5.7626953L196.3984985,373.8486023z
M118.7725067,349.8554077l0.2846985-0.0283203l0.2045975,0.2744141L118.7725067,349.8554077z"/>
<polygon points="23.3604069,352.4960938 27.8545074,357.1815796 30.592308,356.1582031 30.9527073,352.7801819
28.5474072,350.6835938 "/>
<polygon points="15.8833075,319.1054077 20.8140068,324.625885 23.949707,322.3320007 17.9522076,316.960907
12.8096075,315.8866882 12.7647076,318.7723999 "/>
<polygon points="28.7471066,403.0116882 25.5557079,405.8241882 26.6055069,408.3016968 29.4263077,406.5 33.3799057,406.3963928
33.4810066,402.9911804 "/>
<polygon points="80.5376053,385.6698914 82.2569046,389.2695007 86.4424057,389.4530945 93.5772018,384.1688843
90.0669022,380.1152039 "/>
<polygon points="9.3457069,414.8710938 16.4634075,412.2138062 13.2788076,410.0350952 "/>
<polygon points="0.0000072,416.2402039 8.2681074,412.6532898 5.4092073,412.3486023 "/>
<polygon points="185.6459961,383.4775085 187.5557098,377.9002991 183.452713,376.9354858 "/>
<polygon points="189.5341949,381.5282898 191.8554993,383.9237976 191.4013977,386.1943054 195.9458008,388.1416016
199.4786072,391.7879944 201.2324982,390.1347046 194.8809052,383.1493835 "/>
</g>
</svg>
.on {
fill: pink;
stroke: red;
stroke-width: 2;
}
body {
padding: 20px;
}
// States are mostly <polygon>s here, but some are <path> and some are a <g> of multiple things. Targetting the direct decendenants easiest.
var allStates = $("svg.us > *");
allStates.on("click", function() {
allStates.removeClass("on");
$(this).addClass("on");
});
Also see: Tab Triggers