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 width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="title desc" role="img" id="logo">
  <!-- follows accessibility recommendations at https://www.sitepoint.com/tips-accessible-svg/ -->
  <title id="title">Bryan Braun</title>
  <desc id="desc">Logo</desc>

  <defs>
    <radialGradient id="logo-radial-gradient0" fx="50%" fy="0%" cx="50%" cy="0%" r="90%">
      <!-- ghostlight -->
      <stop offset="0%"   stop-color="#72EC82" stop-opacity="1"/>
      <stop offset="50%" stop-color="#3D8358" stop-opacity="1" />
      <stop offset="100%" stop-color="#224A57" stop-opacity="1" />
    </radialGradient>
      
    <radialGradient id="logo-radial-gradient1" fx="50%" fy="0%" cx="50%" cy="0%" r="90%">
      <!-- sun -->
      <stop offset="0%"   stop-color="#FFFCE7" stop-opacity="1"/>
      <stop offset="20%" stop-color="#FFFA60" stop-opacity="1" />
      <stop offset="60%" stop-color="#FFA44C" stop-opacity="1" />
      <stop offset="100%" stop-color="#FF0000" stop-opacity="1" />
    </radialGradient>

    <radialGradient id="logo-radial-gradient2" fx="50%" fy="0%" cx="50%" cy="0%" r="90%">
      <!-- night sky -->
      <stop offset="0%"   stop-color="#99CCDD" stop-opacity="1"/>
      <stop offset="100%" stop-color="#111039" stop-opacity="1" />
    </radialGradient>
    
    <linearGradient id="logo-linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%"   stop-color="#99CCDD" stop-opacity="1"/>
      <stop offset="100%" stop-color="#5599AA" stop-opacity="1" />
    </linearGradient>
    
  </defs>

  <rect id="logo-stroke-box" x="10" y="10" width="224" height="224" stroke-width="8" />
  <rect id="logo-mask-box"   x="10" y="10" width="224" height="224"  mask="url(#logo-name)"/>

  <mask id="logo-name" fill="#FFFFFF">
    <g id="Bryan" transform="translate(45.000000, 48.000000)">
      <path id="B__1" transform="translate(0,0)" d="M0.697265625,60 L0.697265625,0.091796875 L14.3916016,0.091796875 C19.8356392,0.091796875 23.8704296,1.30825606 26.4960938,3.74121094 C29.1217579,6.17416581 30.4345703,9.95602903 30.4345703,15.0869141 C30.4345703,22.72302 27.5680625,26.9384726 21.8349609,27.7333984 C25.3759943,28.6005903 27.9594645,30.2687051 29.5854492,32.737793 C31.2114339,35.2068808 32.0244141,38.585265 32.0244141,42.8730469 C32.0244141,48.2689072 30.7597783,52.4723157 28.2304688,55.4833984 C25.7011592,58.4944812 21.834987,60 16.6318359,60 L0.697265625,60 Z M9.04394531,54.0019531 L14.6806641,54.0019531 C18.2939634,54.0019531 20.7630142,53.1528405 22.0878906,51.4545898 C23.412767,49.7563392 24.0751953,46.8958534 24.0751953,42.8730469 C24.0751953,39.0429496 23.2863035,36.1824639 21.7084961,34.2915039 C20.1306887,32.4005439 17.5592626,31.4550781 13.9941406,31.4550781 L9.04394531,31.4550781 L9.04394531,54.0019531 Z M9.04394531,25.0957031 L13.9580078,25.0957031 C17.4026865,25.0957031 19.7934503,24.3308996 21.1303711,22.8012695 C22.4672918,21.2716395 23.1357422,18.7002134 23.1357422,15.0869141 C23.1357422,13.9065696 23.0514331,12.8767948 22.8828125,11.9975586 C22.7141919,11.1183224 22.4973972,10.365563 22.2324219,9.73925781 C21.9674466,9.1129526 21.5639676,8.58903206 21.0219727,8.16748047 C20.4799778,7.74592888 19.9319689,7.40869267 19.3779297,7.15576172 C18.8238905,6.90283077 18.0711311,6.71012436 17.1196289,6.57763672 C16.1681268,6.44514908 15.2527713,6.36084002 14.3735352,6.32470703 C13.494299,6.28857404 12.3681709,6.27050781 10.9951172,6.27050781 L9.04394531,6.27050781 L9.04394531,25.0957031 Z"></path>
      <path id="R__1" transform="translate(0,0)" d="M38.9619141,60 L38.9619141,17.21875 L46.875,17.21875 L46.875,23.3251953 C48.3444084,20.8681518 49.8559493,19.1458383 51.409668,18.1582031 C52.9633867,17.170568 54.6074132,16.6767578 56.3417969,16.6767578 C56.8235701,16.6767578 57.2571595,16.7008461 57.6425781,16.7490234 L57.6425781,25.4931641 C56.1731697,24.9391248 54.7278717,24.6621094 53.3066406,24.6621094 C51.9817642,24.6621094 50.8195037,24.9571911 49.8198242,25.5473633 C48.8201447,26.1375355 47.8385465,27.2034428 46.875,28.7451172 L46.875,60 L38.9619141,60 Z"></path>
      <path id="Y__1" transform="translate(0,0)" d="M63.8701172,70.6953125 L63.8701172,64.6972656 C67.3870619,64.6972656 69.6332959,64.3600294 70.6088867,63.6855469 C71.5844775,63.0110643 71.8434268,61.625987 71.3857422,59.5302734 C70.687171,56.5432793 70.2294933,54.5800828 70.0126953,53.640625 C69.1695921,50.0273257 67.7423603,43.9570739 65.730957,35.4296875 C63.7195537,26.9023011 62.2802778,20.8320493 61.4130859,17.21875 L69.4345703,17.21875 L75.1796875,49.1962891 L80.7441406,17.21875 L88.765625,17.21875 L78.5039062,62.3486328 C77.8294237,65.3838042 76.3901477,67.5336851 74.1860352,68.7983398 C71.9819226,70.0629946 68.8685097,70.6953125 64.8457031,70.6953125 L63.8701172,70.6953125 Z"></path>
      <path id="A__1" transform="translate(0,0)" d="M100.15918,60.6142578 C97.7262248,60.6142578 95.6847413,59.6085713 94.034668,57.597168 C92.3845946,55.5857647 91.5595703,53.2793099 91.5595703,50.6777344 C91.5595703,48.6542868 91.8907844,46.8175538 92.5532227,45.1674805 C93.2156609,43.5174071 93.9202437,42.1865285 94.6669922,41.1748047 C95.4137407,40.1630809 96.7084869,39.1092177 98.5512695,38.0131836 C100.394052,36.9171495 101.821284,36.1403018 102.833008,35.6826172 C103.844732,35.2249326 105.615222,34.4781953 108.144531,33.4423828 C108.289063,33.3701168 108.397461,33.3219402 108.469727,33.2978516 L108.469727,30.2265625 C108.469727,27.4563664 108.186689,25.4871478 107.620605,24.3188477 C107.054522,23.1505475 105.904306,22.5664062 104.169922,22.5664062 C101.182928,22.5664062 99.6894531,24.5898235 99.6894531,28.6367188 L99.6894531,30.7685547 L91.8486328,30.4794922 C91.8486328,30.0458963 91.8727211,29.5159537 91.9208984,28.8896484 C92.1617851,24.6259552 93.3541559,21.5185644 95.4980469,19.5673828 C97.6419378,17.6162012 100.713196,16.640625 104.711914,16.640625 C108.831075,16.640625 111.80598,17.7667531 113.636719,20.019043 C115.467457,22.2713329 116.382812,25.6617612 116.382812,30.1904297 L116.382812,49.7382812 C116.382812,52.966162 116.623696,56.3867007 117.105469,60 L109.878906,60 C109.373044,57.6152225 109.023764,55.5074961 108.831055,53.6767578 C108.228838,55.6038508 107.199063,57.2418552 105.741699,58.5908203 C104.284335,59.9397854 102.423514,60.6142578 100.15918,60.6142578 Z M102.302734,53.7490234 C103.314458,53.7490234 104.308101,53.3515665 105.283691,52.5566406 C106.259282,51.7617148 106.987953,50.978845 107.469727,50.2080078 L107.469727,38.1035156 C104.69953,39.6692787 102.86882,40.8255171 101.977539,41.5722656 C99.6650275,43.4511813 98.5087891,45.6793491 98.5087891,48.2568359 C98.5087891,49.9912196 98.8339811,51.3401645 99.484375,52.3037109 C100.134769,53.2672574 101.074213,53.7490234 102.302734,53.7490234 Z"></path>
      <path id="N__1" transform="translate(0,0)" d="M123.006836,60 L123.006836,17.21875 L130.919922,17.21875 L130.919922,21.4462891 C134.292335,18.242497 137.773094,16.640625 141.362305,16.640625 C142.566738,16.640625 143.608557,16.8935522 144.487793,17.3994141 C145.367029,17.905276 146.035479,18.5978146 146.493164,19.4770508 C146.950849,20.3562869 147.276041,21.2776645 147.46875,22.2412109 C147.661459,23.2047574 147.757812,24.2525985 147.757812,25.3847656 L147.757812,60 L139.844727,60 L139.844727,27.6972656 C139.844727,26.0592366 139.603844,24.8427774 139.12207,24.0478516 C138.640297,23.2529257 137.74903,22.8554688 136.448242,22.8554688 C134.85839,22.8554688 133.015635,23.7346917 130.919922,25.4931641 L130.919922,60 L123.006836,60 Z"></path>
    </g>
    <g id="Braun" transform="translate(45.000000, 132.000000)">
      <path id="B__2" transform="translate(0,0)" d="M0.697265625,60 L0.697265625,0.091796875 L14.3916016,0.091796875 C19.8356392,0.091796875 23.8704296,1.30825606 26.4960938,3.74121094 C29.1217579,6.17416581 30.4345703,9.95602903 30.4345703,15.0869141 C30.4345703,22.72302 27.5680625,26.9384726 21.8349609,27.7333984 C25.3759943,28.6005903 27.9594645,30.2687051 29.5854492,32.737793 C31.2114339,35.2068808 32.0244141,38.585265 32.0244141,42.8730469 C32.0244141,48.2689072 30.7597783,52.4723157 28.2304688,55.4833984 C25.7011592,58.4944812 21.834987,60 16.6318359,60 L0.697265625,60 Z M9.04394531,54.0019531 L14.6806641,54.0019531 C18.2939634,54.0019531 20.7630142,53.1528405 22.0878906,51.4545898 C23.412767,49.7563392 24.0751953,46.8958534 24.0751953,42.8730469 C24.0751953,39.0429496 23.2863035,36.1824639 21.7084961,34.2915039 C20.1306887,32.4005439 17.5592626,31.4550781 13.9941406,31.4550781 L9.04394531,31.4550781 L9.04394531,54.0019531 Z M9.04394531,25.0957031 L13.9580078,25.0957031 C17.4026865,25.0957031 19.7934503,24.3308996 21.1303711,22.8012695 C22.4672918,21.2716395 23.1357422,18.7002134 23.1357422,15.0869141 C23.1357422,13.9065696 23.0514331,12.8767948 22.8828125,11.9975586 C22.7141919,11.1183224 22.4973972,10.365563 22.2324219,9.73925781 C21.9674466,9.1129526 21.5639676,8.58903206 21.0219727,8.16748047 C20.4799778,7.74592888 19.9319689,7.40869267 19.3779297,7.15576172 C18.8238905,6.90283077 18.0711311,6.71012436 17.1196289,6.57763672 C16.1681268,6.44514908 15.2527713,6.36084002 14.3735352,6.32470703 C13.494299,6.28857404 12.3681709,6.27050781 10.9951172,6.27050781 L9.04394531,6.27050781 L9.04394531,25.0957031 Z"></path>
      <path id="R__2" transform="translate(0,0)" d="M38.9619141,60 L38.9619141,17.21875 L46.875,17.21875 L46.875,23.3251953 C48.3444084,20.8681518 49.8559493,19.1458383 51.409668,18.1582031 C52.9633867,17.170568 54.6074132,16.6767578 56.3417969,16.6767578 C56.8235701,16.6767578 57.2571595,16.7008461 57.6425781,16.7490234 L57.6425781,25.4931641 C56.1731697,24.9391248 54.7278717,24.6621094 53.3066406,24.6621094 C51.9817642,24.6621094 50.8195037,24.9571911 49.8198242,25.5473633 C48.8201447,26.1375355 47.8385465,27.2034428 46.875,28.7451172 L46.875,60 L38.9619141,60 Z"></path>
      <path id="A__2" transform="translate(0,0)" d="M69.1806641,60.6142578 C66.7477092,60.6142578 64.7062257,59.6085713 63.0561523,57.597168 C61.406079,55.5857647 60.5810547,53.2793099 60.5810547,50.6777344 C60.5810547,48.6542868 60.9122688,46.8175538 61.574707,45.1674805 C62.2371452,43.5174071 62.941728,42.1865285 63.6884766,41.1748047 C64.4352251,40.1630809 65.7299713,39.1092177 67.5727539,38.0131836 C69.4155366,36.9171495 70.8427684,36.1403018 71.8544922,35.6826172 C72.866216,35.2249326 74.6367061,34.4781953 77.1660156,33.4423828 C77.3105476,33.3701168 77.418945,33.3219402 77.4912109,33.2978516 L77.4912109,30.2265625 C77.4912109,27.4563664 77.2081734,25.4871478 76.6420898,24.3188477 C76.0760063,23.1505475 74.9257899,22.5664062 73.1914062,22.5664062 C70.2044121,22.5664062 68.7109375,24.5898235 68.7109375,28.6367188 L68.7109375,30.7685547 L60.8701172,30.4794922 C60.8701172,30.0458963 60.8942055,29.5159537 60.9423828,28.8896484 C61.1832694,24.6259552 62.3756403,21.5185644 64.5195312,19.5673828 C66.6634222,17.6162012 69.7346805,16.640625 73.7333984,16.640625 C77.8525597,16.640625 80.8274648,17.7667531 82.6582031,20.019043 C84.4889414,22.2713329 85.4042969,25.6617612 85.4042969,30.1904297 L85.4042969,49.7382812 C85.4042969,52.966162 85.6451799,56.3867007 86.1269531,60 L78.9003906,60 C78.3945287,57.6152225 78.0452484,55.5074961 77.8525391,53.6767578 C77.2503225,55.6038508 76.2205477,57.2418552 74.7631836,58.5908203 C73.3058195,59.9397854 71.4449983,60.6142578 69.1806641,60.6142578 Z M73.3242188,53.7490234 C74.3359426,53.7490234 75.329585,53.3515665 76.3051758,52.5566406 C77.2807666,51.7617148 78.0094377,50.978845 78.4912109,50.2080078 L78.4912109,38.1035156 C75.7210148,39.6692787 73.8903039,40.8255171 72.9990234,41.5722656 C70.6865119,43.4511813 69.5302734,45.6793491 69.5302734,48.2568359 C69.5302734,49.9912196 69.8554655,51.3401645 70.5058594,52.3037109 C71.1562533,53.2672574 72.095697,53.7490234 73.3242188,53.7490234 Z"></path>
      <path id="U__2" transform="translate(0,0)" d="M98.1347656,60.578125 C96.9303325,60.578125 95.8885135,60.3251978 95.0092773,59.8193359 C94.1300412,59.313474 93.4615908,58.6209354 93.0039062,57.7416992 C92.5462217,56.8624631 92.2210296,55.9410855 92.0283203,54.9775391 C91.835611,54.0139926 91.7392578,52.9661515 91.7392578,51.8339844 L91.7392578,17.21875 L99.6523438,17.21875 L99.6523438,49.5214844 C99.6523438,51.1595134 99.8932268,52.3759726 100.375,53.1708984 C100.856773,53.9658243 101.74804,54.3632812 103.048828,54.3632812 C104.63868,54.3632812 106.481435,53.4840583 108.577148,51.7255859 L108.577148,17.21875 L116.490234,17.21875 L116.490234,60 L108.577148,60 L108.577148,55.7724609 C105.204736,58.976253 101.723976,60.578125 98.1347656,60.578125 Z"></path>
      <path id="N__2" transform="translate(0,0)" d="M123,60 L123,17.21875 L130.913086,17.21875 L130.913086,21.4462891 C134.285499,18.242497 137.766258,16.640625 141.355469,16.640625 C142.559902,16.640625 143.601721,16.8935522 144.480957,17.3994141 C145.360193,17.905276 146.028644,18.5978146 146.486328,19.4770508 C146.944013,20.3562869 147.269205,21.2776645 147.461914,22.2412109 C147.654623,23.2047574 147.750977,24.2525985 147.750977,25.3847656 L147.750977,60 L139.837891,60 L139.837891,27.6972656 C139.837891,26.0592366 139.597008,24.8427774 139.115234,24.0478516 C138.633461,23.2529257 137.742194,22.8554688 136.441406,22.8554688 C134.851555,22.8554688 133.0088,23.7346917 130.913086,25.4931641 L130.913086,60 L123,60 Z"></path>
    </g>
  </mask>

  <style type="text/css"><![CDATA[
    #logo-mask-box {
      fill: url(#logo-linear-gradient);
    }
    #logo-stroke-box {
      stroke: url(#logo-linear-gradient);
      fill: transparent;
    }
  ]]></style>

  <script type="text/javascript"><![CDATA[
    (function() {
      var hoverGradients = ['logo-radial-gradient0', 'logo-radial-gradient1', 'logo-radial-gradient2'];
      var hoverGradientEls = {
        'logo-radial-gradient0': document.getElementById('logo-radial-gradient0'),
        'logo-radial-gradient1': document.getElementById('logo-radial-gradient1'),
        'logo-radial-gradient2': document.getElementById('logo-radial-gradient2')
      };
      var logoMaskBox = document.getElementById('logo-mask-box');
      var logoStrokeBox = document.getElementById('logo-stroke-box');
      var DEFAULT_FILL_VALUE = 'url(#logo-linear-gradient)';
      var activeGradientNum = 0;

      logoMaskBox.addEventListener('mouseenter', setHoverGradient);
      logoMaskBox.addEventListener('mousemove', positionHoverGradient);
      logoMaskBox.addEventListener('mouseleave', setDefaultGradient);
      logoMaskBox.addEventListener('click', toggleGradient);

      function getHoverFillValue() {
        return 'url(#' + hoverGradients[activeGradientNum] + ')';
      }

      function positionHoverGradient(event) {
        var currentGradientEl = hoverGradientEls[hoverGradients[activeGradientNum]],
            clientRect = logoMaskBox.getBoundingClientRect(),
            svgX = event.x - clientRect.left,
            svgY = event.y - clientRect.top,
            percentX = Math.round(100 * (svgX / clientRect.width)),
            percentY = Math.round(100 * (svgY / clientRect.height));

        currentGradientEl.fx.baseVal.valueAsString = '' + percentX + '%';
        currentGradientEl.fy.baseVal.valueAsString = '' + percentY + '%';
        currentGradientEl.cx.baseVal.valueAsString = '' + percentX + '%';
        currentGradientEl.cy.baseVal.valueAsString = '' + percentY + '%';
      }

      function setHoverGradient() {
        logoMaskBox.style.fill = getHoverFillValue();
        logoStrokeBox.style.stroke = getHoverFillValue();
      }

      function setDefaultGradient(event) {
        logoMaskBox.style.fill = DEFAULT_FILL_VALUE;
        logoStrokeBox.style.stroke = DEFAULT_FILL_VALUE;
      }

      function toggleGradient(event) {
        if (activeGradientNum === hoverGradients.length - 1) {
          activeGradientNum = 0;
        } else {
          activeGradientNum++;
        }
        setHoverGradient();
        positionHoverGradient(event);
      }

    })();
  ]]></script>

</svg>
<p class="hover">Hover and click on me</p>
            
          
!
            
              svg {
  display: block;
  margin: auto;
}
.hover {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
}
            
          
!
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