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" standalone="no"?>
<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>fu-logo</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="funnis-logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="fu-logo" fill="#CDD0D2">
            <g id="まる">
                <path class="fu-circle" d="M0,125 C0,194.031142 55.9688581,250 125,250 C194.031142,250 250,194.031142 250,125 C250,55.9688581 194.031142,0 125,0 C55.9688581,0 0,55.9688581 0,125 Z M21.6262976,124.134948 C21.6262976,67.0415225 67.9065744,20.7612457 125,20.7612457 C182.093426,20.7612457 228.373702,67.0415225 228.373702,124.134948 C228.373702,181.228374 182.093426,227.508651 125,227.508651 C67.9065744,227.508651 21.6262976,181.228374 21.6262976,124.134948 Z"></path>
            </g>
            <g id="ふ" class="fu-typo" transform="translate(78.000000, 82.000000)">
                <path d="M22.3460208,35.9065744 L9.5432526,35.9065744 C9.5432526,46.0276817 8.76470588,53.899654 7.20761246,59.5224913 C5.65051903,65.1453287 3.57439446,68.6920415 0.806228374,70.2491349 L0.806228374,88.5017301 C8.24567474,84.6089965 13.7820069,77.7750865 17.4152249,68.0865052 C20.7024221,59.2629758 22.3460208,48.5363322 22.3460208,35.9065744 L22.3460208,35.9065744 L22.3460208,35.9065744 Z" id="ふ1"></path>
                <path d="M76.2387543,13.2422145 L76.2387543,0.525951557 L9.5432526,0.525951557 L9.5432526,13.4152249 L53.6608997,13.4152249 C47.3460208,16.8754325 42.5882353,20.0761246 39.3875433,23.017301 C36.2733564,25.9584775 34.6297578,28.8131488 34.6297578,31.6678201 C34.6297578,34.4359862 36.3598616,37.2906574 39.9065744,40.2318339 C46.1349481,45.5086505 49.3356401,48.1903114 49.5086505,48.449827 C52.9688581,52.2560554 54.6989619,56.6678201 54.6989619,61.5986159 C54.6989619,65.6643599 53.4013841,68.7785467 50.8927336,71.0276817 C48.384083,73.2768166 44.4913495,74.3148789 39.3875433,74.3148789 C36.532872,74.3148789 33.7647059,73.9688581 31.083045,73.3633218 C28.4013841,72.7577855 25.9792388,71.8062284 23.9896194,70.5951557 L23.9896194,84.9550173 C26.4982699,86.16609 29.266436,86.9446367 32.0346021,87.3771626 C34.8892734,87.8096886 38.349481,88.0692042 42.5017301,88.0692042 C51.1522491,88.0692042 57.7266436,85.6470588 62.3114187,80.8892734 C66.6366782,76.4775087 68.799308,70.4221453 68.799308,62.7231834 C68.799308,56.6678201 67.0692042,51.3044983 63.6089965,46.5467128 C61.8788927,44.1245675 58.7647059,41.0968858 54.1799308,37.2906574 C50.8927336,34.5224913 49.1626298,32.4463668 49.1626298,31.0622837 C49.2491349,26.3910035 58.2456747,20.4221453 76.2387543,13.2422145 L76.2387543,13.2422145 L76.2387543,13.2422145 Z" id="ふ2"></path>
                <path d="M92.4152249,85.8200692 C92.4152249,77.5155709 91.982699,68.9515571 91.0311419,60.1280277 C90.0795848,51.3044983 88.8685121,43.1730104 87.2249135,35.9065744 L74.7681661,35.9065744 C76.4982699,43.1730104 77.7958478,51.2179931 78.6608997,60.0415225 C79.5259516,68.8650519 80.0449827,77.4290657 80.0449827,85.8200692 L92.4152249,85.8200692 L92.4152249,85.8200692 L92.4152249,85.8200692 Z" id="ふ3"></path>
            </g>
        </g>
    </g>
</svg>
              
            
!

CSS

              
                body {
  text-align:center;
  padding:1em;
}
.fu-circle:hover {
  fill:#333;
}
.fu-typo:hover {
  fill:#333;
}
              
            
!

JS

              
                
              
            
!
999px

Console