Rectangle Circle

  1. Tutorial of Creo Blend.
  2. Constructs a wedge of a circle with the given radius, angle, mode, and color. The angle must be between 0 and 360 (but not equal to either 0 or 360). Note that when the mode is 'outline or 'outline', the shape may draw outside of its bounding box and thus parts of the image may disappear when it is cropped.
  3. In this tutorial, we are going to learn how to draw a circle and a rectangle in Graphics C/C? Submitted by Mahima Rao, on October 24, 2018. In today's advanced Advance Learning Tutorial, we will learn to draw Circle and rectangle in C/C Graphics.
  4. Rectangle Area = w × h w = width h = height: Parallelogram Area = b × h b = base h = vertical height: Trapezoid (US) Trapezium (UK) Area = ½(a+b) × h h = vertical height: Circle Area = π × r 2 Circumference = 2 × π × r r = radius: Ellipse Area = π ab: Sector Area = ½ × r 2 × θ r = radius θ = angle in radians.

The last example of this section combines the circle and rectangle code together. We have a circle with the position (cx,cy) with a radius r and a square at (rx,ry) with a width/height (rw,rh). Our code will first test which edge of the rectangle is closest to the circle, then see if there is a collision using the Pythagorean.

Quadrilateral just means 'four sides'
(quad means four, lateral means side).

A Quadrilateral has four-sides, it is 2-dimensional (a flat shape), closed (the lines join up), and has straight sides.

Try it Yourself

(Also see this on Interactive Quadrilaterals)


A quadrilateral has:

  • four sides (edges)
  • four vertices (corners)
  • interior angles that add to 360 degrees:

Try drawing a quadrilateral, and measure the angles. They should add to 360°

Types of Quadrilaterals

There are special types of quadrilateral:

Some types are also included in the definition of other types! For example a square, rhombus and rectangle are also parallelograms. See below for more details.


Let us look at each type in turn:

The Rectangle

the little squares in each corner mean 'right angle'

A rectangle is a four-sided shape where every angle is a right angle (90°).

Also opposite sides are parallel and of equal length.

The Square

the little squares in each corner mean 'right angle'

A square has equal sides (marked 's') and every angle is a right angle (90°)

Also opposite sides are parallel.

A square also fits the definition of a rectangle (all angles are 90°), and a rhombus (all sides are equal length).

The Rhombus

A rhombus is a four-sided shape where all sides have equal length (marked 's').

Also opposite sides are parallel and opposite angles are equal.

Another interesting thing is that the diagonals (dashed lines) meet in the middle at a right angle. In other words they 'bisect' (cut in half) each other at right angles.

A rhombus is sometimes called a rhomb or a diamond.

The Parallelogram

A parallelogram has opposite sides parallel and equal in length. Also opposite angles are equal (angles 'A' are the same, and angles 'B' are the same).

NOTE: Squares, Rectangles and Rhombuses are all Parallelograms!


A parallelogram with:

  • all sides equal and
  • angles 'A' and 'B' as right angles

is a square!

The Trapezoid (UK: Trapezium)

Isosceles Trapezoid

A trapezoid(called a trapezium in the UK) has a pair of opposite sides parallel.

Parallels desktop 8 for mac download. And a trapezium(called a trapezoid in the UK) is a quadrilateral with NO parallel sides:

In the US:a pair of parallel sidesNO parallel sides
In the UK:NO parallel sidesa pair of parallel sides
(the US and UK definitions are swapped over!)

An Isosceles trapezoid, as shown above, has left and right sides of equal length that join to the base at equal angles.

The Kite

Hey, it looks like a kite (usually).

It has two pairs of sides:

Each pair is made of two equal-length sides that join up.


  • the angles where the two pairs meet are equal.
  • the diagonals, shown as dashed lines above, meet at a right angle.
  • one of the diagonals bisects (cuts equally in half) the other.

.. and that's it for the special quadrilaterals.

Irregular Quadrilaterals

The only regular (all sides equal and all angles equal) quadrilateral is a square. So all other quadrilaterals are irregular.

The 'Family Tree' Chart

Quadrilateral definitions are inclusive.

Example: a square is also a rectangle.

So we include a square in the definition of a rectangle.

(We don't say 'Having all 90° angles makes it a rectangle except when all sides are equal then it is a square.')

This may seem odd, as in daily life we think of a square as not being a rectangle .. but in mathematics it is.

Using the chart below we can answer such questions as:

  • Is a Square a type of Rectangle? (Yes)
  • Is a Rectangle a type of Kite? (No)

Complex Quadrilaterals

Oh Yes! when two sides cross over, we call it a 'Complex' or 'Self-Intersecting' quadrilateral, like these:

They still have 4 sides, but two sides cross over.


A quadrilateral is a polygon. In fact it is a 4-sided polygon, just like a triangle is a 3-sided polygon, a pentagon is a 5-sided polygon, and so on.

Play with Them

Now that you know the different types, you can play with the Interactive Quadrilaterals.

Other Names

A quadrilateral can sometimes be called:

  • a Quadrangle ('four angles'), so it sounds like 'triangle'
  • a Tetragon ('four polygon'), so it sounds like 'pentagon', 'hexagon', etc.

There are several basic shapes used for most SVG drawing. The purpose of these shapes is fairly obvious from their names. Some of the parameters that determine their position and size are given, but an element reference would probably contain more accurate and complete descriptions along with other properties that won't be covered in here. However, since they're used in most SVG documents, it's necessary to give them some sort of introduction.

Basic shapes

To insert a shape, you create an element in the document. Different elements correspond to different shapes and take different parameters to describe the size and position of those shapes. Some are slightly redundant in that they can be created by other shapes, but they're all there for your convenience and to keep your SVG documents as short and as readable as possible. All the basic shapes are shown in the image to the right. The code to generate that looks something like:

Note: The stroke, stroke-width, and fill attributes are explained later in the tutorial.


The <rect> element draws a rectangle on the screen. There are 6 basic attributes that control the position and shape of the rectangles on screen. The one on the right has its rx and ry parameters set, giving it rounded corners. If they're not set, they default to 0.

The x position of the top left corner of the rectangle.
The y position of the top left corner of the rectangle.
The width of the rectangle
The height of the rectangle
The x radius of the corners of the rectangle
The y radius of the corners of the rectangle


The <circle> element draws a circle on the screen. It takes 3 basic parameters to determine the shape and size of the element.

The radius of the circle.
The x position of the center of the circle.
The y position of the center of the circle.


An <ellipse> is a more general form of the <circle> element, where you can scale the x and y radius (commonly referred to as the semimajor and semiminor axes in maths) of the circle separately.

The x radius of the ellipse.
The y radius of the ellipse.
The x position of the center of the ellipse.
The y position of the center of the ellipse.


The <line> element takes the positions of two points as parameters and draws a straight line between them.

The x position of point 1.
The y position of point 1.
The x position of point 2.
The y position of point 2.


Circle Square Rectangle Triangle

A <polyline> is a group of connected straight lines. Since the list of points can get quite long, all the points are included in one attribute:


A list of points. Each number must be separated by a space, comma, EOL, or a line feed character. Each point must contain two numbers: an x coordinate and a y coordinate. So, the list (0,0), (1,1), and (2,2) would be written as 0, 0 1, 1 2, 2.


A <polygon> is similar to a <polyline>, in that it is composed of straight line segments connecting a list of points. For polygons though, the path automatically connects the last point with the first, creating a closed shape.

Note: A rectangle is a type of polygon, so a polygon can be used to create a <rect/> element in cases where you need a little more flexibility.

Rectangle Circle Optical Illusion

A list of points, each number separated by a space, comma, EOL, or a line feed character. Each point must contain two numbers: an x coordinate and a y coordinate. So, the list (0,0), (1,1), and (2,2) would be written as 0, 0 1, 1 2, 2. The drawing then closes the path, so a final straight line would be drawn from (2,2) to (0,0).

Rectangle Circle Collision Javascript


A <path> is the most general shape that can be used in SVG. Using a path element, you can draw rectangles (with or without rounded corners), circles, ellipses, polylines, and polygons. Basically any of the other types of shapes, bezier curves, quadratic curves, and many more.

Rectangle Circle Frames Clipart

For this reason, the next section in this tutorial will be focused on paths. But for now, note that there is a single parameter used to control its shape.

Rectangle Circle Illusion

A list of points and other information about how to draw the path. See the Paths section for more information.