Python Practical Assignment I

Q.1. Write a python program to extend nested list by adding the sublist after 'g' list1=['a','b',
['c',['d','e',['f','g'],'k'],'l'],'m','n']
sublist=['h','i',j]
Program:
list1 = ['a', 'b', ['c', ['d', 'e', ['f', 'g'], 'k'], 'l'], 'm', 'n']
sublist = ['h', 'i', 'j']
list1[2][1][2].extend(sublist)
print(list1)
output:
['a', 'b', ['c', ['d', 'e', ['f', 'g', 'h', 'i', 'j'], 'k'], 'l'], 'm', 'n']

Q.2. Write a prog. to add item 7000 after 6000 in the following list using append() function
[10,20,[300,400,[5000,6000],500],30,40]
Program:
list1 = [10,20,[300,400,[5000,6000],500],30,40]
print(list1)
list1[2][2].append(7000)
print(list1)
output:
[10, 20, [300, 400, [5000, 6000], 500], 30, 40]
[10, 20, [300, 400, [5000, 6000, 7000], 500], 30, 40]

Q.3. Write a program to check whether the given number is in between 1 and 100.
Program:
num = int(input("Enter number: "))
if num>=1 and num<=100:
print("number lies between 1-100")
else:
print("not lies")
output: Enter number: 55 number lies between 1-100
Q.4.Write a program to display flag color based on flag color code using ladder if else.
Program:
def display_flag_color(color_code):
color_mapping = { 'R': 'Red', 'G': 'Green', 'B': 'Blue', 'Y': 'Yellow', 'W': 'White' }
if color_code in color_mapping:
flag_color = color_mapping[color_code]
print(f"The flag color for code {color_code} is {flag_color}.")
else:
print(f"Invalid color code: {color_code}. Please enter a valid color code.")
color_code = input("Enter the color code (R/G/B/Y/W): ").upper()
display_flag_color(color_code)
output:
Enter the color code (R/G/B/Y/W): W
The flag color for code W is White.

Q.5. Write a program to print characters present in string index wise

Program:
s1 = input("Enter String: ")
print("character at particular index are: ")
for i in range(len(s1)):
print(i," = ",s1[i])
output:
Enter String: priti
character at particular index are:
0 = p
1 = r
2 = i
3 = t
4 = i
Q.6. Display numbers from 10 to 1 in descending order.
Program:
for i in range(10,0,-1):
print(i)
output:
10 9 8 7 6 5 4 3 2 1

Q.7. key=[‘name’,’age’,’city’,’is_student’] , Write a program to add values for this key into
dictionary using for loop
Program:
keys=['name','age','city','is_stud']
dict1={}
for i in range(len(keys)):
print("Enter value for",keys[i]," ")
value = input()
dict1[keys[i]]=value
print(dict1)
output:
Enter value for name priti
Enter value for age 22
Enter value for city ahmednager
Enter value for is_stud yes
{'name': 'priti', 'age': '22', 'city': 'ahmednager', 'is_stud': 'yes'}

Q.8. Write a program to add 5 entries into empty dictionary using for loop take key-value
from user for each entry.
Program:
dictdemo ={}
cnt=1
for i in range(5):
while(cnt<=5):
print("Enter key",cnt)
keys= input()
print("Enter value for key",cnt)
value = input()
dictdemo[keys]=value
cnt+=1
print(dictdemo)
output:
Enter key 1 name
Enter value for key 1 priti
Enter key 2 class
Enter value for key 2 FYMCA
Enter key 3 rollno
Enter value for key 3 106
Enter key 4 div
Enter value for key 4 B
Enter key 5 age
Enter value for key 5 22
{' name': 'priti', 'class': 'FYMCA', 'rollno': '106', 'div': 'B', 'age': '22'}

