This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Luka Marčec
Posted Jul 10 - Read on Facebook

How can I creat an element like this?

(Transparent in the middle.)

For the circle element filled with color I used this code:

layerA = new Layer width:100, height:100, backgroundColor:"#00adef" , borderRadius: "50px"

but I need to make it transparent in the middle.

9 Comments

Johannes Eckert

What about using <svg> in layer.html ?

Luka Marčec

That would be possible but now I really want to figure out how to create it with code! :D

Johannes Eckert

What about using CSS border with the border radius ... Does that make it transparent in the center?

Benjamin Den Boer

Try setting the backgroundColor to "transparent" and to add a border of 20px around it:

layerA.style.border = "20px solid #00adef"

Luka Marčec

Thank you, guys!

Luka Marčec

Benjamin, this is what I got. Background is set to transparent, as you can see.

Luka Marčec

Why is there a lighter blue circle inside?

Florian Pnn

Did you put a layerA.style.background = "transparent" ?

Because by default Layer in framer have a 50% blue color as background.

Luka Marčec

Fixed it, thank you Florian! :)

Read the entire post on Facebook