RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
Three example states of the chart
My google avatar.2 min read

Circular gradient stroke chart

css

CSS masks and gradients are so rad, there's so much you can do with them.

This trick uses two gradients;

  1. a radial gradient mask, hiding the inner part of the conic
  2. a conic gradient, visible up to the angle, then transparent

Let's see some code #

Start with making a square, so it's easy to make a circle.

#pie {
  aspect-ratio: 1;
  inline-size: 50vmin;
  border-radius: 50%;
}

Now add the mask and conic gradient. Comments are inline as to why or what each part is doing.

#pie {
  --ng: 120deg; /* can be set via slider */
  --thickness: 3px;

  --_inner: calc(70% - var(--thickness));
  --_outer: calc(var(--_inner) + 1px); /* fixes aliasing */
  
  /* hides the inner part of the conic gradient/element */
  mask: radial-gradient(circle, #0000 var(--_inner), #000 var(--_outer));
  
  /* gradient up to --ng, transparent after --ng */
  background-image: conic-gradient(deeppink, cyan var(--ng), #0000 0);
}

The conic gives us the smooth gradient and the angle, while the mask and overall element shape, isolate a thin line of visibility into the conic gradient, completing the illusion.

Try it #

The Codepen hooks up a slider to the angle and some text, to help debug and control the effect.

19 comments #

435likes
56reposts
  • 날고로케몰라
  • あだち@webデザイナー
  • Nishanth prabhu
  • Clément Ducerf
  • Pradeep Karn Rajput
  • Chinese SpyBalloon
  • JSConf.Asia
  • Leoncio Gutierrez
  • Ismael MoranCarrasco
  • Ст. 122 УК РБ
  • SaltyAom
  • Christopher Moore
  • ❖ Kei ラングレー
  • 🇯 🇺 🇦 🇳 🇵 🇦 🇲🇽
  • uptonking
  • Osᴄᴀʀ Bᴜsᴛᴏs ツ 🏠
  • sometimes
  • DM Kim
  • johnnycheese99
  • Nicolas Giethlen
  • TinyEngines
  • 쟝장
  • Hussain Asim
  • Gregorio Carrillo
  • Bramus
  • Barka👽
  • Fran Zucolota
  • Евгений Резниченко
  • Abdul Fatir
  • John Miller
  • 姓名不能为空
  • z나가던
  • Mr.Anderson
  • Hunt
  • Ashvind Maudhoo
  • Vadym Stebakov 🇺🇦
  • J@vys
  • Francisco Javier Ferreyra López
  • hemma i stockholm (AVICII) ◢ ◤
  • Omar Imran Mousa
  • Mr.Pingouin
  • Alexander Schuster
  • Mohamed Sahel
  • 学んだことを記録していく犬
  • Robert Vera
  • Wonder Dai
  • 𝙏𝙞𝙢 @ easeout.co ⚡
  • Nanderson Castro - Code Experts
  • Daniel
  • Josef Ježek
  • Front end Developer - codesnippets.dev.br
  • Fronteers
  • Tom Jenkins
  • Cassie.
  • Hiero Nabit
  • Sai Charan

Join the conversation on

CSS mask, conic-gradient와 사용자 정의 속성을 이용한 방법
황규연 / Kyooyeon Hwang황규연 / Kyooyeon Hwang
Wow 🤩 awesome!
Nguyen Tien ThanhNguyen Tien Thanh
Now a feature request from a designer: Rounded ends 😺
@yuanchuan@vis.social@yuanchuan@vis.social
Designer : That's great, but could u make the cap rounded?
iyiniyin
Here you go 😉 codepen.io/t_afif/pen/KKB… Firefox only because of the Trig functions and Mask-composite With interop 2023, it will be available in all browsers by the end of the year Still not perfect because the anti-aliasing of gradients is (and will remain) always a nightmare
T. Afif @ CSS ChallengesT. Afif @ CSS Challenges
Amazing, ty
Davide De MaestriDavide De Maestri
CSS Gradient 💚💛💙
Conferência CSS BrasilConferência CSS Brasil
I’d be so mad if I managed to turn this into a preloader but a designer wanted round line caps. This is too good.
Jon KantnerJon Kantner
I’d be so mad if I managed to turn this into a preloader but a designer wanted round line caps. This is too good.
Jon KantnerJon Kantner
You can also have a track color codepen.io/equinusocio/pe…
Mattia AstorinoMattia Astorino
broken on safari.
Mattia AstorinoMattia Astorino
You can also have rounded cap, compatible with all browsers codepen.io/equinusocio/pe…
Mattia AstorinoMattia Astorino
You can also have rounded cap, compatible with all browsers codepen.io/equinusocio/pe…
Mattia AstorinoMattia Astorino
I said "Firefox only" ...
T. Afif @ CSS ChallengesT. Afif @ CSS Challenges
Yes I thought ff only doesn't work cause is rare to see things working on ff only 😂. Fortunately there is a way to make it work on all browsers
Mattia AstorinoMattia Astorino
This is smth I've been doing for the past ~4 years. Here are a few of the demos (all those listed below also have a video of me coding them from scratch): codepen.io/thebabydino/pe… codepen.io/thebabydino/pe… codepen.io/thebabydino/pe… codepen.io/thebabydino/pe… codepen.io/thebabydino/pe…
Ana Tudor 🐯🖤🌻Ana Tudor 🐯🖤🌻
your website is fresh af, if you catch my drift 🤘🏻
Chi NguyenChi Nguyen