Q.9. Write a program to print sum of positive integers when user enter negative value break
the loop (while)
Program:
add = 0
while True:
num = int(input("Enter an integer: "))
if num < 0:
break
add += num
print("Sum of positive integers:", add)
output:
Enter an integer: 2
Enter an integer: 5
Enter an integer: -3
Sum of positive integers: 7

Q.10. Write a program to check whether entered string and number is palindrome or not
Program: for String
s1 = input("Enter String: ")
s2 = s1[::-1]
if(s1==s2):
print("String is palindrome")
else:
print("String is not palndrome")
output:
Enter String: mom
String is palindrome

Program: for Number

n1 = int(input("Enter number: "))
n2 = str(n1)
x = int(n2[::-1])
print(x)
if(n1 == x):
 print("number is palindrome")
else:
print("Number is not plaindrome")
output:
Enter number: 123321
123321
number is palindrome

Q.11. Write a program to display all position of substring in a given main string.
Program:
string = input("Enter the main string: ")
substr = input("Enter the substring to find: ")
start = 0
while True:
position = string.find(substr, start)
if position == -1:
break
print(f"Substring found at position: {position}")
start = position + 1
output:
Enter the main string: prititthube
Enter the substring to find: it
Substring found at position: 2
Substring found at position: 4

Q.12. Write a program to reverse the content of each word.

Eg. I/P: Learning python is very easy
o/p:gninraeL nohtyp si yrey ysae
Program:
sentence = input("Enter a sentence: ")
words = sentence.split()
reversed_words = [word[::-1] for word in words]
reversed_sentence = ' '.join(reversed_words)
print("Reversed content of each word:", reversed_sentence)
Output:
Enter a sentence: Learning python is very easy
Reversed content of each word: gninraeL nohtyp si yrev ysae

Q.13. program to print characters at odd position and even position for the given String?
Program:
def print_odd_even_positions(input_string):
odd_positions = input_string[::2]
even_positions = input_string[1::2]
print("Characters at odd positions:", odd_positions)
print("Characters at even positions:", even_positions)
input_string = input("Enter a string: ")
print_odd_even_positions(input_string)
output:
Enter a string: priti
Characters at odd positions: pii
Characters at even positions: rt

Q.14. Write a Program to merge characters of 2 strings into a single string by taking
characters alternatively.
Program:
string1 = input("Enter the first string: ")
string2 = input("Enter the second string: ")
merged_string = ''.join([char1 + char2 for char1, char2 in zip(string1, string2)]) +
string1[len(string2):] + string2[len(string1):]
print("Merged string:", merged_string)
output:
Enter the first string: priti
Enter the second string: thube
Merged string: ptrhiutbie

Q.15. Write a program for the following requirement

input: a4b3c2 output: aaaabbbcc
Program:
s1 = input("Enter String: ")
s2 = ''
for i in range(0, len(s1), 2):
s2 += s1[i] * int(s1[i + 1])
print("Output:", s2)
output:
Enter String: a4b3c2
Output: aaaabbbcc

Q.16. Write a program to remove duplicate characters from the given input string?
input: ABCDABBCDABBBCCCDDEEEF
output: ABCDEF
Program:
s1 = input("Enter a string: ")
uniq = ''
for i in s1:
if i not in uniq:
uniq += i
print("Output:", uniq)
output:
Enter a string: ABCDABBCDABBBCCCDDEEEF
Output: ABCDEF

Q.17. Write python program to display subject name with marks of that subject using
KWARGS that is variable length.
Program:
def MarDisp(**submark):
for i , j in submark.items():
print(f'{i} == {j}')
print("Student Marks are: ")
MarDisp(java=90,python=78,php=78,css=77)
Output:
Student Marks are:
java == 90
python == 78
php == 78
css == 77

