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-y: scroll;
  outline: transparent;
  height: 100%;
  max-height: 40vmin;
}

: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;
}

.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 {
  position: relative;
}

div.code-toolbar > .toolbar {
  position: absolute;
  top: .3em;
  right: 1.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,
.toggle-button,
.codepen-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,
.toggle-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,
.toggle-button:focus,
.toggle-button:hover {
  background: hsl(0, 0%, 40%);
  text-decoration: none;
}

.toggle-button {
  position: absolute;
  top: 0.3rem;
  right: 1.2rem;
  z-index: 5;
  width: 7rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.codepen-button {
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s;
}

.codepen-button svg {
  fill: hsl(0, 0%, 60%);
  transition: fill 0.1s;
}

.codepen-button:hover {
  transform: translateY(-5%);
}

.codepen-button:hover svg {
  fill: hsl(0, 0%, 30%);
}

.codepen-button:active {
  transform: translateY(5%);
}

.codepen-button:active svg {
  fill: hsl(0, 0%, 10%);
}

form {
  z-index: 5;
  margin: 0;
  position: absolute;
  right: 0.3rem;
  bottom: 0.3em;
}

.codepen-button {
  right: 14rem;
  z-index: 10;
}

div.code-toolbar > .toolbar {
  right: 8.6em;
}

* {
  box-sizing: border-box;
  transform-style: preserve-3d;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: 'hsl(%s, 50%, 95%)' % var(--hue, 0);
  overflow-x: hidden;
  overflow-y: scroll;
}

#app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

// .scene {
//   display: flex;
//   width: 100vw;
//   align-items: start;
//   justify-content: center;
//   padding-bottom: 3rem;
// }

.cuboid
  --hue 280
  height calc(var(--height) * 1vmin)
  width calc(var(--width) * 1vmin)
  position absolute
  transform translate3d(0, 0, 100vmin) rotateZ(calc(var(--starting-rotation, 0) * 1deg)) translate3d(calc(var(--x, 0) * 1vmin), calc(var(--y, 0) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg)) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg))
  transform-style preserve-3d

  &__side
    position absolute
    top 50%
    left 50%
    height 100%
    width 100%
    border-width calc(var(--wireframe, 0) * 0.5vmin)
    border-style solid

  & > div:nth-of-type(1)
    transform translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin))
    background 'hsla(%s, 60%, 50%, %s)' % (var(--hue, 10) calc(1 - (var(--wireframe, 0) * 0.9)))
    border-color 'hsl(%s, 60%, 50%)' % var(--hue, 10)

  & > div:nth-of-type(2)
    transform  translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg)
    background 'hsla(%s, 60%, 35%, %s)' % (var(--hue, 10) calc(1 - (var(--wireframe, 0) * 0.9)))
    border-color 'hsl(%s, 60%, 35%)' % var(--hue, 10)

  & > div:nth-of-type(3)
    width calc(var(--depth) * 1vmin)
    transform translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin))
    background 'hsla(%s, 60%, 40%, %s)' % (var(--hue, 10) calc(1 - (var(--wireframe, 0) * 0.9)))
    border-color 'hsl(%s, 60%, 40%)' % var(--hue, 10)

  & > div:nth-of-type(4)
    width calc(var(--depth) * 1vmin)
    transform translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin))
    background 'hsla(%s, 60%, 60%, %s)' % (var(--hue, 10) calc(1 - (var(--wireframe, 0) * 0.9)))
    border-color 'hsl(%s, 60%, 60%)' % var(--hue, 10)

  & > div:nth-of-type(5)
    height calc(var(--depth) * 1vmin)
    transform translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin))
    background 'hsla(%s, 60%, 70%, %s)' % (var(--hue, 10) calc(1 - (var(--wireframe, 0) * 0.9)))
    border-color 'hsl(%s, 60%, 70%)' % var(--hue, 10)

  & > div:nth-of-type(6)
    height calc(var(--depth) * 1vmin)
    transform translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin))
    background 'hsla(%s, 60%, 20%, %s)' % (var(--hue, 10) calc(1 - (var(--wireframe, 0) * 0.9)))
    border-color 'hsl(%s, 60%, 20%)' % var(--hue, 10)

