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. 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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <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">

              
            
!

CSS

              
                 /* 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;  }

              
            
!

JS

              
                
              
            
!
999px

Console