EffectHub.com: your best source for gaming

Recommendation

More Effects...

///
var c = document.getElementById('canv'),
  $ = c.getContext('2d'),
  w = c.width = window.innerWidth,
  h = c.height = window.innerHeight,
  t = 0, num = 650, u=0, _u, col,
  s, a, b, 
  x, y, _x, _y,
  _t = Math.PI ;

function random(min, max) {
  return Math.random() * (max - min) + min;
}

window.addEventListener('resize', function() {
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
}, false);

///////////////////////////////

CSS

html {
  background-color: #c2ff33;
  overflow: hidden;
  margin: 0;
  width: 100%;
}

#canv {
  position: relative;
  width: 200%;
  height: 200%;
  margin-top: -10%;
  margin-left: -10%;
  z-index: 2;
  mix-blend-mode: xor;
  -webkit-filter: contrast(1.2) brightness(1.5);
}

.triangles {
  position: absolute;
  top: 14%;
  left: 39%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.img {
  width: 50vh;
  height: 75vh;
  position: absolute;
  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
          clip-path: polygon(100% 50%, 0 0, 0 100%);
  background: transparent url("http://www.lacor.info/gnrl/codepen/we/bouquet.png") center/130%;
  -webkit-transform-origin: 20vh center;
          transform-origin: 20vh center;
  -webkit-animation: shift 85s infinite cubic-bezier(0.001, 6, 0.002, -1.48987) alternate;
          animation: shift 85s infinite cubic-bezier(0.001, 6, 0.002, -1.48987) alternate;
  -webkit-filter: contrast(1.3) invert(0);
}
@-webkit-keyframes shift {
  50% {
    background-position: 400% center;
  }
}
@keyframes shift {
  50% {
    background-position: 400% center;
  }
}
.img--2 {
  -webkit-transform: rotate(-45deg) rotateX(180deg);
          transform: rotate(-45deg) rotateX(180deg);
}
.img--3 {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.img--4 {
  -webkit-transform: rotate(-135deg) rotateX(180deg);
          transform: rotate(-135deg) rotateX(180deg);
}
.img--5 {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.img--6 {
  -webkit-transform: rotate(-225deg) rotateX(180deg);
          transform: rotate(-225deg) rotateX(180deg);
}
.img--7 {
  -webkit-transform: rotate(-270deg);
          transform: rotate(-270deg);
}
.img--8 {
  -webkit-transform: rotate(-315deg) rotateX(180deg);
          transform: rotate(-315deg) rotateX(180deg);
}

HTML

Recommendation

Join Effecthub.com