#dailySVG #Plus – Day 24 – fireworks – #SVG #Animation by @mge_de

dailysvg-plus-day-24-fireworks-svg-animation-by-mge_de.markdown

#dailySVG #Plus – Day 24 – fireworks – #SVG #Animation by @mge_de

A Pen by Michael Gehrmann on CodePen.

License.

index.pug

- var count= 4;

svg(viewBox="-500 -500 1000 1000")
  defs
    clippath#clip-path
      circle.bg(r=450)
    lineargradient#sky-gradient(x1="0" y1='300' x2="0" y2='-300' gradientunits='userSpaceOnUse')
      stop.sky-bright(offset='0')
      stop.sky-dark(offset='1')
  g(clip-path="url(#clip-path)")
    rect.sky(x=-500 y=-500 width=1000 height=1000 fill="url(#sky-gradient)")
    g.firework
      while count--
        - var sparks = 6
        g.sparks
          while sparks--
            circle.spark#spark(r=10 style=`--angle: ${360/6 * sparks}deg;`)
    polygon.mountains(points="-500,150 -250,0 0,150 250,0 500,150 500,500 -500 500")
.title fireworks

style.scss

.spark {
  fill: #fff;
  opacity: 0;
  animation: explode 3s cubic-bezier(0.000, 0.990, 0.250, 0.970) infinite, fade 3s infinite;
 
}

.sparks {
  transform-origin: 0 0;
}

.sparks:nth-child(1) {
  transform: translate(-150px, -290px) scale(0.8);
  .spark {
    animation-delay: 1s;
  }
}

.sparks:nth-child(2) {
  transform: translate(150px, -120px) scale(0.6);
  .spark {
    animation-delay: 1.5s;
  }
}

.sparks:nth-child(3) {
  transform: translate(-10px, -300px) scale(1);
  .spark {
    animation-delay: 2.4s;
  }
}

.sparks:nth-child(4) {
  transform: translate(190px, -190px) scale(0.4);
  .spark {
    animation-delay: 2.9s;
  }
}

@keyframes fade {
  1% {
    opacity: 1
  }
  60%,
  100% {
    opacity: 0
  }
}


@keyframes explode {
  0% {
    transform: rotate(var(--angle)) translate(0, 0);
  }
  50%,
  100% {
    transform: rotate(var(--angle)) translate(300px, 0);
  }
}

.sky-bright{
  stop-color:hsl(195, 70%, 25%);
}
.sky-dark {
  stop-color:hsl(240, 30%, 5%);
}

.mountains{
  fill: hsl(195, 70%, 8%);
}

/*Page Setup*/

@import url('https://fonts.googleapis.com/css?family=Unica+One');
svg {
  width: 100vw;
  height: 80vh;
}

body {
  background: hsl(220, 40%, 10%);
   color: hsl(30, 100%, 80%);
  display: flex; 
  align-items:center;
  justify-content: center;
  flex-direction: column;
}
.title {
  height: 10vh;
  line-height: 10vh;
  font-size: 8vh;
  padding: 2.5vh;
  margin: 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  font-family: 'Unica One', cursive;
}