123

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <img src="https://academy.pintalia.com.mx/map/frame.png" class="imgcert">


<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 600" xml:space="preserve" class="SPA1 svg1">  
    <rect x="82.33" y="215.05" class="lineafina F-A1" width="170.1" height="170.1"/>
    <circle class="lineafina F-A2" cx="167.38" cy="300.1" r="85.05"/>
    <g class="st2 P-A1">
    <polygon points="114.73,215.05 114.73,385.15 167.38,343.98 220.03,385.15 220.03,215.05 	"/>
	<path d="M275.94,291.82H295v2.91h-15.78v8.03h13.2v2.87h-13.2v12.75h-3.28V291.82z"/>
	<path  d="M320.86,295.4c2.68,2.66,4.02,5.89,4.02,9.69s-1.33,7.03-4,9.69c-2.66,2.66-5.95,4-9.86,4s-7.19-1.33-9.86-4
		s-4-5.9-4-9.69s1.34-7.03,4.02-9.69s5.96-4,9.84-4S318.19,292.74,320.86,295.4z M318.43,312.66c2.01-2.09,3.01-4.61,3.01-7.56
		c0-2.98-1-5.5-3.01-7.58c-2.01-2.08-4.47-3.11-7.4-3.11s-5.39,1.04-7.4,3.11c-2.01,2.08-3.01,4.6-3.01,7.58
		c0,2.95,1,5.47,3.01,7.56c2.01,2.09,4.47,3.14,7.4,3.14S316.42,314.75,318.43,312.66z"/>
	<path d="M330.09,291.82h10.86c3.61,0,6.41,0.94,8.4,2.83c1.99,1.89,2.99,4.26,2.99,7.13c0,1.97-0.53,3.76-1.6,5.37
		c-1.07,1.61-2.55,2.79-4.47,3.52l6.27,7.71h-4.14l-5.37-6.76c-0.68,0.08-2.3,0.12-4.84,0.12h-4.84v6.64h-3.28V291.82z
		 M341.28,308.82c2.27,0,4.11-0.68,5.51-2.03s2.11-3.03,2.11-5.02c0-1.99-0.7-3.67-2.11-5.02s-3.23-2.03-5.47-2.03h-7.95v14.1
		H341.28z"/>
	<path d="M357.55,291.82h2.91l3.16,4.51l7.62,10.57l7.58-10.57l3.16-4.51h2.95v26.56h-3.28v-20.94
		c-0.74,1.17-1.61,2.47-2.62,3.89l-7.79,10.94l-7.87-10.98l-2.54-3.85v20.94h-3.28V291.82z"/>
	<path d="M401.12,291.82h2.83l12.54,26.56h-3.4l-2.46-5.16H394.4l-2.46,5.16h-3.36L401.12,291.82z M409.4,310.5
		l-4.47-9.34l-2.42-5.57c-0.79,2.1-1.58,3.98-2.38,5.61l-4.51,9.3H409.4z"/>
	<path d="M421.27,295.4c2.66-2.66,5.94-4,9.82-4c3.55,0,6.63,1.15,9.22,3.44l-2.01,2.25c-2.02-1.8-4.36-2.7-7.01-2.7
		c-3.01,0-5.52,1.04-7.54,3.11c-2.02,2.08-3.03,4.6-3.03,7.58c0,2.95,1,5.47,3.01,7.56c2.01,2.09,4.47,3.14,7.4,3.14
		c3.06,0,5.64-1.09,7.75-3.28l2.09,2.25c-2.68,2.68-5.96,4.02-9.84,4.02c-3.91,0-7.19-1.33-9.86-4c-2.66-2.66-4-5.9-4-9.69
		S418.61,298.07,421.27,295.4z"/>
	<path  d="M445.03,291.82h3.28v26.56h-3.28V291.82z"/>
	<path d="M477.2,295.4c2.68,2.66,4.02,5.89,4.02,9.69s-1.33,7.03-4,9.69c-2.66,2.66-5.95,4-9.86,4s-7.19-1.33-9.86-4
		c-2.66-2.66-4-5.9-4-9.69s1.34-7.03,4.02-9.69c2.68-2.66,5.96-4,9.84-4S474.52,292.74,477.2,295.4z M474.76,312.66
		c2.01-2.09,3.01-4.61,3.01-7.56c0-2.98-1-5.5-3.01-7.58c-2.01-2.08-4.47-3.11-7.4-3.11s-5.39,1.04-7.4,3.11
		c-2.01,2.08-3.01,4.6-3.01,7.58c0,2.95,1,5.47,3.01,7.56c2.01,2.09,4.47,3.14,7.4,3.14S472.75,314.75,474.76,312.66z M468.8,284.32
		h3.48l-3.85,5.45h-2.95L468.8,284.32z"/>
	<path  d="M486.39,291.82h3.2l12.71,16.48c0.52,0.66,1.07,1.41,1.64,2.25c0.57,0.85,1.01,1.52,1.31,2.01l0.49,0.78
		v-21.52h3.28v26.56h-3.28l-12.3-15.94c-0.6-0.76-1.22-1.6-1.84-2.5c-0.63-0.9-1.11-1.61-1.43-2.13l-0.49-0.78v21.35h-3.28V291.82z"
		/>
  </g>
    <polygon class="st1 F-A3" points="114.73,215.05 114.73,385.15 167.38,343.98 220.03,385.15 220.03,215.05 	"/>     

