Horje
SVG Circle

SVG Circle facilitates the <circle> element which can be utilized to create a circle. Basically, the  <circle> element wrapped inside the <svg> element.

Syntax

<svg>
 <circle cx="10" 
               cy="10" 
               r="30" 
               stroke="black" 
               stroke-width="3" 
               fill="red" />
</svg>

Attributes

The below are the attributes that can be used with the <svg> element

  • cx: It defines the x-coordinate of the center of the circle.
  • cy: It defines the y-coordinate of the center of the circle.
  • r: It defines the radius of the circle.
  • fill: It specifies the color used to fill the circle (in this case, yellow).
  • stroke-width: It defines the width of the stroke (outline) of the circle.
  • stroke: It specifies the color of the stroke.
  • Default Behavior: If no fill parameter is used, the circle is filled with a default color (generally black).

Example 1: In this example, we will implement code to see the SVG circle with the the help of above attributes.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>SVG to HTML</title>
    <link rel="stylesheet" 
          href="style.css">
</head>
  
<body>
    <div style="display: flex;
                flex-direction: column;
                justify-content: center; 
                align-items: center;
                height:100vh;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <p style="font-size: 20px">
          SVG Circle
          </p>
  
        <svg width="200"
             height="200" 
             style="border: 2px solid black;">
            <circle cx="95" 
                    cy="95"
                    r="70" 
                    stroke="green" 
                    stroke-width="5" 
                    fill="yellowgreen" />
        </svg>
    </div>
    <script src="script.js"></script>
</body>
  
</html>

Output:

svg-circle1

Output

Example 2: In this example, we will show an SVG circle in HTML with the help of JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>SVG to HTML</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <div style="display: flex; 
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height:100vh;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <p style="font-size: 20px">
              SVG Circle
          </p>
  
        <svg width="200" 
             height="200" 
             style="border: 2px solid black;">
            <circle cx="95" 
                    cy="95" 
                    r="70" 
                    stroke="blue" 
                    stroke-width="5" />
        </svg>
    </div>
    <script src="script.js"></script>
</body>
  
</html>

Output:

svg-circle

 


 


Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML Canvas Circles HTML Canvas Circles
HTML Canvas Rectangles HTML Canvas Rectangles
SVG Rectangle SVG Rectangle
HTML Canvas Text HTML Canvas Text
SVG Ellipse SVG Ellipse

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje