The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Need help reproducing this effect in CSS3

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #245735

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

    Take a look: awzm

    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!


    That looks too complex for CSS.

    I’d be using Canvas.


    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?


    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.


    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.

    Incase you decide to tackle this using canvas here’s the MDN documentation on the Canvas API:

    … and the support table for css3 filters (hue rotate):

    I hope this was helpful.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design’ is closed to new topics and replies.