Public
- Public
- Network
- Groups
- Popular
- People

Conversation

Notices

Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Monday, 07-Oct-2024 17:37:15 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 2 months ago from mastodon.social permalink
Attachments
1. 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 } } ```
2. Untitled attachment

Feeds