Gallery

Rectangle and ClipCircle

Explore

Gallery

Rectangle and ClipCircle

⁠

Formula: Rectangle() and ClipCircle()

Category: Shape

⁠

Rectangle()

Generates a rectangle

or stated otherwise...

Hey Coda, I want you to generate a rectangle based on the following dimensions.

⁠

ClipCircle()

Crops an image into a circle

or stated otherwise...

Hey Coda, I have this image but it’s not exactly what. I need. Will you crop it into a circle shape?

Rectangle() has four parameters:

⁠

Width

Rectange(Width, Height, Color, Name)

How wide to render the rectangle.

⁠

Height

Rectange(Width, Height, Color, Name)

How tall to render the rectangle.

⁠

Color

Rectange(Width, Height, Color, Name)

Color as a RGB hex (black if omitted).

⁠

Name

Rectange(Width, Height, Color, Name)

The name parameter is essentially useless. Dont use it.

ClipCircle() has one parameter:

⁠

Image

ClipCircle(Image)

Any image (or rectangle) to turn into a circle

⁠

Rectangle() allows you to create images (specifically, images that are rectangular in shape).

ClipCircle() allows you to turn images (including ones created by Rectangle() into a circular shape).

Rectangle

Let’s build a simple rectangle! You can change the size as well as the color below.

Rectangle Width:

000

181

⁠

Rectangle Height:

000

⁠

Rectangle Color:

Blank

⁠

Now let’s build a custom progress bar! You can build two different colored progress bars together to create a dynamic updating progress bar...

There are no rows in this table

⁠

Woah! Great job, you’ve checked

2

⁠

checkbox

⁠

ClipCircle

Task

Priority

Task 1

⁠

High

Task 2

⁠

Medium

Task 3

⁠

Low

There are no rows in this table

⁠

By simply adding ClipCircle() to the end of a rectangle, you can create small little colored dots! These are great visual additions you can add to your docs to indicate status in a different way.

Use the Priority column to the left to see how you can create more visually appealing select lists, then dive into the

Priority Selects⁠

table below to see how it was constructed!

Priority Selects

Priority Selects

Priority Type

Color

Circle

Select

High

#fa8072

⁠

High

Medium

#FCE8DF

⁠

Medium

Low

#90cbf9

⁠

Low

There are no rows in this table

⁠

Practice: Create a rectangle and a small red circle

Done

Create a more visually appealing select list

Done

⁠

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.