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

              
                <head><meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<div id="slider"></div>
<svg width="792pt" height="612pt" viewBox="0 0 792 612" enable-background="new 0 0 792 612"
	version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

	<g id="Layers"  >
<g id="Image">
  <image width="100%" height="100%" xlink:href="http://www.alphaglyx.com/fortordmap.jpg"></g>
    <g id="_March_2010_">
	<clipPath id="SVG_CP_1">
				<path d="M15.36043,595.94976L15.36043,15.36077L777.86159,15.36077L777.86159,595.94976L15.36043,595.94976z"/>
			</clipPath>
			<path id="March_2010_small" clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M238.08661,195.12974L237.8466,194.88973L237.36659,194.40971L237.12658,193.92968L236.88658,193.68967L236.88658,193.44966L
				236.88658,193.20965L236.88658,192.96964L237.12658,192.72962L237.36659,192.48961L237.36659,192.2496L237.6066,192.2496L238.56662,191.52956
				L239.52665,191.28955L240.72668,190.80953L241.68671,190.56952L242.64674,190.3295L243.84677,190.08949L244.8068,189.84948L246.72685,189.84948
				L248.6469,189.84948L250.32695,190.08949L252.247,190.08949L253.92705,190.56952L255.6071,190.80953L257.52715,191.28955L259.20719,191.76958
				L260.88724,192.2496L261.60726,192.48961L262.08727,192.72962L262.56729,193.20965L263.0473,193.68967L263.52731,194.1697L263.76732,194.64972
				L264.00733,195.36976L264.24733,195.84978L264.48734,196.56982L264.48734,197.04984L264.24733,197.76988L264.24733,198.96994
				L264.24733,200.41001L264.00733,201.61007L263.76732,202.81013L263.52731,203.29015L263.28731,203.53016L263.0473,203.77018L
				262.80729,204.01019L262.56729,204.2502L262.08727,204.2502L261.84727,204.2502L261.36725,204.2502L261.12725,204.2502L258.00716,203.53016
				L255.12708,202.57012L252.48701,201.61007L249.60693,200.65002L246.72685,199.44996L243.84677,198.2499L241.2067,197.04984L240.24667,196.56982
				L239.28664,196.08979L238.32662,195.36976L238.08661,195.12974"/>
			<path id="March_2010_large"  clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M474.73318,301.21504L475.4532,301.93508L476.89324,303.37515L478.33328,304.57521L480.01332,305.77527L481.69337,306.97533L
				483.37342,308.17539L485.05346,309.37545L486.73351,310.3355L488.41356,311.29554L489.8536,311.77557L491.53364,312.25559L492.97368,312.4956
				L494.41372,312.97563L495.85376,313.21564L497.53381,313.45565L498.97385,313.93568L500.6539,314.4157L502.09394,314.89572L503.53398,315.61576
				L504.97402,316.57581L506.41406,317.29584L507.8541,318.25589L509.05413,319.21594L510.49417,320.17599L511.6942,321.37605L512.89424,322.3361
				L513.85426,323.77617L519.13441,329.29644L524.17455,335.05673L528.97468,340.81702L529.6947,341.29704L530.17472,342.01708L
				530.41472,342.73711L530.65473,343.45715L530.89474,344.17719L531.13474,344.89722L531.13474,345.61726L531.13474,346.33729L
				531.13474,347.05733L530.89474,347.77737L530.65473,348.73741L530.41472,349.21744L529.93471,349.93747L529.4547,350.4175L528.97468,351.13753
				L528.49467,351.37755L527.77465,351.85757L527.29464,352.09758L526.57462,352.57761L525.8546,352.57761L524.17455,353.29764L
				522.73451,353.77767L521.05446,354.25769L519.37442,354.4977L517.69437,354.73771L516.01432,354.97773L514.09427,355.21774L512.41422,355.21774
				L510.73418,355.21774L509.05413,354.97773L507.8541,354.73771L506.89407,354.73771L505.69404,354.25769L504.494,354.01768L503.53398,353.53765
				L502.33394,353.05763L501.37392,352.33759L500.41389,351.85757L499.45386,351.13753L498.49384,350.17749L495.85376,348.25739
				L493.4537,346.09728L490.81362,343.93717L488.41356,341.77707L485.77348,339.37695L483.61342,337.21684L481.21336,334.81672L
				478.81329,332.4166L476.65323,329.77647L474.49317,327.37635L472.33311,324.73622L471.13308,323.05613L469.93304,321.37605L468.97302,319.69596
				L467.77298,317.77587L466.81296,316.09578L465.85293,314.17569L465.13291,312.4956L464.17288,310.81552L462.97285,309.13544L
				462.01282,307.45535L460.81279,305.77527L460.33278,304.81522L459.61276,303.85517L458.89274,303.13514L458.17272,302.4151L457.21269,301.69507
				L456.49267,300.97503L455.53264,300.49501L454.57262,300.01498L453.37258,299.53496L439.93221,293.77467L426.49184,288.25439
				L413.05146,282.49411L411.85143,281.77407L410.41139,281.05403L409.21136,280.334L408.01133,279.61396L406.81129,278.65391L405.85127,277.69387
				L404.89124,276.73382L403.69121,275.53376L402.97119,274.57371L401.29114,271.93358L400.09111,269.29345L399.61109,268.81342
				L399.61109,268.09339L399.37109,267.61336L399.37109,266.89333L399.37109,266.4133L399.61109,265.69327L399.8511,265.21324L400.09111,264.49321
				L400.33111,264.01318L400.81113,263.53316L401.05113,263.05314L401.53115,262.81312L402.01116,262.3331L402.73118,262.09309L
				403.21119,262.09309L403.93121,261.85308L405.13125,261.61306L406.33128,261.37305L407.53131,261.37305L408.97135,261.37305L
				410.17139,261.37305L411.37142,261.61306L412.81146,261.61306L414.01149,262.09309L415.21152,262.3331L417.8516,263.53316L420.49167,264.73322
				L423.13174,266.17329L425.77182,267.37335L428.41189,269.05344L430.81196,270.49351L433.21202,272.17359L434.41206,273.13364
				L435.61209,274.09369L437.05213,274.81372L438.25216,275.53376L439.6922,276.25379L441.13224,276.97383L442.57228,277.69387L
				444.01232,278.17389L445.45236,278.4139L446.8924,278.89393L448.57245,279.13394L450.2525,279.85397L451.93254,280.334L453.61259,281.05403
				L455.29264,281.77407L456.97268,282.73412L458.41272,283.69417L460.09277,284.65421L461.53281,285.61426L462.97285,286.81432
				L464.41289,287.77437L469.21302,294.25469L474.01316,300.49501L474.73318,301.21504"/>
		</g>
		<g id="September_2010_">
