Need help reproducing this effect in CSS3

[LordFede]

I’d like to reproduce kind of a “lightning/reflect” effect I’ve saw on a game’s items.

Take a look:

But I don’t know where to start… I’ve been reading about filters, and specially masks but I don’t think a mask can help here.

The effect looks like a pattern of lights moving from the inner center of the image, to outside, like a water drop effect. And after few seconds, a “hard light” strikes the image (I don’t really like that).

I’ve also read about SVG, seems like my solution may be there, but I have no idea how to code paths and such to animate over this image…

Any idea, snippet, hint about a possible technique I should try, would be much appreciated!

[Paulie_D]

That looks too complex for CSS.

I’d be using Canvas.

[LordFede]

Hi Paulie, in case I have to end up using canvas, can you enlighten me a bit on what kind of method this task may require? I have absolutely no idea about canvas yet.

Aaand… what about svg?

[Paulie_D]

Canvas is basically that… a canvas element on which the pixel are manipulated by javascript.

Pretty much the JS/HTML5 version of Flash.

SVG…maybe but I’d still say that’s too complex for SVG too.

[Jerba]

As suggested by @Paulie_D canvas is probably the way forward.

However, you might be able to create a similar effect using css3 filters, particularly hue-rotate. Here’s an example I found on Codepen.

https://codepen.io/designerJordan/full/qDEjr/

Incase you decide to tackle this using canvas here’s the MDN documentation on the Canvas API: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

… and the support table for css3 filters (hue rotate): http://caniuse.com/#feat=css-filters

I hope this was helpful.

[Author]

Posts