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

              
                body(data-state="night")
  svg.scene(
    xmlns="http://www.w3.org/2000/svg",
    xmlns:xlink="http://www.w3.org/1999/xlink",
    viewbox="0 0 1280 1024"
  )
    defs
      lineargradient#linear-gradient(
        x1="50.94",
        y1="38.72",
        x2="460.55",
        y2="38.72",
        gradienttransform="translate(11.79 228.95) rotate(-31.41)",
        gradientunits="userSpaceOnUse"
      )
        stop(offset="0", stop-color="#fff")
        stop(offset="0.04", stop-color="#fff", stop-opacity="0.84")
        stop(offset="0.1", stop-color="#fff", stop-opacity="0.67")
        stop(offset="0.16", stop-color="#fff", stop-opacity="0.51")
        stop(offset="0.23", stop-color="#fff", stop-opacity="0.37")
        stop(offset="0.3", stop-color="#fff", stop-opacity="0.25")
        stop(offset="0.38", stop-color="#fff", stop-opacity="0.16")
        stop(offset="0.47", stop-color="#fff", stop-opacity="0.09")
        stop(offset="0.57", stop-color="#fff", stop-opacity="0.04")
        stop(offset="0.71", stop-color="#fff", stop-opacity="0.01")
        stop(offset="1", stop-color="#fff", stop-opacity="0")
    g#scene
      rect.bg(width="1280", height="1024")
      g#stars
        polygon#star1.star(
          points="95.84 75.99 104.61 87.72 119.23 87.06 107.14 94.81 108.16 110.45 99.03 97.71 84.77 99.38 96.5 90.62 95.84 75.99"
        )
        polygon#star2.star(
          points="266.51 173.67 272.9 182.21 283.55 181.74 274.75 187.38 275.49 198.78 268.84 189.49 258.45 190.71 266.99 184.32 266.51 173.67"
        )
        polygon#star3.star(
          points="99.56 330.39 103.03 335.04 108.84 334.78 104.04 337.85 104.44 344.06 100.82 339 95.16 339.67 99.82 336.19 99.56 330.39"
        )
        polygon#star4.star(
          opacity="0.15",
          points="281.28 453.21 289.42 464.11 303.01 463.5 291.78 470.7 292.72 485.23 284.24 473.39 270.99 474.94 281.89 466.8 281.28 453.21"
        )
        polygon#star5.star(
          points="130.26 580.77 135.58 587.88 144.45 587.49 137.12 592.19 137.74 601.68 132.2 593.95 123.55 594.96 130.66 589.64 130.26 580.77"
        )
        polygon#star6.star(
          points="240.07 686.63 248.51 697.92 262.59 697.29 250.95 704.75 251.93 719.82 243.14 707.55 229.41 709.15 240.7 700.71 240.07 686.63"
        )
        polygon#star7.star(
          opacity="0.15",
          points="76.99 778.01 82.69 785.64 92.22 785.21 84.35 790.26 85.01 800.44 79.07 792.14 69.78 793.23 77.42 787.53 76.99 778.01"
        )
        polygon#star8.star(
          opacity="0.15",
          points="634.03 815.92 638.25 821.57 645.3 821.25 639.48 824.99 639.97 832.52 635.57 826.38 628.7 827.19 634.35 822.97 634.03 815.92"
        )
        polygon#star9.star(
          points="517.92 738.82 523.72 746.58 533.4 746.14 525.4 751.28 526.08 761.63 520.04 753.19 510.6 754.3 518.36 748.5 517.92 738.82"
        )
        polygon.star(
          points="788.21 711.42 792.18 716.73 798.8 716.43 793.33 719.94 793.79 727.02 789.66 721.25 783.2 722.01 788.51 718.04 788.21 711.42"
        )
        polygon.star(
          opacity="0.15",
          points="1215.99 601.01 1221.69 608.64 1231.21 608.22 1223.34 613.26 1224.01 623.43 1218.07 615.14 1208.79 616.23 1216.42 610.53 1215.99 601.01"
        )
        polygon.star(
          points="1134.16 258.08 1136.78 261.58 1141.14 261.38 1137.53 263.7 1137.84 268.36 1135.12 264.56 1130.86 265.06 1134.36 262.44 1134.16 258.08"
        )
        polygon.star(
          opacity="0.15",
          points="1001.28 30.21 1009.42 41.11 1023.01 40.5 1011.78 47.7 1012.72 62.23 1004.24 50.39 990.99 51.95 1001.89 43.8 1001.28 30.21"
        )
        polygon.star(
          points="789.81 118.5 795.77 126.48 805.72 126.03 797.5 131.31 798.19 141.94 791.98 133.28 782.28 134.41 790.26 128.45 789.81 118.5"
        )
        polygon.star(
          opacity="0.15",
          points="501.65 59.84 506.42 66.23 514.38 65.87 507.8 70.09 508.35 78.6 503.38 71.67 495.62 72.58 502 67.8 501.65 59.84"
        )
        polygon.star(
          points="1001.28 532.21 1009.42 543.11 1023.01 542.5 1011.78 549.7 1012.72 564.23 1004.24 552.39 990.99 553.95 1001.89 545.8 1001.28 532.21"
        )
      g#comet
        polygon.comet__trail(points="69 223 423.12 18.85 83 247 69 223")
        path.comet(
          d="M77.47,222.45a7.46,7.46,0,0,1-4.56-1.27,14.42,14.42,0,0,0-11.4,10.31,7.59,7.59,0,0,1,1.13,4.37,7.89,7.89,0,0,1-1,3.83A14.61,14.61,0,0,0,63.07,243,14.43,14.43,0,0,0,68,247.89a3.91,3.91,0,0,1,3.6,1.54,14.48,14.48,0,0,0,8.75-.34,3.21,3.21,0,0,1,1.53-1.75,3.14,3.14,0,0,1,2.17-.24,14.48,14.48,0,0,0,5.52-8.53,4.36,4.36,0,0,1-.7-1.73,4.22,4.22,0,0,1,.9-3.43,14.42,14.42,0,0,0-9.37-11.57A8.12,8.12,0,0,1,77.47,222.45Z"
        )
        ellipse.comet__crater(
          cx="75.82",
          cy="239.91",
          rx="3.5",
          ry="2.5",
          transform="translate(-11.7 4.02) rotate(-2.82)"
        )
        ellipse.comet__crater(
          cx="79.76",
          cy="228.49",
          rx="2.57",
          ry="2.23",
          transform="translate(-11.13 4.2) rotate(-2.82)"
        )
        ellipse.comet__crater(
          cx="71.04",
          cy="231.48",
          rx="0.47",
          ry="0.41",
          transform="translate(-11.29 3.77) rotate(-2.82)"
        )
        path.comet__shadow(
          d="M88.38,228.93a17.94,17.94,0,0,1-19.66,19.35,14.48,14.48,0,0,0,19.66-19.35Z"
        )
      g#moonSun
        circle.ray(cx="658", cy="379", r="156.63")
        circle.ray(cx="658", cy="379", r="156.63")
        circle.ray(cx="658", cy="379", r="156.63")
        circle.ray(cx="658", cy="379", r="156.63")
        circle.moonSun(cx="658", cy="379", r="156.63")
        g#craters
          circle(cx="658", cy="379", r="156.63", fill="none")
          g
            ellipse.crater(cx="614", cy="277.09", rx="13.77", ry="10.37")
            path.crater-outline(
              d="M614,266.72c7.61,0,13.78,4.65,13.78,10.37s-6.17,10.38-13.78,10.38-13.77-4.65-13.77-10.38,6.17-10.37,13.77-10.37m0-2c-9.07,0-16.45,5.56-16.45,12.39s7.38,12.39,16.45,12.39,16.46-5.55,16.46-12.39S623.07,264.7,614,264.7Z"
            )
          g
            ellipse.crater(
              cx="550.78",
              cy="321.46",
              rx="6.27",
              ry="5.93",
              transform="translate(-82.84 249.18) rotate(-23.76)"
            )
            path.crater-outline(
              d="M548.39,316A5.94,5.94,0,1,1,545,324a6.1,6.1,0,0,1,3.35-7.95m-.47-1.06a7.1,7.1,0,1,0,9.71,3.47,7.31,7.31,0,0,0-9.71-3.47Z"
            )
          g
            ellipse.crater(
              cx="713.73",
              cy="372.48",
              rx="5.44",
              ry="4.7",
              transform="translate(-47.57 634.34) rotate(-46.54)"
            )
            path.crater-outline(
              d="M710.31,369.24c2.07-2.18,5.27-2.5,7.16-.71s1.74,5-.33,7.18-5.27,2.5-7.16.72-1.73-5,.33-7.19m-.66-.63c-2.47,2.61-2.64,6.45-.39,8.58s6.08,1.75,8.54-.85,2.64-6.45.4-8.58-6.09-1.75-8.55.85Z"
            )
          g
            ellipse.crater(
              cx="713.73",
              cy="463.29",
              rx="11.53",
              ry="9.96",
              transform="translate(-113.49 662.69) rotate(-46.54)"
            )
            path.crater-outline(
              d="M706.5,456.44c4.37-4.62,11.16-5.3,15.15-1.51s3.69,10.6-.69,15.22-11.17,5.3-15.16,1.51-3.68-10.6.7-15.22m-1.41-1.33c-5.22,5.51-5.6,13.67-.83,18.18s12.88,3.7,18.1-1.81,5.6-13.67.84-18.18-12.89-3.7-18.11,1.81Z"
            )
          g
            ellipse.crater(
              cx="613.58",
              cy="407.96",
              rx="29.79",
              ry="34.19",
              transform="translate(-101.33 229.58) rotate(-19.61)"
            )
            path.crater-outline(
              d="M602.11,375.75c15.49-5.52,33.2,4.42,39.53,22.21s-1.09,36.68-16.59,42.2-33.2-4.42-39.53-22.21,1.09-36.68,16.59-42.2m-2.24-6.26c-18.48,6.59-27.37,29.2-19.81,50.41S608.8,453,627.28,446.42s27.37-29.2,19.82-50.41-28.74-33.1-47.23-26.52Z"
            )
          g
            ellipse.crater(
              cx="534.28",
              cy="430.99",
              rx="4.41",
              ry="6.61",
              transform="translate(-146.32 341.57) rotate(-31.41)"
            )
            path.crater-outline(
              d="M530.83,425.35c2.08-1.27,5.31.23,7.21,3.34s1.76,6.67-.32,7.94-5.3-.23-7.2-3.34-1.77-6.67.31-7.94m-.67-1.1c-2.48,1.51-2.64,5.77-.38,9.48s6.14,5.51,8.61,4,2.65-5.77.38-9.48-6.13-5.51-8.61-4Z"
            )
          g
            ellipse.crater(
              cx="654.58",
              cy="308.25",
              rx="4.13",
              ry="3.58",
              transform="translate(62.9 724.68) rotate(-60.36)"
            )
            path.crater-outline(
              d="M656.62,304.66a4.18,4.18,0,1,1-5.15,1.82,3.89,3.89,0,0,1,5.15-1.82m.4-.7c-2-1.16-4.81-.19-6.16,2.18s-.77,5.24,1.28,6.4,4.81.2,6.16-2.17.77-5.24-1.28-6.41Z"
            )
          g
            ellipse.crater(
              cx="723.81",
              cy="268.44",
              rx="9.37",
              ry="26.45",
              transform="translate(133.7 766.16) rotate(-60.49)"
            )
            path.crater-outline(
              d="M728.42,260.29c12.71,7.19,21,16.67,18.41,21.17s-14.92,2.32-27.63-4.87-21-16.67-18.41-21.18,14.92-2.32,27.63,4.88m.9-1.59c-15.16-8.58-30-11.19-33-5.82s6.82,16.72,22,25.3,30,11.19,33,5.82-6.82-16.72-22-25.3Z"
            )
          g
            circle.crater(cx="775.8", cy="375.71", r="23.69")
            path.crater-outline(
              d="M775.8,352a23.69,23.69,0,1,1-23.69,23.69A23.69,23.69,0,0,1,775.8,352m0-4.61a28.3,28.3,0,1,0,28.3,28.3,28.34,28.34,0,0,0-28.3-28.3Z"
            )
          path.crater-outline(
            d="M645.5,502.72a28.32,28.32,0,0,0-28.28,27.53q2.28.62,4.59,1.17c0-.13,0-.27,0-.4a23.7,23.7,0,1,1,47,4.23c1.58-.11,3.16-.23,4.73-.39a28.69,28.69,0,0,0,.26-3.84A28.33,28.33,0,0,0,645.5,502.72Z"
          )
          path.crater(
            d="M645.5,507.33A23.7,23.7,0,0,0,621.8,531c0,.13,0,.27,0,.4A156.94,156.94,0,0,0,658,535.63c3.63,0,7.23-.14,10.8-.38a23.64,23.64,0,0,0-23.3-27.92Z"
          )
        path.moonSun__shadow(
          d="M789.28,293.56A188.85,188.85,0,0,1,792,325.5c0,103.55-84,187.5-187.5,187.5a188.85,188.85,0,0,1-31.94-2.72A156.64,156.64,0,0,0,789.28,293.56Z"
        )
    g#clouds
      g.cloud
        path.cloud__shadow(
          d="M834,636c-21.56-13-55.2-28.53-90.21-29.56a123,123,0,0,0,.92-15c0-69.62-58.55-121.84-130.78-121.84-48.73,0-91.23,25.7-113.73,63.8a105,105,0,0,0-11.44-.62c-47.41,0-86.1,31.62-88.38,71.35-1.26,26.75,25.37,18.21,22.38,31.82Z"
        )
        path.cloud__foreground(
          d="M815.81,636c-20.5-11.91-52.49-22.34-85.78-23.28A109.31,109.31,0,0,0,730.9,599c0-64-55.67-115.83-124.35-115.83-46.34,0-86.75,23.61-108.14,58.62a102.82,102.82,0,0,0-10.89-.57c-45.07,0-81.87,29-84,65.56C363.34,612.7,335.64,623.5,332.8,636Z"
        )
      g.cloud
        path.cloud__shadow(
          d="M804,448h237.37c-11.53-8.86-28.37-16-48.41-20.36a69.71,69.71,0,0,0,2.67-19.16c0-39.48-32.91-71.48-73.52-71.48A74.26,74.26,0,0,0,869,359.11a55.67,55.67,0,0,0-20.21-3.76c-30.18,0-54.65,23.79-54.65,53.13A51.5,51.5,0,0,0,796.21,423C801.05,435.19,812.89,434.14,804,448Z"
        )
        path.cloud__foreground(
          d="M757.88,448h272.43c-10.95-8.14-26.94-14.69-46-18.72a62.15,62.15,0,0,0,2.54-17.6c0-36.3-31.26-65.71-69.82-65.71a71.71,71.71,0,0,0-50.48,20.32,54.5,54.5,0,0,0-19.19-3.45c-28.66,0-51.89,21.86-51.89,48.84a46,46,0,0,0,2,13.38A52.37,52.37,0,0,0,757.88,448Z"
        )
      g.cloud
        path.cloud__shadow(
          d="M1203,742.53a233.7,233.7,0,0,0-32.27-2.25,230.2,230.2,0,0,0-98.13,21.82,145.52,145.52,0,0,0-230.92,43.16,124.76,124.76,0,0,0-56.56,2.85c-44.18,12.73-76.33,48.51-90.35,93.72-59.35,2.4-97.57,12.61-138.8,37.17-8-24-56.06-70.68-119-75-26-57-80.75-99.8-143-99.8-69.09,0-128.39,63.17-142,127.8-14.64-3.93-43.08,24-59,24-59.58,0-67.17,11.11-93,53.75V1024H1280V708.06C1247.55,711.73,1219.8,724.61,1203,742.53Z"
        )
        path.cloud__foreground(
          d="M1192.11,760.16a228.16,228.16,0,0,0-31.24-2.16,223.87,223.87,0,0,0-95,21,141.38,141.38,0,0,0-223.52,41.49,121.73,121.73,0,0,0-54.74,2.74c-42.76,12.24-73.89,46.64-87.45,90.11-57.44,2.31-109.5,17.45-149.41,41.06-15.23-37-55.33-67.24-107.8-82.55C423.78,818.89,372.5,781,312.25,781c-66.88,0-122.7,46.67-135.87,108.81A172.44,172.44,0,0,0,131.89,884C78.29,884,30.59,908.44,0,946.44V1024H1280V726.08C1242.9,727.19,1210.61,740.53,1192.11,760.16Z"
        )

  .toggle
    input#toggle.toggle__checkbox(type="checkbox")
    label.toggle__label(for="toggle")
      svg.toggle__icon.--night(viewbox="0 0 24 24")
        path(
          d="M15.77,3.24a10.66,10.66,0,0,0-2.84-1.09,9.84,9.84,0,0,1-.72,14.07,9.84,9.84,0,0,1-8.9,2.32A10,10,0,0,0,18.11,5.19,11,11,0,0,0,15.77,3.24Z"
        )
      svg.toggle__icon.--day(viewbox="0 0 24 24")
        path(
          d="M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z"
        )

              
            
