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 width="110px" height="40px" viewBox="0 0 110 40" xmlns:xlink="http://www.w3.org/1999/xlink">
  
    <title>Subscribe via RSS</title>

    <path d="M103.371,0.985 L104.123,0.986 C104.33,0.987 104.539,0.989 104.742,0.999 C105.121,1.008 105.56,1.026 105.988,1.107 C106.383,1.178 106.715,1.287 107.039,1.449 C107.359,1.615 107.654,1.829 107.914,2.087 C108.172,2.345 108.387,2.639 108.553,2.963 C108.715,3.285 108.824,3.617 108.895,4.013 C108.971,4.436 108.991,4.878 109,5.253 C109.006,5.46 109.008,5.668 109.008,5.878 C109.01,6.128 109.01,6.374 109.01,6.626 L109.01,33.379 C109.01,33.625 109.01,33.881 109.008,34.129 C109.008,34.336 109.006,34.545 109,34.75 C108.99,35.127 108.971,35.568 108.895,35.994 C108.825,36.381 108.715,36.719 108.553,37.047 C108.387,37.365 108.172,37.66 107.914,37.922 C107.654,38.176 107.359,38.389 107.037,38.549 C106.715,38.723 106.383,38.826 105.99,38.899 C105.556,38.973 105.097,39.003 104.746,39.01 C104.541,39.014 104.334,39.016 104.123,39.018 C103.873,39.02 103.621,39.02 103.371,39.02 L6.625,39.02 L6.618,39.02 C6.369,39.02 6.121,39.02 5.87,39.018 C5.667,39.016 5.458,39.014 5.253,39.01 C4.904,39.002 4.443,38.973 4.012,38.899 C3.617,38.827 3.285,38.723 2.961,38.549 C2.638,38.389 2.344,38.176 2.086,37.922 C1.829,37.66 1.615,37.365 1.448,37.047 C1.287,36.719 1.177,36.381 1.107,35.992 C1.025,35.566 1.008,35.127 0.999,34.75 C0.989,34.543 0.987,34.334 0.986,34.129 L0.986,33.529 L0.986,33.379 L0.986,6.625 L0.986,6.475 L0.986,5.877 C0.987,5.669 0.989,5.461 0.999,5.253 C1.008,4.879 1.025,4.439 1.107,4.012 C1.177,3.618 1.287,3.285 1.448,2.962 C1.615,2.639 1.83,2.345 2.087,2.087 C2.344,1.83 2.638,1.615 2.962,1.448 C3.285,1.287 3.617,1.178 4.012,1.107 C4.438,1.026 4.878,1.008 5.253,1 C5.46,0.99 5.668,0.988 5.876,0.987 L6.625,0.986 L103.371,0.986" fill="#AE63E4"></path>
      <path d="M16.857,28 C16.857,28.9526667 16.5236667,29.7623333 15.857,30.429 C15.1903333,31.0956667 14.3806667,31.429 13.428,31.429 C12.4753333,31.429 11.6656667,31.0956667 10.999,30.429 C10.3323333,29.7623333 9.999,28.9526667 9.999,28 C9.999,27.0473333 10.3323333,26.2376667 10.999,25.571 C11.6656667,24.9043333 12.4753333,24.571 13.428,24.571 C14.3806667,24.571 15.1903333,24.9043333 15.857,25.571 C16.5236667,26.2376667 16.857,27.0473333 16.857,28 L16.857,28 Z M26,30.196 C26.024,30.5293333 25.9226667,30.815 25.696,31.053 C25.482,31.303 25.2023333,31.428 24.857,31.428 L22.446,31.428 C22.1486667,31.428 21.8926667,31.3296667 21.678,31.133 C21.4633333,30.9363333 21.3443333,30.6893333 21.321,30.392 C21.059,27.666 19.9606667,25.3356667 18.026,23.401 C16.0913333,21.4663333 13.761,20.368 11.035,20.106 C10.7376667,20.082 10.4906667,19.963 10.294,19.749 C10.0973333,19.535 9.999,19.279 9.999,18.981 L9.999,16.57 C9.999,16.2246667 10.124,15.945 10.374,15.731 C10.5766667,15.5283333 10.8326667,15.427 11.142,15.427 L11.231,15.427 C13.1356667,15.5816667 14.957,16.061 16.695,16.865 C18.433,17.669 19.9746667,18.7493333 21.32,20.106 C22.6773333,21.4513333 23.7576667,22.993 24.561,24.731 C25.3643333,26.469 25.8436667,28.2903333 25.999,30.195 L26,30.196 Z M35.143,30.232 C35.167,30.5533333 35.06,30.833 34.822,31.071 C34.608,31.309 34.3343333,31.428 34.001,31.428 L31.447,31.428 C31.1376667,31.428 30.8726667,31.3236667 30.652,31.115 C30.4313333,30.9063333 30.3153333,30.6533333 30.304,30.356 C30.1613333,27.7966667 29.56,25.365 28.5,23.061 C27.44,20.757 26.062,18.757 24.366,17.061 C22.67,15.365 20.67,13.987 18.366,12.927 C16.062,11.867 13.6303333,11.26 11.071,11.106 C10.7736667,11.094 10.5206667,10.978 10.312,10.758 C10.1033333,10.538 9.999,10.279 9.999,9.981 L9.999,7.427 C9.999,7.09366667 10.118,6.82 10.356,6.606 C10.57,6.392 10.832,6.285 11.142,6.285 L11.196,6.285 C14.3153333,6.43966667 17.3003333,7.154 20.151,8.428 C23.0016667,9.702 25.5343333,11.452 27.749,13.678 C29.975,15.892 31.725,18.4246667 32.999,21.276 C34.273,24.1273333 34.9873333,27.1123333 35.142,30.231 L35.143,30.232 Z" fill="#FFFFFF"></path>
  
    <text font-family='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' font-size="10" font-weight="normal" fill="#FFFFFF" x="43" y="14">
      Subscribe via
    </text>
    <text font-family='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' font-size="18" font-weight="500" fill="#FFFFFF" x="43" y="31">
      RSS
    </text>