</svg>

<!-- AUTONOMIA -->

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 600" xml:space="preserve" class="SPB1 svg2">
  
  <rect x="81.82" y="215.05" class="lineafina F-B1" width="170.1" height="170.1"/>
	<circle class="lineafina F-B2" cx="166.87" cy="300.1" r="85.05"/>
  <g class="st2 P-B1">
  <path d="M234.99,351.03l-14.98-14.98l31.81-31.81c0-0.04,0-0.09,0.01-0.14l-136.62-71.56l-33.39-17.5l17.5,33.39
		l71.56,136.62c0.05-0.01,0.1-0.01,0.14-0.01l31.81-31.81l14.98,14.98l16.93,16.93h0.01l17.18-17.18v-0.01L234.99,351.03z"/>
	<path  d="M285.86,291.98h2.83l12.54,26.56h-3.4l-2.46-5.16h-16.23l-2.46,5.16h-3.36L285.86,291.98z M294.14,310.67
		l-4.47-9.34l-2.42-5.57c-0.79,2.1-1.58,3.98-2.38,5.61l-4.51,9.3H294.14z"/>
	<path d="M306.83,315.98c-2.12-1.98-3.18-4.54-3.18-7.68v-16.31h3.28v16.31c0,2.24,0.75,4.08,2.23,5.51
		c1.49,1.43,3.31,2.15,5.47,2.15s3.98-0.72,5.47-2.15s2.23-3.27,2.23-5.51v-16.31h3.28v16.31c0,3.14-1.07,5.7-3.2,7.68
		c-2.13,1.98-4.73,2.97-7.79,2.97C311.55,318.95,308.95,317.96,306.83,315.98z"/>
	<path  d="M339.19,294.89h-9.84v-2.91h22.95v2.91h-9.84v23.65h-3.28V294.89z"/>
	<path d="M377.35,295.57c2.68,2.66,4.02,5.89,4.02,9.69s-1.33,7.03-4,9.69c-2.66,2.66-5.95,4-9.86,4s-7.19-1.33-9.86-4
		c-2.66-2.66-4-5.9-4-9.69s1.34-7.03,4.02-9.69c2.68-2.66,5.96-4,9.84-4S374.67,292.91,377.35,295.57z M374.91,312.82
		c2.01-2.09,3.01-4.61,3.01-7.56c0-2.98-1-5.5-3.01-7.58c-2.01-2.08-4.47-3.11-7.4-3.11s-5.39,1.04-7.4,3.11
		c-2.01,2.08-3.01,4.6-3.01,7.58c0,2.95,1,5.47,3.01,7.56c2.01,2.09,4.47,3.14,7.4,3.14S372.91,314.91,374.91,312.82z"/>
	<path  d="M386.58,291.98h3.2l12.71,16.48c0.52,0.66,1.07,1.41,1.64,2.25c0.57,0.85,1.01,1.52,1.31,2.01l0.49,0.78
		v-21.52h3.28v26.56h-3.28l-12.3-15.94c-0.6-0.76-1.22-1.6-1.84-2.5c-0.63-0.9-1.11-1.61-1.43-2.13l-0.49-0.78v21.35h-3.28V291.98z"
		/>
	<path  d="M438.1,295.57c2.68,2.66,4.02,5.89,4.02,9.69s-1.33,7.03-4,9.69c-2.66,2.66-5.95,4-9.86,4s-7.19-1.33-9.86-4
		c-2.66-2.66-4-5.9-4-9.69s1.34-7.03,4.02-9.69c2.68-2.66,5.96-4,9.84-4S435.42,292.91,438.1,295.57z M435.66,312.82
		c2.01-2.09,3.01-4.61,3.01-7.56c0-2.98-1-5.5-3.01-7.58c-2.01-2.08-4.47-3.11-7.4-3.11s-5.39,1.04-7.4,3.11
		c-2.01,2.08-3.01,4.6-3.01,7.58c0,2.95,1,5.47,3.01,7.56c2.01,2.09,4.47,3.14,7.4,3.14S433.65,314.91,435.66,312.82z"/>
	<path d="M447.33,291.98h2.91l3.16,4.51l7.62,10.57l7.58-10.57l3.16-4.51h2.95v26.56h-3.28V297.6
		c-0.74,1.17-1.61,2.47-2.62,3.89l-7.79,10.94l-7.87-10.98l-2.54-3.85v20.94h-3.28V291.98z"/>
	<path d="M484.17,284.48h3.48l-3.85,5.45h-2.95L484.17,284.48z M481.14,291.98h3.28v26.56h-3.28V291.98z"/>
	<path d="M500.61,291.98h2.83l12.54,26.56h-3.4l-2.46-5.16h-16.23l-2.46,5.16h-3.36L500.61,291.98z M508.89,310.67
		l-4.47-9.34l-2.42-5.57c-0.79,2.1-1.58,3.98-2.38,5.61l-4.51,9.3H508.89z"/>