Q.18. An organization has decided to provide salary hike to its employees based on their job
level. Employees can be in job levels 3,4 or 5. Hike percentage based on job levels are given
below: Job level = Hike Percentage(applicable on current salary)
3=15 ,4= 7 ,5 =5 In case of invalid job level, consider hike percentage to be 0.
Given the current salary and job level, write a python program to find and display the new
salary of an employee.
Program:
def SalaryHike():
salary= int(input("Enter basic Salary for employee:"))
lv = int(input("Enter job level: "))
if(lv==3):
salary = salary+(salary*0.15)
elif(lv==4):
salary= salary+(salary*0.07)
elif(lv==5):
salary= salary+(salary*0.05)
else:
print("Invalid Job Level")
salary= salary+0
print(f'Your Job Level is: {lv}\nYour Salary with Hike: {salary} ')
return salary
print("\n-------------PLEASE ENTER VALID DETAILS------------")
SalaryHike()

Output:
Enter basic Salary for employee:30000
Enter job level: 4
Your Job Level is: 4
Your Salary with Hike: 32100.0

Q. 19. Food Corner home delivers vegetarian and non-vegetarian combos to its customer
based on order. A vegetarian combo costs Rs.120 per plate and a non-vegetarian combo costs
Rs.150 per plate. Their non-veg combo is really famous that they get more orders for their
non-vegetarian combo than the vegetarian combo. Apart from the cost per plate of food,
customers are also charged for home delivery based on the distance in kms from the
restaurant to the delivery point. The delivery charges are as mentioned
below: Distance in kms , Delivery charge in Rs per km For first 3 kms 0 For next 3 kms 3 For
the remaining 6 Given the type of food, quantity (no. of plates) and the distance in kms from
the restaurant to the delivery point, write a python program to calculate the final bill amount
to be paid by a customer. The below information must be used to check the validity of the
data provided by the customer: Type of food must be ‘V’ for vegetarian and ‘N’ for non-
vegetarian. Distance in kms must be greater than 0. Quantity ordered should be minimum 1.
If any of the input is invalid, the bill amount should be considered as -1.
Program:
def FoodCorner():
typefood=str(input("Enter Type Of Food [V/N] :"))
quantity=int(input("Enter the Quantity :- "))
distance=float(input("Enter Distance In Km's (Distance Should be atleast 1 km) :- "))
if (typefood=='V' or typefood=='v' ):
cost=120
elif(typefood=="N" or typefood=="n"):
cost=150
else:
cost=0
if(distance<=3):
delivery=0
elif(distance>3 and distance<=6):
dist=distance-3
delivery=3*dist
elif(distance>6):
dist1=distance-3
dist2=dist1-3
delivery=0+3*3+dist2*6
else:
delivery=-1
if cost==0 or delivery==-1:
total=-1
else:
total=(cost*quantity)+delivery
print(f"""_________Billing Details__________
Food Type :- {typefood}
Cost :- {cost}
Distance(km) :- {distance}
Delivery Charges :- {delivery}
Total Billing Amount:- {total}""")
FoodCorner()
Output:
Enter Type Of Food [V/N] :V
Enter the Quantity :- 3
Enter Distance In Km's (Distance Should be atleast 1 km) :- 6
_________Billing Details__________
Food Type :- V
Cost :- 120
Distance(km) :- 6.0
Delivery Charges :- 9.0
Total Billing Amount:- 369.0
 AIT Practical Assignment I
1: Time Table
<!DOCTYPE html>
<html>
<body><h2>Time Table</h2>
<table border="1px solid-black" cellspacing="0" style="width:100% ; text-align: center;">
<tr>
<th >Time/Day</th>
<th >09:45-10:45</th>
<th >10:45-11:45</th>
<th >11:45-12:00</th>
<th >12:00-01:00</th>
<th >01:00-02:00</th>
<th >02:00-02:45</th>
<th >02:45-03:45</th>
<th >03:45-04:45</th>
</tr>

<tr style="text-align: center;">

<td>Monday</td>
<td>AIT</td>
<td>ADBMS</td>
<td rowspan="6">short break</td>
<td colspan="2">Python lab</td>
<td rowspan="6">long break</td>
<td>OT</td>
<td>Python</td>
</tr>

