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

              
                <svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-paperplane" viewBox="0 0 1024 1024">
	<title>paperplane</title>
	<path class="path1" d="M1009.376 5.12c-5.312-3.424-11.36-5.12-17.376-5.12-6.176 0-12.384 1.76-17.76 5.376l-960 640c-9.888 6.56-15.328 18.112-14.048 29.952 1.216 11.808 8.896 22.016 19.936 26.368l250.368 100.192 117.728 206.016c5.632 9.888 16.096 16 27.424 16.128 0.128 0 0.224 0 0.352 0 11.232 0 21.664-5.952 27.424-15.552l66.464-110.816 310.24 124.064c3.808 1.536 7.808 2.272 11.872 2.272 5.44 0 10.816-1.376 15.68-4.128 8.448-4.736 14.24-13.056 15.872-22.624l160-960c2.080-12.576-3.488-25.184-14.176-32.128zM100.352 664.864l741.6-494.432-539.2 577.184c-2.848-1.696-5.376-3.936-8.512-5.184l-193.888-77.568zM326.048 770.112c-0.064-0.128-0.16-0.192-0.224-0.32l606.176-648.8-516.768 805.184-89.184-156.064zM806.944 947.488l-273.312-109.312c-6.496-2.56-13.248-3.424-19.936-3.808l420.864-652.416-127.616 765.536z"></path>
</symbol>
<symbol id="icon-music" viewBox="0 0 1024 1024">
	<title>music</title>
	<path class="path1" d="M1001.152 15.008c-11.616-9.76-26.176-15.008-41.12-15.008-3.68 0-7.424 0.32-11.136 0.992l-544.064 96c-30.592 5.376-52.864 31.936-52.864 63.008v549.44c-32.48-23.552-74.624-37.44-121.408-37.44-27.2 0-54.4 4.512-80.928 13.312-60.736 20.256-109.44 60.864-133.632 111.488-18.688 39.136-21.088 81.696-6.848 119.872 24.352 65.216 93.536 107.328 176.256 107.328 27.2 0 54.4-4.448 80.896-13.312 60.704-20.192 109.408-60.8 133.6-111.36 10.4-21.824 15.264-44.672 15.456-67.328h0.576v-512c3.68 0 7.424-0.32 11.136-0.928l532.96-94.048v388.416c-32.512-23.552-74.624-37.44-121.44-37.44-27.2 0-54.432 4.512-80.928 13.312-60.736 20.256-109.44 60.864-133.568 111.488-18.688 39.136-21.12 81.696-6.88 119.872 24.384 65.216 93.504 107.328 176.256 107.328 27.2 0 54.432-4.448 80.928-13.312 60.672-20.192 109.376-60.8 133.568-111.36 10.432-21.824 15.264-44.672 15.488-67.328h0.576v-672c0-18.88-8.384-36.864-22.88-48.992zM246.016 950.016c-76.672 25.568-155.936 0.576-176.928-55.68-21.056-56.32 24.032-122.688 100.672-148.256 76.672-25.568 155.936-0.64 176.928 55.68 21.088 56.288-24 122.688-100.672 148.256zM852.896 854.016c-76.736 25.568-156 0.576-176.992-55.68-21.056-56.32 24.064-122.688 100.672-148.256 76.736-25.568 156-0.64 176.992 55.68 21.088 56.288-23.968 122.688-100.672 148.256zM958.72 160l-544.064 96v-96l544.064-96v96z"></path>
</symbol>
<symbol id="icon-world" viewBox="0 0 1024 1024">
	<title>world</title>
	<path class="path1" d="M496 0c-273.952 0-496 222.048-496 496s222.048 496 496 496 496-222.048 496-496-222.048-496-496-496zM927.2 480h-191.872c-1.76-70.88-14.368-138.592-36.736-200.576 43.2-18.016 83.136-41.984 119.552-70.304 64.736 72.672 105.216 167.040 109.056 270.88zM478.304 927.104c-53.184-44.288-97.792-101.792-130.432-168.576 41.888-13.088 86.272-20.256 132.128-21.728v190.368c-0.576 0-1.12-0.032-1.696-0.064zM513.632 64.896c60.352 50.24 109.6 117.536 142.912 196.032-45.632 15.584-94.112 24.64-144.576 26.24v-222.368c0.608 0.032 1.12 0.064 1.664 0.096zM566.944 70.336c88.32 14.688 167.552 55.936 229.248 115.648-33.504 25.696-70.112 47.456-109.696 63.936-29.12-69.024-69.984-130.048-119.552-179.584zM480 64.8v222.368c-50.464-1.632-98.976-10.656-144.576-26.24 33.312-78.496 82.56-145.792 142.912-196.032 0.576-0.032 1.088-0.064 1.664-0.096zM305.472 249.952c-39.52-16.48-76.16-38.24-109.664-63.936 61.664-59.712 140.928-100.96 229.248-115.648-49.6 49.504-90.432 110.528-119.584 179.584zM323.36 290.432c49.344 17.12 101.92 27.104 156.64 28.768v160.8h-191.328c1.728-67.008 13.6-131.040 34.688-189.568zM480 512v192.8c-50.464 1.536-99.264 9.792-145.248 24.608-27.712-65.984-44.064-139.488-46.080-217.408h191.328zM425.056 921.664c-79.136-13.152-151.008-47.616-209.44-97.664 31.52-21.856 65.6-40.352 102.016-54.4 27.904 57.856 64.416 109.216 107.424 152.064zM512 927.2v-190.368c45.824 1.472 90.24 8.64 132.128 21.728-32.672 66.784-77.248 124.288-130.432 168.576-0.544 0-1.12 0.032-1.696 0.064zM674.368 769.6c36.384 14.048 70.432 32.576 102.016 54.4-58.432 50.016-130.304 84.512-209.44 97.664 43.008-42.848 79.488-94.208 107.424-152.064zM657.248 729.408c-46.016-14.816-94.816-23.072-145.248-24.608v-192.8h191.328c-2.016 77.92-18.4 151.424-46.080 217.408zM512 480v-160.8c54.688-1.664 107.264-11.616 156.64-28.736 21.056 58.528 32.928 122.56 34.688 189.568h-191.328zM173.888 209.12c36.416 28.32 76.352 52.288 119.52 70.304-22.368 61.984-34.976 129.696-36.736 200.576h-191.872c3.84-103.84 44.32-198.208 109.088-270.88zM64.8 512h191.872c1.984 81.76 19.072 158.976 48.096 228.384-40.544 15.808-78.336 36.864-113.216 61.792-75.136-74.784-122.56-177.024-126.752-290.176zM800.448 802.144c-34.88-24.896-72.672-45.984-113.248-61.792 29.056-69.408 46.112-146.624 48.128-228.384h191.872c-4.192 113.184-51.648 215.424-126.752 290.176z"></path>
</symbol>
</defs>
</svg>

<div class="page">
  <svg class="icon icon-paperplane"><use xlink:href="#icon-paperplane"></use></svg>
  
  <svg class="icon icon-music"><use xlink:href="#icon-music"></use></svg>
  
  <svg class="icon icon-world"><use xlink:href="#icon-world"></use></svg>
</div>
              
            
!

CSS

              
                body {
  background: #0562dc;
}
.icon {
  width: 100px;
  height: 100px;
  margin: 30px;
  fill: white;
}
              
            
!

JS

              
                
              
            
!
999px

Console