0

How make dashed outline for rounded rectangle like in figma?

figma

I tried wrote this, but I did only part with rounded rectangle and outline based on subtraction two rounded rectangles with different sizes.

I know about distance, frac and step, but how add dash and gap exactly by along outline line?

I tried use polar coordinates and take y value to fraction then step and after that I multiply with my contour which gives a needed result, but a little bit are not even, and I don't know how fix this.

picture of result

karel
  • 5,489
  • 46
  • 45
  • 50
deadbit
  • 1
  • 2

1 Answers1

0

I think sample a checkerboard texture would help. One part is pure white and the other is pure transparent. In the outline pass, instead of return a solid color, try to sample that texture by screen space coordinate

Aryinskk
  • 1
  • 2
  • 1
    thanks for trying, but i don`t think how be with round corners in that case ? – deadbit Aug 07 '23 at 18:36
  • I think if you are using smooth normals for outline extend, the corners would be rounded – Aryinskk Aug 08 '23 at 02:51
  • Can you give me some code example of that approach? I just use shader-graph and into it use rounded rectangle node, and I understand how to write it in HLSL, but I don’t know about smooth normals in that case (I’m pretty new), and I can’t imagine how I can get a dash on the corner if the value will be taken from a checkboard texture. – deadbit Aug 11 '23 at 11:02