<tr style="text-align: center;">

<td>Tuesday</td>
<td colspan="2">Language lab/SS-II</td>
<td colspan="2">Mini project II</td>
<td >Python prog</td>
<td >AIT</td>
</tr>

<tr style="text-align: center;">

<td>Wednesday</td>
<td>OT</td>
<td>ADBMS</td>
<td colspan="2">AIT lab</td>
<td >AIT</td>
<td>SPM</td>
</tr>
<tr style="text-align: center;">
<td >Thursday</td>
<td >ADBMS</td>
<td >Tutorial/Theory/practical</td>
<td colspan="2">python lab</td>
<td >SPM</td>
<td >OT</td>
</tr>

<tr style="text-align: center;">

<td>Friday</td>
<td>OC4</td>
<td>Python prog</td>
<td colspan="2">AIT lab</td>
<td >SPM</td>
<td>OC3</td>
</tr>

<tr style="text-align:center;">
<td rowspan="2">Saturday</td>
<td colspan="2" rowspan="2">Mini Project II</td>
<td rowspan="2">AIT lab</td>
<td rowspan="2">Python lab</td>
<td colspan="2" rowspan="2">Tutorial/Theory/practical</td>
</tr>
</table></body></html>

2: Registration form:
<!DOCTYPE html>
<html>
<title>Registration Form</title><br>
<imgsrc="https://i.pinimg.com/originals/73/b1/d2/73b1d221c14a2a6e8275da6b1299aaaf.jpg"
style="width:75px;height:100px;" align="right"></img>
<h1 align="left"><head>Student Registration Form</head></h1>
<br><br>
<marquee>Welcome Students..!!!</marquee>
<hr>
<body bgcolor="DCF2FY">
<form>
<label>Enter your name</label><br>
<input type="text" required> <br><br>
<label>address</label> <br>
<input type="text" required> <br><br>
<label>Enter Mobile Number</label><br>
<input type="integer" required><br><br>
<label>Select class</label>
 <select>
<option>Select</option>
<option value="FYMCA">FYMCA</option>
<option value="SYMCA">SYMCA</option>
</select><br><br>
<label> Enter roll no</label><br>
<input type="integer" required><br><br>
<label>Gender</label><br>
<input type="radio" value="Female" name="Gender">
<label>Female</label>
<input type="radio" value="Male" name="Gender">
<label>Male</label>
<input type="radio" value="Other" name="Gender">
<label>Other</label><br><br>
<label>Will you like to participate in following activities?</label><br>
<input type="checkbox">
<label> NCC </label><br>
<input type="checkbox">
<label> NSS </label><br>
<input type="checkbox">
<label> Cultural </label><br>
<input type="checkbox">
<label> Sports</label> </label><br><br>
<label>Tell us more about yourself</label><br>
<textarea name="aboutyou"></textarea><br><br>
<label>Upload your photo</label><br>
<input type="file" id="myFile" name="filename"><br><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>

3:HTML5 Semantics:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Semantics</title>
</head>
<body>
<header>
<h1>All HTML5 Semantics</h1>
</header><h4>NAVBAR</h4>
<nav>
<a href="page1.html">Home</a><br>
<a href="page2.html">Contact</a><br>
<a href="page3.html">Profile</a><br>
<a href="page4.html">About Us</a><br> </nav><br>
<h3>div</h3>
<div>
 HTML5 elements are .....
<section>
<ol type="i">
<li>header</li>
<li>footer</li>
<li>navbar</li>
<li>details</li>
<li>aside</li>
</ol>
</section>
</div>
<h3>Section</h3>
<section>HTML5 elements are .....
<section>
<ul type="circle">
<li>header</li>
<li>footer</li>
<li>navbar</li>
<li>details</li>
<li>aside</li>
</ul>
</section>
<h3>Aside</h3>
<aside>
All HTML5 Semantics
content is here
All HTML5 Semantics
content is here
</aside><br>
<h3>details</h3>
<details>
All HTML5 Semantics
content is here
All HTML5 Semantics
content is here
All HTML5 Semantics
content is here
All HTML5 Semantics
content is here...........
..........................
</details><br>
<h3>summary</h3>
<summary>
All HTML5 Semantics
content is here
All HTML5 Semantics
content is here
All HTML5 Semantics
content is here
All HTML5 Semantics
 content is here...........
