<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 64 64'
width='64' height='67'
fill='#57CE78'
stroke="#324C5A"
stroke-width="6"
stroke-linejoin="round">
<path d='M8 58 L56 58 L32 2 Z' />
<div class="snowfall">
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
</div>
</svg>
<div class="tree-trunk"></div>
<div class="text">
snowfall
</div>
*, *:before, *:after, h1, h2, h3, h4, h5, h6, p, a, input, ul, li, button {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
background-color: transparent;
text-decoration: none;
list-style: none;
}
%flex {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font-family: 'Roboto';
@extend %flex;
}
svg {
position: relative;
}
.snowfall {
width: 100px;
height: 70px;
//background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -80%) rotate(25deg);
.snow {
width: 15px;
height: 6px;
border-radius: 20px;
background-color: #FAFAFA;
&:nth-child(1) {
transform: translate(-75px, 30px);
animation: snowfall-first 1.5s ease-in-out infinite;
animation-delay: .5s;
}
&:nth-child(2) {
transform: translate(-50px, 15px);
animation: snowfall-second 1.5s ease-in-out infinite;
animation-delay: .3s;
}
&:nth-child(3) {
transform: translate(-15px, 2px);
animation: snowfall-third 2s ease-in-out infinite;
animation-delay: .2s;
}
&:nth-child(4) {
transform: translate(-10px, 5px);
animation: snowfall-fourth 1.5s ease-in-out infinite;
animation-delay: .1s;
}
&:nth-child(5) {
transform: translate(0px, 10px);
animation: snowfall-fifth 1s ease-in-out infinite;
}
}
}
.tree-trunk {
width: 6px;
height: 20px;
background-color: #324C5A;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-top: -5px;
}
.text {
color: #BDBDBD;
margin-top: 20px;
font-weight: 300;
}
@keyframes snowfall-first {
100% {
transform: translate(100px, 30px);
}
}
@keyframes snowfall-second {
100% {
transform: translate(100px, 15px)
}
}
@keyframes snowfall-third {
100% {
transform: translate(100px, 2px)
}
}
@keyframes snowfall-fourth {
100% {
transform: translate(100px, 5px)
}
}
@keyframes snowfall-fifth {
100% {
transform: translate(100px, 10px)
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.