.result__result
  display grid
  place-items center
  min-width 40vmin
  min-height 40vmin

.result
  background white

[type="range"] {
  width: 200px;
}

.code-blocks,
.code-toolbar {
  height: 100%;
}

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

.controls {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto auto;
  align-items: center;
  grid-gap: 2rem 2rem;
  width: 50%;
  max-width: 400px;
  padding: 2rem;
  margin: 2rem auto 0;
}

.result {
  display: grid;
  grid-template-columns: 470px auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2rem 3rem -2rem hsl(0, 0%, 10%);
}

              
            
!

JS

              
                import React, {
  Fragment,
  useEffect,
  useRef,
  useState,
} from 'https://cdn.skypack.dev/react'
import T from 'https://cdn.skypack.dev/prop-types'
import { render } from 'https://cdn.skypack.dev/react-dom'
import gsap from 'https://cdn.skypack.dev/gsap'

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

const Cuboid = ({ width, height, depth, hue, innerRef, wireframe }) => (
  <div
    className="cuboid"
    ref={innerRef}
    style={{
      '--width': width,
      '--height': height,
      '--depth': depth,
      '--hue': hue,
      '--wireframe': wireframe ? 1 : 0,
    }}>
    <div className="cuboid__side"></div>
    <div className="cuboid__side"></div>
    <div className="cuboid__side"></div>
    <div className="cuboid__side"></div>
    <div className="cuboid__side"></div>
    <div className="cuboid__side"></div>
  </div>
)

const getCode = (hue, width, height, depth) => {
  let RESULT = `.cuboid {\n`
  // RESULT += `  --height: ${height};\n  --width: ${width};\n  --depth: ${depth};\n`
  RESULT += `  height: calc(var(--height) * 1vmin);\n  width: calc(var(--width) * 1vmin);\n`
  RESULT += '}\n'
  // Generic Cuboid
  RESULT += `.cuboid__side {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  height: 100%;\n  width: 100%;\n}\n`
  // First side
  RESULT += `.cuboid__side:nth-of-type(1) {
  transform:\n    translate3d(\n      -50%,\n      -50%,\n      calc(var(--depth) * 0.5vmin)\n    );
  background: hsl(var(--hue), 60%, 50%);\n}\n`
  // Second side
  RESULT += `.cuboid__side:nth-of-type(2) {
  transform:\n    translate3d(\n      -50%,\n      -50%,\n      calc(var(--depth) * -0.5vmin)\n    )\n    rotateY(180deg);
  background: hsl(var(--hue), 60%, 35%);\n}\n`
  // Third side
  RESULT += `.cuboid__side:nth-of-type(3) {
  width: calc(var(--depth) * 1vmin);
  transform:\n    translate(-50%, -50%)\n    rotateY(90deg)\n    translate3d(\n      0,\n      0,\n      calc(var(--width) * 0.5vmin)\n    );
  background: hsl(var(--hue), 60%, 40%);\n}\n`
  // Fourth side
  RESULT += `.cuboid__side:nth-of-type(4) {
  width: calc(var(--depth) * 1vmin);
  transform:\n    translate(-50%, -50%)\n    rotateY(-90deg)\n    translate3d(\n      0,\n      0,\n      calc(var(--width) * 0.5vmin)\n    );
  background: hsl(var(--hue), 60%, 60%);\n}\n`
  // Fifth side
  RESULT += `.cuboid__side:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  transform:\n    translate(-50%, -50%)\n    rotateX(90deg)\n    translate3d(\n      0,\n      0,\n      calc(var(--height) * 0.5vmin)\n    );
  background: hsl(var(--hue), 60%, 70%);\n}\n`
  // Sixth side
  RESULT += `.cuboid__side:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  transform:\n    translate(-50%, -50%)\n    rotateX(-90deg)\n    translate3d(\n      0,\n      0,\n      calc(var(--height) * 0.5vmin)\n    );
  background: hsl(var(--hue), 60%, 20%);\n}\n`

  // Extras
  RESULT += `/* Set the scene */\n`
  RESULT += `* {\n  transform-style: preserve-3d;\n}\n`
  RESULT += `body {\n  display: grid;\n  place-items: center;\n  min-height: 100vh;\n}\n`
  RESULT += `.scene {\n  transform:\n    rotateX(-24deg)\n    rotateY(-32deg);\n}\n`

  return RESULT
}

