Mozaic ART

HTML
<figure class="poster"></figure>
SCSS
*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } $fire: #F6080F; $love: #DA0407; $wood: #5A2A29; $grass: #537E64; $white: #FBFBFB; body { display: flex; position: relative; overflow: hidden; transform: translateZ(0); &:before, &:after { content: ''; position: absolute; top: 50%; left: -100%; height: 80%; width: 300%; z-index: 1; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-3.svg'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-2.svg'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-1.svg'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-4.svg'); background-repeat: repeat-x; background-size: 200% 100%, 150% 100%, 300% 100%, 200% 100%; background-position: 0% 0%; animation: bg-tween 10000s infinite linear; } &:before { transform: translateY(-50%) rotate(-45deg); animation-delay: -100s; } &:after { transform: translateY(-50%) rotate(45deg); animation-delay: -10s; } } @keyframes bg-tween { 100% { background-position: 100000% 0%; } } .poster { position: relative; width: 100%; height: 80%; max-width: 400px; margin: auto; background-color: #fff; box-shadow: -30px 30px 60px rgba(black, 0.6); z-index: 4; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-3.svg'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-2.svg'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-4.svg'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pattern-1.svg'); background-repeat: no-repeat; background-size: 50% 50%; background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; }
JAVASCRIPT
Expand for more options Login