</g>
  
  
  
	<path class="st1 F-B3" d="M234.99,351.03l-14.98-14.98l31.81-31.81c0-0.04,0-0.09,0.01-0.14l-136.62-71.56l-33.39-17.5l17.5,33.39
		l71.56,136.62c0.05-0.01,0.1-0.01,0.14-0.01l31.81-31.81l14.98,14.98l16.93,16.93h0.01l17.18-17.18v-0.01L234.99,351.03z"/>
 </svg>

<!-- VELOCITA -->

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 600" xml:space="preserve" class="SPC1 svg3">

	<rect x="81.3" y="215.05" class="lineafina F-C1" width="170.1" height="170.1"/>
	<circle class="lineafina F-C2" cx="166.35" cy="300.1" r="85.05"/>
<g class="st2 P-C1">
  <path d="M81.3,324.01v25.66l12.99-4.4l80.78-27.38c10.13-3.44,16.51-12.89,16.51-23.01c0-2.59-0.41-5.22-1.29-7.8
		L84.41,322.96L81.3,324.01z"/>
	<path  d="M81.3,300.1v23.91l3.11-1.05l105.88-35.88l15.34-5.2c10.13-3.43,16.51-12.88,16.51-23
		c0-2.58-0.42-5.22-1.3-7.8L81.32,298.35C81.31,298.93,81.3,299.51,81.3,300.1z"/>
	<path  d="M251.4,215.05l-39.33,13.33L86.43,270.96l-5.13,1.75v25.65h0.02l139.53-47.29l11.95-4.05l3.39-1.15
		c7.44-2.53,12.87-8.31,15.21-15.22c0.85-2.48,1.3-5.11,1.3-7.79C252.7,220.27,252.27,217.63,251.4,215.05z"/>
	<path d="M273.24,291.98h3.4l7.91,17.67l1.97,4.96c0.79-2.21,1.43-3.87,1.93-4.96l7.95-17.67h3.4l-11.84,26.68h-2.83
		L273.24,291.98z"/>
	<path d="M303.53,291.98h20.12v2.91h-16.84v8.03h15.74v2.87h-15.74v9.84h17.42v2.91h-20.7V291.98z"/>
	<path d="M329.02,291.98h3.28v23.65h16.76v2.91h-20.04V291.98z"/>
	<path d="M373.78,295.57c2.68,2.66,4.02,5.9,4.02,9.69s-1.33,7.03-4,9.69c-2.66,2.66-5.95,4-9.86,4s-7.19-1.33-9.86-4
		c-2.66-2.66-4-5.9-4-9.69s1.34-7.03,4.02-9.69c2.68-2.66,5.96-4,9.84-4S371.11,292.91,373.78,295.57z M371.34,312.82
		c2.01-2.09,3.01-4.61,3.01-7.56c0-2.98-1-5.51-3.01-7.58c-2.01-2.08-4.47-3.11-7.4-3.11s-5.39,1.04-7.4,3.11
		c-2.01,2.08-3.01,4.6-3.01,7.58c0,2.95,1,5.47,3.01,7.56c2.01,2.09,4.47,3.14,7.4,3.14S369.34,314.92,371.34,312.82z"/>
	<path d="M385.78,295.57c2.66-2.66,5.94-4,9.82-4c3.55,0,6.63,1.15,9.22,3.44l-2.01,2.25c-2.02-1.8-4.36-2.7-7.01-2.7
		c-3.01,0-5.52,1.04-7.54,3.11c-2.02,2.08-3.03,4.6-3.03,7.58c0,2.95,1,5.47,3.01,7.56c2.01,2.09,4.47,3.14,7.4,3.14
		c3.06,0,5.64-1.09,7.75-3.28l2.09,2.25c-2.68,2.68-5.96,4.02-9.84,4.02c-3.91,0-7.19-1.33-9.86-4c-2.66-2.66-4-5.9-4-9.69
		S383.11,298.23,385.78,295.57z"/>
	<path d="M409.53,291.98h3.28v26.56h-3.28V291.98z"/>
	<path d="M419.24,291.98h10.08c4.15,0,7.51,1.28,10.06,3.85s3.83,5.71,3.83,9.43s-1.28,6.86-3.83,9.43
		s-5.91,3.85-10.06,3.85h-10.08V291.98z M429.12,315.63c3.17,0,5.74-0.98,7.71-2.93c1.97-1.95,2.95-4.43,2.95-7.44
		s-0.98-5.49-2.95-7.44c-1.97-1.95-4.54-2.93-7.71-2.93h-6.6v20.74H429.12z"/>
	<path d="M456.54,291.98h2.83l12.54,26.56h-3.4l-2.46-5.16h-16.23l-2.46,5.16H444L456.54,291.98z M464.82,310.67
		l-4.47-9.34l-2.42-5.57c-0.79,2.1-1.58,3.98-2.38,5.62l-4.51,9.3H464.82z"/>
	<path d="M475.56,291.98h10.08c4.15,0,7.51,1.28,10.06,3.85s3.83,5.71,3.83,9.43s-1.28,6.86-3.83,9.43
		s-5.91,3.85-10.06,3.85h-10.08V291.98z M485.44,315.63c3.17,0,5.74-0.98,7.71-2.93c1.97-1.95,2.95-4.43,2.95-7.44
		s-0.98-5.49-2.95-7.44c-1.97-1.95-4.54-2.93-7.71-2.93h-6.6v20.74H485.44z"/>
