![RoundedSector](https://private-user-images.githubusercontent.com/4020798/261296841-83c8886c-ea6c-4db0-8497-ac7a36305b65.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5NjEyMDcsIm5iZiI6MTcxODk2MDkwNywicGF0aCI6Ii80MDIwNzk4LzI2MTI5Njg0MS04M2M4ODg2Yy1lYTZjLTRkYjAtODQ5Ny1hYzdhMzYzMDViNjUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjFUMDkwODI3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzQyYTM4ZTI1ZDc1YjIxNjc2ODBhNmM3YjEzYzQ3MTQ1YWMzZjhiMTUyZGJmYWIxMTg5MjkyYWRlYTA2MTMwYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.vnsjqf_nGysnwLzuhwBNg5FW34j-7vEsvMTBqOVZHkk)
It gives you donut sectors with rounded corners...
To use the SVG Donut Sector library, simply import the package into your project:
npm install svg-rounded-donut
Use the DonutSector
component to create a SVG donut sector directly in your React code.
import { DonutSector } from "svg-rounded-donut";
const Donut = () => {
const size = 640;
const outerRadius = size / 2;
return (
<svg
width={size}
height={size}
viewBox={`0 0 ${size} ${size}`}
version="1.1"
>
<g fill="grey" transform={`translate(${outerRadius} ${outerRadius})`}>
<DonutSector
angle={120}
size={size}
thickness={40}
cornerRadius={4}
color="red"
/>
</g>
</svg>
);
};
You can also use the generateDonutSector
function to create a string representation of the SVG shape that you can use directly in your SVG code.
import { generateDonutSector } from "svg-donut-sector";
const svgString = generateDonutSector({
angle: 120,
size: 200,
thickness: 50,
cornerRadius: 10,
color: "#3498db",
});
Both the DonutSector component and the generateDonutSector function accept the same props:
angle
(number): Angle of the sector in degrees (between 0 and 360).size
(number): Diameter of the outer circle of the donut.thickness
(number): Thickness of the donut (the difference between the outer and inner radii).cornerRadius
(number | optional): Radius of the rounded corners. Default is 0 (no rounded corners).color
(string): Color of the donut sector.
The SVG Donut Sector library is released under the MIT license.