Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

SVG Circle

Posted in SVG Tutorial
Updated on May 18, 2024
By Mari Selvan
👁️ 114 - Views
⏳ 4 mins
💬 1 Comment
SVG Circle

Photo Credit to CodeToFun

🙋 Introduction

In the realm of Scalable Vector Graphics (SVG), circles are fundamental shapes that add versatility and visual appeal to web graphics. Understanding how to create and manipulate circles in SVG is essential for web developers and designers alike.

In this guide, we'll explore the syntax, attributes, and examples of SVG circles to empower you to leverage their capabilities effectively.

💡 Syntax

Creating an SVG circle involves using the <circle> element, which encapsulates the circle's properties. Here's the basic syntax:

index.html
Copied
Copy To Clipboard
<svg>
  <circle cx="x-coordinate" cy="y-coordinate" r="radius" />
</svg>

🧰 Attributes

  • cx: Specifies the x-coordinate of the center of the circle.
  • cy: Specifies the y-coordinate of the center of the circle.
  • r: Specifies the radius of the circle.
  • Additional attributes like fill, stroke, and stroke-width can be utilized for styling purposes.

📄 Example

Let's create a simple SVG circle:

index.html
Copied
Copy To Clipboard
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="orange" stroke="black" stroke-width="2" />
</svg>

🧠 How it works?

In this example, we've defined an orange circle with a black border, centered at (100, 100) with a radius of 50 units.

🎉 Conclusion

SVG circles offer a versatile and aesthetically pleasing way to enhance graphical content on the web.

By mastering their syntax, attributes, and usage, you can leverage circles effectively in your projects to create captivating and interactive visuals.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy