# How to blur a shape?

**URL:** https://discourse.processing.org/t/how-to-blur-a-shape/40441
**Category:** Beginners
**Created:** [January 4, 2023, 11:33am UTC](https://discourse.processing.org/t/how-to-blur-a-shape/40441 "2023-01-04T11:33:40Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![usernamenotavailable](https://avatars.discourse-cdn.com/v4/letter/u/b782af/32.png) [@usernamenotavailable](https://discourse.processing.org/u/usernamenotavailable)
#### Post date: [January 4, 2023, 11:33am UTC](https://discourse.processing.org/t/how-to-blur-a-shape/40441/1 "2023-01-04T11:33:40Z")

</div>

I know I can blur a .jpg file I load with [reference | p5.js](https://p5js.org/reference/#/p5/filter).

But is there any way to blur a shape I create in code please? Like create a rect() then blur it, or blur a grid of overlapping circles as a group, like you can in SVG.

---

<div class="post-metadata">

### Author: ![usernamenotavailable](https://avatars.discourse-cdn.com/v4/letter/u/b782af/32.png) [@usernamenotavailable](https://discourse.processing.org/u/usernamenotavailable)
#### Post date: [January 4, 2023, 11:53am UTC](https://discourse.processing.org/t/how-to-blur-a-shape/40441/2 "2023-01-04T11:53:28Z")

</div>

Oh, it just works, here we go:

function setup() {  
createCanvas(400, 400);  
}

function draw() {  
background(255);  
noStroke();  
colorMode(HSL, 360, 1, 1, 1);  
noLoop();

fill(color(60, 1, 0.5, 0.7));  
circle(100, 100, 100);

filter(BLUR, 10);

fill(color(200, 1, 0.5, 0.7));  
circle(150, 150, 100);

filter(BLUR, 10);  
}