SVG masks or some alternative?

Hi Hype community.

Is there any way to use svg as a mask. Maybe hard code it to group somehow? I need to create a logo animation and I’ve been searching myself senseless. Basically the logo is shaped like a “misformed” ellipse and i would like to mask of anything overboard.

Thanks in advance.

It might not line up with the logo, but the easiest way to mask something in Hype is to use the “Content Overflow” “Hidden” option in an element. This can even be used with a “Group” to hide multiple elements.

To get custom shapes, the edges can be rounded.

Ah yes. Thanks for the reply. The content overflow hidden feature I use daily, with rectangles, circles and anything between. All though I have had some browser compatibility issues with radius induced circle masks. I think most shapes are manageable with this, only if we could somehow combine multiple shapes as content overflow hidden masks.

it’ll not be shown within hype only in browserpreview … svgClipping.hypetemplate.zip (12.5 KB)file

Thank you Hans! It’s a huge leap forward for me but unfortunately it only renders properly on Firefox.

Screenshot here: http://imgur.com/9lAAoCH (1) Chrome (2) Firefox (3) Safari

Edit: I think I was maybe a bit lost for words with my last post as well. I know that multiple objects inside a group will be okay but what about a group outline made out of several shapes to produce a new shape (for instance like two circles would produce a “stereo” icon mask).

normally I use SVG

LIVE PREVIEW

in the Project you can see an example with an SVG mask. The apple logo :slight_smile:

svg_mask_apple_logo.hype.zip (126.9 KB)

You have to create a file in Adobe Illustrator PC-Mac / CorelDraw PC (or other similar app).
Copy the code of the svg file in a text field (inner HTML).
Use the same background color for filling.

hope this helps
Michelangelo

4 Likes

That is perfect! Thank you so much!

Hi. The last technique works well but is there any way to do basically the same thing but run animation behind that mask? Right now the background is limited to the “masks” solid colour.

Hey,
This may help

Thank you. This is a very good solution as well. Unfortunately there is no love for Edge: http://caniuse.com/#feat=css-clip-path

I will try this and let you know.

1 Like

@Luckyde already seen, very interesting!
thanks

1 Like

Hmm well if you’re going for edge would making a version in canvas work? Or even raphaeljs which is svg but has ie support. But mind you is meant for basic things

Really great.

So, the trick is use HTML widget, and fill the same color to the SVG background?

Thanks.

Alex

I found that if the SVG mask image was exported from Sketch, it will support all browser automatically, I mean no need to fill background color for it manually.

Here is the Screenshot:

it is much convenient for people who are not familiar with code or photoshop

Alex

yes, if you use the same color it works