Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <script type="text/x-scheme" bootstrap>
(define useState preactHooks.useState)
(define render preact.render)
(define h preact.h)

(define (debounce fn . rest)
   "(debounce fn)
    (debounce fn timeout)
    
    based on https://www.freecodecamp.org/news/javascript-debounce-example/"
   (let ((timeout (if (null? rest) 300 (car rest)))
         (timer))
     (lambda args
        (clearTimeout timer)
        (set! timer (setTimeout (lambda () (apply fn args)) timeout)))))

(define (Logo props)
  (sxml (svg (@ (xmlns "http://www.w3.org/2000/svg")
                (version "1.1")
                (width "74.076729mm")
                (height "38.746498mm")
                (viewBox "0 0 262.47661 137.29074"))
             (path (@ (style (string-append "fill:" props.color ";stroke:none"))
                      (d lips-path.innerHTML))))))

(define (App)
   (let* ((hook (useState "#000000"))
          (color (. hook 0))
          (setColor (. hook 1)))
     (sxml (div
             (label (@ (for "color"))
                    "Color of the logo: ")
             (input (@ (type "color")
                       (id "color")
                       (onInput (debounce (lambda (e)
                                              (setColor e.target.value))
                                          30))))
             (br)
             (Logo (@ (color color)))))))
    
    
(render (sxml (App))
        document.body)
</script>
<template id="lips-path">M 54.955078 33.652344 C 51.862462 33.652344 49.2844 35.291659 47.222656 38.568359 C 45.160897 41.808243 44.075276 46.132845 43.964844 51.544922 L 45.953125 51.544922 C 46.13721 48.19459 47.002523 45.72961 48.548828 44.146484 C 50.131954 42.526542 51.973706 41.714844 54.072266 41.714844 C 56.686263 41.714844 58.875368 43.298592 60.642578 46.464844 C 62.409785 49.631091 63.920103 54.509393 65.171875 61.099609 L 41.535156 112.01758 L 51.972656 112.01758 L 68.429688 74.685547 L 73.179688 96.113281 C 74.873262 103.73437 76.786495 108.4281 78.921875 110.19531 C 81.057251 111.9257 83.286008 112.79102 85.605469 112.79102 C 88.440367 112.79102 90.796169 111.46527 92.673828 108.81445 C 94.588307 106.16364 95.544922 101.93035 95.544922 96.113281 L 93.556641 96.113281 C 93.004387 101.93035 90.666457 104.83789 86.542969 104.83789 C 84.11306 104.83789 82.015257 103.62327 80.248047 101.19336 C 78.517657 98.72663 76.86047 93.8662 75.277344 86.613281 L 71.357422 69.107422 C 68.59616 56.663328 66.551971 48.470657 65.226562 44.53125 C 63.937974 40.555031 62.391918 37.758613 60.587891 36.138672 C 58.820684 34.481913 56.94319 33.652344 54.955078 33.652344 z M 28.519531 46.572266 C 24.765593 51.584174 21.990458 56.616129 20.193359 61.667969 C 18.655844 66.020943 17.886719 70.573846 17.886719 75.326172 C 17.886719 80.717463 18.915978 85.929064 20.972656 90.960938 C 23.029334 95.992812 25.544335 100.38473 28.519531 104.13867 L 32.384766 104.13867 C 26.414408 94.554152 23.427734 84.959962 23.427734 75.355469 C 23.427734 71.581565 23.858186 67.827719 24.716797 64.09375 C 25.41567 61.098584 26.373765 58.224301 27.591797 55.46875 C 28.37054 53.69162 29.968667 50.72556 32.384766 46.572266 L 28.519531 46.572266 z M 247.5918 46.572266 C 250.02789 50.765494 251.63535 53.761495 252.41406 55.558594 C 253.63211 58.314145 254.57891 61.188428 255.25781 64.183594 C 256.11643 67.877625 256.54688 71.60153 256.54688 75.355469 C 256.54688 84.959962 253.56217 94.554152 247.5918 104.13867 L 251.45508 104.13867 C 254.4103 100.38473 256.91597 95.992812 258.97266 90.960938 C 261.04929 85.929064 262.08789 80.717463 262.08789 75.326172 C 262.08789 70.573846 261.31877 66.020943 259.78125 61.667969 C 257.98418 56.616129 255.20903 51.584174 251.45508 46.572266 L 247.5918 46.572266 z M 117.96875 59.396484 L 117.96875 95.617188 L 142.08203 95.617188 L 142.08203 89.5625 L 123.9707 89.5625 L 123.9707 59.396484 L 117.96875 59.396484 z M 152.51953 59.396484 L 152.51953 95.617188 L 158.52148 95.617188 L 158.52148 59.396484 L 152.51953 59.396484 z M 168.95898 59.396484 L 168.95898 95.617188 L 174.96289 95.617188 L 174.96289 83.560547 L 187.07031 83.560547 C 190.37578 83.560547 193.21211 82.395676 195.57812 80.064453 C 197.94415 77.66364 199.12695 74.809374 199.12695 71.503906 C 199.12695 68.163643 197.94415 65.31133 195.57812 62.945312 C 193.21211 60.57929 190.37578 59.396484 187.07031 59.396484 L 168.95898 59.396484 z M 220.10742 59.396484 C 217.1499 59.396484 214.66261 60.43968 212.64453 62.527344 C 210.59167 64.580215 209.56445 67.051517 209.56445 69.939453 C 209.56445 72.896975 210.59167 75.40221 212.64453 77.455078 C 214.69741 79.50795 217.1847 80.533203 220.10742 80.533203 L 229.13672 80.533203 C 230.38932 80.533203 231.45045 80.985971 232.32031 81.890625 C 233.22497 82.79528 233.67773 83.856415 233.67773 85.074219 C 233.67773 85.700515 233.55605 86.292896 233.3125 86.849609 C 233.10373 87.406318 232.79058 87.893015 232.37305 88.310547 C 231.95552 88.693299 231.46882 89.006452 230.91211 89.25 C 230.35539 89.458772 229.76302 89.5625 229.13672 89.5625 L 209.56445 89.5625 L 209.56445 95.617188 L 229.13672 95.617188 C 232.05945 95.617187 234.54674 94.589978 236.59961 92.537109 C 238.68727 90.449442 239.73242 87.962151 239.73242 85.074219 C 239.73242 82.151488 238.68727 79.664196 236.59961 77.611328 C 234.54674 75.558456 232.05945 74.53125 229.13672 74.53125 L 220.10742 74.53125 C 218.82003 74.53125 217.74095 74.080436 216.87109 73.175781 C 216.00123 72.271127 215.56641 71.192049 215.56641 69.939453 C 215.56641 69.347945 215.67209 68.773507 215.88086 68.216797 C 216.12442 67.660088 216.45356 67.173391 216.87109 66.755859 C 217.28862 66.338331 217.77728 66.025178 218.33398 65.816406 C 218.8907 65.572859 219.48113 65.451172 220.10742 65.451172 L 239.73242 65.451172 L 239.73242 59.396484 L 220.10742 59.396484 z M 174.96289 65.451172 L 187.07031 65.451172 C 188.70565 65.451172 190.11582 66.041596 191.29883 67.224609 C 192.48184 68.407618 193.07227 69.833775 193.07227 71.503906 C 193.07227 73.139243 192.48184 74.549413 191.29883 75.732422 C 190.11582 76.915431 188.70565 77.507812 187.07031 77.507812 L 174.96289 77.507812 L 174.96289 65.451172 z</template>
!

CSS
!

JS 

              
                github('jcubic/lips');
!
999px

Console