</g>
  <g class="st1 F-C3">
  <path d="M81.3,324.01v25.66l12.99-4.4l80.78-27.38c10.13-3.44,16.51-12.89,16.51-23.01c0-2.59-0.41-5.22-1.29-7.8
		L84.41,322.96L81.3,324.01z"/>
	<path  d="M81.3,300.1v23.91l3.11-1.05l105.88-35.88l15.34-5.2c10.13-3.43,16.51-12.88,16.51-23
		c0-2.58-0.42-5.22-1.3-7.8L81.32,298.35C81.31,298.93,81.3,299.51,81.3,300.1z"/>
	<path  d="M251.4,215.05l-39.33,13.33L86.43,270.96l-5.13,1.75v25.65h0.02l139.53-47.29l11.95-4.05l3.39-1.15
		c7.44-2.53,12.87-8.31,15.21-15.22c0.85-2.48,1.3-5.11,1.3-7.79C252.7,220.27,252.27,217.63,251.4,215.05z"/>
</g>
 </svg>

<!-- PREFINALE -->

<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve" class="SPD1 svg4">
  
<g class="lineafina">
  
	<rect class="F-D107" x="81.3" y="215.05"  width="105.3" height="105.3"/>
  
		<rect class="F-D101" x="154.2" y="336.55" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 316.4998 681.2)"  width="8.1" height="8.1"/>
	
		<rect class="F-D102" x="146.1" y="336.55" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 300.2998 681.2)"  width="8.1" height="8.1"/>
	
		<rect class="F-D103" x="146.1" y="320.35" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 308.3998 656.9)" width="16.2" height="16.2"/>
	
		<rect class="F-D104"  x="162.3" y="320.35" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 348.8997 665)"  width="24.3" height="24.3"/>
	
		<rect class="F-D105" x="146.1" y="344.65" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 332.6997 729.8)"  width="40.5" height="40.5"/>
	
		<rect class="F-D106" x="81.3" y="320.35" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 227.3999 705.5)"  width="64.8" height="64.8"/>
