Skip to content

Blobs

OxyProps CSS Variables
  --o-radius-blob-1: 30% 70% 70% 30%/53% 30% 70% 47%;
  --o-radius-blob-2: 53% 47% 34% 66%/63% 46% 54% 37%;
  --o-radius-blob-3: 37% 63% 56% 44%/49% 56% 44% 51%;
  --o-radius-blob-4: 63% 37% 37% 63%/43% 37% 63% 57%;
  --o-radius-blob-5: 49% 51% 48% 52%/57% 44% 56% 43%;

How does it work?

link How does it work?

For the example, let’s break down blob 1:

  • border-radius means we are telling CSS that we want to change the corners of something.
  • The first set of numbers 30% 70% 70% 30% are like measurements for each corner. They determine how much roundness or smoothness the corners should have. Each number corresponds to a specific corner in this order: top left, top right, bottom right, bottom left. So, the top left corner will be 30% round, the top right and bottom right corners will be 70% round, and the bottom left corner will be 30% round.
  • After the slash (/), we have another set of numbers: 53% 30% 70% 47%. These numbers determine the shape of the rounded corner ellipse. Just like with the corners, each number corresponds to a specific corner in the same order: top left, top right, bottom right, bottom left. These numbers control the width and height of the ellipse that creates the rounded corner shape.

So, when we apply this CSS code to a shape, it will make the corners look round and smooth, with different degrees of roundness for each corner. It’s like giving the shape a special style to make it look nice and friendly!

Blob 1

link Blob 1
o-blob-1
CSS Variable
  var(--o-radius-blob-1)
Utility Class
  o-blob-1

Blob 2

link Blob 2
o-blob-2
CSS Variable
  var(--o-radius-blob-2)
Utility Class
  o-blob-2

Blob 3

link Blob 3
o-blob-3
CSS Variable
  var(--o-radius-blob-3)
Utility Class
  o-blob-3

Blob 4

link Blob 4
o-blob-4
CSS Variable
  var(--o-radius-blob-4)
Utility Class
  o-blob-4

Blob 5

link Blob 5
o-blob-5
CSS Variable
  var(--o-radius-blob-5)
Utility Class
  o-blob-5