SVG text mask to emulate/copy the work of the "We are Cube" site

Design help Layout & Design
1

I am trying … and repetitively failing to create the SVG text mask cover for an underlying video / masked text component. Here’s an image of the real one …

image
image2446×1376 221 KB

The cube is the original artifact from a cloned site … CUBE TEMPLATE - Webflow HTML website template

I cant get the CUBE in the man page SVG to change words to ACTION. and it is totally cramping my style and ability to launch this community. Creating a lot of stress and no idea what I’m doing wrong.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

hi @offsetnoah the word “CUBE” is a SVG file, this mean you can’t change these letters. Use any graphical program to create your own SVG.

3

I know … but i cant make an SVG work … and I’ve tried every tool I have adobe creative suite and have tried to make it work. and just can’t get it right. this is the only thing that I need to do for a community launch page.

4

here is an old thread no one seemed to solve … SVG Mask on a background video - How to? - Community resources / Product feedback - Forum | Webflow

5

You can create custom code SVG with text in. There is many tutorials on internet about SVG masking and it is a few line of code which is using text.

here is an example

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
    <defs>
       <mask id="mask" x="0" y="0" width="100%" height="100%" >
         <rect x="0" y="0" width="100%" height="100%" />
         <text x="72"  y="50">ACTION</text>
       </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" />
 </svg>

The reason they use SVG image is because WF doesn’t allow 1 single letter of custom code.

6

I just put this into a generator and this pops out? can i put it into webflow?

7

Did you try it? @offsetnoah ? You can also use HTMLembed element.

8

Did not work with the plugin app. the background is d0d0d0. but no didn’t work. is no one else using this template?

9

here is simple example in WF to study @offsetnoah

10

I copied the code and it did not work still. I think I need a freelancer.

1 Like
11

Any advice or others who have modified that site with another masked SVG or leads for free lancers would be much appreciated.