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

              
                <div class="wrapper">
  <div class="wheelWrapper"></div>
  <div class="wheelRing"></div>
  <div class="ring"></div>
  <div class="stick one"></div>
  <div class="stick two"></div>
  <div class="stick three"></div>
  <div class="stick four"></div>
  <div class="stick five"></div>
  <div class="outerCircle"></div>
  <div class="innerCircle">
    SPIN
  </div>
  <div class="ringBorder"></div>
  <div class="dot one"></div>
  <div class="dot two"></div>
  <div class="dot three"></div>
  <div class="dot four"></div>
  <div class="dot five"></div>
  <div class="dot six"></div>
  <div class="dot seven"></div>
  <div class="dot eight"></div>
  <div class="dot nine"></div>
  <div class="dot ten"></div>

  <div class="shapeWrapper one">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper two">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper three">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper four">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper five">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper six">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper seven">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper eight">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper nine">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper ten">
    <div class="shape"></div>
  </div>

  <div class="circleWrapper"></div>
  <div class="circle"></div>
  <div class="pointer"></div>

  <div class="buttonsWrapper left">
    <div class="buttonWrapper">
      <div class="button"></div>
      <div class="description">L1</div>
    </div>

    <div class="buttonWrapper top">
      <div class="button"></div>
      <div class="description">L2</div>
    </div>
  </div>

  <div class="arrowsWrapper">
    <div class="background"></div>
    <div class="background flipped"></div>
    <div class="arrowWrapper top">
      <svg viewBox="0 0 184.58 184.58">
          <path fill="#818384" d="M182.004,146.234L108.745,19.345c-3.435-5.949-9.586-9.5-16.455-9.5s-13.021,3.551-16.455,9.5L2.576,146.234
		c-3.435,5.948-3.435,13.051,0,19c3.435,5.949,9.586,9.5,16.455,9.5h146.518c6.869,0,13.021-3.552,16.455-9.5
		C185.438,159.285,185.438,152.182,182.004,146.234z M169.88,158.234c-0.435,0.751-1.725,2.5-4.331,2.5H19.031
		c-2.606,0-3.896-1.749-4.331-2.5c-0.434-0.752-1.302-2.744,0.001-5L87.96,26.345c1.303-2.256,3.462-2.5,4.33-2.5
		s3.027,0.244,4.33,2.5l73.259,126.889C171.181,155.49,170.313,157.482,169.88,158.234z"/>
      </svg>
    </div>
    <div class="arrowWrapper right">
      <svg viewBox="0 0 184.58 184.58">
          <path fill="#818384" d="M182.004,146.234L108.745,19.345c-3.435-5.949-9.586-9.5-16.455-9.5s-13.021,3.551-16.455,9.5L2.576,146.234
		c-3.435,5.948-3.435,13.051,0,19c3.435,5.949,9.586,9.5,16.455,9.5h146.518c6.869,0,13.021-3.552,16.455-9.5
		C185.438,159.285,185.438,152.182,182.004,146.234z M169.88,158.234c-0.435,0.751-1.725,2.5-4.331,2.5H19.031
		c-2.606,0-3.896-1.749-4.331-2.5c-0.434-0.752-1.302-2.744,0.001-5L87.96,26.345c1.303-2.256,3.462-2.5,4.33-2.5
		s3.027,0.244,4.33,2.5l73.259,126.889C171.181,155.49,170.313,157.482,169.88,158.234z"/>
      </svg>
    </div>
    <div class="arrowWrapper bottom">
      <svg viewBox="0 0 184.58 184.58">
          <path fill="#818384" d="M182.004,146.234L108.745,19.345c-3.435-5.949-9.586-9.5-16.455-9.5s-13.021,3.551-16.455,9.5L2.576,146.234
		c-3.435,5.948-3.435,13.051,0,19c3.435,5.949,9.586,9.5,16.455,9.5h146.518c6.869,0,13.021-3.552,16.455-9.5
		C185.438,159.285,185.438,152.182,182.004,146.234z M169.88,158.234c-0.435,0.751-1.725,2.5-4.331,2.5H19.031
		c-2.606,0-3.896-1.749-4.331-2.5c-0.434-0.752-1.302-2.744,0.001-5L87.96,26.345c1.303-2.256,3.462-2.5,4.33-2.5
		s3.027,0.244,4.33,2.5l73.259,126.889C171.181,155.49,170.313,157.482,169.88,158.234z"/>
      </svg>
    </div>
    <div class="arrowWrapper left">
      <svg viewBox="0 0 184.58 184.58">
          <path fill="#818384" d="M182.004,146.234L108.745,19.345c-3.435-5.949-9.586-9.5-16.455-9.5s-13.021,3.551-16.455,9.5L2.576,146.234
		c-3.435,5.948-3.435,13.051,0,19c3.435,5.949,9.586,9.5,16.455,9.5h146.518c6.869,0,13.021-3.552,16.455-9.5
		C185.438,159.285,185.438,152.182,182.004,146.234z M169.88,158.234c-0.435,0.751-1.725,2.5-4.331,2.5H19.031
		c-2.606,0-3.896-1.749-4.331-2.5c-0.434-0.752-1.302-2.744,0.001-5L87.96,26.345c1.303-2.256,3.462-2.5,4.33-2.5
		s3.027,0.244,4.33,2.5l73.259,126.889C171.181,155.49,170.313,157.482,169.88,158.234z"/>
      </svg>
    </div>

    <div class="buttonWrapper top below"></div>
    <div class="buttonWrapper right below"></div>
    <div class="buttonWrapper bottom below"></div>
    <div class="buttonWrapper left below"></div>

    <div class="buttonWrapper top"></div>
    <div class="buttonWrapper right"></div>
    <div class="buttonWrapper bottom"></div>
    <div class="buttonWrapper left"></div>
  </div>

  <div class="buttonsWrapper right">
    <div class="buttonWrapper">
      <div class="description">R1</div>
      <div class="button"></div>
    </div>

    <div class="buttonWrapper top">
      <div class="description">R2</div>
      <div class="button"></div>
    </div>
  </div>

  <div class="buttonsWrapper signs">
    <div class="buttonWrapper">
      <svg viewBox="0 0 184.58 184.58">
          <path fill="#3fb499" d="M182.004,146.234L108.745,19.345c-3.435-5.949-9.586-9.5-16.455-9.5s-13.021,3.551-16.455,9.5L2.576,146.234
		c-3.435,5.948-3.435,13.051,0,19c3.435,5.949,9.586,9.5,16.455,9.5h146.518c6.869,0,13.021-3.552,16.455-9.5
		C185.438,159.285,185.438,152.182,182.004,146.234z M169.88,158.234c-0.435,0.751-1.725,2.5-4.331,2.5H19.031
		c-2.606,0-3.896-1.749-4.331-2.5c-0.434-0.752-1.302-2.744,0.001-5L87.96,26.345c1.303-2.256,3.462-2.5,4.33-2.5
		s3.027,0.244,4.33,2.5l73.259,126.889C171.181,155.49,170.313,157.482,169.88,158.234z"/>
      </svg>
      <div class="button"></div>
    </div>

    <div class="buttonWrapper">
      <svg viewBox="0 0 47.971 47.971">
	<path fill="#a5aed9" d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
		c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
		C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
		s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"/>
