CodePen Embed - Weather Icon Showcase

.container
  header
    h1 Pure CSS Weather Icons
  .showcase
    a#sunny.canvas(
      href="https://codepen.io/aexcode/pen/MWbPrdZ",
      target="_blank"
    )
      .sun
        - let totalBeamsOne = 0;
          while totalBeamsOne < 8
            .beam 
            - totalBeamsOne++;
    a#partially-cloudy.canvas(
      href="https://codepen.io/aexcode/pen/mdOzxZb",
      target="_blank"
    )
      .sun
        - let totalBeamsTwo = 0;
          while totalBeamsTwo < 8
            .beam 
            - totalBeamsTwo++;
      .cloud
    a#rain.canvas(href="https://codepen.io/aexcode/pen/wvoYXVZ", target="_blank")
      .sun
        - let totalBeamsThree = 0;
          while totalBeamsThree < 8
            .beam 
            - totalBeamsThree++;
      .cloud
        .cloud-copy
        .rain
          - let totalDropsOne = 0;
            while totalDropsOne < 10
              .drop
              - totalDropsOne++;
    a#thunderstorm.canvas(
      href="https://codepen.io/aexcode/pen/vYyQNWQ",
      target="_blank"
    )
      .cloud
        .cloud-copy
        .rain
          - let totalDropsThree = 0;
            while totalDropsThree < 10
              .drop
              - totalDropsThree++;
          .lightning
    a#snow.canvas(href="https://codepen.io/aexcode/pen/vYyQxXo", target="_blank")
      .cloud
        .cloud-copy
        .snow
          - let totalFlakes = 0;
            while totalFlakes < 10
              .flake
                - let totalFlakeParts = 0;
                  while totalFlakeParts < 6
                    .flake-part
                    - totalFlakeParts++;
              - totalFlakes++;
    a#rainy.canvas(
      href="https://codepen.io/aexcode/pen/oNYQxGY",
      target="_blank"
    )
      .clouds
        - let totalCloudsOne = 0;
          while totalCloudsOne < 2
            .cloud
              .cloud-copy
              .rain
                - let totalDropsTwo = 0;
                  while totalDropsTwo < 10
                    .drop
                    - totalDropsTwo++;
            - totalCloudsOne++;
    a#broken-clouds.canvas(
      href="https://codepen.io/aexcode/pen/ZEBqRpd",
      target="_blank"
    )
      .clouds
        .cloud
        .cloud
        .cloud
    a#scattered-clouds.canvas(
      href="https://codepen.io/aexcode/pen/bGBmMdB",
      target="_blank"
    )
      .clouds
        .cloud
        .cloud
        .cloud
    a#mist.canvas(href="https://codepen.io/aexcode/pen/BaQGWRz", target="_blank")
      .mist
        - let totalMistLines = 0;
          while totalMistLines < 5
            .mist-line
            - totalMistLines++;

View Compiled

// color palette: https://coolors.co/212f45-fdac49-fcd422-fffafa
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");

$background: #212f45;
$orange: #fdac49;
$yellow: #fcd422;
$white: #fffafa;
$gray: #a3a3a3;

$triangleUp: polygon(50% 0%, 0% 100%, 100% 100%);
$triangleDown: polygon(50% 100%, 0 0, 100% 0);

@mixin copy {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  min-height: 100vh;
  background: $background;
}

.container {
  width: 100%;
  max-width: 800px;
  min-height: 100vh;
  margin: 5% auto;
  display: flex;
  flex-direction: column;

  @mixin sharedText {
    color: $white;
    font-family: "Roboto", sans-serif;
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 1rem auto;
  }

  h1 {
    @include sharedText;
    text-transform: capitalize;
    letter-spacing: 0.02rem;
  }

  p {
    @include sharedText;
    letter-spacing: 0.05rem;
  }

  a {
    color: $orange;
  }

  .showcase {
    flex-grow: 1;
    margin: 1rem auto;
    padding: 10px;

    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, 150px);
    grid-auto-rows: 150px;

    @media all and (min-width: 200px) {
      max-width: 200px;
      grid-gap: 10px;
    }

    @media all and (min-width: 400px) {
      max-width: 400px;
      grid-gap: 10px;
    }

    @media all and (min-width: 600px) {
      max-width: 600px;
      grid-gap: 12px;
    }

    .canvas {
      position: relative;
    }
  }

  @media all and (max-width: 200px) {
    .container {
      display: none;
    }
  }
}

