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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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='background'>
  <div class="disk">
    <svg viewBox="0 0 1000 1000" width="100%" height="100%">
      <defs>
        <mask id="punchout">
          <circle fill="white" cx="750" cy="540" r="35" />
          <circle fill="black" cx="750" cy="540" r="15" />
        </mask>
        <mask id="punchout2">
          <polygon fill="white" points="200,400 500,400 500,600 200,600" />
          <polygon fill="black" points="200,503 500,503 500,400 200,400" />
        </mask>
        <path d="M500,110 L560,110 C579,110 579,140 560,140 L505,140 L505,150 L495,150 L495,140 L440,140 C421,140 421,110 440,110 L500,110" fill="none" stroke-width="5" stroke="white" id="bar-thing" />
        <g id="screw-down">
          <path d="M480,180 L480,200 A20,20,0,0,0,520,200 L520,180 M487,200 L513,200" stroke-width="3" stroke="white" fill="none" />
          <circle cx="500" cy="200" r="13" fill="none" stroke="white" stroke-width="3" />
        </g>
        <filter id="outline">
          <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="2" />

          <feFlood flood-color="white" flood-opacity="1" result="COLOR" />

          <feComposite in="DILATED" in2="TURBULENCE" operator="in" result="OUCH" />
          <feConvolveMatrix order="3,3" kernelMatrix="1 0 0 
   0 1 0
   0 0 1" in="OUCH" result="NOISIER" />
          <feOffset dx="0" dy="0" in="NOISIER" result="BEVEL_30" />

          <feComposite in2="BEVEL_30" in="COLOR" operator="in" result="OUTLINE" />
          <feMerge>

            <feMergeNode in="OUTLINE" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
        <mask id="entirety">
          <g id="target">
          </g>
          <circle cx="500" cy="500" r="350" stroke="white" fill="none" stroke-width="5" />

          <circle cx="500" cy="500" r="335" stroke="white" fill="none" stroke-width="5" />
          <path stroke="white" fill="none" stroke-width="5" d="M180,500 L820,500 A320,320,0,0,0 180,500" />
          <path stroke="white" fill="none" stroke-width="3" d="M230,480 A270,250,0,0,1,770,480" />
          <path stroke="white" fill="none" stroke-width="30" stroke-linecap="round" d="M270,430 L370,430 A200,280,0,0,1,630,430 L730,430" />
          <path fill="white" d="M170 500 A160,160,0,0,0,700,500" />
          <path d="M350,660 L323,690 Q327,693 327,695 A260,260,0,0,0,760,500 L730,500 A230,230,0,0,1 350,660" stroke-width="5" fill="black" stroke="white" />
          <g id="gear2" filter="url(#outline)">
            <circle fill="black" cx="750" cy="540" r="30" mask="url(#punchout)" />
            <polygon points="748,510 749,505 751,505 752,510" fill="black" stroke="none" id="tog2" />
          </g>
          <g id="gear3" filter="url(#outline)">
            <circle fill="black" cx="690" cy="620" r="45" />
            <polygon points="688,576 690,570 690,570 692,576" fill="black" stroke="none" id="tog3" />
          </g>
          <g id="worm-gear">
            <polygon points="705,580 800,580 800,605 805,605 805,615 800,615 800,640 705,640" stroke-width="3" fill="black" stroke="white" />
            <polygon points="705,580 708,576 711,580 718,640 715,646 712,640 705,580" stroke-width="2" fill="black" stroke="white" id="worm1" />
          </g>
          <g id="worm-gear2" mask="url(#punchout2)">
            <polygon points="280,508 290,483 500,483 500,533 290,533 280,508" stroke-width="3" fill="black" stroke="white" />
            <polygon points="290,483 293,477 296,483 313,533 310,539 307,533 290,483" stroke-width="2" fill="black" stroke="white" id="worm2" />
          </g>
          <path d="M370,645 L360,660 Q346,675 360,680 A230,230,0,0,0 730,500 L690,500 A190,190,0,0,1 370,635" stroke-width="5" fill="black" stroke="white" />
          <path d="M420,500 Q420,560 500,620 L530,720 A230,230,0,0,0,722,500 L420,500" stroke-width="5" fill="black" stroke="white" />

          <path d="M540,665 A170,170,0,0,0,670,500" stroke-width="3" fill="none" stroke="white" />

          <g id="screw1" transform="rotate(20, 500, 500)">
            <circle cx="500" cy="740" r="13" stroke-width="3" fill="none" stroke="white" />
            <path d="M487,740 L513,740" stroke-width="3" fill="none" stroke="white" />
          </g>
          <use href="#screw1" transform="rotate(-60, 500,500)" />
          <circle cy="500" cx="630" r="10" transform="rotate(50,500,500)" id="circle" fill="white" />
          <g id="screw" transform="rotate(-15, 500, 500)">
            <circle cx="500" cy="695" r="13" stroke-width="3" fill="none" stroke="white" />
            <path d="M487,695 L513,695" stroke-width="3" fill="none" stroke="white" />
          </g>
          <use href="#screw" transform="rotate(-65, 500,500)" />
          <use href="#circle" transform="rotate(-35,500,500)" />
          <g id="gear1" filter="url(#outline)">
            <circle fill="black" cx="400" cy="600" r="58" stroke="none" />
            <polygon points="397,550 399,534 401,534 403,550" fill="black" stroke="none" id="tog" />
            <circle fill="white" cx="400" cy="600" r="10" stroke="none" />
          </g>
        </mask>
      </defs>
      <circle cy="500" cx="500" r="500" mask="url(#entirety)" fill="#492918" />
    </svg>
    <div class="symbol">
    </div>
  </div>
