DEV Community: Andrei Gheorghiu

How to create perfect CSS circle sectors

Andrei Gheorghiu — Sat, 11 Jan 2025 05:16:02 +0000

Building a jackpot roulette

I've recently had to tackle building a jackpot roulette using CSS. Because each sector had to be interactive (e.g: change border color and background on :hover), I had to dig deeper than usual in my long-forgotten trigonometry bag of tricks. Let me take you through the process step by step.

The challenge: responsive highlightable sectors

The roulette needed to:

Highlight the sectors as the needle pointed at them.
Be fully responsive.
Allow a variable number of sectors—a critical feature that ruled out using static images or SVGs.

This meant one thing: we’d need to draw the sectors dynamically and calculate their shapes and positions geometrically. Intrigued? Let’s dive in.

Rotating spans around the center

To start, I used <span> elements to represent the sectors, rotating each around the center of the circle. Each sector would be clipped along its defining radiuses to avoid overlap. You can take a peek at my initial setup here.

For the rotation, I iterated through the sectors, incrementally rotating them by:

transform: rotate(calc(360deg / number_of_sectors * index));

At this stage, everything was quite simple. I had a circle, some rotated spans of text and rays in between them. But in order to highlight a sector I needed to draw its precise shape.

Drawing the sector

The first thing I needed to calculate was the sector height based on the angle between its boundaries and the radius. The formula for the distance between two points on a circle, given the radius and angle, is:

2 * radius * Math.sin(θ / 2)

Where θ is the angle in radians. For our evenly spaced sectors, θ becomes:

2 * Math.PI / number_of_sectors

Plugging that in:

2 * radius * Math.sin(Math.PI / number_of_sectors)

This gave me the precise height of each sector (or, should I say, its dimension on the axis perpendicular to the text orientation).

Clipping: aesthetic meets precision

Initially, I tried clipping each sector from its top-right corner to the left-center and then to its bottom-right corner:

clip-path: polygon(100% 0, 0 50%, 100% 100%);

This worked… sort of. With a lot of sectors, it was passable. But with fewer sectors —say three— there it was, glaringly wrong:

The fix? Calculating the exact intersection between the sector and the circle, and clipping from that point to the center. After some research, I found the formulas for the segments formed on a horizontal ray by the line connecting the two points on the circle:

Segment close to the center:

const m = radius * (1 - Math.cos(θ / 2))

Segment farther from the center:

const n = radius * Math.cos(θ / 2)

Just like above, θ is in radians:

2 * Math.PI / number_of_sectors

The ratio between the two segments gave me the exact clipping point:

const clipPosition = 100 * (m + n) / m

Plugging in to our example:

const clipPosition = Math.cos(Math.PI / number_of_sectors) * 100

...which led to the final clip-path:

  clip-path: polygon(
    100% 0,
    ${clipPosition}% 0,
    0 50%,
    ${clipPosition}% 100%,
    100% 100%
  );

Now the sectors aligned perfectly:

Bringing it to life

I implemented the spinning logic using Vue. Clicking the center produces a random spin, while clicking on a sector spins the roulette a few times and then lands on that sector. You can check out the result here.
Code available here.

Closing thoughts

Hope you enjoyed this exploration. What’s the next CSS challenge you’re tackling? Let me know — I’m always eager to swap tricks and ideas!

React. Responsiveness made easy

Andrei Gheorghiu — Tue, 07 Mar 2023 07:53:19 +0000

The problem

Sometimes you want the current responsiveness interval in JavaScript.

Most attempts (and answers on StackOverflow) are placing an event listener on window.resize and then use some custom logic (a switch statement) to output the current interval.

Works, but not ideal.

Biggest problem is it runs on window.resize, which fires tens of times per second while resizing, creating tiny freezes in page display, a clear sign the browser is struggling

The solution

A cleaner (and more performant) alternative is to use window.matchMedia(queryString).

It returns an instance of MediaQueryList.

Binding a callback on this instance's change event ensures the callback will only be called when the media query starts/stops matching.

const [isSm, setIsSm] = useState(false)
useEffect(() => {
  const queryList = window.matchMedia(
    '(min-width: 640px) and (max-width: 767.9px)'
  )
  queryList.addEventListener('change', ({ matches }) =>
    setIsSm(matches)
  )
}, [])

The other cool thing about it is you don't need to clean up the bound event. If you delete the MediaQueryList itself, the listener is garbage collected, so no listeners are left behind on <body> or window object after the component unmounted.

Wrap up