#sunny {
  .sun {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    background: radial-gradient($orange, $yellow);
    border-radius: 50%;
    animation: spinSun 20s linear infinite;

    &:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      background: inherit;
      border-radius: 50%;
    }

    @mixin sharedBeam {
      position: absolute;
      width: 15%;
      height: 140%;
      top: -20%;
      left: 42.5%;
      outline: 1px solid $background;

      &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 13%;
        clip-path: $triangleUp;
      }

      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 13%;
        clip-path: $triangleDown;
      }
    }

    .beam:nth-child(even) {
      &:before {
        background: $orange;
      }
      &:after {
        background: $orange;
      }
    }

    .beam:nth-child(odd) {
      &:before {
        background: $yellow;
      }
      &:after {
        background: $yellow;
      }
    }

    .beam:nth-of-type(1) {
      @include sharedBeam;
    }

    .beam:nth-of-type(2) {
      @include sharedBeam;
      transform: rotate(22.5deg);
    }

    .beam:nth-of-type(3) {
      @include sharedBeam;
      transform: rotate(45deg);
    }

    .beam:nth-of-type(4) {
      @include sharedBeam;
      transform: rotate(67.5deg);
    }

    .beam:nth-of-type(5) {
      @include sharedBeam;
      transform: rotate(90deg);
    }

    .beam:nth-of-type(6) {
      @include sharedBeam;
      transform: rotate(112.5deg);
    }

    .beam:nth-of-type(7) {
      @include sharedBeam;
      transform: rotate(135deg);
    }

    .beam:nth-of-type(8) {
      @include sharedBeam;
      transform: rotate(157.5deg);
    }

    @keyframes spinSun {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
}

#partially-cloudy {
  .sun {
    position: absolute;
    width: 42%;
    height: 42%;
    top: 10%;
    right: 15%;
    background: radial-gradient($orange, $yellow);
    border-radius: 50%;
    animation: spinSun 20s linear infinite;

    &:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      background: inherit;
      border-radius: 50%;
    }

    @mixin sharedBeam {
      position: absolute;
      width: 15%;
      height: 140%;
      top: -20%;
      left: 42.5%;

      &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 13%;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      }

      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 13%;
        clip-path: polygon(50% 100%, 0 0, 100% 0);
      }
    }

    .beam:nth-child(even) {
      &:before {
        background: $orange;
      }
      &:after {
        background: $orange;
      }
    }

    .beam:nth-child(odd) {
      &:before {
        background: $yellow;
      }
      &:after {
        background: $yellow;
      }
    }

    .beam:nth-of-type(1) {
      @include sharedBeam;
    }

    .beam:nth-of-type(2) {
      @include sharedBeam;
      transform: rotate(22.5deg);
    }

    .beam:nth-of-type(3) {
      @include sharedBeam;
      transform: rotate(45deg);
    }

    .beam:nth-of-type(4) {
      @include sharedBeam;
      transform: rotate(67.5deg);
    }

    .beam:nth-of-type(5) {
      @include sharedBeam;
      transform: rotate(90deg);
    }

    .beam:nth-of-type(6) {
      @include sharedBeam;
      transform: rotate(112.5deg);
    }

    .beam:nth-of-type(7) {
      @include sharedBeam;
      transform: rotate(135deg);
    }

    .beam:nth-of-type(8) {
      @include sharedBeam;
      transform: rotate(157.5deg);
    }

    @keyframes spinSun {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }

  .cloud {
    position: absolute;
    width: 40%;
    height: 40%;
    top: 27.5%;
    left: 25%;
    background: $white;
    border-radius: 44% 56% 49% 51% / 71% 63% 37% 29%;

    @mixin sharedCloudSides {
      content: "";
      position: absolute;
      width: 85%;
      height: 85%;
      top: 10%;
      left: -50%;
      right: -50%;
      background: inherit;
    }

    &:before {
      @include sharedCloudSides;
      right: unset;
      border-radius: 52% 48% 58% 42% / 43% 61% 39% 57%;
    }

    &:after {
      @include sharedCloudSides;
      left: unset;
      border-radius: 52% 48% 49% 51% / 43% 61% 39% 57%;
    }
  }
}