..........................
</summary><br>
<h3>footer</h3>
<footer>
<h2>&reg; All rights reserved &copy; My Website</h2>
</footer>
<h3>figure</h3>
<figure>
<img src="fig1.PNG" style="width:30% height=30%">
<figcaption>This is a image caption</figcaption>
</figure><br>
<h3>Audio</h3>
<audio controls >
<source src = "horse.org" type ="audio/ogg" />
<source src = "horse.mp3" type ="audio/mpeg" />
</audio><br>
<h3>video</h3>
<video width = "300" height = "200" controls >
<source src = "movie.mp4" type ="video/mp4" />
<source src = "movie.ogg" type = "video/ogg" />
Your browser does not support the <video> element.
</video><br>
</body>
</html>

4:Line Canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line canvas</title>
</head>
<body>
<canvas id="mycanvas" width="400" height="200" style="border: 2px solid rgb(162, 0,
255);">
Browser not support
</canvas>
<script>
var canvas=document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
5: Rectangel and lines using canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic canvas example</title>
</head>
<body>
<canvas id="mycanvas" width="400" height="200" style="border: 2px solid rgb(162, 0,
255);">
Browser not support
</canvas>
<script>
var canvas=document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="#34ebcc";
ctx.fillRect(20,20,110,65);

ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

ctx.moveTo(0,0);
ctx.lineTo(500,300);
ctx.stroke();
</script>
</body>
</html>

6: Image Mapping:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="rose.jpg" usemap="#map" border="3">
<map name="map">
<area shape="rect" coords="22,34,289,202" href="https://abpmaza.com"
target="_blank">
</map>
</body>
</html>
7:Draw Smile Using canvas:
<canvas id="smiley" width="800" height="600">
<script>
drawSmiley();
function drawSmiley() {
var canvas = document.getElementById("smiley");
var context = canvas.getContext("2d");

// Draw outer face circle

context.beginPath();
context.arc(300, 300, 110, 0, degreesToRadians(360), true);
context.fillStyle = "pink";
context.fill();
context.stroke();

// Draw left eye circle

context.beginPath();
context.arc(250, 270, 15, 0, degreesToRadians(360), true);
context.fillStyle = "skyblue";
context.fill();
context.stroke();

// Draw right eye circle

context.beginPath();
context.arc(350, 270, 15, 0, degreesToRadians(360), true);
context.fillStyle = "skyblue";
context.fill();
context.stroke();

// Draw straight line nose

context.beginPath();
context.lineWidth="3";
context.moveTo(300, 285);
context.lineTo(300, 320);
context.stroke();

// Draw smile arc

context.beginPath();
context.arc(300, 330, 60, degreesToRadians(20), degreesToRadians(160), false);
context.fillStyle = "black";
context.fill();
context.stroke();
}
function degreesToRadians(degrees) {
return (degrees * Math.PI) / 180; } </script>
8: Shapes Using SVG:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg>
<circle cx="50" cy="50" r="35" fill="red" stroke="black" stroke-width="5px">
</circle>
</svg>
<svg>
<ellipse cx="50" cy="50" rx="35" ry="25" fill="yellow" stroke="blue" stroke-
width="5px"> </ellipse>
</svg>
<svg>
<rect x="50" y="40" width="60" height="50" fill="magenta" stroke="red" stroke-
width="5px" fill-opacity="0.1" stroke-opacity="0.2"></rect>
</svg>
<svg>
<line x1="45" y1="35" x2="67" y2="82" stroke="black" stroke-width="4px"> </line>
</svg>
</body>
</html>

