Solution Review: Falling Circle

Solution

Explanation

See the following explanation to better understand the above code.

• From line 1 to line 5, we have created an SVG canvas of size (500x500) with a red border.
• In line 7 to line 11, we have created a circle of radius (r=50), and the center of the circle at (250,50) relative to the origin.
• In line 14, we have moved the circle to the bottom of the canvas using translate. The transition function with a duration of 3000ms is used in line 12 and line 13 to make the translation of the circle smooth.
• After moving the circle to the bottom of the SVG canvas, we have to change the color of the circle using the attr function. The transition function with the duration of 3000ms is used to make the change of the color smooth.