#rain {
  .sun {
    position: absolute;
    width: 42%;
    height: 42%;
    top: 10%;
    right: 15%;
    background: radial-gradient($orange, $yellow);
    border-radius: 50%;
    animation: spinSun 20s linear infinite;

    &:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0%;
      left: 0%;
      background: inherit;
      border-radius: 50%;
    }

    @mixin sharedBeam {
      position: absolute;
      width: 15%;
      height: 140%;
      top: -20%;
      left: 42.5%;

      &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 13%;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      }

      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 13%;
        clip-path: polygon(50% 100%, 0 0, 100% 0);
      }
    }

    .beam:nth-child(even) {
      &:before {
        background: $orange;
      }
      &:after {
        background: $orange;
      }
    }

    .beam:nth-child(odd) {
      &:before {
        background: $yellow;
      }
      &:after {
        background: $yellow;
      }
    }

    .beam:nth-of-type(1) {
      @include sharedBeam;
    }

    .beam:nth-of-type(2) {
      @include sharedBeam;
      transform: rotate(22.5deg);
    }

    .beam:nth-of-type(3) {
      @include sharedBeam;
      transform: rotate(45deg);
    }

    .beam:nth-of-type(4) {
      @include sharedBeam;
      transform: rotate(67.5deg);
    }

    .beam:nth-of-type(5) {
      @include sharedBeam;
      transform: rotate(90deg);
    }

    .beam:nth-of-type(6) {
      @include sharedBeam;
      transform: rotate(112.5deg);
    }

    .beam:nth-of-type(7) {
      @include sharedBeam;
      transform: rotate(135deg);
    }

    .beam:nth-of-type(8) {
      @include sharedBeam;
      transform: rotate(157.5deg);
    }

    @keyframes spinSun {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }

  .cloud {
    position: absolute;
    width: 40%;
    height: 40%;
    top: 27.5%;
    left: 25%;
    background: $white;
    border-radius: 44% 56% 49% 51% / 71% 63% 37% 29%;

    @mixin sharedCloudSides {
      content: "";
      position: absolute;
      width: 85%;
      height: 85%;
      top: 10%;
      left: -50%;
      right: -50%;
      background: inherit;
    }

    $cloudLeftBorderRadius: 52% 48% 58% 42% / 43% 61% 39% 57%;
    $cloudRightBorderRadius: 52% 48% 49% 51% / 43% 61% 39% 57%;

    &:before {
      @include sharedCloudSides;
      right: unset;
      border-radius: $cloudLeftBorderRadius;
    }

    &:after {
      @include sharedCloudSides;
      left: unset;
      border-radius: $cloudRightBorderRadius;
    }

    .cloud-copy {
      z-index: 2;
      @include copy;

      &:before {
        @include sharedCloudSides;
        right: unset;
        border-radius: $cloudLeftBorderRadius;
      }

      &:after {
        @include sharedCloudSides;
        left: unset;
        border-radius: $cloudRightBorderRadius;
      }
    }

    .rain {
      position: absolute;
      width: 140%;
      height: 100%;
      left: -20%;
      top: 80%;
      z-index: 1;
      overflow: hidden;

      @mixin sharedDrop {
        position: absolute;
        width: 3%;
        height: 20%;
        top: -20%;
        background: $white;
        border-radius: 1rem;
        transform: rotate(22deg);
      }

      $firstRain: rainDropFall 4s linear infinite;
      $secondRain: rainDropFall 4s 1s linear infinite;
      $thirdRain: rainDropFall 4s 2s linear infinite;
      $fourthRain: rainDropFall 4s 3s linear infinite;

      .drop:nth-of-type(1) {
        @include sharedDrop;
        animation: $secondRain;
        left: 10%;
      }

      .drop:nth-of-type(2) {
        @include sharedDrop;
        animation: $firstRain;
        left: 28.5%;
      }

      .drop:nth-of-type(3) {
        @include sharedDrop;
        animation: $secondRain;
        left: 47%;
      }

      .drop:nth-of-type(4) {
        @include sharedDrop;
        animation: $firstRain;
        right: 28.5%;
      }

      .drop:nth-of-type(5) {
        @include sharedDrop;
        animation: $secondRain;
        right: 10%;
      }

      .drop:nth-of-type(6) {
        @include sharedDrop;
        animation: $thirdRain;
        left: 28.5%;
      }

      .drop:nth-of-type(7) {
        @include sharedDrop;
        animation: $thirdRain;
        right: 28.5%;
      }

      .drop:nth-of-type(8) {
        @include sharedDrop;
        animation: $fourthRain;
        left: 10%;
      }

      .drop:nth-of-type(9) {
        @include sharedDrop;
        animation: $fourthRain;
        left: 47%;
      }

      .drop:nth-of-type(10) {
        @include sharedDrop;
        animation: $fourthRain;
        right: 10%;
      }

      @keyframes rainDropFall {
        15% {
          opacity: 1;
        }
        75% {
          opacity: 0;
        }
        100% {
          top: 120%;
          opacity: 0;
        }
      }
    }
  }
}

#thunderstorm {
  .cloud {
    $cloudBorderRadiusLeft: 52% 48% 58% 42% / 43% 61% 39% 57%;
    $cloudBorderRadiusMiddle: 44% 56% 49% 51% / 71% 63% 37% 29%;
    $cloudBorderRadiusRight: 52% 48% 49% 51% / 43% 61% 39% 57%;
    $cloudColorChange1: cloudColorChange 3s linear infinite;

    @keyframes cloudColorChange {
      0%,
      100% {
        background: $white;
      }
      50% {
        background: $gray;
      }
    }

    position: absolute;
    width: 40%;
    height: 40%;
    top: 27.5%;
    left: 30%;
    background: $white;
    border-radius: $cloudBorderRadiusMiddle;
    animation: $cloudColorChange1;

    @mixin sharedCloudSides {
      content: "";
      position: absolute;
      width: 85%;
      height: 85%;
      top: 10%;
      left: -50%;
      right: -50%;
      background: inherit;
    }

    &:before {
      @include sharedCloudSides;
      right: unset;
      border-radius: $cloudBorderRadiusLeft;
    }

    &:after {
      @include sharedCloudSides;
      left: unset;
      border-radius: $cloudBorderRadiusRight;
    }

    .cloud-copy {
      z-index: 2;
      @include copy;

      &:before {
        @include sharedCloudSides;
        right: unset;
        border-radius: $cloudBorderRadiusLeft;
      }

      &:after {
        @include sharedCloudSides;
        left: unset;
        border-radius: $cloudBorderRadiusRight;
      }
    }

    .rain {
      position: absolute;
      width: 140%;
      height: 100%;
      left: -20%;
      top: 80%;
      z-index: 1;
      overflow: hidden;

      @mixin sharedDrop {
        position: absolute;
        width: 3%;
        height: 20%;
        top: -20%;
        background: $white;
        border-radius: 1rem;
        transform: rotate(22deg);
      }

      $firstRain: rainDropFall 4s linear infinite;
      $secondRain: rainDropFall 4s 1s linear infinite;
      $thirdRain: rainDropFall 4s 2s linear infinite;
      $fourthRain: rainDropFall 4s 3s linear infinite;

      @keyframes rainDropFall {
        15% {
          opacity: 1;
        }
        75% {
          opacity: 0;
        }
        100% {
          top: 120%;
          opacity: 0;
        }
      }

      .drop:nth-of-type(1) {
        @include sharedDrop;
        animation: $secondRain;
        left: 10%;
      }

      .drop:nth-of-type(2) {
        @include sharedDrop;
        animation: $firstRain;
        left: 28.5%;
      }

      .drop:nth-of-type(3) {
        @include sharedDrop;
        animation: $secondRain;
        left: 47%;
      }

      .drop:nth-of-type(4) {
        @include sharedDrop;
        animation: $firstRain;
        right: 28.5%;
      }

      .drop:nth-of-type(5) {
        @include sharedDrop;
        animation: $secondRain;
        right: 10%;
      }

      .drop:nth-of-type(6) {
        @include sharedDrop;
        animation: $thirdRain;
        left: 28.5%;
      }

      .drop:nth-of-type(7) {
        @include sharedDrop;
        animation: $thirdRain;
        right: 28.5%;
      }

      .drop:nth-of-type(8) {
        @include sharedDrop;
        animation: $fourthRain;
        left: 10%;
      }

      .drop:nth-of-type(9) {
        @include sharedDrop;
        animation: $fourthRain;
        left: 47%;
      }

      .drop:nth-of-type(10) {
        @include sharedDrop;
        animation: $fourthRain;
        right: 10%;
      }

      .lightning {
        $lightningFlash: lightningFlash 2s linear infinite;

        @keyframes lightningFlash {
          0%,
          39% {
            opacity: 0;
          }
          40%,
          60% {
            opacity: 1;
          }
          61%,
          100% {
            opacity: 0;
          }
        }

        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        animation: $lightningFlash;

        @mixin sharedBolt {
          content: "";
          position: absolute;
          width: 10%;
          height: 50%;
          left: 47%;
          top: 5%;
          right: 47%;
          bottom: 5%;
          transform: rotate(20deg);
          background: $yellow;
        }

        &:before {
          @include sharedBolt;
          bottom: unset;
          right: unset;
          clip-path: $triangleUp;
        }

        &:after {
          @include sharedBolt;
          top: unset;
          left: unset;
          clip-path: $triangleDown;
        }
      }
    }
  }
}

