- const droplets = 250
.rain
  - for (let r = 0; r < droplets; r++)
    svg.rain__drop(preserveAspectRatio="xMinYMin", viewBox='0 0 5 50', style=`--x: ${Math.floor(Math.random() * 100)}; --y: ${Math.floor(Math.random() * 100)}; --o: ${Math.random()}; --a: ${Math.random() + 0.5}; --d: ${(Math.random() * 2) - 1}; --s: ${Math.random()}`)
      path(stroke='none', d="M 2.5,0 C 2.6949458,3.5392017 3.344765,20.524571 4.4494577,30.9559 5.7551357,42.666753 4.5915685,50 2.5,50 0.40843152,50 -0.75513565,42.666753 0.55054234,30.9559 1.655235,20.524571 2.3050542,3.5392017 2.5,0 Z")
View Compiled
*
*:before
*:after
  box-sizing border-box

body
  background-color #6c78a9
  display flex
  align-items center
  justify-content center

.rain__drop
  animation-delay calc(var(--d) * 1s)
  animation-duration calc(var(--a) * 1s)
  animation-iteration-count infinite
  animation-name drop
  animation-timing-function linear
  height 30px
  left calc(var(--x) * 1%)
  position absolute
  top calc((var(--y) + 50) * -1px)

  path
    fill #a1c6cc
    opacity var(--o)
    transform scaleY(calc(var(--s) * 1.5))

@keyframes drop
  90%
    opacity 1
  100%
    opacity 0
    transform translateY(100vh)
View Compiled
// NOT FOUND
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.