9: Venn Diagram Using SVG:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg width="500px" height="500px">
<circle cx="140" cy="150" r="100" fill="green" stroke="black" stroke-width="5px" fill-
opacity="0.7"></circle>
<circle cx="240" cy="250" r="100" fill="red" stroke="black" stroke-width="5px" fill-
opacity="0.7"></circle>
<circle cx="275" cy="115" r="100" fill="yellow" stroke="black" stroke-width="5px"
fill-opacity="0.7"></circle>
</svg>
</body>
</html>
10: Inline CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color: rgb(255, 0, 102); text-decoration: line-through; font-size: large; font-
family: 'Courier New', Courier, monospace;">Learning inline css</h1>
<h1 style="color: rgb(127, 255, 133); text-decoration: dashed; font-size: larger; font-
family:'Times New Roman', Times, serif ;">Learning inline css</h1>
<h1 style="color: rgb(137, 20, 173); text-decoration: wavy; font-size: medium; font-
family: Arial, Helvetica, sans-serif;">Learning inline css</h1>

</body>
</html>

11: Internal CSS:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{ font-size: 25px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: red;
border-width: 1px;
width: fit-content;
border-color: black;
border-style: dashed; }
p{ text-align: center;
text-decoration: dotted;
text-shadow: 1ch;
color: blue;
padding-left: 20%;
}
</style>
</head>
<body>
<h1> Internal Css</h1>
<p>This is a paragraph....</p>
</body></html>
12: External CSS:
1: External.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

2: styles.css:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

13: Linear Gradient:

<!DOCTYPE html>
<html>
<head>
<style>
.linear-gradient {
background: linear-gradient(to right, #2577c9 , #c77c99 );
}
.linear-gradient1{
background:linear-gradient(to left,rgb(109, 70, 199),rgb(183, 27, 115))
}
.linear-gradient2{
background:repeating-linear-gradient(rgb(231, 121, 18),rgb(205, 198, 198),rgb(20, 187,
17))
}
.linear-gradient3{
background:radial-gradient(circle ,rgb(25, 160, 147),rgb(71, 60, 60),rgb(16, 192, 145))
}
.linear-gradient4{
 background:repeating-radial-gradient(rgb(156, 203, 190),rgb(205, 198, 198),rgb(20,
160, 187))

}
</style>
</head>
<body>

<div class="linear-gradient" style="width: 100%; height: 100px;">

<marquee> <h1>linear gradient</h1></marquee>
<!-- Your content here -->
</div>
<br>
<br>
<div class="linear-gradient1" style="width: 100%; height: 100px;">
<marquee direction="right"> <h1>welcome in css</h1></marquee>
</div>
<br>
<br>
<div class="linear-gradient2" style="width: 100%; height: 100px;">
<marquee direction="left"> <h1>We are styling the web...!!</h1></marquee>
</div>
<br>
<br>
<div class="linear-gradient3" style="width: 100%; height: 100px;">
<marquee direction="right"> <h1>There are various fields which help us to design
webpage....</h1></marquee>
</div>
<br>
<br>
<div class="linear-gradient4" style="width: 100%; height: 100px;">
<marquee direction="left"> <h1>and we are about to done...</h1></marquee>
</div>
</body>
</html>

14: Radial Gradient:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-image: radial-gradient(red, yellow, green);
}

#grad2 {
height: 150px;
width: 200px;
background-image: radial-gradient(circle, red, yellow, green);
}

#grad3 {
height: 150px;
width: 200px;
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>Radial Gradient - Shapes</h1>

<h2>Ellipse:</h2>
<div id="grad1"></div>

<h2><strong>Circle:</strong></h2>
<div id="grad2"></div>

<h2><strong>repeating-radial-gradient:</strong></h2>
<div id="grad3"></div>

</body>
</html>