#snow {
  .cloud {
    $cloudBorderRadiusLeft: 52% 48% 58% 42% / 43% 61% 39% 57%;
    $cloudBorderRadiusMiddle: 44% 56% 49% 51% / 71% 63% 37% 29%;
    $cloudBorderRadiusRight: 52% 48% 49% 51% / 43% 61% 39% 57%;
    $cloudColorChange1: cloudColorChange 3s linear infinite;

    @keyframes cloudColorChange {
      0%,
      100% {
        background: $white;
      }
      50% {
        background: $gray;
      }
    }

    position: absolute;
    width: 40%;
    height: 40%;
    top: 27.5%;
    left: 30%;
    background: $white;
    border-radius: $cloudBorderRadiusMiddle;
    animation: $cloudColorChange1;

    @mixin sharedCloudSides {
      content: "";
      position: absolute;
      width: 85%;
      height: 85%;
      top: 10%;
      left: -50%;
      right: -50%;
      background: inherit;
    }

    &:before {
      @include sharedCloudSides;
      right: unset;
      border-radius: $cloudBorderRadiusLeft;
    }

    &:after {
      @include sharedCloudSides;
      left: unset;
      border-radius: $cloudBorderRadiusRight;
    }

    .cloud-copy {
      z-index: 2;
      @include copy;

      &:before {
        @include sharedCloudSides;
        right: unset;
        border-radius: $cloudBorderRadiusLeft;
      }

      &:after {
        @include sharedCloudSides;
        left: unset;
        border-radius: $cloudBorderRadiusRight;
      }
    }

    .snow {
      position: absolute;
      width: 140%;
      height: 100%;
      left: -20%;
      top: 80%;
      z-index: 1;
      overflow: hidden;

      .flake {
        position: absolute;
        width: 15%;
        height: 20%;
        top: -20%;
      }

      $firstSnow: snowFlakeFall 4s linear infinite;
      $secondSnow: snowFlakeFall 4s 1s linear infinite;
      $thirdSnow: snowFlakeFall 4s 2s linear infinite;
      $fourthSnow: snowFlakeFall 4s 3s linear infinite;

      @keyframes snowFlakeFall {
        15% {
          opacity: 1;
        }
        75% {
          opacity: 0;
        }
        100% {
          top: 120%;
          opacity: 0;
        }
      }

      @mixin sharedFlakePart {
        position: absolute;
        width: 8%;
        height: 100%;
        top: 0;
        left: 46%;
        background: $white;
        border-radius: 10rem;

        &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 28%;
          left: -100%;
          top: 0;
          background: inherit;
          border-radius: inherit;
          transform: rotate(-30deg);
        }

        &:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 28%;
          right: -100%;
          top: 0;
          background: inherit;
          border-radius: inherit;
          transform: rotate(30deg);
        }
      }

      .flake-part:nth-of-type(1) {
        @include sharedFlakePart;
      }

      .flake-part:nth-of-type(2) {
        @include sharedFlakePart;
        transform: rotate(60deg);
      }

      .flake-part:nth-of-type(3) {
        @include sharedFlakePart;
        transform: rotate(120deg);
      }

      .flake-part:nth-of-type(4) {
        @include sharedFlakePart;
        transform: rotate(180deg);
      }

      .flake-part:nth-of-type(5) {
        @include sharedFlakePart;
        transform: rotate(240deg);
      }

      .flake-part:nth-of-type(6) {
        @include sharedFlakePart;
        transform: rotate(300deg);
      }

      .flake:nth-of-type(1) {
        animation: $secondSnow;
        left: 10%;
      }

      .flake:nth-of-type(2) {
        animation: $firstSnow;
        left: 28.5%;
      }

      .flake:nth-of-type(3) {
        animation: $secondSnow;
        left: 47%;
      }

      .flake:nth-of-type(4) {
        animation: $firstSnow;
        right: 28.5%;
      }

      .flake:nth-of-type(5) {
        animation: $secondSnow;
        right: 10%;
      }

      .flake:nth-of-type(6) {
        animation: $thirdSnow;
        left: 28.5%;
      }

      .flake:nth-of-type(7) {
        animation: $thirdSnow;
        right: 28.5%;
      }

      .flake:nth-of-type(8) {
        animation: $fourthSnow;
        left: 10%;
      }

      .flake:nth-of-type(9) {
        animation: $fourthSnow;
        left: 47%;
      }

      .flake:nth-of-type(10) {
        animation: $fourthSnow;
        right: 10%;
      }
    }
  }
}