Having seen this question answered less than ideal a few times, I decided to write a tiny plugin (react-responsiveness) which takes an optional config object (interval: min dictionary - defaults to Bootstrap 5's breakpoints) and returns a context provider and a hook.

I added presets for commonly used frameworks: Bootstrap_3, Bootstrap_4, Bootstrap_5, Bulma, Chakra, Foundation, Ionic, Material_Design, Materialize, Material_UI, Quasar, Semantic_UI, Skeleton, Tailwind_CSS, Vuetify, Windi_CSS.

Installation

yarn add react-responsiveness

Add the provider

import {
  ResponsivenessProvider,
  Presets,
} from "react-responsiveness";

function App() {
  // ...
}

const WithResponsiveness = () => (
  <ResponsivenessProvider breakpoints={Presets.Tailwind_CSS}>
    <App />
  </ResponsivenessProvider>
);
export default WithResponsiveness;

Use in components

The hook exposes isMin, isMax and isOnly helper methods, the currentInterval and a more verbose matches object, which can be all be used to show/hide things responsively:

import { useResponsiveness } from "react-responsiveness"

const { isMin, isMax, isOnly, currentInterval } =
  useResponsiveness()

return (
  <>
    <div>Current interval {currentInterval}</div>
    {isMin("md") && (
      // @media (min-width: 768px)
      <div>content...</div>
    )}
    {isMax("md") && (
      // @media (max-width: 991.9px)
      <div>content...</div>
    )}
    {isOnly("md") && (
      // @media (min-width: 768px) and (max-width: 991.9px)
      <div>content...</div>
    )}
  </>
)

Note: the interval names vary based on the preset or config you used.

Use with bespoke breakpoints

<ResponsivenessProvider
  breakpoints={{
    small: 0,
    medium: 777,
    large: 1234,
  }}
>
  // ...
</ResponsivenessProvider>

{isOnly('medium') && (
  // @media (min-width: 777px) and (max-width: 1233.9px)
  <div>content...</div>
)}

Demo

https://codesandbox.io/p/github/codesandbox/codesandbox-template-vite-react/csb-ss87sf/react-responsiveness-v1?file=%2Fsrc%2FApp.tsx

If you find it useful, let me know.

Cheers!

Vue. Responsiveness made easy

Andrei Gheorghiu — Mon, 06 Mar 2023 01:25:03 +0000

The problem

Sometimes you just want the current responsiveness interval in JavaScript.

Most attempts (and answers on StackOverflow) are placing an event listener on window.resize and use some custom logic (a switch statement) to output the current interval.

Works, but not ideal.

Biggest problem is it runs on window.resize, which fires tens of times per second while resizing, creating tiny freezes in page display, a clear sign the browser is struggling.

The solution

A cleaner (and more performant) alternative is to use window.matchMedia(queryString).

It returns an instance of MediaQueryList.

Binding a callback on this instance's change event ensures the callback will only be called when the media query starts/stops matching.

const isSm = ref(false)
const queryList = window.matchMedia(
  '(min-width: 640px) and (max-width: 767.9px)'
)
queryList.addEventListener(
  'change',
  ({ matches }) => (isSm.value = matches)
)

The listener only runs when the interval changes, not on every window.resize. Huge performance gain.

The other cool thing about it is it doesn't need cleanup. Removing the MediaQueryList instance garbage collects its listeners, so nothing remains bound on <body> or window object after your component unmounts.

Wrap up

I decided to wrap the above as a tiny plugin (vue-responsiveness), taking an optional config object (interval: min dictionary - defaults to Bootstrap_5's breakpoints) and returns a reactive object containing current interval and matches.

Install

import {
  VueResponsiveness,
  Presets
} from 'vue-responsiveness'

createApp(App)
  .use(VueResponsiveness, Presets.Tailwind_CSS)
  .mount('#app')

Without a preset, it defaults to Bootstrap_5

The above exposes a $matches reactive object, which can be used anywhere to show/hide things responsively:

v-if="$matches[key][type]", where key is one of the intervals (xs, sm, md, lg, xl and 2xl in the case of Tailwind_CSS) and type is min, max or only, all boolean.

Use in template

<template v-if="$matches.sm.min">
  <!-- or: v-if="$matches.isMin('sm')" -->
  <!-- @media (min-width: 640px) -->
  ...content
</template>

<SomeComponent v-if="$matches.sm.max">
  <!-- or: v-if="$matches.isMax('sm')" -->
  <!-- @media (max-width: 767.9px) -->
  ...content
</SomeComponent>

<div v-if="$matches.sm.only">
  <!-- or: v-if="$matches.isOnly('sm')" -->
  <!-- @media (min-width: 640px) and (max-width: 767.9px) -->
  ...content
</div>

@matches.current returns the current interval's key.

Use in `setup()`

import { useMatches } from 'vue-responsiveness'

const matches = useMatches()

const currentInterval = computed(() => matches.interval)
const trueOnSmOnly = computed(() => matches.isOnly('sm'))
const trueOnMdAndAbove = computed(() => matches.isMin('md'))

Demo

https://codesandbox.io/s/kind-grass-93d5q4

If you find it useful, let me know.

Cheers!

DEV Community: Andrei Gheorghiu

How to create perfect CSS circle sectors

Building a jackpot roulette

The challenge: responsive highlightable sectors

Rotating spans around the center

Drawing the sector

Clipping: aesthetic meets precision

Bringing it to life

Closing thoughts

React. Responsiveness made easy

The problem

The solution

Wrap up

Installation

Add the provider

Use in components

Use with bespoke breakpoints

Demo

Vue. Responsiveness made easy

The problem

The solution

Wrap up

Install

Use in template

Use in setup()

Demo

Use in `setup()`