</g>


<g class="P-D1">
	<path  d="M223.72,247.71h16.52c5.34,0,9.54,1.43,12.61,4.28c3.06,2.86,4.6,6.46,4.6,10.81s-1.53,7.95-4.6,10.81
		c-3.06,2.86-7.29,4.29-12.67,4.29h-11.49v10.06h-4.97V247.71z M240.67,273.48c3.44,0,6.22-1.02,8.35-3.07
		c2.13-2.05,3.2-4.59,3.2-7.61s-1.07-5.56-3.2-7.61c-2.13-2.05-4.9-3.07-8.29-3.07h-12.05v21.36H240.67z"/>
	<path  d="M265.33,247.71h4.97v40.24h-4.97V247.71z"/>
	<path  d="M280.04,247.71h4.84l19.25,24.97c0.79,0.99,1.61,2.13,2.48,3.42c0.87,1.28,1.53,2.3,1.99,3.04l0.75,1.18v-32.6
		h4.97v40.24h-4.97l-18.63-24.16c-0.91-1.16-1.84-2.42-2.79-3.79c-0.95-1.37-1.68-2.44-2.17-3.23l-0.75-1.18v32.36h-4.97V247.71z"/>
	<path  d="M335.5,252.12h-14.9v-4.41h34.78v4.41h-14.9v35.83h-4.97V252.12z"/>
	<path  d="M371.46,247.71h4.29l19,40.24h-5.15l-3.73-7.83h-24.59l-3.73,7.83h-5.09L371.46,247.71z M384,276.03
		l-6.77-14.16l-3.66-8.45c-1.2,3.19-2.4,6.02-3.6,8.51l-6.83,14.1H384z"/>
	<path  d="M400.27,247.71h4.97v35.83h25.4v4.41h-30.37V247.71z"/>
	<path  d="M437.9,247.71h4.97v40.24h-4.97V247.71z"/>
	<path  d="M467.4,247.71h4.29l19,40.24h-5.15l-3.73-7.83h-24.59l-3.73,7.83h-5.09L467.4,247.71z M479.94,276.03
		l-6.77-14.16l-3.66-8.45c-1.2,3.19-2.4,6.02-3.6,8.51l-6.83,14.1H479.94z"/>
	<path  d="M238.5,304.41h4.29l19,40.24h-5.15l-3.73-7.83h-24.59l-3.73,7.83h-5.09L238.5,304.41z M251.05,332.73
		l-6.77-14.16l-3.66-8.45c-1.2,3.19-2.4,6.02-3.6,8.51l-6.83,14.1H251.05z"/>
	<path  d="M269.02,309.84c4.04-4.04,8.99-6.05,14.87-6.05c5.38,0,10.04,1.74,13.97,5.22l-3.04,3.42
		c-3.06-2.73-6.6-4.1-10.62-4.1c-4.55,0-8.36,1.57-11.43,4.72c-3.06,3.15-4.6,6.98-4.6,11.49c0,4.47,1.52,8.29,4.56,11.46
		c3.04,3.17,6.78,4.75,11.21,4.75c4.64,0,8.55-1.66,11.74-4.97l3.17,3.42c-4.06,4.06-9.03,6.09-14.91,6.09
		c-5.92,0-10.9-2.02-14.94-6.06c-4.04-4.04-6.05-8.93-6.05-14.69S264.98,313.88,269.02,309.84z"/>
	<path  d="M321.03,304.41h4.29l19,40.24h-5.15l-3.73-7.83h-24.59l-3.73,7.83h-5.09L321.03,304.41z M333.58,332.73
		l-6.77-14.16l-3.66-8.45c-1.2,3.19-2.4,6.02-3.6,8.51l-6.83,14.1H333.58z"/>
	<path  d="M349.84,304.41h15.28c6.29,0,11.38,1.95,15.25,5.84s5.81,8.65,5.81,14.28c0,5.63-1.94,10.39-5.81,14.28
		s-8.95,5.84-15.25,5.84h-15.28V304.41z M364.81,340.24c4.8,0,8.69-1.48,11.68-4.44c2.98-2.96,4.47-6.72,4.47-11.27
		c0-4.55-1.49-8.31-4.47-11.27c-2.98-2.96-6.87-4.44-11.68-4.44h-10v31.42H364.81z"/>
	<path  d="M394.06,304.41h30.49v4.41h-25.52v12.17h23.85v4.35h-23.85v14.91h26.39v4.41h-31.36V304.41z"/>
	<path  d="M432.68,304.41h4.41l4.78,6.83l11.55,16.02l11.49-16.02l4.78-6.83h4.47v40.24h-4.97v-31.74
		c-1.12,1.78-2.44,3.75-3.97,5.9l-11.8,16.58l-11.92-16.64l-3.85-5.84v31.74h-4.97V304.41z"/>
	<path  d="M496.09,325.58l-16.27-21.18h5.84l8.14,10.31c0.66,0.83,1.4,1.8,2.2,2.92c0.81,1.12,1.44,2.03,1.89,2.73
		l0.68,1.06c1.82-2.65,3.44-4.89,4.84-6.71l8.01-10.31h5.84l-16.21,21.12v19.13h-4.97V325.58z"/>
	
  <polygon  points="81.3,385.15 186.6,215.05 186.6,385.15 146.1,344.65 	"/>
	<polygon points="170.4,215.05 81.3,368.95 81.3,352.75 154.2,215.05 	"/>
	<polygon  points="81.3,336.55 138,215.05 121.8,215.05 81.3,320.35 	"/>
	<polygon  points="105.6,215.05 81.3,299.15 81.3,215.05 	"/>