</div>
              
            
!

CSS

              
                $background-color: white;
$disk-color: hsl(0, 0, 10%);
$disk-background-color: radial-gradient(
  circle at top left,
  #fdfbd4 10%,
  #e3d18c 51%
);
$white-gray: hsl(0, 0, 74%);

p {
  font-family: "Orbitron", sans-serif;
}

svg {
  border-radius: 100%;
  overflow: hidden;
}

ellipse {
  stroke: $white-gray;
  stroke-width: 0.2;
}

.background {
  z-index: 1;
  background-color: $background-color;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.disk {
  transform-style: preserve-3d;
  position: relative;
  width: 80vh;
  height: 80vh;
  background: $disk-background-color;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.disk::after {
  transform: translateZ(-1px);
  position: absolute;
  top: -0.25vh;
  left: -0.25vh;
  content: "";
  display: block;
  width: 80.5vh;
  height: 80.5vh;
  background: $disk-color;
  border-radius: 100%;
}

.disk::before {
  position: absolute;
  content: "";
  display: block;
  width: 10vh;
  height: 10vh;
  background-color: $background-color;
  border-radius: 100%;
  border: solid 2.5vh $disk-color;
}

.symbol {
  position: absolute;
  left: 5vh;
  width: 13vh;
  height: 13vh;
  background: $white-gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sound-qube {
  border-radius: 0;
  width: 50%;
  height: 20vh;
  position: absolute;
  top: 35vh;
  right: 1vh;
  fill: white;
  .sound-qube-text {
    font-family: "Russo One", sans-serif;
    font-size: 100%;
    font-style: italic;
    transform: scale(1.3, 0.8);
    tspan {
      fill: none;
      stroke: white;
      stroke-width: 0.1vh;
    }
  }
  .sound-qube-kanji {
    font-family: "Russo One", sans-serif;
    font-size: 40%;
    font-style: italic;
    transform: scale(1.3, 0.8);
  }
  .human-entertainment-text {
    font-size: 21%;
    font-family: "Orbitron", sans-serif;
  }

  .human-text {
    font-size: 110%;
    font-family: "EB Garamond", serif;
    fill: none;
    stroke: white;
    stroke-width: 0.07vh;
    letter-spacing: -0.128em;
  }
}

              
            
!

JS

              
                // 1.9
// 1.9

const total = 16;
const deg = 360 / total;
const target = document.getElementById("target");

for (i = 0; i < total; i++) {
  const elem = document.createElementNS("http://www.w3.org/2000/svg", "use");
  elem.setAttributeNS(null, "transform", `rotate(${i * deg},500,500)`);

  elem.setAttributeNS(
    "http://www.w3.org/1999/xlink",
    "xlink:href",
    "#bar-thing"
  );
  target.appendChild(elem);
}

const totalscrew = 5;
const deg2 = 200 / totalscrew;

for (i = 0; i < totalscrew; i++) {
  const elem = document.createElementNS("http://www.w3.org/2000/svg", "use");
  elem.setAttributeNS(null, "transform", `rotate(${-80 + i * deg2},500,500)`);

  elem.setAttributeNS(
    "http://www.w3.org/1999/xlink",
    "xlink:href",
    "#screw-down"
  );
  target.appendChild(elem);
}

const totalTog = 25;
const deg3 = 360 / totalTog;

const gear1 = document.getElementById("gear1");

for (j = 0; j < totalTog; j++) {
  const elem = document.createElementNS("http://www.w3.org/2000/svg", "use");
  elem.setAttributeNS(null, "transform", `rotate(${j * deg3},400,600)`);

  elem.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#tog");
  gear1.appendChild(elem);
}

const totalTog2 = 20;
const deg4 = 360 / totalTog2;

const gear2 = document.getElementById("gear2");

for (j = 0; j < totalTog2; j++) {
  const elem = document.createElementNS("http://www.w3.org/2000/svg", "use");
  elem.setAttributeNS(null, "transform", `rotate(${j * deg4},750,540)`);

  elem.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#tog2");
  gear2.appendChild(elem);
}

const totalTog3 = 40;
const deg5 = 360 / totalTog3;

const gear3 = document.getElementById("gear3");

for (j = 0; j < totalTog3; j++) {
  const elem = document.createElementNS("http://www.w3.org/2000/svg", "use");
  elem.setAttributeNS(null, "transform", `rotate(${j * deg5},690,620)`);

  elem.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#tog3");
  gear3.appendChild(elem);
}

const totalWorm = 8;
const spacing = 90 / totalWorm;

const wormGear = document.getElementById("worm-gear");

for (j = 0; j < totalWorm; j++) {
  const elem = document.createElementNS("http://www.w3.org/2000/svg", "use");
  elem.setAttributeNS(null, "transform", `translate(${j * spacing},0)`);

  elem.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#worm1");
  wormGear.appendChild(elem);
}

const totalWorm2 = 15;
const spacing2 = 200 / totalWorm2;

const wormGear2 = document.getElementById("worm-gear2");

for (j = 0; j < totalWorm2; j++) {
  const elem = document.createElementNS("http://www.w3.org/2000/svg", "use");
  elem.setAttributeNS(null, "transform", `translate(${j * spacing2},0)`);

  elem.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#worm2");
  wormGear2.appendChild(elem);
}

              
            
!
999px

Console