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

              
                <svg class="verbier" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920px" height="720px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 19200 7200"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
    .fil0 {fill:red}
    .white {fill:white}
    .black {fill:black;fill-rule:nonzero}
    .azure {fill:#99EEFF;fill-rule:nonzero}
    .green {fill:#AAFF99;fill-rule:nonzero}
    .purple {fill:#FF33FF;fill-rule:nonzero}
    .red {fill:#FF7777;fill-rule:nonzero}
    .yellow {fill:#FFF999;fill-rule:nonzero}
  </style>
   <clipPath id="id0">
    <rect width="19200" height="7200"/>
   </clipPath>
 </defs>
 <g id="trails">
  <g style="clip-path:url(#id0)">
   <image id="Verbier.jpg" x="0" y="0" width="19200" height="7200" xlink:href="http://devtool.ru/wp-content/uploads/playground/Verbier.jpg"/>
  </g>
  <path class="yellow" d="M10215 470c315,115 280,165 255,250 -25,85 67,201 200,320 109,118 -101,193 -93,331 26,448 570,954 677,1619 10,66 22,135 38,215 35,169 97,287 176,383 738,895 146,668 713,1274 639,683 573,1523 573,2338l-582 0c0,-721 375,-1583 -173,-2168 -597,-639 -86,-513 -724,-1286 -102,-125 -121,-222 -165,-436 -18,-85 -19,-202 -30,-270 -35,-220 -72,-399 -290,-810 -193,-365 -170,-369 -290,-750 -80,-254 178,-330 90,-409 -260,-251 -195,-331 -175,-426 44,-68 -78,-97 -200,-175z"/>
  <path class="azure" d="M10230 760c-12,175 -9,316 10,410 18,93 158,865 240,1020 283,533 184,728 10,1143 -160,383 -604,1052 -70,1347 308,170 360,316 330,740 -33,467 505,1027 949,1780l-691 0c-484,-820 -553,-1340 -518,-1840 23,-331 -42,-397 -210,-490 -731,-404 -225,-1145 -21,-1634 401,-636 224,-871 151,-1016 -58,-115 -194,-894 -230,-1100 -41,-231 16,-359 20,-395 3,-30 10,-185 10,-255 22,123 28,177 20,290z"/>
  <path class="red" d="M9790 950c-140,270 -520,430 -589,520 -5,6 -687,668 -831,820 -317,334 -672,921 -706,1369 -12,161 -24,312 -106,454 -31,52 -56,95 -81,138 -190,319 -377,634 -378,993 -1,146 308,271 567,376 125,51 241,98 325,151 146,90 384,258 651,446 528,373 1455,934 1645,983l-1048 0c-119,-170 -375,-466 -919,-850 -326,-230 -361,-341 -748,-498 -330,-135 -724,-294 -722,-609 2,-428 206,-771 412,-1119 28,-49 57,-97 80,-137 53,-91 63,-215 73,-346 29,-379 674,-1288 995,-1561 321,-273 750,-720 920,-790 357,-142 352,-265 598,-643 52,-79 212,-175 282,-177 -151,67 -245,107 -420,480z"/>
  <path class="green" d="M9993 861c6,57 -31,209 -141,329 -46,74 -117,239 -120,270 -130,400 -174,592 -310,860 -115,140 -274,324 -117,428 494,327 526,1034 217,1486 -59,87 -113,165 -116,250 -1,43 -4,73 -6,104 -6,72 -12,147 -4,231 25,279 -69,377 -160,472 -523,545 1444,1620 1772,1909l-721 0c-425,-373 -1879,-1406 -1231,-2082 52,-54 107,-111 92,-277 -10,-109 -3,-193 3,-273 3,-35 5,-70 6,-92 6,-159 78,-265 159,-382 229,-336 272,-900 -102,-1147 -175,-116 -196,-318 -50,-559 290,-322 415,-736 573,-1106 30,-70 235,-260 225,-432 -10,-170 50,-258 224,-376 -102,141 -222,141 -193,387z"/>
  <path class="purple" d="M10421 521c70,50 289,100 613,277 174,96 699,453 646,675 -49,249 -17,28 64,527 26,160 384,411 394,651 2,50 89,106 191,172 322,208 607,669 871,1157 325,602 540,1480 620,2120 50,398 -108,722 -342,1100l-724 0c383,-350 644,-719 696,-1170 73,-627 -190,-1355 -483,-1923 -225,-436 -457,-871 -773,-1074 -161,-104 -298,-192 -305,-372 -8,-184 -91,-293 -156,-378 -64,-84 -116,-151 -113,-253 8,-377 -134,-302 -60,-510 11,-14 70,-151 -140,-380 -110,-120 -351,-243 -510,-330 -294,-161 -578,-328 -685,-334l196 45z"/>
  <path id="marker" class="fil0" d="M10215 470l88 -198c7,-14 11,-30 11,-47 0,-55 -44,-99 -99,-99 -55,0 -100,44 -100,99 0,17 4,33 12,47l88 198zm54 -245c0,30 -24,55 -54,55 -30,0 -55,-25 -55,-55 0,-30 25,-54 55,-54 30,0 54,24 54,54z"/>
  </g>
</svg>
<div class="container">
  <div class="text-wrapper">
    <p id="alt">Высота 3 223 м</p>
    <p id="line-a">Line-A</p>
    <p id="line-b">Line-B</p>
    <p id="line-c">Line-С</p>
    <p id="line-d">Line-D</p>
    <p id="line-e">Line-E</p>
  </div>
</div>
              
            
!

CSS

              
                * {
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  transform-origin: 50% 50%;
}

body {
  margin: 0;
}
p {
  font-family: "Ubuntu";
  font-size: 25pt;
}

#alt,
#line-a,
#line-b,
#line-c,
#line-d,
#line-e {
  display: none;
}


.red,
.green,
.blue,
.azure,
.yellow,
.purple {
  opacity: 0.5;
}
.red:hover,
.green:hover,
.blue:hover,
.azure:hover,
.yellow:hover,
.purple:hover {
  opacity: 1;
  cursor: pointer;
}
.verbier {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -960px;
  overflow: scroll;
  transform-origin: top center;
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.text-wrapper {
  position: fixed;
  top: 0;
}
#marker:hover {
  fill: #333666;
  cursor: pointer;
}

@media only screen and (max-width: 780px) {
  p {
    font-size: 15pt;
  }
  .verbier {
    transform: scale(0.6);
  }
}
@media only screen and (max-width: 480px) {
  p {
    font-size: 10pt;
  }
  .verbier {
    transform: scale(0.5);
  }
}
              
            
!

JS

              
                $("#marker").hover(function(){
  $("#alt").css("display", "block");
  }, function(){
  $("#alt").css("display", "none");
});

$(".red").hover(function(){
  $("#line-a").css("display", "block");
  }, function(){
  $("#line-a").css("display", "none");
});

$(".green").hover(function(){
  $("#line-b").css("display", "block");
  }, function(){
  $("#line-b").css("display", "none");
});

$(".azure").hover(function(){
  $("#line-c").css("display", "block");
  }, function(){
  $("#line-c").css("display", "none");
});

$(".yellow").hover(function(){
  $("#line-d").css("display", "block");
  }, function(){
  $("#line-d").css("display", "none");
});

$(".purple").hover(function(){
  $("#line-e").css("display", "block");
  }, function(){
  $("#line-e").css("display", "none");
});
              
            
!
999px

Console