css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <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>
            
          
!
            
              * {
  -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);
  }
}
            
          
!
            
              $("#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
🕑 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.
Loading ..................

Console