Vaporsun 🌴

index.pug

figure
  .stripes-wraper
    for i in Array(16)
      .stripe
  .gradient-mask
  .palm-tree

  figcaption
    | Inspired in
    |
    a(href='https://www.instagram.com/p/Bore267lC-_/' target='_blank') Vaporsun
    |
    | by
    |
    a(href='https://www.instagram.com/motus_art/' target='_blank') Motus Art

script.js

// Looking for something?

style.sass

body
  height: 100vh
  overflow: hidden

figure
  width: 100%
  height: 100%
  margin: 0 !important
  background-color: #000
  display: flex
  justify-content: center
  align-items: center
  
.stripes-wraper
  width: 450px
  height: 450px
  border-radius: 50%
  filter: drop-shadow(0 0 20px #F29)
  overflow: hidden
  position: absolute
  
.stripe
  width: 100%
  height: 15px
  background-color: #FFF
  animation: scroll 1s linear infinite
  
  @keyframes scroll
    from
      transform: translateY(-30px)

  & + &
    margin-top: 15px

.gradient-mask
  width: 100%
  height: 100%
  background: linear-gradient(to bottom, #92F 0%, #F29 100%)
  mix-blend-mode: multiply
  position: absolute
  
.palm-tree
  width: 450px
  height: 601px
  background-image: url(https://res.cloudinary.com/tecice/image/upload/v1581216237/palm-tree.png)
  transform: scale(.8) translateY(75px)
  position: absolute

figcaption
  color: #EEE
  position: fixed
  right: 20px
  bottom: 10px
  
a
  color: #F29
  text-decoration: none

vaporsun.markdown

Vaporsun 🌴

##Vaporsun 🌴

Vaporwave sun palmtree

A Pen by Luciano Felix on CodePen.

License.