Skip to content

Instantly share code, notes, and snippets.

@indiesquidge

indiesquidge/fire.html

Created December 12, 2016 06:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save indiesquidge/fc71afbc46c7ed6b0243dbd6452ce9cf to your computer and use it in GitHub Desktop.
Save indiesquidge/fc71afbc46c7ed6b0243dbd6452ce9cf to your computer and use it in GitHub Desktop.
Download ZIP
first draft lo-fi fire animation
Raw
fire.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fire</title>
<style>
.fire-wrapper {
position: absolute;
top: 240px;
left: 240px;
}
.flame {
animation: yoyo 3s infinite;
}
.flame-2 {
animation-delay: 0.3s;
}
.flame-3 {
animation-delay: 0.7s;
}
.flame-4 {
animation-delay: 0.9s;
}
#ember-1,
#ember-2 {
animation: fadeUp 3s infinite;
}
#ember-2 {
animation-delay: 0.9s;
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
@keyframes yoyo {
0%, 100% {
transform: translateY(20px);
}
50% {
transform: translateY(-20px);
}
}
</style>
</head>
<body>
<!-- This svg code block was created in Sketch -->
<svg class="fire-wrapper" width="309px" height="461px" viewBox="0 0 309 461">
<g id="fire">
<rect class="flame flame-1" fill="#F8E81C" x="0" y="105" width="87" height="270" rx="43.5"></rect>
<rect class="flame flame-2" fill="#F6A623" x="106" y="38" width="87" height="366" rx="43.5"></rect>
<rect class="flame flame-3" fill="#F6A623" x="222" y="86" width="87" height="270" rx="43.5"></rect>
<rect class="flame flame-4" fill="#F8E81C" x="150" y="121" width="87" height="340" rx="43.5"></rect>
<circle id="ember-1" fill="#F8E81C" cx="44" cy="49" r="11"></circle>
<circle id="ember-2" fill="#F6A623" cx="87" cy="31" r="11"></circle>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment