Rectangle and ClipCircle
Rectangle and ClipCircle
Formula: Rectangle() and ClipCircle()
Category: Shape
Rectangle()Generates a rectangle
or stated otherwise...
ClipCircle()Crops an image into a circle
or stated otherwise...
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 itClipCircle() has One parameters.
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
176Rectangle Height:
000
64Rectangle 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 checkbox
2
ClipCircle
1
2
3
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
Priority Type
Color
Circle
Select
1
High
#fa8072
High
2
Medium
#FCE8DF
Medium
3
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
Challenge: Create an advanced progress bar to show someones progress towards a goal vs. elapsed time
Done
Ready to master Coda yourself?
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.