<div class="frame">
  <div class="center">
		<div class='flame'></div>
		<div class='wick'></div>
		<div class='candle'></div>
		<div class='stand'></div>
	</div>
</div>
// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #fff;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color:#2c3e50;
	
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	display:flex;
	flex-direction:column;
	align-items:center;
	
}
.candle{
	height:100px;
	width:60px;
	background-color:#fff;
	border-radius:2px;
	box-shadow:inset -10px -0px 0px #E0E5FF;
}
.stand {
	background-color:#1B233E;
	width:150px;
	height:8px;
	border-radius:2px;
}
.wick{
	width:4px;
	height:15px;
	background-color:#AD88A9;
	border-radius:2px
}
.flame{
	width:10px;
	height:20px;
	background-color:#FFAD00;
	transform : translateY(10px);
	animation : flamerun 2s ease-in-out infinite;
			border-top-left-radius:20px 60px;
	border-top-right-radius:20px 60px;
	border-bottom-right-radius:10px 15px;
border-bottom-left-radius:20px 15px;
box-shadow: 5px 5px 20px #FFAD00;
}
@keyframes  flamerun{
	0% ,100%{
	border-top-left-radius:20px 60px;
	border-top-right-radius:20px 60px;
	border-bottom-right-radius:10px 15px;
border-bottom-left-radius:20px 15px;
	}
		33%{
	border-top-left-radius:15px 50px;
	border-top-right-radius:30px 60px;
	border-bottom-right-radius:10px 15px;
border-bottom-left-radius:20px 15px;
	}
		66%{
border-top-left-radius:25px 60px;
	border-top-right-radius:10px 70px;
	border-bottom-right-radius:10px 15px;
border-bottom-left-radius:20px 15px;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.