</svg>

<svg width="110px" height="40px" viewBox="0 0 110 40" xmlns:xlink="http://www.w3.org/1999/xlink">

  <title>Subscribe on Android</title>

  <path d="M103.371,0.985 L104.123,0.986 C104.33,0.987 104.539,0.989 104.742,0.999 C105.121,1.008 105.56,1.026 105.988,1.107 C106.383,1.178 106.715,1.287 107.039,1.449 C107.359,1.615 107.654,1.829 107.914,2.087 C108.172,2.345 108.387,2.639 108.553,2.963 C108.715,3.285 108.824,3.617 108.895,4.013 C108.971,4.436 108.991,4.878 109,5.253 C109.006,5.46 109.008,5.668 109.008,5.878 C109.01,6.128 109.01,6.374 109.01,6.626 L109.01,33.379 C109.01,33.625 109.01,33.881 109.008,34.129 C109.008,34.336 109.006,34.545 109,34.75 C108.99,35.127 108.971,35.568 108.895,35.994 C108.825,36.381 108.715,36.719 108.553,37.047 C108.387,37.365 108.172,37.66 107.914,37.922 C107.654,38.176 107.359,38.389 107.037,38.549 C106.715,38.723 106.383,38.826 105.99,38.899 C105.556,38.973 105.097,39.003 104.746,39.01 C104.541,39.014 104.334,39.016 104.123,39.018 C103.873,39.02 103.621,39.02 103.371,39.02 L6.625,39.02 L6.618,39.02 C6.369,39.02 6.121,39.02 5.87,39.018 C5.667,39.016 5.458,39.014 5.253,39.01 C4.904,39.002 4.443,38.973 4.012,38.899 C3.617,38.827 3.285,38.723 2.961,38.549 C2.638,38.389 2.344,38.176 2.086,37.922 C1.829,37.66 1.615,37.365 1.448,37.047 C1.287,36.719 1.177,36.381 1.107,35.992 C1.025,35.566 1.008,35.127 0.999,34.75 C0.989,34.543 0.987,34.334 0.986,34.129 L0.986,33.529 L0.986,33.379 L0.986,6.625 L0.986,6.475 L0.986,5.877 C0.987,5.669 0.989,5.461 0.999,5.253 C1.008,4.879 1.025,4.439 1.107,4.012 C1.177,3.618 1.287,3.285 1.448,2.962 C1.615,2.639 1.83,2.345 2.087,2.087 C2.344,1.83 2.638,1.615 2.962,1.448 C3.285,1.287 3.617,1.178 4.012,1.107 C4.438,1.026 4.878,1.008 5.253,1 C5.46,0.99 5.668,0.988 5.876,0.987 L6.625,0.986 L103.371,0.986" fill="#47CF73"></path>
  <path d="M20.3,11.73792 L20.3,10.5832 L19.2176,10.5832 L19.2176,11.73792 L20.3,11.73792 L20.3,11.73792 Z M14.7824,11.73792 L14.7824,10.5832 L13.7,10.5832 L13.7,11.73792 L14.7824,11.73792 L14.7824,11.73792 Z M20.8676,8.53472 C22.5176,9.74208 23.6,11.7368 23.6,13.94208 L10.4,13.94208 C10.4,11.7368 11.4318,9.74208 13.0818,8.53472 L11.6375,7.06416 C11.4307,6.8536 11.4307,6.48624 11.6375,6.2768 C11.8443,6.06736 12.2051,6.06624 12.4108,6.2768 L14.0608,7.9568 C14.9375,7.48416 15.9682,7.22208 17,7.22208 C18.0318,7.22208 19.0108,7.48416 19.8875,7.9568 L21.5375,6.2768 C21.7443,6.06624 22.1051,6.06624 22.3108,6.2768 C22.5165,6.48736 22.5176,6.85472 22.3108,7.06416 L20.8676,8.53472 Z M26.3324,15.09792 C27.2608,15.09792 27.9824,15.83264 27.9824,16.77792 L27.9824,24.6 C27.9824,25.54528 27.2608,26.28 26.3324,26.28 C25.404,26.28 24.6824,25.54528 24.6824,24.6 L24.6824,16.77792 C24.6824,15.83264 25.404,15.09792 26.3324,15.09792 L26.3324,15.09792 Z M7.6676,15.09792 C8.596,15.09792 9.3176,15.83264 9.3176,16.77792 L9.3176,24.6 C9.3176,25.54528 8.596,26.28 7.6676,26.28 C6.7392,26.28 6.0176,25.54528 6.0176,24.6 L6.0176,16.77792 C6.0176,15.83264 6.7392,15.09792 7.6676,15.09792 L7.6676,15.09792 Z M10.4,26.28 L10.4,15.09792 L23.6,15.09792 L23.6,26.28 C23.6,26.91056 23.1358,27.38208 22.5176,27.38208 L21.3835,27.38208 L21.3835,31.32 C21.3835,32.26528 20.6619,33 19.7335,33 C18.8051,33 18.0835,32.26528 18.0835,31.32 L18.0835,27.38208 L15.9176,27.38208 L15.9176,31.32 C15.9176,32.26528 15.196,33 14.2676,33 C13.3392,33 12.6176,32.26528 12.6176,31.32 L12.6176,27.38208 L11.4835,27.38208 C10.8642,27.38208 10.4011,26.90944 10.4011,26.28 L10.4,26.28 Z" fill="#FFFFFF"></path>
  <text x="34" y="14" font-family='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' font-size="10" font-weight="normal" fill="#FFFFFF">
    Subscribe on
  </text>
  <text x="33" y="31" font-family='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' font-size="18" font-weight="500" fill="#FFFFFF">
    Android
  </text>