#rainy {
  .clouds {
    $cloudBorderRadiusLeft: 52% 48% 58% 42% / 43% 61% 39% 57%;
    $cloudBorderRadiusMiddle: 44% 56% 49% 51% / 71% 63% 37% 29%;
    $cloudBorderRadiusRight: 52% 48% 49% 51% / 43% 61% 39% 57%;
    $cloudColorChange1: cloudColorChange 3s linear infinite;
    $cloudColorChange2: cloudColorChange 3s 1s linear infinite;

    @keyframes cloudColorChange {
      0%,
      100% {
        background: $white;
      }
      50% {
        background: $gray;
      }
    }

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .cloud {
      position: absolute;
      background: $white;
      border-radius: $cloudBorderRadiusMiddle;

      @mixin sharedCloudSides {
        content: "";
        position: absolute;
        width: 85%;
        height: 85%;
        top: 10%;
        left: -50%;
        right: -50%;
        background: inherit;
      }

      &:before {
        @include sharedCloudSides;
        right: unset;
        border-radius: $cloudBorderRadiusLeft;
      }

      &:after {
        @include sharedCloudSides;
        left: unset;
        border-radius: $cloudBorderRadiusRight;
      }

      .cloud-copy {
        z-index: 2;
        @include copy;

        &:before {
          @include sharedCloudSides;
          right: unset;
          border-radius: $cloudBorderRadiusLeft;
        }

        &:after {
          @include sharedCloudSides;
          left: unset;
          border-radius: $cloudBorderRadiusRight;
        }
      }
    }

    .cloud:nth-of-type(1) {
      width: 20%;
      height: 20%;
      top: 10%;
      left: 20%;
      animation: $cloudColorChange1;
    }

    .cloud:nth-of-type(2) {
      width: 30%;
      height: 30%;
      top: 45%;
      right: 20%;
      animation: $cloudColorChange2;
    }

    .rain {
      position: absolute;
      width: 140%;
      height: 100%;
      left: -20%;
      top: 80%;
      z-index: 1;
      overflow: hidden;

      @mixin sharedDrop {
        position: absolute;
        width: 3%;
        height: 20%;
        top: -20%;
        background: $white;
        border-radius: 1rem;
        transform: rotate(22deg);
      }

      $firstRain: rainDropFall 4s linear infinite;
      $secondRain: rainDropFall 4s 1s linear infinite;
      $thirdRain: rainDropFall 4s 2s linear infinite;
      $fourthRain: rainDropFall 4s 3s linear infinite;

      .drop:nth-of-type(1) {
        @include sharedDrop;
        animation: $secondRain;
        left: 10%;
      }

      .drop:nth-of-type(2) {
        @include sharedDrop;
        animation: $firstRain;
        left: 28.5%;
      }

      .drop:nth-of-type(3) {
        @include sharedDrop;
        animation: $secondRain;
        left: 47%;
      }

      .drop:nth-of-type(4) {
        @include sharedDrop;
        animation: $firstRain;
        right: 28.5%;
      }

      .drop:nth-of-type(5) {
        @include sharedDrop;
        animation: $secondRain;
        right: 10%;
      }

      .drop:nth-of-type(6) {
        @include sharedDrop;
        animation: $thirdRain;
        left: 28.5%;
      }

      .drop:nth-of-type(7) {
        @include sharedDrop;
        animation: $thirdRain;
        right: 28.5%;
      }

      .drop:nth-of-type(8) {
        @include sharedDrop;
        animation: $fourthRain;
        left: 10%;
      }

      .drop:nth-of-type(9) {
        @include sharedDrop;
        animation: $fourthRain;
        left: 47%;
      }

      .drop:nth-of-type(10) {
        @include sharedDrop;
        animation: $fourthRain;
        right: 10%;
      }

      @keyframes rainDropFall {
        15% {
          opacity: 1;
        }
        75% {
          opacity: 0;
        }
        100% {
          top: 120%;
          opacity: 0;
        }
      }
    }
  }
}

