Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="remote-root root allow-hover">
  <div class="remote-outer">
    <svg class="remote-svg">
      <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <path id="remote-ring-button" d="M50 0c-13.807 0-26.296 5.608-35.344 14.656l35.344 35.344 35.344-35.344c-9.048-9.048-21.537-14.656-35.344-14.656z"/>
        </defs>
        <use class="button" role="button" tabindex="0" data-method="inputUp" data-repeat="true" xlink:href="#remote-ring-button"/>
        <use class="button" role="button" tabindex="0" data-method="inputRight" data-repeat="true" xlink:href="#remote-ring-button" transform="rotate(90 50 50)"/>
        <use class="button" role="button" tabindex="0" data-method="inputDown" data-repeat="true" xlink:href="#remote-ring-button" transform="rotate(180 50 50)"/>
        <use class="button" role="button" tabindex="0" data-method="inputLeft" data-repeat="true" xlink:href="#remote-ring-button" transform="rotate(270 50 50)"/>
        <circle cx="50" cy="50" r="23" class="mask"/>
        <rect x="47.5" y="-5" width="5" height="33" transform="rotate(45,  50, 50)" class="mask"/>
        <rect x="47.5" y="-5" width="5" height="33" transform="rotate(135, 50, 50)" class="mask"/>
        <rect x="47.5" y="-5" width="5" height="33" transform="rotate(225, 50, 50)" class="mask"/>
        <rect x="47.5" y="-5" width="5" height="33" transform="rotate(315, 50, 50)" class="mask"/>
        <circle class="button" role="button" tabindex="0" data-method="inputSelect" cx="50" cy="50" r="18"/>
      </svg>
      
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMin">
        <circle cx="14" cy="14" r="17" class="mask"/>
        <circle class="button" role="button" tabindex="0" data-method="inputHome" cx="14" cy="14" r="14" />
        <svg width="20" height="20" x="4" y="4" viewBox="-192 -384 2048 2048">
          <path class="icon" d="M1408 736v480q0 26-19 45t-45 19h-384v-384h-256v384h-384q-26 0-45-19t-19-45v-480q0-1 .5-3t.5-3l575-474 575 474q1 2 1 6zm223-69l-62 74q-8 9-21 11h-3q-13 0-21-7l-692-577-692 577q-12 8-24 7-13-2-21-11l-62-74q-8-10-7-23.5t11-21.5l719-599q32-26 76-26t76 26l244 204v-195q0-14 9-23t23-9h192q14 0 23 9t9 23v408l219 182q10 8 11 21.5t-7 23.5z"/>
        </svg>
      </svg>
        
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMaxYMin">
        <circle cx="86" cy="14" r="17" class="mask"/>
        <circle class="button" role="button" tabindex="0" data-method="inputInfo" cx="86" cy="14" r="14"/>
        <svg width="20" height="20" x="76" y="4" viewBox="-704 -384 2048 2048">
          <path class="icon" d="M640 1088v128q0 26-19 45t-45 19h-512q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h64v-384h-64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h384q26 0 45 19t19 45v576h64q26 0 45 19t19 45zm-128-1152v192q0 26-19 45t-45 19h-256q-26 0-45-19t-19-45v-192q0-26 19-45t45-19h256q26 0 45 19t19 45z"/>
        </svg>
      </svg>
        
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax">
        <circle cx="86" cy="86" r="17" class="mask"/>
        <circle class="button" role="button" tabindex="0" data-method="inputContextMenu" cx="86" cy="86" r="14"/>
        <svg width="20" height="20" x="76" y="76" viewBox="-256 -384 2048 2048">
          <path class="icon" d="M1536 1088v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/>
        </svg>
      </svg>
        
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMax">
        <circle cx="14" cy="86" r="17" class="mask"/>
        <circle class="button" role="button" tabindex="0" data-method="inputBack" cx="14" cy="86" r="14"/>
        <svg width="20" height="20" x="4" y="76" viewBox="-256 -384 2048 2048">
          <path class="icon" d="M1536 640v128q0 53-32.5 90.5t-84.5 37.5h-704l293 294q38 36 38 90t-38 90l-75 76q-37 37-90 37-52 0-91-37l-651-652q-37-37-37-90 0-52 37-91l651-650q38-38 91-38 52 0 90 38l75 74q38 38 38 91t-38 91l-293 293h704q52 0 84.5 37.5t32.5 90.5z"/>
        </svg>
      </svg>
    
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMin">
        <polygon id="remote-arrow" points="50,10 55,17 45,17" class="icon"/>
      </svg>
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMaxYMid slice">
        <use xlink:href="#remote-arrow" transform="rotate(90,50,50)" class="icon"/>
      </svg>
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMax">
        <use xlink:href="#remote-arrow" transform="rotate(180,50,50)" class="icon"/>
      </svg>
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMinYMid slice">
        <use xlink:href="#remote-arrow" transform="rotate(-90,50,50)" class="icon"/>
      </svg>
    </svg>
  </div>
</div>
</body>
</html>
 
html, body {
  height: 100%;
  fill: #ccc;
  background: #000;
  margin: 0;
  padding: 0;
}
​
.remote-svg {
  width: 100%;
  height: 50vh;
}
​
.mask,
.icon {
  fill: #000;
}
.icon {
  pointer-events: none;
  cursor: pointer;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jakearchibaldpro
0viewers