<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.