</svg>
      <div class="button"></div>
    </div>

    <div class="row">
      <div class="buttonWrapper">
        <svg viewBox="0 0 482.239 482.239">
    <path fill="#d998c3" d="m465.016 0h-447.793c-9.52 0-17.223 7.703-17.223 17.223v447.793c0 9.52 7.703 17.223 17.223 17.223h447.793c9.52 0 17.223-7.703 17.223-17.223v-447.793c0-9.52-7.703-17.223-17.223-17.223zm-17.223 447.793h-413.347v-413.347h413.348v413.347z"/>
</svg>
        <div class="button"></div>
      </div>

      <div class="buttonWrapper">
        <svg viewBox="0 0 512 512">
		<path fill="#e94f2b" d="M256,0C114.618,0,0,114.618,0,256s114.618,256,256,256s256-114.618,256-256S397.382,0,256,0z M256,469.333
			c-117.818,0-213.333-95.515-213.333-213.333S138.182,42.667,256,42.667S469.333,138.182,469.333,256S373.818,469.333,256,469.333z
			"/>
</svg>
        <div class="button"></div>
      </div>
    </div>
  </div>

  <div class="footerWrapper">
    <img src="https://cdn.sanity.io/images/0ugmrqfk/production/98758fc9b207ad4bebb1898d5bee151f95f66ea6-200x155.svg" class="logo" />
    <img src="https://cdn.sanity.io/images/0ugmrqfk/production/2509bfa32449151e0e7c6ffd33384f69a88adf0f-1920x376.png" class="wordmark" />

    <div class="bottomButtonsWrapper">
      <div class="buttonWrapper">
        <div class="button"></div>
        <div class="description">Select</div>
      </div>

      <div class="buttonWrapper">
        <div class="button start"></div>
        <div class="description">Start</div>
      </div>
    </div>

    <div class="textWrapper">
      <div class="text">A</div>
      <div class="triangle right"></div>
      <div class="triangle left"></div>
      <div class="text">B</div>
    </div>
  </div>