<clipPath id="SVG_CP_1">
				<path d="M15.36043,595.94976L15.36043,15.36077L777.86159,15.36077L777.86159,595.94976L15.36043,595.94976z"/>
			</clipPath>
			<path id="September_2010_large" clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M422.89174,265.69327L420.73168,264.97323L419.05163,264.2532L418.0916,264.49321L415.69154,264.97323L412.33144,265.21324L411.13141,264.97323
				L407.53131,264.97323L404.17122,265.69327L402.73118,266.89333L401.77115,269.29345L401.77115,272.17359L402.73118,274.09369
				L405.61126,276.25379L410.8914,279.37395L419.53164,283.45415L429.37192,289.69447L440.89224,294.73472L449.77248,298.3349L456.49267,301.21504
				L458.17272,302.4151L460.33278,305.05523L462.97285,308.89542L465.85293,314.17569L468.253,318.73592L471.13308,323.29614L475.93321,329.05643
				L483.37342,336.97683L491.77365,345.13723L496.81379,349.21744L501.37392,352.57761L504.254,354.25769L507.13408,355.21774L511.6942,355.45775
				L516.49434,354.01768L521.29447,350.89752L523.69454,348.01738L525.13458,345.13723L525.37458,342.01708L525.13458,339.13693
				L524.17455,335.77677L522.2545,332.4166L519.37442,327.85637L518.17438,325.45625L516.01432,322.57611L514.09427,320.416L510.97418,318.4959
				L506.65406,316.57581L501.61392,314.89572L498.01382,313.45565L495.37375,313.21564L491.77365,312.4956L488.41356,311.29554L
				481.93338,307.45535L478.57328,304.3352L474.25316,300.73502L471.13308,296.4148L467.29297,291.37455L464.8929,288.49441L461.2928,285.37425
				L456.73268,282.25409L452.65256,280.57401L449.29247,279.37395L444.97235,278.17389L441.13224,276.97383L436.57212,274.57371
				L432.97202,271.69357L422.89174,265.69327"/>
      
	<path id="September_2010_small" clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M254.64707,202.09009L255.12708,202.3301L257.04713,202.81013L259.20719,203.05014L260.40723,203.05014L260.88724,202.3301L261.84727,201.13004
				L262.32728,200.17L262.80729,198.96994L263.0473,198.00989L263.52731,197.04984L263.76732,195.84978L263.76732,194.64972L263.52731,193.68967
				L262.80729,192.48961L261.84727,192.2496L260.64723,191.76958L259.68721,191.76958L258.24717,191.52956L256.32711,191.52956L
				253.44704,191.04954L251.52698,190.80953L249.12692,191.04954L244.8068,191.04954L242.16672,191.52956L240.96669,192.48961L240.48668,193.44966
				L240.48668,194.40971L240.96669,195.36976L243.12675,196.80983L246.72685,198.72992L249.60693,199.92998L253.92705,202.09009
				L254.64707,202.09009"/>
		</g>
				<g id="March_2011_">
<clipPath id="SVG_CP_1">
				<path d="M15.36043,595.94976L15.36043,15.36077L777.86159,15.36077L777.86159,595.94976L15.36043,595.94976z"/>
			</clipPath>
			<path id="March_2011_small" clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M254.64707,202.09009L255.12708,202.3301L257.04713,202.81013L259.20719,203.05014L261.12725,203.05014L261.84727,202.3301L262.56729,201.37006
				L262.80729,200.17L263.0473,199.20995L263.28731,197.04984L263.0473,194.88973L262.80729,193.68967L262.32728,192.2496L261.12725,191.28955
				L259.4472,191.04954L257.52715,190.80953L255.8471,191.04954L254.16706,191.28955L252.247,191.52956L250.32695,191.52956L248.88691,192.00959
				L247.44687,192.48961L246.48684,193.20965L245.76682,194.1697L245.52682,195.36976L245.52682,196.56982L246.24684,197.52986L
				247.68688,198.96994L249.60693,199.92998L253.92705,202.09009L254.64707,202.09009"/>
		<path id="March_2011_large" clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M419.77165,281.29405L419.29164,280.57401L419.29164,278.89393L419.29164,277.45385L420.49167,276.49381L422.65173,275.53376
				L426.01182,275.29375L429.61192,275.77377L431.77198,276.73382L435.8521,277.69387L440.17222,278.89393L444.49234,279.61396L
				448.09244,279.61396L451.45253,280.334L455.05263,281.77407L459.61276,284.65421L465.37292,290.17449L469.45303,294.97473L474.49317,300.73502
				L478.33328,304.3352L482.8934,307.45535L488.41356,310.81552L493.4537,312.73562L497.2938,313.69566L502.57395,315.37575L507.8541,318.4959
				L510.25416,319.93598L511.6942,322.81612L512.65423,325.45625L512.89424,329.29644L512.89424,332.4166L512.17422,335.29674L512.17422,337.21684
				L511.6942,339.13693L512.17422,341.29704L513.13424,345.37725L513.61426,348.01738L513.37425,350.4175L512.89424,351.37755L512.17422,352.81762
				L511.6942,353.53765L510.49417,353.77767L509.05413,353.77767L507.8541,353.29764L504.01399,351.37755L491.29364,342.25709L485.29347,338.17689
				L478.81329,332.17659L468.73301,320.65601L464.41289,314.89572L458.89274,308.17539L453.61259,303.61516L448.57245,299.53496
				L443.2923,295.69477L438.01216,293.05463L428.8919,288.97443L424.09177,286.09429L421.4517,283.45415L420.01166,282.01408L419.77165,281.29405
				"/>
		</g>
		<g id="September_2011_">
			<clipPath id="SVG_CP_1">
				<path d="M15.36043,595.94976L15.36043,15.36077L777.86159,15.36077L777.86159,595.94976L15.36043,595.94976z"/>
			</clipPath>
			<path id="September_2011_large" clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M415.45153,280.334L414.97152,279.37395L414.97152,277.45385L415.69154,275.77377L417.61159,274.3337L419.77165,273.61366L424.57178,273.61366
				L429.61192,275.77377L431.77198,276.73382L435.8521,277.69387L440.17222,278.89393L444.49234,279.61396L448.09244,279.61396L
				451.45253,280.334L455.05263,281.77407L459.61276,284.65421L465.37292,290.17449L469.45303,294.97473L474.49317,300.73502L478.33328,304.3352
				L482.8934,307.45535L488.41356,310.81552L493.4537,312.73562L497.2938,313.69566L502.57395,315.37575L506.65406,318.25589L509.05413,320.416
				L510.49417,322.81612L510.97418,324.97623L511.6942,327.85637L511.6942,331.21654L511.93421,334.81672L512.17422,337.21684L511.6942,339.13693
				L512.89424,341.77707L513.61426,346.57731L514.09427,351.13753L514.09427,355.93777L514.09427,356.89782L513.85426,358.09788
				L513.61426,359.29794L512.89424,360.25799L512.17422,360.97803L510.97418,361.45805L509.53414,361.45805L508.0941,361.45805L
				506.65406,361.21804L505.45403,360.73801L504.254,360.01798L501.85393,358.81792L499.45386,357.61786L497.2938,355.93777L490.33361,351.13753
				L488.17355,349.69746L486.2535,348.01738L484.33344,346.33729L480.73334,342.4971L477.13324,338.65691L473.53314,334.57671L471.13308,332.4166
				L468.73301,330.25649L462.25283,321.13604L460.57278,318.01588L458.89274,315.13574L457.93271,313.45565L456.73268,311.77557
				L455.53264,310.09548L452.17255,306.4953L448.09244,300.97503L443.2923,295.69477L438.01216,293.05463L428.8919,288.97443L421.6917,285.37425
				L417.8516,283.21414L416.17155,281.29405L415.45153,280.334"/>
						<path id="September_2011_small" clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M252.48701,200.41001L253.68704,201.13004L256.32711,202.3301L258.48717,203.05014L258.96719,203.29015L259.4472,203.29015L259.68721,203.29015
				L260.16722,203.29015L260.64723,203.29015L261.12725,203.05014L262.08727,202.57012L262.56729,201.61007L262.80729,200.41001
				L263.0473,199.20995L263.52731,197.28985L263.0473,195.12974L262.80729,193.68967L262.08727,192.48961L260.16722,191.04954L258.48717,190.56952
				L256.80713,190.08949L254.88708,189.84948L253.20703,189.36946L251.28698,189.60947L249.12692,189.36946L245.76682,189.36946
				L244.08678,190.08949L242.88674,190.56952L241.68671,191.76958L241.2067,193.20965L240.96669,194.1697L241.68671,195.12974L243.12675,195.84978
				L245.76682,197.28985L252.247,200.41001"/>

		</g>
<g id="Former_Fort_Ord_Boundary">
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M353.76982,624.99121L356.88991,619.95096"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M360.00999,614.91071L363.37009,609.87045"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M366.49017,604.8302L369.61026,599.78995"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M372.97035,594.7497L376.09044,589.70945"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M381.13058,592.58959L386.17072,595.94976"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M391.21086,599.06991L394.33095,600.99001L396.49101,600.02996"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M401.77115,597.14982L407.0513,594.26967"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M412.33144,591.38953L417.61159,588.50939"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M422.89174,585.86926L427.45186,583.46914L426.73184,582.98911"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M421.6917,579.86896L416.65156,576.50879"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M411.37142,573.38863L406.33128,570.26848"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M401.29114,567.14832L396.251,564.02816"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M390.97085,560.668L385.93071,557.54784"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M380.89057,554.42769L375.85043,551.30753"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M370.57029,548.18737L365.53015,544.82721"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M360.49001,541.70705L355.44987,538.58689"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M350.40973,535.46674L345.12958,532.34658"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M340.08944,528.98641L335.0493,525.86626"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M330.00916,522.7461L324.72901,519.62595"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M319.68887,516.50579L314.64873,513.14562"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M309.60859,510.02547L304.32845,506.90531"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M299.28831,503.78516L294.24817,500.665"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M289.20803,497.30483L284.16789,494.18468"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M278.88774,491.06452L273.8476,487.94437"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M268.80746,484.82421L263.76732,481.46404"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M258.48717,478.34389L253.44704,475.22373"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M248.4069,472.10357L243.36676,468.98342"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M238.08661,465.62325L233.04647,462.5031"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M228.00633,459.38294L222.96619,456.26278"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M217.92605,453.14263L212.6459,449.78246"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M207.60576,446.6623L202.56562,443.54215"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M197.52548,440.42199L192.24534,437.30184"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M187.2052,433.94167L182.16506,430.82151"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M177.12492,427.70136L171.84477,424.5812"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M166.80463,421.46105L161.76449,418.10088"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M156.72435,414.98072L151.68421,411.86057"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M146.40406,408.74041L141.36392,405.62025"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M136.32378,402.26009L131.28364,399.13993"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M126.0035,396.01978L120.96336,392.89962"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M115.92322,389.77946L110.88308,386.4193"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M105.60293,383.29914L100.56279,380.17898"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M95.52265,377.05883L90.48251,373.69866"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M85.44237,370.5785L80.16223,367.45835"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M75.12209,364.33819L70.08195,361.21804"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M65.04181,357.85787L59.76166,354.73771"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M54.72152,351.61756L49.68138,348.4974"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M44.64124,345.37725L39.36109,342.01708"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M34.32095,338.89692L29.28081,335.77677"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M24.24067,332.65661L19.20053,329.53646"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M13.92039,326.17629L8.88025,323.05613"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M3.84011,319.93598L-1.20003,316.81582"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M-6.48018,313.69566L-11.52032,310.3355"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M-16.56046,307.21534L-21.6006,304.09519"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M-22.80063,299.29495L-21.12059,298.81492"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M-15.60043,296.4148L-10.08028,294.25469"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M-4.56013,292.09459L0.96003,289.69447"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M6.72019,287.53436L12.24034,285.37425"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M17.76049,283.21414L23.28065,280.81402"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M28.8008,278.65391L34.56096,276.49381"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M40.08111,274.3337L45.60127,271.93358"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M51.12142,269.77347L56.88158,267.61336"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M62.40173,265.21324L67.92189,263.05314"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M73.44204,260.89303L78.96219,258.73292"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M84.72235,256.3328L90.24251,254.17269"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M95.76266,252.01258L101.28281,249.61246"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M106.80296,247.45236L112.56312,245.29225"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M118.08328,243.13214L123.60343,240.73202"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M129.12358,238.57191L134.88374,236.41181"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M140.4039,234.2517L145.92405,231.85158"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M151.4442,229.69147L156.96436,227.53136"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M162.72452,225.13124L168.24467,222.97113"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M173.76482,220.81103L179.28498,218.65092"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M184.80513,216.2508L190.56529,214.09069"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M196.08544,211.93058L201.6056,209.53046"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M207.12575,207.37036L212.88591,205.21025"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M218.40606,203.05014L223.92622,200.65002"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M229.44637,198.48991L234.96652,196.3298"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M240.72668,194.1697L246.24684,191.76958"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M251.76699,189.60947L257.28714,187.44936"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M262.80729,185.04924L268.56745,182.88913"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M274.08761,180.72902L279.60776,178.56892"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M285.12791,176.1688L290.88807,174.00869"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M296.40823,171.84858L301.92838,169.44846"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M307.44853,167.28835L312.96869,165.12825"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M318.72885,162.96814L324.249,160.56802"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M329.76915,158.40791L335.28931,156.2478"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M340.80946,154.08769L346.56962,151.68757"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M352.08977,149.52747L357.60993,147.36736"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M363.13008,144.96724L368.89024,142.80713"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M374.41039,140.64702L379.93055,138.48692"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M385.4507,136.0868L390.97085,133.92669"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M396.73101,131.76658L402.25117,129.36646"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M407.77132,127.20635L413.29147,125.04624"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M419.05163,122.88614L424.57178,120.48602"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M430.09194,118.32591L435.61209,116.1658"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M441.13224,114.00569L446.8924,111.60557"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M452.41256,109.44547L457.93271,107.28536"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M463.45286,104.88524L468.97302,102.72513"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M474.73318,100.56502L480.25333,98.40491"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M485.77348,96.00479L491.29364,93.84469"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M497.0538,91.68458L502.57395,89.28446"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M508.0941,87.12435L513.61426,84.96424"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M519.13441,82.80414L524.89457,80.40402"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M530.41472,78.24391L535.93488,76.0838"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M541.45503,73.92369L546.97518,71.52357"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M552.73534,69.36346L558.2555,67.20336"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M563.77565,64.80324L569.2958,62.64313"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M575.05596,60.48302L580.57611,58.32291"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M586.09627,55.92279L591.61642,53.76269"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M597.13657,51.60258L602.89673,49.20246"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M608.41689,47.04235L613.93704,44.88224"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M619.45719,42.72213L624.97735,40.32201"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M630.73751,38.16191L636.25766,36.0018"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M641.77781,33.84169L647.29797,31.44157"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M653.05813,29.28146L658.57828,27.12135"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M664.09843,24.72123L669.61859,22.56113"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M675.13874,20.40102L680.8989,18.24091"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M686.41905,15.84079L691.93921,13.68068"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M697.45936,11.52058L702.97951,9.12046"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M708.73967,6.96035L714.25983,4.80024"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M719.77998,2.64013L725.30013,0.24001"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M731.06029,-1.9201L736.58044,-4.0802"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M742.1006,-6.24031L747.62075,-8.64043"/>
			<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#000000" stroke-width="1.92005" stroke-miterlimit="10" stroke-linejoin="round" d="
				M753.1409,-10.80054L758.90106,-12.96065"/>
		</g>
	</g>
</svg>

              
            
!

CSS

              
                /*body {
background-image:url('http://www.alphaglyx.com/fortordmap.jpg');
background-repeat: no-repeat;
  background-size: 792pt  612pt;
 background-position: right 265px bottom 8px;


}*/

svg {
  
  display: block;
  margin: 0px auto;

}
 #March_2010_smallx,
#March_2010_largex,
#September_2010_small,
#September_2010_large,
#March_2011_small,
#March_2011_large,
#September_2011_small,
#September_2011_large{
  visibility:hidden;
}
#slider {
  width:420px;
  margin:20px auto;
}
              
            
!

JS

              
                /*var tl = new TimelineMax({onUpdate:updateSlider});

tl.to("#keyframe7", 1, {morphSVG:"#keyframe8"});
*/
/*var tl = new TimelineMax({onUpdate:updateSlider});
tl.to("#keyframe1", 1, {morphSVG:"#keyframe2"},0)
.to("#keyframe3", 1, {morphSVG:"#keyframe4"},0)
.to("#keyframe4", 1, {morphSVG:"#keyframe5"},"+=1")
.to("#keyframe2", 1, {morphSVG:"#keyframe7"},"+=1");
*/
var tl = new TimelineMax({onUpdate:updateSlider});
tl.to("#March_2010_small", 1, {morphSVG:"#September_2010_small"}, 0)
.to("#March_2010_large", 1, {morphSVG:"#September_2010_large"}, 0)
.add("scene2")
.to("#March_2010_small", 1, {morphSVG:"#September_2011_small"}, "scene2")
.to("#March_2010_large", 1, {morphSVG:"#September_2011_large"}, "scene2");

$("#slider").slider({
  range: false,
  min: 0,
  max: 1,
  step:.001,
  slide: function ( event, ui ) {
    tl.progress( ui.value ).pause();
  },
  stop: function () {
    tl.play();
  }
});	

function updateSlider() {
  $("#slider").slider("value", tl.progress());
} 
              
            
!
999px

Console