!

CSS

              
                html {
  --bg: #324b68;
  --ray: #50a0ff;
  --moonSun: #b3e0d5;
  --moonSun-shadow: #577f74;
  --cloud: #d5e1ef;
  --cloud-shadow: #bfcedb;
}

body {
  min-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
  background: #1f3244;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.toggle {
  margin-top: 2em;
}

.toggle__checkbox {
  display: none;
}

.toggle__label {
  height: 40px;
  width: 80px;
  display: flex;
  align-items: center;
  background-color: #324b68;
  position: relative;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: inset 0 0 5px 2px rgba(#000, 0.3), 0 0 0 2px rgba(#000, 0.05);

  &::after {
    display: block;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background-color: rgba(#fff, 0.1);
    content: " ";
    position: absolute;
    top: 4px;
    left: 4px;
    box-shadow: 0 0 5px 2px rgba(#000, 0.1),
      inset -1px -1px 0 2px rgba(#fff, 0.05);
    transition: transform 250ms ease-out;

    .toggle__checkbox:checked ~ & {
      transform: translateX(calc(100% + 8px));
    }
  }
}

.toggle__icon {
  height: 24px;
  width: 24px;
  position: absolute;
  fill: rgba(#fff, 0.2);
  transition: fill 250ms ease-out;

  &.--night {
    left: 0;
    transform: translateX(calc(-100% - 8px));

    .toggle__checkbox:not(:checked) ~ .toggle__label & {
      fill: #b3e0d5;
    }
  }

  &.--day {
    right: 0;
    transform: translateX(calc(100% + 8px));

    .toggle__checkbox:checked ~ .toggle__label & {
      fill: #fbe168;
    }
  }
}

.scene {
  max-width: 80vw;
  height: 100%;
  max-height: calc(80vh - 2em);
  display: block;
  border-radius: 2em;
  overflow: hidden;
  cursor: pointer;
}

.bg {
  fill: var(--bg);
}

.ray {
  opacity: 0.2;
  fill: var(--ray);
}

.star {
  fill: #fff;
}

.moonSun {
  fill: var(--moonSun);
}

.moonSun__shadow {
  fill: var(--moonSun-shadow);
  opacity: 0.2;
}

.crater {
  fill: #8db7ac;
}

.crater-outline {
  fill: #fff;
}

.comet__object,
.crater-outline {
  opacity: 0.5;
}

#comet {
  opacity: 0;
}

.comet {
  fill: #bfcedb;
}

.cloud__shadow {
  fill: var(--cloud-shadow);
}

.cloud__foreground {
  fill: var(--cloud);
}

.comet__trail {
  opacity: 0.5;
  fill: url(#linear-gradient);
}

.comet__crater,
.comet__shadow {
  fill: #8697a3;
}

              
            
!

JS

              
                const svg = document.querySelector(".scene");
const body = document.body;
const toggle = document.querySelector(".toggle__label");
const triggers = [svg, toggle];

triggers.forEach((trigger) => {
  trigger.addEventListener("click", (e) => {
    e.preventDefault();

    if (body.dataset.state === "night") {
      body.dataset.state = "day";
      toggle.previousElementSibling.checked = true;
      tl.play();
    } else {
      body.dataset.state = "night";
      tl.reverse();
      toggle.previousElementSibling.checked = false;
    }
  });
});

const nightToDay = gsap
  .timeline({ paused: true })
  .to(
    "html",
    {
      "--bg": "#d5f0fb",
      "--ray": "#fac116",
      "--moonSun": "#fbe168",
      "--moonSun-shadow": "#eac333",
      "--cloud": "#ffffff",
      "--cloud-shadow": "#caebfe",
      ease: "power1.in",
      duration: 0.3
    },
    0
  )

  .fromTo(
    "#craters, #comet",
    { autoAlpha: 1 },
    { autoAlpha: 0, duration: 0.5 },
    0
  )

  .to(
    ".cloud:nth-of-type(1)",
    { x: "-60%", ease: "back.inOut(4)", duration: 0.75 },
    0
  )
  .to(
    ".cloud:nth-of-type(2)",
    { x: "55%", ease: "back.inOut(4)", duration: 0.75, delay: 0.1 },
    0
  );

const tl = gsap
  .timeline({ paused: true })
  .to("#moonSun", {
    transformOrigin: "center",
    scaleX: 0.2,
    y: "165%",
    ease: "back.in(1.5)",
    duration: 0.5
  })
  .to(
    "#stars",
    {
      transformOrigin: "center",
      scale: 2,
      autoAlpha: 0,
      duration: 1,
      ease: "elastic.inOut(1, 0.75)"
    },
    0
  )
  .add(nightToDay.play(), "<50%")
  .to(
    "#moonSun",
    { scaleX: 1, y: "0%", ease: "back.out(1.5)", duration: 0.5 },
    "<50%"
  );

const rays = gsap.to(".ray", {
  transformOrigin: "center",
  scale: 2,
  autoAlpha: 0,
  duration: 4,
  stagger: {
    each: 1,
    repeat: -1
  }
});

const stars = gsap.to("#stars", {
  transformOrigin: "center",
  rotate: 360,
  duration: 1000,
  repeat: -1
});

const craters = gsap.to("#craters", {
  transformOrigin: "center",
  rotate: -360,
  duration: 250,
  repeat: -1
});

const clouds = gsap.to(".cloud", {
  transformOrigin: "center",
  scale: 1.2,
  duration: 15,
  ease: "power1.inOut",
  yoyo: true,
  repeat: -1
});

const comet = gsap.timeline().set("#comet", { autoAlpha: 1 }).fromTo(
  "#comet",
  { x: "100%", y: "-100%" },
  {
    x: "-100%",
    y: "100%",
    duration: 1,
    repeat: -1,
    repeatDelay: 5
  }
);

              
            
!
999px

Console