const getHTMLCode = (hue, width, height, depth) => {
  let RESULT = `<div class="scene">\n`
  RESULT += `  <div\n    class="cuboid"\n    style="\n      --height: ${height};\n      --width: ${width};\n      --depth: ${depth};\n      --hue: ${hue};\n  ">\n`
  RESULT += `    <div class="cuboid__side"></div>\n`
  RESULT += `    <div class="cuboid__side"></div>\n`
  RESULT += `    <div class="cuboid__side"></div>\n`
  RESULT += `    <div class="cuboid__side"></div>\n`
  RESULT += `    <div class="cuboid__side"></div>\n`
  RESULT += `    <div class="cuboid__side"></div>\n`
  RESULT += `  </div>\n`
  RESULT += `</div>`

  return RESULT
}

const getCodeMarkup = code => {
  return Prism.highlight(code, Prism.languages.css, 'css')
}
const getHTMLMarkup = code => {
  return Prism.highlight(code, Prism.languages.markup, 'markup')
}
const BOUNDS = 180
const App = () => {
  const RENDER = useState()[1]
  const [wireframe, setWireframe] = useState(false)
  const [hue, setHue] = useState(Math.floor(Math.random() * 359))
  const [width, setWidth] = useState(Math.floor(Math.random() * 10) + 5)
  const [height, setHeight] = useState(Math.floor(Math.random() * 10) + 5)
  const [depth, setDepth] = useState(Math.floor(Math.random() * 10) + 5)
  const [showCSS, setShowCSS] = useState(false)
  const styleRef = useRef(getCode(hue, width, height, depth))
  const markupRef = useRef(getHTMLCode(hue, width, height, depth))
  const cssRef = useRef(getCodeMarkup(styleRef.current))
  const htmlRef = useRef(getHTMLMarkup(markupRef.current))
  const cubeRef = useRef(null)

  useEffect(() => {
    const UPDATE = ({ x, y }) => {
      const xRotate = gsap.utils.mapRange(
        0,
        window.innerWidth,
        -BOUNDS,
        BOUNDS,
        x
      )
      const yRotate = gsap.utils.mapRange(
        0,
        window.innerHeight,
        -BOUNDS,
        BOUNDS,
        y
      )
      gsap.set(cubeRef.current, {
        '--rotate-cuboid-x': -yRotate,
        '--rotate-cuboid-y': xRotate,
      })
    }
    window.addEventListener('pointermove', UPDATE)

    return () => {
      window.removeEventListener('pointermove', UPDATE)
    }
  }, [])

  useEffect(() => {
    // Reset the Prism markup and re-render.
    styleRef.current = getCode(hue, width, height, depth)
    markupRef.current = getHTMLCode(hue, width, height, depth)
    cssRef.current = getCodeMarkup(styleRef.current)
    htmlRef.current = getHTMLMarkup(markupRef.current)
    document.documentElement.style.setProperty('--hue', hue)
    RENDER()
  }, [hue, depth, width, height, RENDER])

  return (
    <Fragment>
      <div className="scene">
        <div className="result">
          <div className="result__code">
            <button
              className="toggle-button"
              onClick={() => setShowCSS(!showCSS)}>{`Show ${
              showCSS ? 'HTML' : 'CSS'
            }`}</button>
            <div className="code-blocks">
              <pre className={`language-${showCSS ? 'css' : 'markup'}`}>
                <code
                  dangerouslySetInnerHTML={{
                    __html: showCSS ? cssRef.current : htmlRef.current,
                  }}
                />
              </pre>
            </div>
          </div>
          <div className="result__result">
            <form
              action="https://codepen.io/pen/define"
              method="POST"
              target="_blank">
              <input
                type="hidden"
                name="data"
                value={JSON.stringify({
                  title: 'My Cuboid',
                  html: markupRef.current,
                  css: styleRef.current,
                  css_pre_processor: 'none',
                  html_pre_processor: 'none',
                })}
              />
              <button type="submit" className="codepen-button">
                <span className="sr-only">Edit on CodePen</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <path d="M18.144 13.067v-2.134L16.55 12zm1.276 1.194a.628.628 0 01-.006.083l-.005.028-.011.053-.01.031a.443.443 0 01-.017.047l-.014.03a.78.78 0 01-.021.043l-.019.03a.57.57 0 01-.08.1l-.026.025a.602.602 0 01-.036.03l-.029.022-.01.008-6.782 4.522a.637.637 0 01-.708 0L4.864 14.79l-.01-.008a.599.599 0 01-.065-.052l-.026-.025-.032-.034-.021-.028a.588.588 0 01-.067-.11l-.014-.031a.644.644 0 01-.017-.047l-.01-.03c-.004-.018-.008-.036-.01-.054l-.006-.028a.628.628 0 01-.006-.083V9.739a.58.58 0 01.006-.083l.005-.027.011-.054.01-.03a.574.574 0 01.12-.217l.031-.034.026-.025a.62.62 0 01.065-.052l.01-.008 6.782-4.521a.638.638 0 01.708 0l6.782 4.521.01.008.03.022.035.03c.01.008.017.016.026.025a.545.545 0 01.08.1l.019.03a.633.633 0 01.021.043l.014.03c.007.016.012.032.017.047l.01.031c.004.018.008.036.01.054l.006.027a.619.619 0 01.006.083zM12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.372 12-12 0-6.627-5.372-12-12-12m0 10.492L9.745 12 12 13.51 14.255 12zm.638 4.124v2.975l4.996-3.33-2.232-1.493zm-6.272-.356l4.996 3.33v-2.974l-2.764-1.849zm11.268-4.52l-4.996-3.33v2.974l2.764 1.85zm-6.272-.356V6.41L6.366 9.74l2.232 1.493zm-5.506 1.549v2.134L7.45 12z"></path>
                </svg>
              </button>
            </form>
            <Cuboid
              innerRef={cubeRef}
              height={height}
              width={width}
              depth={depth}
              hue={hue}
              wireframe={wireframe}
            />
          </div>
        </div>
        <div className="controls">
          <label htmlFor="height">Height(vmin)</label>
          <input
            type="range"
            min="1"
            max="25"
            step="1"
            id="height"
            value={height}
            onChange={e => setHeight(e.target.value)}
          />
          <label htmlFor="width">Width(vmin)</label>
          <input
            type="range"
            min="1"
            max="25"
            step="1"
            id="width"
            value={width}
            onChange={e => setWidth(e.target.value)}
          />
          <label htmlFor="depth">Depth(vmin)</label>
          <input
            type="range"
            min="1"
            max="25"
            step="1"
            id="depth"
            value={depth}
            onChange={e => setDepth(e.target.value)}
          />
          <label htmlFor="hue">Hue</label>
          <input
            type="range"
            min="1"
            max="359"
            step="1"
            id="hue"
            value={hue}
            onChange={e => setHue(e.target.value)}
          />
          <label htmlFor="wireframe">Wireframe</label>
          <input
            id="wireframe"
            type="checkbox"
            value={wireframe}
            onChange={() => setWireframe(!wireframe)}
          />
        </div>
      </div>
    </Fragment>
  )
}

render(<App />, ROOT_NODE)

              
            
!
999px

Console