SOURCE

<div class="container">
  <div class="logo-text">
    cold logo
  </div>
  <div class="content">
    <div class="sky">
      <div class="sun"></div>
      <div class="clouds">
        <div class="cloud c-1"></div>
        <div class="cloud c-2"></div>
        <div class="cloud c-3"></div>
      </div>
    </div>
    <div class="mountains">
      <div class="mountain m-1"></div>
      <div class="mountain m-2"></div>
      <div class="mountain m-3"></div>
    </div>
  </div>
</div>

// Colors
$bgColor: #eff8ff;
$sunColor: #fff;
$skyColor: #b3cfe7;
$cloudColor: #fff;
$mountainColor: #a8bdd8;

// Speeds
$animation-speed: 10s;

// Sizes
$circleSize: 50vh;

body {
    background: $bgColor;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    .container {
        display: flex;
        justify-content: center;
        height: 100vh;
        width: 100vw;
    }
}

.content {
    position: absolute;
    border-radius: 50%;
    border: 1rem solid #fff;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    overflow: hidden;
    height: $circleSize;
    width: $circleSize;
    .sky {
        background: linear-gradient($skyColor 10%, lighten($skyColor, 40));
        height: 100%;
        overflow: hidden;
        position: relative;
        .sun {
            background: $sunColor;
            border-radius: 100%;
            margin: 2em 1.5em;
            padding: 10%;
            width: 0;
        }
        .clouds {
            @for $i from 1 through 3 {
                & .c-#{$i} {
                    animation: move-clouds ($animation-speed * $i) linear infinite;
                    top: -2.4em * $i;
                    left: 2em;
                    z-index: $i + 1;
                }
            }
            .cloud {
                display: flex;
                background: $cloudColor;
                border-radius: 40%;
                opacity: 0.75;
                position: relative;
                height: 1.25rem;
                width: 5.75rem;
                &:before,
                &:after {
                    content: '';
                    background: $cloudColor;
                    border-radius: 42%;
                    left: 0.5em;
                    top: -1em;
                    position: absolute;
                    position: absolute;
                    transform: rotate(30deg);
                }
                &:before {
                    width: 3em;
                    height: 2.3em;
                }
                &:after {
                    padding: 10%;
                    width: 1.5em;
                    height: 1em;
                    bottom: 1.5em;
                    left: auto;
                    right: 1em;
                }
            }
        }
    }
    .mountains {
        position: absolute;
        width: $circleSize;
        .mountain {
            position: absolute;
            bottom: -10vh;
            &:nth-child(1) {
                background: $mountainColor;
                min-width: $circleSize / 1.5;
                min-height: $circleSize / 1.5;
                max-width: $circleSize / 1.5;
                max-height: $circleSize / 1.5;
                z-index: 2;
            }
            transform: rotateZ(45deg);
            background: darken($mountainColor, 10);
            min-width: $circleSize / 1.7;
            min-height: $circleSize / 1.7;
            max-width: $circleSize / 1.7;
            max-height: $circleSize / 1.7;
            z-index: 1;
            &.m-1 {
                left: 9.5vh;
            }
            &.m-2 {
                left: -9.5vh;
            }
            &.m-3 {
                right: -9.5vh;
            }
        }
    }
}

.logo-text {
    color: $skyColor;
    font-family: "Roboto";
    font-size: 10vh;
    font-weight: 300;
    bottom: 1rem;
    position: absolute;
    text-transform: uppercase;
}

@keyframes move-clouds {
    0% {
        margin-left: 100%;
    }
    100% {
        margin-left: -42%;
    }
}