#scattered-clouds {
  .clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .cloud {
      position: absolute;
      background: $white;
      border-radius: 44% 56% 49% 51% / 71% 63% 37% 29%;

      @mixin sharedCloudSides {
        content: "";
        position: absolute;
        width: 85%;
        height: 85%;
        top: 10%;
        left: -50%;
        right: -50%;
        background: inherit;
      }

      &:before {
        @include sharedCloudSides;
        right: unset;
        border-radius: 52% 48% 58% 42% / 43% 61% 39% 57%;
      }

      &:after {
        @include sharedCloudSides;
        left: unset;
        border-radius: 52% 48% 49% 51% / 43% 61% 39% 57%;
      }
    }

    .cloud:nth-of-type(1) {
      width: 20%;
      height: 20%;
      top: 10%;
      left: 25%;
    }

    .cloud:nth-of-type(2) {
      width: 30%;
      height: 30%;
      top: 35%;
      right: 20%;
    }

    .cloud:nth-of-type(3) {
      width: 20%;
      height: 20%;
      top: 72%;
      left: 35%;
    }
  }
}

#broken-clouds {
  .clouds {
    $cloudBorderRadiusLeft: 52% 48% 58% 42% / 43% 61% 39% 57%;
    $cloudBorderRadiusMiddle: 44% 56% 49% 51% / 71% 63% 37% 29%;
    $cloudBorderRadiusRight: 52% 48% 49% 51% / 43% 61% 39% 57%;
    $cloudColorChange1: cloudColorChange 3s linear infinite;
    $cloudColorChange2: cloudColorChange 3s 1s linear infinite;
    $cloudColorChange3: cloudColorChange 3s 2s linear infinite;

    @keyframes cloudColorChange {
      0%,
      100% {
        background: $white;
      }
      50% {
        background: $gray;
      }
    }

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .cloud {
      position: absolute;
      background: $white;
      border-radius: $cloudBorderRadiusMiddle;

      @mixin sharedCloudSides {
        content: "";
        position: absolute;
        width: 85%;
        height: 85%;
        top: 10%;
        left: -50%;
        right: -50%;
        background: inherit;
      }

      &:before {
        @include sharedCloudSides;
        right: unset;
        border-radius: $cloudBorderRadiusLeft;
      }

      &:after {
        @include sharedCloudSides;
        left: unset;
        border-radius: $cloudBorderRadiusRight;
      }
    }

    .cloud:nth-of-type(1) {
      width: 20%;
      height: 20%;
      top: 10%;
      left: 25%;
      animation: $cloudColorChange1;
    }

    .cloud:nth-of-type(2) {
      width: 30%;
      height: 30%;
      top: 35%;
      right: 20%;
      animation: $cloudColorChange2;
    }

    .cloud:nth-of-type(3) {
      width: 20%;
      height: 20%;
      top: 72%;
      left: 35%;
      animation: $cloudColorChange3;
    }
  }
}

#mist {
  .mist {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    @mixin sharedMistLine {
      position: absolute;
      height: 7%;
      background: $white;
      border-radius: 10rem;
    }

    .mist-line:nth-of-type(1) {
      @include sharedMistLine;
      width: 40%;
      top: 16%;
      right: 25%;
    }

    .mist-line:nth-of-type(2) {
      @include sharedMistLine;
      width: 40%;
      top: 31%;
      left: 20%;
    }

    .mist-line:nth-of-type(3) {
      @include sharedMistLine;
      width: 50%;
      top: 46%;
      left: 25%;
    }

    .mist-line:nth-of-type(4) {
      @include sharedMistLine;
      width: 40%;
      top: 61%;
      right: 20%;
    }

    .mist-line:nth-of-type(5) {
      @include sharedMistLine;
      width: 50%;
      top: 76%;
      left: 25%;
    }
  }
}

View Compiled

This Pen is owned by Ayla on CodePen.

See more by @sharedbyayla on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.