css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              .container
  span.icon(data-browser="safari")
    svg(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 512 512')
      circle(cx='256', cy='256', r='256', fill='#1da2f8')
      g(fill='#f2f2f2')
        path(d='M256 37.89c-1.724 0-3.122-1.398-3.122-3.122V20.482c0-1.724 1.398-3.122 3.122-3.122s3.122 1.398 3.122 3.122v14.286c0 1.724-1.398 3.122-3.122 3.122zM256 494.64c-1.724 0-3.122-1.398-3.122-3.122v-14.286c0-1.724 1.398-3.122 3.122-3.122s3.122 1.398 3.122 3.122v14.286c0 1.724-1.398 3.122-3.122 3.122zM217.58 41.252c-1.488 0-2.805-1.066-3.072-2.581l-2.481-14.069c-.299-1.698.835-3.318 2.532-3.616 1.703-.296 3.319.835 3.617 2.533l2.481 14.069c.299 1.698-.835 3.318-2.532 3.616-.184.031-.365.048-.545.048zM296.894 491.063c-1.488 0-2.805-1.066-3.072-2.581l-2.481-14.069c-.299-1.698.835-3.318 2.532-3.616 1.703-.3 3.319.834 3.617 2.533l2.481 14.068c.299 1.698-.835 3.318-2.532 3.616-.184.033-.365.049-.545.049zM180.334 51.232c-1.275 0-2.472-.788-2.933-2.055l-4.887-13.424c-.588-1.621.247-3.412 1.867-4.002 1.615-.587 3.412.245 4 1.866l4.886 13.424c.59 1.621-.246 3.412-1.866 4.002-.352.128-.712.189-1.067.189zM336.552 480.437c-1.275 0-2.472-.788-2.933-2.055l-4.886-13.424c-.59-1.621.246-3.412 1.866-4.002 1.615-.589 3.412.245 4 1.866l4.887 13.424c.588 1.621-.247 3.412-1.867 4.002-.352.128-.712.189-1.067.189zM145.387 67.53c-1.079 0-2.128-.56-2.707-1.562l-7.143-12.372c-.861-1.493-.351-3.402 1.143-4.264 1.491-.866 3.402-.351 4.265 1.142l7.143 12.372c.861 1.493.351 3.402-1.143 4.264-.49.285-1.028.42-1.558.42zM373.762 463.087c-1.079 0-2.128-.56-2.707-1.562l-7.143-12.372c-.861-1.493-.351-3.402 1.143-4.264 1.491-.866 3.401-.351 4.265 1.142l7.143 12.372c.861 1.493.351 3.402-1.143 4.264-.49.285-1.028.42-1.558.42zM113.796 89.648c-.89 0-1.776-.379-2.393-1.115L102.22 77.59c-1.109-1.321-.936-3.29.386-4.399 1.319-1.107 3.289-.936 4.398.385l9.183 10.943c1.109 1.321.936 3.29-.386 4.399-.584.491-1.296.73-2.005.73zM407.389 439.539c-.89 0-1.776-.379-2.393-1.115l-9.182-10.943c-1.109-1.321-.936-3.29.386-4.399 1.319-1.105 3.289-.936 4.398.385l9.181 10.943c1.109 1.321.936 3.29-.386 4.399-.583.491-1.296.73-2.004.73zM86.525 116.917c-.708 0-1.421-.239-2.004-.73l-10.943-9.183c-1.322-1.109-1.494-3.077-.386-4.399 1.109-1.322 3.079-1.492 4.398-.385l10.943 9.183c1.322 1.109 1.494 3.077.386 4.399-.618.735-1.504 1.115-2.394 1.115zM436.415 410.51c-.708 0-1.421-.239-2.006-.73l-10.942-9.183c-1.32-1.109-1.492-3.077-.385-4.399 1.109-1.322 3.077-1.492 4.399-.385l10.942 9.183c1.32 1.109 1.492 3.077.385 4.399-.618.736-1.503 1.115-2.393 1.115zM64.404 148.506c-.529 0-1.066-.135-1.558-.419l-12.372-7.143c-1.494-.862-2.004-2.771-1.143-4.264.863-1.492 2.767-2.007 4.265-1.142l12.372 7.143c1.494.862 2.004 2.771 1.143 4.264-.578 1.001-1.627 1.561-2.707 1.561zM459.961 376.881c-.529 0-1.067-.135-1.558-.419l-12.371-7.143c-1.494-.862-2.004-2.771-1.143-4.264s2.771-2.009 4.265-1.142l12.371 7.143c1.494.862 2.004 2.771 1.143 4.264-.58 1.001-1.628 1.561-2.707 1.561zM48.11 183.457c-.355 0-.715-.061-1.067-.189l-13.425-4.886c-1.621-.59-2.456-2.381-1.866-4.002.588-1.621 2.384-2.453 4-1.866l13.425 4.886c1.621.59 2.456 2.381 1.866 4.002-.461 1.267-1.658 2.055-2.933 2.055zM477.315 339.674c-.355 0-.715-.061-1.069-.189l-13.424-4.886c-1.619-.59-2.454-2.381-1.864-4.002.588-1.621 2.379-2.452 4.002-1.866l13.424 4.886c1.619.59 2.454 2.381 1.864 4.002-.461 1.269-1.66 2.055-2.933 2.055zM38.131 220.706c-.18 0-.362-.016-.545-.048l-14.069-2.481c-1.698-.3-2.831-1.919-2.532-3.616.299-1.697 1.911-2.83 3.617-2.533l14.069 2.481c1.698.3 2.831 1.919 2.532 3.616-.267 1.515-1.584 2.581-3.072 2.581zM487.942 300.02c-.18 0-.362-.016-.545-.048l-14.068-2.481c-1.698-.3-2.831-1.919-2.532-3.616s1.909-2.83 3.617-2.533l14.069 2.481c1.698.3 2.831 1.919 2.532 3.616-.267 1.515-1.585 2.581-3.073 2.581zM34.767 259.122H20.482c-1.724 0-3.122-1.398-3.122-3.122s1.398-3.122 3.122-3.122h14.285c1.724 0 3.122 1.398 3.122 3.122s-1.398 3.122-3.122 3.122zM491.519 259.122h-14.287c-1.724 0-3.122-1.398-3.122-3.122s1.398-3.122 3.122-3.122h14.287c1.724 0 3.122 1.398 3.122 3.122s-1.398 3.122-3.122 3.122zM24.057 300.02c-1.488 0-2.805-1.066-3.072-2.581-.299-1.697.834-3.318 2.532-3.616l14.069-2.481c1.704-.297 3.319.834 3.617 2.533.299 1.697-.834 3.318-2.532 3.616l-14.069 2.481c-.184.032-.366.048-.545.048zM473.867 220.706c-1.488 0-2.805-1.066-3.072-2.581-.299-1.697.834-3.318 2.532-3.616l14.069-2.481c1.701-.297 3.319.834 3.617 2.533.299 1.697-.834 3.318-2.532 3.616l-14.068 2.481c-.184.032-.366.048-.546.048zM34.684 339.674c-1.275 0-2.472-.788-2.933-2.055-.59-1.621.246-3.412 1.866-4.002l13.425-4.886c1.615-.587 3.412.246 4 1.866.59 1.621-.246 3.412-1.866 4.002l-13.425 4.886c-.351.129-.711.189-1.067.189zM463.891 183.457c-1.275 0-2.472-.788-2.933-2.055-.59-1.621.246-3.412 1.864-4.002l13.424-4.886c1.624-.587 3.413.246 4.002 1.866.59 1.621-.246 3.412-1.864 4.002l-13.424 4.886c-.355.128-.714.189-1.069.189zM52.038 376.881c-1.079 0-2.128-.56-2.707-1.562-.861-1.493-.351-3.402 1.143-4.264l12.372-7.143c1.495-.866 3.401-.351 4.265 1.142.861 1.493.351 3.402-1.143 4.264l-12.372 7.143c-.492.285-1.028.42-1.558.42zM447.597 148.506c-1.079 0-2.128-.56-2.707-1.562-.861-1.493-.351-3.402 1.143-4.264l12.371-7.143c1.491-.865 3.401-.35 4.265 1.142.861 1.493.351 3.402-1.143 4.264l-12.371 7.143c-.491.285-1.03.42-1.558.42zM75.584 410.51c-.89 0-1.776-.379-2.393-1.115-1.109-1.321-.936-3.29.386-4.399l10.943-9.183c1.319-1.107 3.289-.936 4.398.385s.936 3.29-.386 4.399l-10.943 9.183c-.584.491-1.296.73-2.005.73zM425.476 116.917c-.89 0-1.776-.379-2.393-1.115-1.109-1.321-.936-3.289.385-4.399l10.942-9.183c1.322-1.107 3.291-.936 4.399.385 1.109 1.321.936 3.289-.385 4.399l-10.942 9.183c-.586.49-1.297.73-2.006.73zM104.61 439.539c-.708 0-1.421-.239-2.004-.73-1.322-1.109-1.494-3.077-.386-4.399l9.183-10.943c1.11-1.321 3.08-1.492 4.398-.385 1.322 1.109 1.494 3.077.386 4.399l-9.183 10.943c-.618.736-1.504 1.115-2.394 1.115zM398.204 89.648c-.708 0-1.421-.239-2.004-.73-1.322-1.109-1.494-3.077-.386-4.399l9.182-10.943c1.109-1.321 3.08-1.492 4.398-.385 1.322 1.109 1.494 3.078.386 4.399l-9.181 10.943c-.618.736-1.504 1.115-2.395 1.115zM138.238 463.087c-.529 0-1.066-.135-1.558-.419-1.494-.862-2.004-2.771-1.143-4.264l7.143-12.372c.863-1.493 2.767-2.008 4.265-1.142 1.494.862 2.004 2.771 1.143 4.264l-7.143 12.372c-.579 1.001-1.628 1.561-2.707 1.561zM366.613 67.53c-.529 0-1.066-.135-1.558-.419-1.494-.862-2.004-2.771-1.143-4.264l7.143-12.372c.863-1.493 2.767-2.009 4.265-1.142 1.494.862 2.004 2.771 1.143 4.264l-7.143 12.372c-.579 1.001-1.628 1.561-2.707 1.561zM175.449 480.437c-.355 0-.715-.061-1.067-.189-1.621-.59-2.456-2.381-1.867-4.002l4.887-13.424c.59-1.622 2.382-2.456 4-1.866 1.621.59 2.456 2.381 1.866 4.002l-4.886 13.424c-.461 1.268-1.659 2.055-2.933 2.055zM331.666 51.232c-.355 0-.715-.061-1.067-.189-1.621-.59-2.456-2.381-1.866-4.002l4.886-13.424c.588-1.622 2.384-2.453 4-1.866 1.621.59 2.456 2.381 1.867 4.002l-4.887 13.424c-.459 1.268-1.658 2.055-2.933 2.055zM215.106 491.063c-.18 0-.362-.016-.545-.048-1.697-.3-2.831-1.918-2.532-3.616l2.481-14.068c.299-1.698 1.911-2.832 3.617-2.533 1.697.3 2.831 1.918 2.532 3.616l-2.481 14.069c-.268 1.513-1.584 2.58-3.072 2.58zM294.42 41.252c-.18 0-.362-.016-.545-.048-1.697-.3-2.831-1.918-2.532-3.616l2.481-14.069c.299-1.697 1.911-2.827 3.617-2.533 1.697.3 2.831 1.918 2.532 3.616l-2.481 14.069c-.268 1.514-1.584 2.581-3.072 2.581zM238.735 61.821c-1.602 0-2.965-1.225-3.106-2.849l-3.265-37.321c-.15-1.718 1.12-3.232 2.838-3.382 1.72-.157 3.232 1.121 3.381 2.838l3.265 37.321c.15 1.718-1.12 3.232-2.838 3.382-.092.007-.185.011-.275.011zM276.523 493.744c-1.602 0-2.965-1.225-3.106-2.849l-3.265-37.321c-.15-1.718 1.12-3.232 2.838-3.382 1.73-.157 3.23 1.121 3.381 2.838l3.265 37.321c.15 1.718-1.12 3.232-2.838 3.382-.092.006-.185.011-.275.011zM204.738 67.817c-1.379 0-2.64-.92-3.013-2.314l-9.697-36.187c-.446-1.666.541-3.377 2.207-3.823 1.665-.455 3.378.542 3.823 2.207l9.697 36.187c.446 1.666-.541 3.377-2.207 3.823-.27.073-.543.107-.81.107zM316.955 486.615c-1.379 0-2.64-.92-3.013-2.314l-9.696-36.187c-.446-1.666.541-3.377 2.207-3.823 1.671-.452 3.376.542 3.823 2.207l9.696 36.187c.446 1.666-.541 3.377-2.207 3.823-.273.073-.543.107-.81.107zM172.301 79.624c-1.176 0-2.302-.668-2.831-1.803l-15.833-33.954c-.728-1.562-.053-3.42 1.509-4.148 1.561-.728 3.422-.053 4.149 1.51l15.833 33.954c.728 1.562.053 3.42-1.509 4.148-.426.199-.876.293-1.318.293zM355.536 472.574c-1.176 0-2.302-.668-2.831-1.803l-15.832-33.954c-.728-1.562-.053-3.42 1.509-4.148s3.422-.052 4.149 1.51l15.832 33.954c.728 1.562.053 3.42-1.509 4.148-.427.199-.876.293-1.318.293zM142.404 96.885c-.984 0-1.953-.464-2.561-1.331l-21.489-30.689c-.987-1.413-.645-3.359.767-4.348 1.418-.991 3.361-.644 4.349.767l21.489 30.689c.987 1.413.645 3.359-.767 4.348-.546.381-1.171.564-1.788.564zM391.091 452.047c-.984 0-1.953-.464-2.561-1.331l-21.488-30.689c-.987-1.413-.645-3.359.767-4.348 1.418-.991 3.361-.644 4.349.767l21.487 30.689c.987 1.413.645 3.359-.767 4.348-.545.381-1.171.564-1.787.564zM115.954 119.077c-.798 0-1.598-.305-2.207-.914L87.256 91.671c-1.219-1.218-1.219-3.196 0-4.415s3.195-1.219 4.415 0l26.491 26.491c1.219 1.218 1.219 3.196 0 4.415-.61.609-1.408.915-2.208.915zM422.537 425.658c-.798 0-1.598-.305-2.207-.914l-26.491-26.491c-1.219-1.218-1.219-3.196 0-4.415s3.195-1.219 4.415 0l26.491 26.491c1.219 1.218 1.219 3.196 0 4.415-.61.609-1.409.914-2.208.914zM93.76 145.523c-.618 0-1.242-.183-1.788-.565L61.284 123.47c-1.412-.988-1.754-2.935-.767-4.348.991-1.413 2.934-1.756 4.349-.767l30.688 21.487c1.412.988 1.754 2.935.767 4.348-.608.868-1.577 1.333-2.561 1.333zM448.923 394.21c-.618 0-1.242-.183-1.788-.565l-30.689-21.487c-1.412-.988-1.754-2.935-.767-4.348.991-1.411 2.933-1.756 4.349-.767l30.689 21.488c1.412.988 1.754 2.935.767 4.348-.608.866-1.577 1.331-2.561 1.331zM76.5 175.421c-.442 0-.89-.094-1.317-.294L41.23 159.295c-1.564-.728-2.239-2.586-1.511-4.148.728-1.562 2.587-2.237 4.148-1.51l33.954 15.832c1.564.728 2.239 2.586 1.511 4.148-.53 1.136-1.656 1.804-2.832 1.804zM469.45 358.657c-.442 0-.891-.094-1.319-.294l-33.953-15.832c-1.562-.728-2.238-2.586-1.509-4.148s2.588-2.238 4.149-1.51l33.953 15.832c1.562.728 2.238 2.586 1.509 4.148-.528 1.136-1.655 1.804-2.83 1.804zM64.696 207.863c-.266 0-.538-.034-.81-.108l-36.188-9.696c-1.667-.446-2.654-2.158-2.207-3.823.445-1.665 2.154-2.658 3.823-2.207l36.188 9.696c1.667.446 2.654 2.158 2.207 3.823-.374 1.394-1.636 2.315-3.013 2.315zM483.494 320.079c-.266 0-.538-.034-.81-.108l-36.188-9.697c-1.667-.446-2.654-2.158-2.207-3.823.445-1.665 2.154-2.656 3.823-2.207l36.188 9.697c1.667.446 2.654 2.158 2.207 3.823-.372 1.396-1.635 2.315-3.013 2.315zM58.701 241.86c-.092 0-.183-.004-.276-.013l-37.321-3.265c-1.717-.15-2.987-1.663-2.837-3.382.149-1.718 1.668-2.993 3.382-2.838l37.321 3.265c1.717.15 2.987 1.663 2.837 3.382-.14 1.626-1.503 2.851-3.106 2.851zM490.626 279.649c-.09 0-.183-.004-.275-.013l-37.322-3.265c-1.718-.15-2.989-1.663-2.838-3.382.15-1.717 1.651-2.989 3.381-2.838l37.322 3.265c1.718.15 2.989 1.663 2.838 3.382-.142 1.627-1.505 2.851-3.106 2.851zM21.375 279.649c-1.602 0-2.965-1.225-3.106-2.849-.15-1.718 1.12-3.232 2.837-3.382l37.321-3.265c1.745-.15 3.233 1.122 3.382 2.838.15 1.718-1.12 3.232-2.837 3.382l-37.321 3.265c-.093.007-.186.011-.276.011zM453.298 241.86c-1.602 0-2.965-1.225-3.106-2.849-.15-1.718 1.12-3.232 2.838-3.382l37.322-3.265c1.728-.162 3.23 1.122 3.381 2.838.15 1.718-1.12 3.232-2.838 3.382l-37.322 3.265c-.093.007-.186.011-.275.011zM28.505 320.079c-1.379 0-2.64-.919-3.013-2.314-.446-1.666.541-3.377 2.207-3.823l36.188-9.697c1.661-.453 3.376.542 3.823 2.207.446 1.666-.541 3.377-2.207 3.823l-36.188 9.697c-.27.073-.544.107-.81.107zM447.304 207.863c-1.379 0-2.64-.92-3.013-2.314-.446-1.666.541-3.377 2.207-3.823l36.188-9.696c1.664-.451 3.376.542 3.823 2.207.446 1.666-.541 3.377-2.207 3.823l-36.188 9.696c-.271.072-.543.107-.81.107zM42.549 358.657c-1.176 0-2.302-.668-2.831-1.804-.728-1.562-.053-3.42 1.511-4.148l33.954-15.832c1.555-.728 3.419-.052 4.148 1.51.729 1.562.053 3.42-1.511 4.148l-33.954 15.832c-.425.199-.875.294-1.317.294zM435.5 175.421c-1.176 0-2.302-.668-2.831-1.803-.728-1.562-.053-3.42 1.509-4.148l33.953-15.832c1.562-.727 3.421-.052 4.149 1.51s.053 3.42-1.509 4.148l-33.953 15.832c-.426.199-.875.293-1.318.293zM63.078 394.21c-.984 0-1.953-.464-2.561-1.331-.987-1.413-.645-3.359.767-4.348l30.688-21.488c1.418-.991 3.361-.644 4.349.767.987 1.413.645 3.359-.767 4.348l-30.688 21.487c-.545.381-1.17.565-1.788.565zM418.239 145.523c-.984 0-1.953-.464-2.561-1.331-.987-1.413-.645-3.359.767-4.348l30.689-21.487c1.418-.991 3.359-.644 4.349.767.987 1.413.645 3.359-.767 4.348l-30.689 21.487c-.545.38-1.17.564-1.788.564zM89.464 425.658c-.798 0-1.598-.305-2.207-.914-1.219-1.218-1.219-3.196 0-4.415l26.491-26.491c1.219-1.219 3.195-1.219 4.415 0 1.219 1.218 1.219 3.196 0 4.415l-26.491 26.491c-.61.609-1.41.914-2.208.914zM396.047 119.077c-.798 0-1.598-.305-2.207-.914-1.219-1.218-1.219-3.196 0-4.415l26.491-26.491c1.219-1.219 3.195-1.219 4.415 0 1.219 1.218 1.219 3.196 0 4.415l-26.491 26.491c-.612.608-1.41.914-2.208.914zM120.909 452.047c-.618 0-1.242-.183-1.788-.565-1.412-.988-1.754-2.935-.767-4.348l21.489-30.689c.991-1.411 2.934-1.756 4.349-.767 1.412.988 1.754 2.935.767 4.348l-21.489 30.689c-.609.868-1.576 1.332-2.561 1.332zM369.596 96.885c-.618 0-1.242-.183-1.788-.565-1.412-.988-1.754-2.935-.767-4.348l21.488-30.689c.99-1.413 2.936-1.756 4.349-.767 1.412.988 1.754 2.935.767 4.348l-21.487 30.689c-.609.868-1.577 1.332-2.562 1.332zM156.464 472.574c-.442 0-.891-.094-1.319-.294-1.562-.728-2.238-2.586-1.509-4.148l15.833-33.954c.727-1.562 2.588-2.238 4.149-1.51 1.562.728 2.238 2.586 1.509 4.148l-15.833 33.954c-.528 1.136-1.654 1.804-2.83 1.804zM339.701 79.624c-.442 0-.891-.094-1.319-.294-1.562-.728-2.238-2.586-1.509-4.148l15.832-33.954c.727-1.563 2.588-2.238 4.149-1.51 1.562.728 2.238 2.586 1.509 4.148L342.531 77.82c-.53 1.137-1.656 1.804-2.83 1.804zM195.045 486.615c-.266 0-.539-.034-.81-.108-1.667-.446-2.654-2.158-2.207-3.823l9.697-36.187c.446-1.663 2.16-2.658 3.823-2.207 1.667.446 2.654 2.158 2.207 3.823l-9.697 36.187c-.373 1.396-1.635 2.315-3.013 2.315zM307.263 67.817c-.266 0-.538-.034-.81-.108-1.667-.446-2.654-2.158-2.207-3.823l9.696-36.187c.446-1.665 2.151-2.661 3.823-2.207 1.667.446 2.654 2.158 2.207 3.823l-9.696 36.187c-.373 1.394-1.635 2.315-3.013 2.315zM235.476 493.744c-.09 0-.183-.004-.275-.013-1.718-.15-2.989-1.664-2.838-3.382l3.265-37.321c.149-1.717 1.663-2.995 3.381-2.838 1.718.15 2.989 1.663 2.838 3.382l-3.265 37.321c-.142 1.626-1.504 2.851-3.106 2.851zM273.264 61.821c-.09 0-.183-.004-.275-.013-1.718-.15-2.989-1.663-2.838-3.382l3.265-37.321c.149-1.717 1.647-2.996 3.381-2.838 1.718.15 2.989 1.663 2.838 3.382L276.37 58.97c-.141 1.627-1.503 2.851-3.106 2.851z')
        path(d='M286.928 286.928L424.877 87.123 225.072 225.072 87.123 424.877z')
      path(fill='#ccc', d='M286.928 286.928L424.877 87.123 87.123 424.877z')
      path(fill='#ff525d', d='M286.928 286.928L424.877 87.123 225.072 225.072z')
      path(fill='#ef4152', d='M286.928 286.928L424.877 87.123 256 256z')
  span.icon(data-browser="chrome")
    svg(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 512.023 512.023')
      path(fill='#f44336', d='M493.248 160.021H256.021c-53.019-.052-96.042 42.886-96.095 95.905-.016 16.468 4.204 32.663 12.255 47.028L53.568 99.434c86.393-111.815 247.073-132.423 358.888-46.03 35.909 27.745 63.793 64.542 80.792 106.617z')
      path(fill='#ffc107', d='M512.021 256.021c-.118 141.336-114.664 255.882-256 256-10.704.04-21.397-.673-32-2.133l115.2-205.867c26.403-45.964 10.664-104.625-35.2-131.2-14.521-8.407-31.008-12.824-47.787-12.8h237.013c12.458 30.47 18.836 63.082 18.774 96z')
      path(fill='#4caf50', d='M339.221 304.021l-115.2 205.867h-.213C83.62 492.176-15.666 364.172 2.046 223.984 7.779 178.609 25.57 135.6 53.568 99.434l118.613 203.52.64 1.067c26.451 45.95 85.143 61.757 131.093 35.307 14.678-8.449 26.859-20.63 35.307-35.307z')
      path(fill='#f44336', d='M339.221 304.021c-26.451 45.95-85.143 61.757-131.093 35.307-14.677-8.449-26.858-20.63-35.307-35.307l-.64-1.067c-25.921-46.251-9.439-104.758 36.812-130.679 14.366-8.051 30.561-12.271 47.028-12.255h.213c16.779-.024 33.266 4.393 47.787 12.8 45.865 26.576 61.603 85.237 35.2 131.201z')
      path(fill='#2196f3', d='M339.221 304.021c-26.451 45.95-85.143 61.757-131.093 35.307-14.677-8.449-26.858-20.63-35.307-35.307l-.64-1.067c-25.921-46.251-9.439-104.758 36.812-130.679 14.366-8.051 30.561-12.271 47.028-12.255h.213c16.779-.024 33.266 4.393 47.787 12.8 45.865 26.576 61.603 85.237 35.2 131.201z')
      path(fill='#fafafa', d='M255.659 362.688c-18.598-.002-36.868-4.903-52.971-14.208-16.237-9.391-29.722-22.883-39.104-39.125-29.455-51.018-11.975-116.254 39.043-145.709 16.233-9.372 34.65-14.301 53.395-14.291 58.91-.046 106.704 47.674 106.749 106.584.015 18.752-4.915 37.176-14.291 53.416-19.224 33.05-54.587 53.369-92.821 53.333zm.554-192c-30.613-.163-58.955 16.13-74.219 42.667-23.564 40.86-9.543 93.087 31.317 116.651s93.087 9.543 116.651-31.317c23.564-40.814 9.58-93.003-31.234-116.568-12.922-7.46-27.574-11.402-42.494-11.432h-.021z')
  span.icon(data-browser="opera")
    svg(xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', version='1.1', x='0px', y='0px', viewbox='0 0 512 512', style='enable-background:new 0 0 512 512;', xml:space='preserve')
      path(style='fill:#D32F2F;', d='M171.744,111.744C195.232,84,225.568,67.296,258.72,67.296c74.528,0,134.944,84.48,134.944,188.704  S333.248,444.736,258.72,444.736c-33.152,0-63.488-16.736-86.976-44.448c36.736,47.68,91.328,77.92,152.288,77.92  c37.504,0,72.576-11.456,102.592-31.36C479.008,399.968,512,331.84,512,256s-32.992-143.968-85.376-190.816  c-30.016-19.904-65.088-31.36-102.592-31.36C263.072,33.792,208.448,64.064,171.744,111.744')
      path(style='fill:#F44336;', d='M256,0C114.624,0,0,114.624,0,256c0,137.28,108.096,249.344,243.808,255.712  C247.84,511.904,251.904,512,256,512c65.536,0,125.312-24.64,170.592-65.152c-30.016,19.904-65.088,31.36-102.592,31.36  c-60.96,0-115.552-30.24-152.288-77.92c-28.32-33.408-46.656-82.784-47.872-138.24c0-0.128,0-11.904,0-12.064  c1.248-55.424,19.584-104.832,47.872-138.24c36.736-47.68,91.328-77.92,152.288-77.92c37.504,0,72.576,11.456,102.592,31.36  C381.568,24.864,322.144,0.256,256.96,0C256.64,0,256.32,0,256,0L256,0z')
  span.icon(data-browser="firefox")
    svg(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 512 512')
      path(fill='#3fa0e1', d='M256.007 512C114.53 512 .035 397.503.035 256 .035 114.508 114.52 0 256.007 0c141.476 0 255.972 114.497 255.972 256-.001 141.492-114.485 256-255.972 256z')
      path(fill='#2568bd', d='M256.007 0v512c141.487 0 255.972-114.508 255.972-256C511.978 114.498 397.483 0 256.007 0z')
      path(fill='#ff9842', d='M256.007.001c-5.378 0-10.727.184-16.048.511 73.415 25.748 163.669 134.691 172.176 246.086 7.541 98.771-50.199 203.193-266.039 240.742C179.998 503.48 217.347 512 256.007 512c141.476 0 255.972-114.497 255.972-256C511.978 114.508 397.494.001 256.007.001z')
      path(fill='#ff8322', d='M256.007 0v7.332c69.914 34.606 148.232 135.872 156.127 239.265 6.054 79.302-29.978 162.246-156.127 211.297V512c141.476 0 255.972-114.497 255.972-256C511.978 114.508 397.494 0 256.007 0z')
      g(fill='#ff9842')
        path(d='M102.598 90.058L26.192 4.978C22.04.356 15.47-1.229 9.668.994S.035 8.788.035 15.001V256c0 8.284 6.715 15 14.998 15s14.998-6.716 14.998-15c0-44.546 12.924-87.338 36.933-123.874l35.634-42.068zM157.428 335.558c-3.82-.601-7.26-2.654-9.603-5.73-22.578-29.655-34.512-65.398-34.512-103.367 0-13.089 15.679-19.905 25.247-10.952 25.509 23.876 47.056 20.416 74.335 16.036 32.381-5.199 72.682-11.672 115.757 38.212 8.39 9.713 9.412 23.547 2.543 34.423-6.868 10.874-19.797 15.89-32.171 12.484-29.967-8.242-43.709-1.818-61.099 6.318-17.985 8.412-40.378 18.886-80.497 12.576z')
      path(fill='#ffd664', d='M501.76 184.034c-47.3 273.425-348.299 221.884-358.202 51.019l82.048-46.578c4.694-2.665 7.594-7.647 7.594-13.045v-22.359c0-5.827-3.375-11.127-8.655-13.592l-60.857-28.412V15.001c0-6.214-3.831-11.784-9.633-14.007-5.803-2.224-12.374-.638-16.525 3.985L70.763 79.336c-95.439 100.067-94.644 258.782 4.245 357.683 47.042 47.046 111.081 74.98 180.999 74.98 67.785 0 132.389-26.364 180.999-74.98 69.033-69.041 89.846-166.832 64.754-252.985z')
      path(fill='#ff8322', d='M328.651 269.756c-25.549-29.587-50.121-39.348-72.644-41.309v87.084c11.149-3.398 23.716-4.177 43.016 1.131 12.375 3.406 25.303-1.61 32.171-12.484 6.869-10.875 5.847-24.709-2.543-34.422z')
      path(fill='#ff9842', d='M501.76 184.034c-28.817 166.581-151.8 212.543-245.753 184.39v143.575c67.785 0 132.389-26.364 180.999-74.98 69.033-69.041 89.846-166.832 64.754-252.985z')


            
          
!
            
              body {
  background-color: #080808;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
}
.container {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .icon {
    display: none;
    &:after {
      content: "You're using " attr(data-browser);
      text-transform: capitalize;
      color: #fff;
      display: block;
      text-align: center;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px;
      min-width: 300px;
    }
    &.is-active {
      display: block;
    }
  }
}

            
          
!
            
              const browserDetection = () => {
  const browsers = {
    firefox: !!window.InstallTrigger,
    safari: !!window.ApplePaySession,
    opera: window.opr && !!window.opr.addons,
    chrome: window.chrome && !!window.chrome.webstore
  };
  const getCurrentBrowserName = browsers =>
    Object.keys(browsers).find(key => browsers[key] === true);

  return document
    .querySelector(`[data-browser="${getCurrentBrowserName(browsers)}"]`)
    .classList.add("is-active");
};

browserDetection();

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console