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

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

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

              
                #app
              
            
!

CSS

              
                /* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=css+css-extras&plugins=line-numbers+inline-color+toolbar+copy-to-clipboard */
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

code[class*="language-"],
pre[class*="language-"] {
  color: #ccc;
  background: none;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
  padding: 2rem;
  margin: 0;
  overflow: auto;
  outline: transparent;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #2d2d2d;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

pre {
  height: 100%;
  display: flex;
  align-items: center;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999;
}

.token.punctuation {
  color: #ccc;
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
  color: #e2777a;
}

.token.function-name {
  color: #6196cc;
}

.token.boolean,
.token.number,
.token.function {
  color: #f08d49;
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
  color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
  color: #cc99cd;
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
  color: #7ec699;
}

.token.operator,
.token.entity,
.token.url {
  color: #67cdcc;
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.token.inserted {
  color: green;
}

pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em; /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

  .line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
  }

    .line-numbers-rows > span:before {
      content: counter(linenumber);
      color: #999;
      display: block;
      padding-right: 0.8em;
      text-align: right;
    }

span.inline-color-wrapper {
  /*
   * The background image is the following SVG inline in base 64:
   *
   * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
   *     <path fill="gray" d="M0 0h2v2H0z"/>
   *     <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
   * </svg>
   *
   * SVG-inlining explained:
   * https://stackoverflow.com/a/21626701/7595472
   */
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=");
  /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */
  background-position: center;
  background-size: 110%;

  display: inline-block;
  height: 1.333ch;
  width: 1.333ch;
  margin: 0 .333ch;
  box-sizing: border-box;
  border: 1px solid white;
  outline: 1px solid rgba(0,0,0,.5);
  overflow: hidden;
}

span.inline-color {
  display: block;
  /* To prevent visual glitches again */
  height: 120%;
  width: 120%;
}

div.code-toolbar {
  height: 100%;
  position: relative;
}

div.code-toolbar > .toolbar {
  position: absolute;
  top: .3em;
  right: .2em;
  opacity: 1;
}

div.code-toolbar:hover > .toolbar {
  opacity: 1;
}

/* Separate line b/c rules are thrown out if selector is invalid.
   IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
  opacity: 1;
}

div.code-toolbar > .toolbar .toolbar-item {
  display: inline-block;
}

div.code-toolbar > .toolbar a {
  cursor: pointer;
}

div.code-toolbar > .toolbar button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none; /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button {
  color: #bbb;
  font-size: 1rem;
  padding: 0.5rem;
  font-family: sans-serif;
  background: hsl(0, 0%, 25%);
  border-radius: .5em;
  outline: transparent;
  cursor: pointer;
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
  background: hsl(0, 0%, 40%);
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: 'hsl(%s, 90%, 90%)' % var(--hue, 10);
}

#hue,
#saturation,
#lightness {
  width: 200px;
}

label {
  font-family: sans-serif;
  font-weight: bold;
  color: hsl(0, 0%, 14%);
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
}

select {
  font-family: sans-serif;
  padding: 0.5rem;
  background: #fafafa;
  border: '2px solid hsl(%s, 80%, 25%)' % var(--hue, 10);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 15px 25px 15px 15px;
  cursor: pointer;
  font-size: 1rem;
  outline: transparent;
}

.select-wrapper {
  position: relative;
}

.select-wrapper:after {
  content: "";
  position: absolute;
  height: 20px;
  right: 8px;
  top: 54%;
  width: 16px;
  transform: translate(0, -50%);
  background: 'hsl(%s, 80%, 35%)' % var(--hue, 10);
  clip-path: polygon(0 10%, 50% 80%, 100% 10%);
  -webkit-clip-path: polygon(0 10%, 50% 80%, 100% 10%);
}

.result {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2rem 3rem -2rem hsl(0, 0%, 10%);
  margin-bottom: 3rem;
  background: hsl(0, 0%, 100%);
}

.result__render {
  height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.clipped {
  height: 85%;
  width: 85%;
  filter: 'drop-shadow(0 0 4px hsl(%s, 80%, 34%))' % var(--hue, 10);
  position: relative;
}

.clipped:after {
  content: '';
  background: 'hsl(%s, 80%, 64%)' % var(--hue, 10);
  height: 100%;
  width 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: var(--clip, none);
  transition: clip-path 0.15s ease-in-out, background 0.15s ease-in-out;
}
              
            
!

JS

              
                import React, {
  useRef,
  useEffect,
  useState,
} from 'https://cdn.skypack.dev/react'

import { render } from 'https://cdn.skypack.dev/react-dom'

const { Prism } = window

const ROOT_NODE = document.querySelector('#app')

const CLIPS = [
  {
    label: 'Triangle Up',
    code: `polygon(50% 0, 7% 75%,
            93% 75%)`,
    clip:
      'polygon(50% 0, 7% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%, 93% 75%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Triangle Left',
    code: `polygon(75% 7%, 0% 50%,
            75% 93%)`,
    clip:
      'polygon(75% 7%, 0% 50%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%, 75% 93%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Triangle Down',
    code: `polygon(93% 25%, 7% 25%,
            50% 100%)`,
    clip:
      'polygon(93% 25%, 7% 25%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Triangle Right',
    code: `polygon(100% 50%, 25% 7%,
            25% 93%)`,
    clip:
      'polygon(100% 50%, 25% 7%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%, 25% 93%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Triangle Top Left',
    code: `polygon(87.5% 12.5%, 12.5% 12.5%,
            12.5% 87.5%)`,
    clip:
      'polygon(87.5% 12.5%, 12.5% 12.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%, 12.5% 87.5%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Triangle Top Right',
    code: `polygon(87.5% 12.5%, 12.5% 12.5%,
            87.5% 87.5%)`,
    clip:
      'polygon(87.5% 12.5%, 12.5% 12.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Triangle Bottom Left',
    code: `polygon(12.5% 12.5%, 12.5% 87.5%,
            87.5% 87.5%)`,
    clip:
      'polygon(12.5% 12.5%, 12.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Triangle Bottom Right',
    code: `polygon(87.5% 12.5%, 12.5% 87.5%,
            87.5% 87.5%)`,
    clip:
      'polygon(87.5% 12.5%, 12.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%, 87.5% 87.5%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Square',
    code: `polygon(15% 15%, 15% 85%,
            85% 85%, 85% 15%)`,
    clip:
      'polygon(15% 15%, 15% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 15%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Rectangle',
    code: `polygon(0% 25%, 0% 75%,
            100% 75%, 100% 25%)`,
    clip:
      'polygon(0% 25%, 0% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 25%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Trapezoid',
    code: `polygon(25% 20%, 5% 80%,
            95% 80%, 75% 20%)`,
    clip:
      'polygon(25% 20%, 5% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 75% 20%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Parallelogram',
    code: `polygon(5% 20%, 25% 80%,
            95% 80%, 75% 20%)`,
    clip:
      'polygon(5% 20%, 25% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 95% 80%, 75% 20%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Diamond Square',
    code: `polygon(15% 50%, 50% 85%,
            85% 50%, 50% 15%)`,
    clip:
      'polygon(15% 50%, 50% 85%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 85% 50%, 50% 15%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Diamond Shield',
    code: `polygon(15% 35%, 50% 85%,
            85% 35%, 50% 15%)`,
    clip:
      'polygon(15% 35%, 50% 85%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 85% 35%, 50% 15%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Diamond Narrow',
    code: `polygon(25% 50%, 50% 85%,
            75% 50%, 50% 15%)`,
    clip:
      'polygon(25% 50%, 50% 85%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 75% 50%, 50% 15%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Pentagon',
    code: `polygon(2% 35%, 21% 90%,
            79% 90%, 98% 35%,
            50% 0%)`,
    clip:
      'polygon(2% 35%, 21% 90%, 79% 90%, 79% 90%, 79% 90%, 79% 90%, 79% 90%, 79% 90%, 98% 35%, 50% 0%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Cut Diamond',
    code: `polygon(2% 35%, 50% 90%,
            98% 35%, 75% 0%,
            25% 0%)`,
    clip:
      'polygon(2% 35%, 50% 90%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 75% 0%, 25% 0%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Base',
    code: `polygon(2% 35%, 2% 85%,
            98% 85%, 98% 35%,
            50% 0%)`,
    clip:
      'polygon(2% 35%, 2% 85%, 98% 85%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 98% 35%, 50% 0%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Flag',
    code: `polygon(2% 15%, 2% 85%,
            50% 65%, 98% 85%,
            98% 15%)`,
    clip:
      'polygon(2% 15%, 2% 85%, 50% 65%, 98% 85%, 98% 85%, 98% 85%, 98% 85%, 98% 85%, 98% 85%, 98% 15%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Hexagon',
    code: `polygon(0% 50%, 25% 93%,
            75% 93%, 100% 50%,
            75% 7%, 25% 7%)`,
    clip:
      'polygon(0% 50%, 25% 93%, 75% 93%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 75% 7%, 25% 7%)',
    hue: Math.random() * 360,
  },
  {
    label: 'House',
    code: `polygon(0% 50%, 0% 93%,
            100% 93%, 100% 50%,
            75% 7%, 25% 7%)`,
    clip:
      'polygon(0% 50%, 0% 93%, 100% 93%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 75% 7%, 25% 7%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Pointer',
    code: `polygon(25% 50%, 0% 75%,
            75% 75%, 100% 50%,
            75% 25%, 0% 25%)`,
    clip:
      'polygon(25% 50%, 0% 75%, 75% 75%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 75% 25%, 0% 25%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Chevron',
    code: `polygon(0% 50%, 0% 75%,
            50% 55%, 100% 75%,
            100% 50%, 50% 25%)`,
    clip:
      'polygon(0% 50%, 0% 75%, 50% 55%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 75%, 100% 50%, 50% 25%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Isotoxal Star',
    code: `polygon(40% 45%, 7% 75%,
            50% 60%, 93% 75%,
            60% 45%, 50% 0%)`,
    clip:
      'polygon(40% 45%, 7% 75%, 50% 60%, 50% 60%, 50% 60%, 50% 60%, 50% 60%, 93% 75%, 60% 45%, 50% 0%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Heptagon',
    code: `polygon(1% 61%, 28% 95%,
            72% 95%, 99% 61%,
            89% 19%, 50% 0%,
            11% 19%)`,
    clip:
      'polygon(1% 61%, 28% 95%, 72% 95%, 99% 61%, 99% 61%, 99% 61%, 99% 61%, 89% 19%, 50% 0%, 11% 19%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Talk Bubble',
    code: `polygon(0% 50%, 15% 60%,
            15% 85%, 85% 85%,
            85% 15%, 15% 15%,
            15% 40%)`,
    clip:
      'polygon(0% 50%, 15% 60%, 15% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 85%, 85% 15%, 15% 15%, 15% 40%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Octagon',
    code: `polygon(4% 69%, 31% 96%,
            69% 96%, 96% 69%,
            96% 31%, 69% 4%,
            31% 4%, 4% 31%)`,
    clip:
      'polygon(4% 69%, 31% 96%, 69% 96%, 96% 69%, 96% 31%, 96% 31%, 96% 31%, 69% 4%, 31% 4%, 4% 31%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Nonagon',
    code: `polygon(7% 75%, 33% 97%,
            67% 97%, 93% 75%,
            99% 41%, 82% 12%,
            50% 0%, 18% 12%,
            1% 41%)`,
    clip:
      'polygon(7% 75%, 33% 97%, 67% 97%, 93% 75%, 99% 41%, 99% 41%, 82% 12%, 50% 0%, 18% 12%, 1% 41%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Decagon',
    code: `polygon(10% 79%, 35% 98%,
            65% 98%, 90% 79%,
            100% 50%, 90% 21%,
            65% 2%, 35% 2%,
            10% 21%, 0% 50%)`,
    clip:
      'polygon(10% 79%, 35% 98%, 65% 98%, 90% 79%, 100% 50%, 90% 21%, 65% 2%, 35% 2%, 10% 21%, 0% 50%)',
    hue: Math.random() * 360,
  },
  {
    label: 'Star',
    code: `polygon(20% 87%, 50% 66%,
            80% 87%, 67% 54%,
            96% 35%, 60% 35%,
            50% 5%, 40% 35%,
            4% 35%, 33% 54%)`,
    clip:
      'polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%)',
    hue: Math.random() * 360,
  },
]

const getCode = clip => {
  let RESULT = `.clipped {\n`
  RESULT += `  clip-path:\n`
  RESULT += `    ${CLIPS[clip].code};`
  return (RESULT += '\n}')
}

const getCodeMarkup = code => {
  return Prism.highlight(code, Prism.languages.css, 'css')
}

const App = () => {
  const [clip, setClip] = useState(0)
  const cssRef = useRef(getCodeMarkup(getCode(clip)))

  useEffect(() => {
    document.documentElement.style.setProperty('--hue', CLIPS[clip].hue)
  }, [clip])

  const selectClip = e => {
    cssRef.current = getCodeMarkup(getCode(e.target.value))
    setClip(e.target.value)
  }

  return (
    <div className="scene">
      <div className="result">
        <pre>
          <code
            className="language-css"
            dangerouslySetInnerHTML={{ __html: cssRef.current }}
          />
        </pre>
        <div
          className="result__render"
          style={{
            '--clip': CLIPS[clip].clip,
            '--hue': CLIPS[clip].hue,
          }}>
          <div className="clipped"></div>
        </div>
      </div>
      <div className="controls">
        <div className="select-wrapper">
          <select onChange={selectClip} value={clip}>
            {CLIPS.map(({ label }, index) => (
              <option key={index} value={index}>
                {label}
              </option>
            ))}
          </select>
        </div>
      </div>
    </div>
  )
}

render(<App />, ROOT_NODE)

              
            
!
999px

Console