Public
- Public
- Network
- Groups
- Featured
- Popular
- People

Demo recording. Shows a circle sector rotating around the circle while it grows and shrinks. CSS: ``` @property --start { syntax: '<angle>'; initial-value: 0deg; inherits: false } @property --angle { syntax: '<angle>'; initial-value: 30deg; inherits: false } .my-elem { /* the 4 basic declarations for circle sector / width: 20em; / 1 / aspect-ratio: 1; / 2 / border-radius: 50%; / 3 / background: / 4 / conic-gradient(from var(--start), lime var(--angle), #0006 0%); / animation! */ animation: start 2s linear infinite, angle 1s ease-in-out infinite alternate } @keyframes start { to { --start: 1turn } } @keyframes angle { to { --angle: 120deg } } ```

Download link

Demo recording. Shows a circle sector rotating around the circle while it grows and shrinks. CSS: ``` @property --start { syntax: '<angle>'; initial-value: 0deg; inherits: false } @property --angle { syntax: '<angle>'; initial-value: 30deg; inherits: false } .my-elem { /* the 4 basic declarations for circle sector */ width: 20em; /* 1 */ aspect-ratio: 1; /* 2 */ border-radius: 50%; /* 3 */ background: /* 4 */ conic-gradient(from var(--start), lime var(--angle), #0006 0%); /* animation! */ animation: start 2s linear infinite, angle 1s ease-in-out infinite alternate } @keyframes start { to { --start: 1turn } } @keyframes angle { to { --angle: 120deg } } ```

Notices where this attachment appears

Embed this notice
Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Monday, 07-Oct-2024 17:37:32 JST Ana Tudor 🐯

#tinyCSStip Simplest circle sector in 4 CSS declarations!
1⃣ set width to desired diameter
2⃣ square element with aspect-ratio
3⃣ turn square into disc
4⃣ conic-gradient() magic! 🪄
The start angle and sector angle can also be animated for fun results.
Because someone asked https://www.reddit.com/r/css/comments/1fvo5dl/comment/lq9mtjj/
#CSS #gradient #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

In conversation about 5 months ago from mastodon.social permalink