</g>
  
  
<g class="st1 F-D3"> 	
  <polygon points="81.3,385.15 186.6,215.05 186.6,385.15 146.1,344.65 	"/>
	<polygon  points="170.4,215.05 81.3,368.95 81.3,352.75 154.2,215.05 	"/>
	<polygon  points="81.3,336.55 138,215.05 121.8,215.05 81.3,320.35 	"/>
	<polygon  points="105.6,215.05 81.3,299.15 81.3,215.05 	"/>
</g> 

</svg>

<!-- FINALE -->

<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve" class="SPE1 svg5">
  

<g class="st2 FE">
	<path  d="M223.72,247.71h16.52c5.34,0,9.54,1.43,12.61,4.28c3.06,2.86,4.6,6.46,4.6,10.81s-1.53,7.95-4.6,10.81
		c-3.06,2.86-7.29,4.29-12.67,4.29h-11.49v10.06h-4.97V247.71z M240.67,273.48c3.44,0,6.22-1.02,8.35-3.07
		c2.13-2.05,3.2-4.59,3.2-7.61s-1.07-5.56-3.2-7.61c-2.13-2.05-4.9-3.07-8.29-3.07h-12.05v21.36H240.67z"/>
	<path  d="M265.33,247.71h4.97v40.24h-4.97V247.71z"/>
	<path  d="M280.04,247.71h4.84l19.25,24.97c0.79,0.99,1.61,2.13,2.48,3.42c0.87,1.28,1.53,2.3,1.99,3.04l0.75,1.18v-32.6
		h4.97v40.24h-4.97l-18.63-24.16c-0.91-1.16-1.84-2.42-2.79-3.79c-0.95-1.37-1.68-2.44-2.17-3.23l-0.75-1.18v32.36h-4.97V247.71z"/>
	<path  d="M335.5,252.12h-14.9v-4.41h34.78v4.41h-14.9v35.83h-4.97V252.12z"/>
	<path  d="M371.46,247.71h4.29l19,40.24h-5.15l-3.73-7.83h-24.59l-3.73,7.83h-5.09L371.46,247.71z M384,276.03
		l-6.77-14.16l-3.66-8.45c-1.2,3.19-2.4,6.02-3.6,8.51l-6.83,14.1H384z"/>
	<path  d="M400.27,247.71h4.97v35.83h25.4v4.41h-30.37V247.71z"/>
	<path  d="M437.9,247.71h4.97v40.24h-4.97V247.71z"/>
	<path  d="M467.4,247.71h4.29l19,40.24h-5.15l-3.73-7.83h-24.59l-3.73,7.83h-5.09L467.4,247.71z M479.94,276.03
		l-6.77-14.16l-3.66-8.45c-1.2,3.19-2.4,6.02-3.6,8.51l-6.83,14.1H479.94z"/>
	<path  d="M238.5,304.41h4.29l19,40.24h-5.15l-3.73-7.83h-24.59l-3.73,7.83h-5.09L238.5,304.41z M251.05,332.73
		l-6.77-14.16l-3.66-8.45c-1.2,3.19-2.4,6.02-3.6,8.51l-6.83,14.1H251.05z"/>
	<path  d="M269.02,309.84c4.04-4.04,8.99-6.05,14.87-6.05c5.38,0,10.04,1.74,13.97,5.22l-3.04,3.42
		c-3.06-2.73-6.6-4.1-10.62-4.1c-4.55,0-8.36,1.57-11.43,4.72c-3.06,3.15-4.6,6.98-4.6,11.49c0,4.47,1.52,8.29,4.56,11.46
		c3.04,3.17,6.78,4.75,11.21,4.75c4.64,0,8.55-1.66,11.74-4.97l3.17,3.42c-4.06,4.06-9.03,6.09-14.91,6.09
		c-5.92,0-10.9-2.02-14.94-6.06c-4.04-4.04-6.05-8.93-6.05-14.69S264.98,313.88,269.02,309.84z"/>
	<path  d="M321.03,304.41h4.29l19,40.24h-5.15l-3.73-7.83h-24.59l-3.73,7.83h-5.09L321.03,304.41z M333.58,332.73
		l-6.77-14.16l-3.66-8.45c-1.2,3.19-2.4,6.02-3.6,8.51l-6.83,14.1H333.58z"/>
	<path  d="M349.84,304.41h15.28c6.29,0,11.38,1.95,15.25,5.84s5.81,8.65,5.81,14.28c0,5.63-1.94,10.39-5.81,14.28
		s-8.95,5.84-15.25,5.84h-15.28V304.41z M364.81,340.24c4.8,0,8.69-1.48,11.68-4.44c2.98-2.96,4.47-6.72,4.47-11.27
		c0-4.55-1.49-8.31-4.47-11.27c-2.98-2.96-6.87-4.44-11.68-4.44h-10v31.42H364.81z"/>
	<path  d="M394.06,304.41h30.49v4.41h-25.52v12.17h23.85v4.35h-23.85v14.91h26.39v4.41h-31.36V304.41z"/>
	<path  d="M432.68,304.41h4.41l4.78,6.83l11.55,16.02l11.49-16.02l4.78-6.83h4.47v40.24h-4.97v-31.74
		c-1.12,1.78-2.44,3.75-3.97,5.9l-11.8,16.58l-11.92-16.64l-3.85-5.84v31.74h-4.97V304.41z"/>
	<path  d="M496.09,325.58l-16.27-21.18h5.84l8.14,10.31c0.66,0.83,1.4,1.8,2.2,2.92c0.81,1.12,1.44,2.03,1.89,2.73
		l0.68,1.06c1.82-2.65,3.44-4.89,4.84-6.71l8.01-10.31h5.84l-16.21,21.12v19.13h-4.97V325.58z"/>
 </> 
