First of all, thank you to this community for giving life to a wonderful place to share & learn about HTML & CSS.
I would like to ask about my HTML /CSS /SVG Code because I can't make it to do what I need; Two concentric circles. The one on the outside is colored and the one on the inside is just white so we achieve a donut-like image.
Code: Select all
<head>
<style>
:root{
--fontSize: 30px;
}
.circleBase,
.circleBase {
border-radius: 50%;
}
.circle1 {
width: 100%;
height: 100%;
background: transparent linear-gradient(135deg, #FFF200 0%, #8FE4DE 50%,#8FE4DE 0%) 0% 0% no-repeat padding-box;
}
</style>
</head>
<body>
<div class='circleBase circle1'>
<svg viewBox='0 0 500 500'>
<circle style='fill: white;' cx='250' cy='260' r='230' />
</svg>
</div>
</body>
Should I change my approach? Thanks!