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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <?xml version="1.0" encoding="UTF-8"?>
<svg width="34px" height="35px" viewBox="0 0 34 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
  <title>Chat Bubble</title>
  <desc>Created with Sketch.</desc>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Chat-Bubble" transform="translate(0.305871, 0.352399)" fill-rule="nonzero">
      <path d="M29.4665559,5.11718006 C23.6309625,-0.677447341 14.2071301,-1.71806393 7.3466106,2.85502143 C5.72105857,3.93858197 4.3598066,5.26384446 3.27239585,6.75524971 C-0.229528275,11.5582076 -0.891408567,18.0842541 1.60542449,23.8097539 C1.77074723,24.1478247 1.82499174,24.5283708 1.76059168,24.8983115 L0.0365117711,32.1100051 C-0.0822274537,32.6703433 0.0927134019,33.2520216 0.502013348,33.6577979 C0.835783317,33.9846867 1.29043081,34.1628688 1.76059168,34.1510505 C2.07403227,34.1431717 4.64865827,33.6555886 9.4844697,32.6883013 C9.85950853,32.6438171 10.297803,32.3355362 10.656844,32.4501794 C18.380722,34.9164425 27.4149008,31.8378657 30.5182446,27.1434614 C33.6215885,22.449057 35.3021493,10.9118075 29.4665559,5.11718006 Z" id="Outer-Bubble" fill="#163045"></path>
      <path d="M24.9322257,29.5927158 C21.2333904,31.6096416 15.7930845,31.6192322 11.8981816,30.0009249 C11.2163825,29.7148227 10.4839721,29.5645321 9.74308168,29.5586984 C9.4194367,29.5609335 9.09652394,29.5893769 8.77759693,29.643742 L3.95017317,30.290073 L4.65704594,25.5106251 C4.85277207,24.4718584 4.72659945,23.3990099 4.29498916,22.4320483 C2.65459969,18.5895767 3.16627502,14.2002515 5.21072217,10.5512082 C7.25516932,6.90216488 10.8825504,4.37922013 15.0532478,3.70545701 C19.4368785,2.99570986 23.8986894,4.00413077 27.0398516,7.10300809 C30.1810138,10.2018854 31.8583452,15.0628687 31.1389134,19.387489 C30.4194816,23.7121092 28.631061,27.5757901 24.9322257,29.5927158 Z" id="Inner-Bubble" fill="#FFFFFF"></path>
      <path d="M23.0911857,21.6565657 C23.5587491,21.6565657 23.937784,22.0356006 23.937784,22.5031639 C23.937784,22.5419395 23.9351201,22.5806693 23.9298109,22.6190797 C23.852899,23.1755208 23.3870951,23.5961227 22.8257166,23.6160318 L11.4290982,24.0202085 C10.7881715,24.0429388 10.2501714,23.5417915 10.2274411,22.9008649 L10.2267116,22.6565657 C10.2267116,22.1042809 10.6744268,21.6565657 11.2267116,21.6565657 L23.0911857,21.6565657 Z M19.2474812,16.8439955 C20.05143,16.8439955 20.780925,17.314654 21.1122869,18.047138 C21.3062271,18.4758481 21.1159086,18.9806058 20.6871986,19.1745461 C20.5768584,19.2244619 20.4571443,19.2502806 20.3360387,19.2502806 L11.4298541,19.2502806 C10.7653768,19.2502806 10.2267116,18.7116153 10.2267116,18.047138 C10.2267116,17.3826608 10.7653768,16.8439955 11.4298541,16.8439955 L19.2474812,16.8439955 Z M11.4297001,12.0506732 L24.3036024,12.2566556 C24.8375887,12.2651994 25.2659933,12.7005133 25.2659933,13.2345679 C25.2659933,13.7658923 24.835861,14.1969281 24.3045379,14.1980805 C22.4193676,14.2020364 20.6481825,14.2177455 18.9909826,14.2452076 C17.2589598,14.2739097 14.7383708,14.3282886 11.4292155,14.4083444 C10.7809631,14.4240148 10.2427376,13.9112159 10.227055,13.2629638 L10.2267116,13.2345679 L10.2267116,13.2345679 C10.2267116,12.5806372 10.7568271,12.0505217 11.4107578,12.0505217 L11.4297001,12.0506732 L11.4297001,12.0506732 Z" id="Talk-Lines" fill="#163045"></path>
    </g>
  </g>
</svg>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console