Is there any SVG Mask resource?

1

Hello,

I do not know whether there are some SVG mask resource, for example, I need a heart shape SVG mask.

I guess a lot people viewed this webpage design: http://www.hypetemplate.com/demos/apple_classic/index.html

In this design, Apple Logo as SVG mask, and I just need a heart shape.

Thanks.

Alex

2

Hi Alex!

Try searching the internet… “SVG Mask”

https://www.google.com/search?client=safari&rls=en&q=SVG+mask&ie=UTF-8&oe=UTF-8

1 Like
3

Hello @JimScott,

Thanks, I did search it before post here. I need the heart shape to be transparent, it is not easy :slight_smile:

Alex

4

Hi Alex!

Here is a “transparent” heart if I understood You correctly (only the heart shape itself masks an image).

Hype Project: Heart_Mask.hype.zip (86.6 KB)

Some notes:
I have never worked with a SVG mask before. I do not fully understand the numbers - nor have I have the time to research them. So what is showing up is the mask’s positioning looks off in the Hype working space, but in Preview mode it shows up correctly. I do not know why this is, nor do I think it is correct. It is just as far as could get at this time.

Perhaps others with a better working knowledge of SVG code in the innerHTML could offer some advice.

5

@Jimscott,

Thanks for your document, it does not work. the heart Mask in Hype should be the heart shape with fully transparent, but there should be some color in other area. By this way, only the content under the mask layer will show up.

I think there might be a way to do that, but I have not tried. For example, create a Heart shape with some background in Photoshop or AI, but cut that heart shape to be transparent, and then paste that image into Sketch, and then copy SVG code from Sketch, and then paste that code into Hype :slight_smile:

Do you think it is possible? :slight_smile:

Alex

6

For example, create a Heart shape with some background in Photoshop or AI, but cut that heart shape to be transparent,

This is what I did in my example just above - created in Illustrator. But I guess I'm not understanding your request.

Here is another example (not mine) - this might be closer to what You want...
svg_mask_apple_logo.hype.zip (126.9 KB)

Original thread: Masking question - #2 by michelangelo

Just use an Illustrator (or whatever program) to create the heart and export as SVG - as You noted above.

7

Hi @JimScott,

It works, I did that exactly as the above what I said.

Here is screenshot:

Alex

1 Like
8

Great!