<a href="#" onClick="window.location.reload( true );">
<g class="st3 FE"> 	
  <polygon points="81.3,385.15 186.6,215.05 186.6,385.15 146.1,344.65 	"/>
	<polygon  points="170.4,215.05 81.3,368.95 81.3,352.75 154.2,215.05 	"/>
	<polygon  points="81.3,336.55 138,215.05 121.8,215.05 81.3,320.35 	"/>
	<polygon  points="105.6,215.05 81.3,299.15 81.3,215.05 	"/>
</g> 
</a>
</svg>

<img src="https://academy.pintalia.com.mx/map/glossy.png" class="imgcert2">

            
          
!
            
               /* CENTRO */
.svg, .svg1, .svg2, .svg3, .svg4, .svg5 {
  position:absolute;
  top: 5.2vw;
  display:block;
  width:30vw;
  left: calc( 50% - 15vw); }


.imgcert {  position:absolute; width:50vw;  display: block; top:0vw; left: 50%;
margin-left: -25vw;}

.imgcert2 {  position:absolute; width:50vw;  display: block; top:0vw; left: 50%;
margin-left: -25vw;}

#somelement {
width: 200px;
position: absolute;
left: 50%;
margin-left: -25vw;
}

/* COLORI GLOBALI */

.lineafina{fill:none;stroke:#84724E;stroke-width:0.5;stroke-miterlimit:10;}
	.st1{fill:none;stroke:#84724E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{fill:#222221;}
	.st3{fill:#84724E;}

 /* FORMAZIONE */

.F-A1 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 800ms ease-in-out forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }
.F-A2 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash2 800ms ease-in-out backwards; animation-delay: 500ms; }
@keyframes dash2 { to { stroke-dashoffset: 0; } }
.F-A3 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash3 800ms ease-in-out forwards; animation-delay: 1000ms; }
@keyframes dash3 { to { stroke-dashoffset: 0; } }
.P-A1  { opacity:0; animation: opa 10ms ease-in-out forwards; animation-delay: 1500ms; }
@keyframes opa { to { opacity: 1; } }
.SPA1  { position:absolute; opacity:1; animation: spa 100ms ease-in-out forwards; animation-delay: 3000ms; }
@keyframes spa { to { opacity: 0; } }

 /* AUTONOMIA */