</div>

<a class="author" href="https://itsmenatalie.com" target="_blank">Created by ItsMeNatalie</a>
              
            
!

CSS

              
                body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  overflow: hidden;

  .wrapper {
    position: relative;
    background-color: #bbbfc8;
    border-radius: 90px;
    height: 410px;
    width: 460px;
    font-family: "Roboto", sans-serif;
    border: double 5px transparent;
    background-image: linear-gradient(#bbbfc8, #bbbfc8),
      radial-gradient(circle at top, #222, #a1a4a9);
    background-origin: border-box;
    background-clip: content-box, border-box;

    .wheelWrapper {
      position: absolute;
      border-radius: 50%;
      height: 350px;
      width: 350px;
      top: -100px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border: double 4px transparent;
      background-image: linear-gradient(#bbbfc8, #bbbfc8),
        radial-gradient(circle at top, #222, #a1a4a9);
      background-origin: border-box;
      background-clip: content-box, border-box;
    }

    .wheelRing {
      position: absolute;
      border-radius: 50%;
      height: 320px;
      width: 320px;
      top: -85px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border: 3px solid #3c3d3f;
      background-image: radial-gradient(circle at center, #3d3e40, #222);
    }

    .outerCircle {
      position: absolute;
      top: -25px;
      width: 200px;
      height: 200px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 50%;
      background: #e1ddde;
      box-shadow: 0 0 10px 0 rgba(34, 34, 34, 0.5);
    }

    .innerCircle {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 40px;
      width: 75px;
      height: 75px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 50%;
      background: #e1ddde;
      box-shadow: 0 0 10px 0 rgba(34, 34, 34, 0.5);
      font-weight: bolder;
      font-size: 20px;
      text-shadow: 0px 1px 1px rgba(#4d4d4d, 0.5);
      color: transparent;
    }

    .stick {
      position: absolute;
      top: -68px;
      background: radial-gradient(ellipse at center, #74817a 5%, #e1ddde 65%);
      width: 6px;
      height: 292px;
      left: 0;
      right: 0;
      margin: 0 auto;
      box-shadow: 0 0 2px 0 rgba(34, 34, 34, 0.4);

      &.one {
        transform: rotate(18deg);
      }

      &.two {
        transform: rotate(54deg);
      }

      &.three {
        transform: rotate(90deg);
      }

      &.four {
        transform: rotate(126deg);
      }

      &.five {
        transform: rotate(162deg);
      }
    }

    .ringBorder {
      position: absolute;
      top: -77px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border: solid 10px #dfdde0;
      width: 290px;
      height: 290px;
      border-radius: 50%;
      box-shadow: inset 0 0 5px 0 rgba(34, 34, 34, 0.5);
    }

    .ring {
      position: absolute;
      top: -75px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: linear-gradient(36deg, #b4d726 42.34%, transparent 42.34%) 0 0,
        linear-gradient(72deg, #25b855 75.48%, transparent 75.48%) 0 0,
        linear-gradient(-36deg, #7125ae 42.34%, transparent 42.34%) 100% 0,
        linear-gradient(-72deg, #2323b0 75.48%, transparent 75.48%) 100% 0,
        linear-gradient(36deg, transparent 57.66%, #be28d9 57.66%) 100% 100%,
        linear-gradient(72deg, transparent 24.52%, #dc2222 24.52%) 100% 100%,
        linear-gradient(-36deg, transparent 57.66%, #f0e122 57.66%) 0 100%,
        linear-gradient(-72deg, transparent 24.52%, #f8ca21 24.52%) 0 100%,
        #21a4f9 linear-gradient(#ed9a41, #ed9a41) 50% 100%;
      background-repeat: no-repeat;
      background-size: 50% 50%;
    }

    .dot {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #f7f7f7;
      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 1);

      &.one {
        top: -67px;
        right: 181px;
      }

      &.two {
        top: -13px;
        right: 106px;
      }

      &.three {
        top: 75px;
        right: 77px;
      }

      &.four {
        top: 164px;
        right: 106px;
      }

      &.five {
        top: 218px;
        right: 181px;
      }

      &.six {
        top: 218px;
        left: 181px;
      }

      &.seven {
        top: 162px;
        left: 106px;
      }

      &.eight {
        top: 75px;
        left: 78px;
      }

      &.nine {
        top: -13px;
        left: 107px;
      }

      &.ten {
        top: -67px;
        left: 181px;
      }
    }

    .circleWrapper {
      position: absolute;
      top: 130px;
      right: 10px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 5px solid #ced0d6;
      background: #a1a4a9;
      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.5);
    }

    .circle {
      position: absolute;
      top: 140px;
      right: 20px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ebebed;
      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.2);
    }

    .pointer {
      position: absolute;
      top: 127px;
      right: 27px;
      width: 80px;
      height: 7px;
      border-radius: 50%;
      background: #ebebed;
      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.4);
      transform: rotate(20deg);
    }

    .shapeWrapper {
      position: absolute;

      &.one {
        top: 105px;
        left: 185px;
        transform: rotate(55deg);
      }

      &.two {
        top: 73px;
        left: 175px;
        transform: rotate(90deg);
      }

      &.three {
        top: 40px;
        left: 180px;
        transform: rotate(125deg);
      }

      &.four {
        top: 20px;
        left: 207px;
        transform: rotate(162deg);
      }

      &.five {
        top: 122px;
        left: 208px;
        transform: rotate(18deg);
      }

      &.six {
        top: 122px;
        right: 208px;
        transform: rotate(-18deg);
      }

      &.seven {
        top: 20px;
        right: 207px;
        transform: rotate(-162deg);
      }

      &.eight {
        top: 40px;
        right: 180px;
        transform: rotate(-125deg);
      }

      &.nine {
        top: 73px;
        right: 175px;
        transform: rotate(-90deg);
      }

      &.ten {
        top: 105px;
        right: 185px;
        transform: rotate(-55deg);
      }

      .shape {
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-bottom: 4px solid #f7f7f7;
        position: relative;
        top: 0px;

        &:after {
          content: "";
          position: absolute;
          left: -5px;
          top: 4px;
          width: 0;
          height: 0;
          border: 5px solid transparent;
          border-top: 25px solid #f7f7f7;
        }
      }
    }

    .buttonsWrapper {
      position: absolute;
      top: 190px;

      &.signs {
        top: 240px;
        right: 50px;

        .row {
          position: absolute;
          display: flex;
          left: -32px;
          top: 32px;
        }

        .buttonWrapper {
          margin: 30px 15px;
        }
      }

      &.left {
        left: 20px;
      }
      &.right {
        right: 20px;
      }
      .buttonWrapper {
        position: relative;
        display: flex;
        align-items: flex-end;

        &.top {
          margin-top: 10px;
          align-items: flex-start;
        }

        .button {
          height: 30px;
          width: 30px;
          border-radius: 50%;
          background: radial-gradient(
            ellipse at center,
            #727481 50%,
            #2d2f3c 70%
          );
          border: 2px solid #030710;
          cursor: pointer;
        }

        .description {
          font-weight: bold;
          padding: 0 5px;
          color: #dbdcde;
          text-shadow: 1px 1px #69686d;
        }

        svg {
          font-size: bold;
          position: absolute;
          height: 14px;
          z-index: 5;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          cursor: pointer;
        }
      }
    }

    .arrowsWrapper {
      position: absolute;
      left: 75px;
      bottom: 20px;

      .background {
        background-color: #b0b4bf;
        height: 130px;
        width: 40px;
        border-radius: 5px;

        &.flipped {
          position: absolute;
          bottom: 0;
          transform: rotate(90deg);
        }
      }

      .arrowWrapper {
        position: absolute;

        &.top {
          top: 3px;
          left: 13px;
        }

        &.right {
          transform: rotate(90deg);
          right: -40px;
          bottom: 55px;
        }

        &.bottom {
          transform: rotate(180deg);
          bottom: 3px;
          left: 13px;
        }

        &.left {
          transform: rotate(-90deg);
          left: -40px;
          bottom: 55px;
        }

        svg {
          height: auto;
          width: 14px;
        }
      }

      .buttonWrapper {
        position: absolute;
        background-color: #6e727e;
        height: 26px;
        width: 26px;
        border-radius: 5px;

        &.below {
          height: 28px;
          width: 28px;
          background-color: #2c303a;

          &.top {
            top: 19px;
            left: 6px;
          }

          &.right {
            top: 52px;
            right: -26px;
          }

          &.bottom {
            bottom: 19px;
            left: 6px;
          }

          &.left {
            top: 52px;
            left: -26px;
          }

          &:after {
            bottom: -12px;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-top: 14px solid #2c303a;
          }
        }

        &.top {
          top: 20px;
          left: 7px;
        }

        &.right {
          top: 53px;
          right: -25px;
          transform: rotate(90deg);
        }

        &.bottom {
          bottom: 20px;
          left: 7px;
          transform: rotate(180deg);
        }

        &.left {
          top: 53px;
          left: -25px;
          transform: rotate(-90deg);
        }

        &:after {
          content: "";
          position: absolute;
          bottom: -10px;
          border-radius: 5px;
          border-left: 13px solid transparent;
          border-right: 13px solid transparent;
          border-top: 13px solid #6e727e;
        }
      }
    }

    .footerWrapper {
      position: absolute;
      bottom: 5px;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0.8;

      .logo {
        height: 25px;
        width: auto;
      }

      .wordmark {
        margin-top: 4px;
        height: 15px;
        width: auto;
      }

      .bottomButtonsWrapper {
        display: flex;
        padding-top: 7px;

        .buttonWrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 15px;

          .button {
            height: 15px;
            width: 30px;
            background: radial-gradient(
              ellipse at center,
              #727481 50%,
              #2d2f3c 70%
            );
            border: 2px solid #030710;
            border-radius: 3px;
            cursor: pointer;
            &.start {
              position: relative;
              border-radius: 3px 100px 100px 3px;
            }
          }

          .description {
            font-weight: bold;
            text-transform: uppercase;
            padding-top: 5px;
            color: #030710;
            font-size: 15px;
          }
        }
      }

      .textWrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 10px;
        .text {
          padding: 0 2px;
          font-size: 13px;
        }
        .triangle {
          width: 0;
          height: 0;
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;

          &.left {
            border-left: 7px solid #030710;
            margin-left: 5px;
          }
          &.right {
            border-right: 7px solid #030710;
            margin-right: 5px;
          }
        }
      }
    }
  }

  a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console