Rectangle and ClipCircle
Share
Explore

Rectangle and ClipCircle

Formula: Rectangle() and ClipCircle()
Category: Shape
rectangle.svg
Rectangle()
Generates a rectangle
or stated otherwise...
Hey Coda, I want you to generate a rectangle based on the following dimensions
circle-thin.svg
ClipCircle()
Crops an image into a circle
or stated otherwise...
Hey Coda, Can you crop or turn an image into a circular shape?

Rectangle() has four parameters.
tape-measure.svg
Width

Rectange(Width, Height, Color, Name)

How wide to render the rectangle
height.svg
Height

Rectange(Width, Height, Color, Name)

How tall to render the rectangle
color-dropper.svg
Color

Rectange(Width, Height, Color, Name)

Color as a RGB hex (black if omitted)
identification-documents.svg
Name

Rectange(Width, Height, Color, Name)

The name parameter is essentially useless. Dont use it

ClipCircle() has One parameters.
identification-documents.svg
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
176
Rectangle Height:
000
64
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
1
2
3
4
There are no rows in this table
Woah! Great job, you’ve checked
2
checkbox
ClipCircle
1
2
3
Task
Priority
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 table below to see how it was constructed!
Priority Selects
0
Priority Type
Color
Circle
Select
Priority Type
Color
Circle
Select
1
High
#fa8072
High
2
Medium
#FCE8DF
Medium
3
Low
#90cbf9
Low
There are no rows in this table
Search
Practice: Create a rectangle and a small red circle
Done
Create a more visually appealing select list
Done
Challenge: Create an advanced progress bar to show someones progress towards a goal vs. elapsed time
Done

Ready to master Coda yourself?
Want to learn more?


Share
 
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.