.F-B1 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashb 800ms ease-in-out forwards; animation-delay: 3000ms;}
@keyframes dashb { to { stroke-dashoffset: 0; } }
.F-B2 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashb2 800ms ease-in-out forwards; animation-delay: 3500ms; }
@keyframes dashb2 { to { stroke-dashoffset: 0; } }
.F-B3 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashb3 800ms ease-in-out forwards; animation-delay: 4000ms; }
@keyframes dashb3 { to { stroke-dashoffset: 0; } }
.P-B1  { opacity:0; animation: opb 10ms ease-in-out forwards; animation-delay: 4500ms; }
@keyframes opb { to { opacity: 1; } }
.SPB1  { opacity:1; animation: spb 100ms ease-in-out forwards; animation-delay: 6000ms; }
@keyframes spb { to { opacity: 0; } }

 /* VELOCITA */

.F-C1 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashc 800ms ease-in-out forwards; animation-delay: 6000ms;}
@keyframes dashc { to { stroke-dashoffset: 0; } }
.F-C2 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashc2 800ms ease-in-out forwards; animation-delay: 6500ms; }
@keyframes dashc2 { to { stroke-dashoffset: 0; } }
.F-C3 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashc3 800ms ease-in-out forwards; animation-delay: 7000ms; }
@keyframes dashc3 { to { stroke-dashoffset: 0; } }
.P-C1  { opacity:0; animation: opc 10ms ease-in-out forwards; animation-delay: 7500ms; }
@keyframes opc { to { opacity: 1; } }
.SPC1  { opacity:1; animation: spc 100ms ease-in-out forwards; animation-delay: 9000ms; }
@keyframes spc { to { opacity: 0; } }

 /* PREFINALE */

.F-D101 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashd01 300ms ease-in-out forwards; animation-delay: 9000ms;}
@keyframes dashd01 { to { stroke-dashoffset: 0; } }
.F-D102 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashd02 300ms ease-in-out forwards; animation-delay: 9300ms;}
@keyframes dashd02 { to { stroke-dashoffset: 0; } }
.F-D103 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashd03 300ms ease-in-out forwards; animation-delay: 9600ms;}
@keyframes dashd03 { to { stroke-dashoffset: 0; } }
.F-D104 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashd04 300ms ease-in-out forwards; animation-delay: 9900ms;}
@keyframes dashd04 { to { stroke-dashoffset: 0; } }
.F-D105 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashd05 300ms ease-in-out forwards; animation-delay: 10200ms;}
@keyframes dashd05 { to { stroke-dashoffset: 0; } }
.F-D106 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashd06 300ms ease-in-out forwards; animation-delay: 10500ms;}
@keyframes dashd06 { to { stroke-dashoffset: 0; } }
.F-D107 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashd07 300ms ease-in-out forwards; animation-delay: 10800ms;}
@keyframes dashd07 { to { stroke-dashoffset: 0; } }

.F-D2 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashd2 800ms ease-in-out forwards; animation-delay: 10500ms; }
@keyframes dashd2 { to { stroke-dashoffset: 0; } }
.F-D3 { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashd3 800ms ease-in-out forwards; animation-delay: 11000ms; }
@keyframes dashd3 { to { stroke-dashoffset: 0; } }
.P-D1  { opacity:0; animation: opd 10ms ease-in-out forwards; animation-delay: 11500ms; }
@keyframes opd { to { opacity: 1; } }
.SPD1  { opacity:1; animation: spd 1500ms ease-in-out forwards; animation-delay: 12000ms; }
@keyframes spd { to { opacity: 0; } }

 /* FINALE */

.FE  { opacity:0; animation: ope 1500ms ease-in-out forwards; animation-delay: 11500ms; }
@keyframes ope { to { opacity:1; } }
.SPE1  { opacity:1;  }

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console