# Fill space between cubic bezier curves and straight lines

**URL:** <https://discourse.threejs.org/t/fill-space-between-cubic-bezier-curves-and-straight-lines/34598>\
**Category:** Questions\
**Tags:** materials, geometry\
**Created:** [February 7, 2022, 8:14pm UTC](https://discourse.threejs.org/t/fill-space-between-cubic-bezier-curves-and-straight-lines/34598 "2022-02-07T20:14:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kenny](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@kenny](https://discourse.threejs.org/u/kenny)\
**Post date:** [February 7, 2022, 8:14pm UTC](https://discourse.threejs.org/t/fill-space-between-cubic-bezier-curves-and-straight-lines/34598/1 "2022-02-07T20:14:14Z")

</div>

hi guys, i am rendering shape what consists with cubic bezier curves and straight lines and with lines i can build(new THREE.CubicBezierCurve3, new THREE.Line) it but i can’t fill space between lines. 2 screen what i have, 1 what i need

 ![Screenshot 2022-02-07 at 22.08.10](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/c/9c70fdd67d51705ed7ac48f952edf76b33946703.png)  
 ![Screenshot 2022-02-07 at 22.08.23](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/3/93dc7a23a8d175a7bddb4cffed5e0d0f292a1584.png)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 7, 2022, 8:24pm UTC](https://discourse.threejs.org/t/fill-space-between-cubic-bezier-curves-and-straight-lines/34598/2 "2022-02-07T20:24:41Z")

</div>

Maybe you can achieve the form with a solution from the [collection](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315) ?

[ThickBorder2D](https://hofk.de/main/discourse.threejs/2021/ThickBorder2D/ThickBorder2D.html)  
[ColorToTexture\_FragmentShader](https://hofk.de/main/discourse.threejs/2020/ColorToTexture_FragmentShader/ColorToTexture_FragmentShader.html)  
 ![2022-02-07 21.25.56](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/0/10ee00af44ea5bed804b30e5adae8b13884e66d5.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 7, 2022, 8:31pm UTC](https://discourse.threejs.org/t/fill-space-between-cubic-bezier-curves-and-straight-lines/34598/3 "2022-02-07T20:31:47Z")

</div>

@kenny  
Any chance to provide an editable live code example of how you build those contours? (jsfiddle, codepen, codesandbox etc.)

Also, have a look at this forum post: [Ringsegment function leads to strange behaviour - #8 by prisoner849](https://discourse.threejs.org/t/ringsegment-function-leads-to-strange-behaviour/4212/8)

---

<div class="post-metadata">

**Author:** ![kenny](https://avatars.discourse-cdn.com/v4/letter/k/90db22/32.png) [@kenny](https://discourse.threejs.org/u/kenny)\
**Post date:** [February 7, 2022, 9:05pm UTC](https://discourse.threejs.org/t/fill-space-between-cubic-bezier-curves-and-straight-lines/34598/4 "2022-02-07T21:05:40Z")

</div>

@prisoner849  
https://codepen.io/kenywest/embed/preview/dyZNzby?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=dyZNzby

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 7, 2022, 9:32pm UTC](https://discourse.threejs.org/t/fill-space-between-cubic-bezier-curves-and-straight-lines/34598/5 "2022-02-07T21:32:30Z")

</div>

Ah, thanks for sharing 🙂 Will have a look at it later.

I tried another way with `Shape` and `ShapeGeometry` (and simple trigonometry): [https://codepen.io/prisoner849/pen/qBVRjKg?editors=0010](https://codepen.io/prisoner849/pen/qBVRjKg?editors=0010)

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/a/ca2af37b5fc7ec077bb92b448892a3de7b45da1e.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 8, 2022, 4:52pm UTC](https://discourse.threejs.org/t/fill-space-between-cubic-bezier-curves-and-straight-lines/34598/7 "2022-02-08T16:52:56Z")

</div>

This is the best I could think of, having the data structure provided: [https://codepen.io/prisoner849/pen/ExbWaaG?editors=0010](https://codepen.io/prisoner849/pen/ExbWaaG?editors=0010)  
Pretty much based on your code.

![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/3/73c3736b09dd05ff675c13b55ad46ffdada9a719.png)