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

Home Forums CSS Cannot make svg mask works. How to do a torch effect?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #204262

    Hello (again),
    I am very new to html5 css3, I have done some tests yesterday with clip-path, and now I want to play with masks.
    I want to create an SVG mask and use it for a simple html img.
    I have looked on the codepen link of this article,, codepen does not render the “mask of HTML element” correctly either.

    I have done a very simple example here:

    I have tried mask-image (not sure to understand the difference between mask and mask-image), I tried with or without -webkit- prefix, I tried with mask-type=luminance… no luck so far.

    Can you tell me what I did wrong?

    More generally, I used to do some flash, and I want to convert this existing website into a full html5/css3 one:

    On this website, I define:
    – one element always visible following the mouse pointer.
    – a mask with gradient and blur filter, always following the mouse pointer.
    – an image masked by the previous mask.
    – on top of that, the mouse clic is not captured by the first 2 elements.

    My first step in html is to understand how to mask an image. Am I going in the right direction, or will I have to code everything using canvas stuff?


Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.