</svg>

<svg width="110px" height="40px" viewBox="0 0 110 40" xmlns:xlink="http://www.w3.org/1999/xlink">
  
    <title>Subscribe on iTunes</title>

    <path d="M103.371,0 L6.625,0 C6.372,0 6.119,0 5.866,0.001 C5.652,0.002 5.443,0.005 5.23,0.01 C4.765,0.026 4.296,0.05 3.836,0.135 C3.369,0.217 2.936,0.355 2.516,0.571 C2.098,0.783 1.72,1.057 1.385,1.386 C1.056,1.721 0.783,2.098 0.57,2.517 C0.355,2.936 0.217,3.37 0.135,3.837 C0.048,4.297 0.025,4.766 0.009,5.231 C0.004,5.444 0.002,5.652 0.001,5.866 C0,6.119 0,6.372 0,6.625 L0,33.378 C0,33.626 0,33.884 0.001,34.134 C0.002,34.345 0.004,34.56 0.009,34.773 C0.025,35.244 0.049,35.707 0.135,36.162 C0.217,36.635 0.355,37.068 0.57,37.492 C0.782,37.9 1.055,38.291 1.385,38.613 C1.72,38.947 2.097,39.226 2.516,39.437 C2.935,39.654 3.369,39.781 3.836,39.875 C4.296,39.955 4.765,39.98 5.23,39.99 C5.443,39.994 5.652,39.996 5.866,39.998 C6.119,40 6.372,40 6.625,40 L103.372,40 C103.624,40 103.878,40 104.132,39.998 C104.343,39.996 104.558,39.994 104.773,39.99 C105.236,39.98 105.705,39.955 106.166,39.875 C106.627,39.781 107.061,39.654 107.486,39.437 C107.906,39.226 108.283,38.947 108.613,38.613 C108.941,38.291 109.22,37.9 109.431,37.492 C109.648,37.068 109.785,36.635 109.867,36.162 C109.949,35.707 109.978,35.244 109.99,34.773 C109.998,34.56 110,34.345 110,34.134 C110,33.885 110,33.627 110,33.379 L110,6.625 C110,6.371 110,6.119 109.998,5.865 C109.998,5.652 109.996,5.444 109.988,5.23 C109.976,4.765 109.947,4.296 109.865,3.836 C109.783,3.369 109.646,2.935 109.429,2.516 C109.218,2.097 108.939,1.72 108.611,1.385 C108.281,1.056 107.904,0.782 107.484,0.57 C107.058,0.355 106.625,0.216 106.164,0.134 C105.703,0.048 105.234,0.024 104.771,0.009 C104.556,0.004 104.341,0.002 104.13,0.001 C103.877,0 103.623,0 103.371,0 L103.371,0 L103.371,0 Z" fill="#A6A6A6"></path>
    <path d="M103.371,0.985 L104.123,0.986 C104.33,0.987 104.539,0.989 104.742,0.999 C105.121,1.008 105.56,1.026 105.988,1.107 C106.383,1.178 106.715,1.287 107.039,1.449 C107.359,1.615 107.654,1.829 107.914,2.087 C108.172,2.345 108.387,2.639 108.553,2.963 C108.715,3.285 108.824,3.617 108.895,4.013 C108.971,4.436 108.991,4.878 109,5.253 C109.006,5.46 109.008,5.668 109.008,5.878 C109.01,6.128 109.01,6.374 109.01,6.626 L109.01,33.379 C109.01,33.625 109.01,33.881 109.008,34.129 C109.008,34.336 109.006,34.545 109,34.75 C108.99,35.127 108.971,35.568 108.895,35.994 C108.825,36.381 108.715,36.719 108.553,37.047 C108.387,37.365 108.172,37.66 107.914,37.922 C107.654,38.176 107.359,38.389 107.037,38.549 C106.715,38.723 106.383,38.826 105.99,38.899 C105.556,38.973 105.097,39.003 104.746,39.01 C104.541,39.014 104.334,39.016 104.123,39.018 C103.873,39.02 103.621,39.02 103.371,39.02 L6.625,39.02 C6.369,39.02 6.121,39.02 5.87,39.018 C5.667,39.016 5.458,39.014 5.253,39.01 C4.904,39.002 4.443,38.973 4.012,38.899 C3.617,38.827 3.285,38.723 2.961,38.549 C2.638,38.389 2.344,38.176 2.086,37.922 C1.829,37.66 1.615,37.365 1.448,37.047 C1.287,36.719 1.177,36.381 1.107,35.992 C1.025,35.566 1.008,35.127 0.999,34.75 C0.989,34.543 0.987,34.334 0.986,34.129 L0.986,33.529 L0.986,33.379 L0.986,6.625 L0.986,6.475 L0.986,5.877 C0.987,5.669 0.989,5.461 0.999,5.253 C1.008,4.879 1.025,4.439 1.107,4.012 C1.177,3.618 1.287,3.285 1.448,2.962 C1.615,2.639 1.83,2.345 2.087,2.087 C2.344,1.83 2.638,1.615 2.962,1.448 C3.285,1.287 3.617,1.178 4.012,1.107 C4.438,1.026 4.878,1.008 5.253,1 C5.46,0.99 5.668,0.988 5.876,0.987 L6.625,0.986 L103.371,0.986 L51.9394531,12.0234375" fill="#000000"></path>
    <path d="M26.928,10.306 C27.802,9.213 28.4,7.726 28.234,6.217 C26.969,6.273 25.387,7.092 24.476,8.161 C23.67,9.103 22.95,10.647 23.136,12.099 C24.557,12.205 26.016,11.382 26.928,10.306 Z M30.128,19.784 C30.099,16.561 32.767,14.993 32.889,14.92 C31.378,12.717 29.036,12.416 28.213,12.392 C26.246,12.185 24.338,13.569 23.336,13.569 C22.314,13.569 20.771,12.412 19.108,12.446 C16.968,12.479 14.966,13.718 13.868,15.642 C11.602,19.565 13.292,25.33 15.463,28.5 C16.549,30.053 17.818,31.787 19.479,31.727 C21.104,31.659 21.711,30.69 23.672,30.69 C25.615,30.69 26.185,31.727 27.879,31.688 C29.623,31.659 30.721,30.127 31.769,28.561 C33.024,26.78 33.528,25.028 33.548,24.938 C33.507,24.924 30.161,23.646 30.128,19.784 Z" fill="#FFFFFF"></path>
  
  <text x="42" y="14" font-family='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' font-size="10" font-weight="normal" fill="#FFFFFF">
    Get it on
  </text>
  <text x="42" y="31" font-family='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' font-size="18" font-weight="500" fill="#FFFFFF">
    iTunes
  </text>
 
</svg>
              
            
!

CSS

              
                body {
  padding: 20px;
}

svg {
  width: 200px;
  height: auto;
}
              
            
!

JS

              
                
              
            
!
999px

Console