Как сверстать такой семи-круг?
1,00
р.
Подскажите пожалуйста каким образом можно сделать такой семи круг с пунктами?
Ответ
Вот Вам svg+css и верстка по формуле, для автоматического определения положения маленьких кругов на большом.
// cx, cy - центр большого круга // r - радиус большого круга // alpha - угол в полярной системе координат let x = cx + cos(alpha - PI/2) * r let y = cy + sin(alpha - PI/2) * r
Можно отладчиком отсюда вытащить готовую svg и на странице не использовать никакие скрипты.
let r1 = 500, // радиус большого круга
r2 = 12, // радиус маленьких кругов
step = 0.08, // шаг между кругами в радианах
cx = 150, // координаты центра
cy = r1 + 40 // большого круга
let icons = ['🍣','🍟','🍩','🍔','🍕','🍦','🍜']
// функция, добавляющая круг, аргументы - x центра, y центра, радиус, классы стилей
let circle = (x,y,r,c) => ``
// функция, добавляющая текст, аргументы - x центра, y центра, текст
let text = (x,y,t) => `${t}`
let g = document.querySelector('svg g')
// большой круг
g.innerHTML += circle(cx, cy, r1, 'bg')
icons.forEach((e,i) => {
// тут я наверное слишком намудрил, сдвиг считается таким образом, чтобы расположить
// первый элемент по центру, а последующие поочередно справа и слева...
let shift = Math.floor(++i/2)* Math.sign(i%2-0.5)*step
// считаем центры малых кругов
let x = cx + Math.cos(shift - Math.PI/2)*r1
let y = cy + Math.sin(shift - Math.PI/2)*r1
// малый круг
g.innerHTML += circle(x, y, r2, 'small')
// emoji icon вставляется обычным текстом
g.innerHTML += text(x, y+2, e)
})
// а это небольшой бонус дающий эффект интерактивности
addEventListener('mousemove', e => {
// вращаем всю группу элементов вокруг центра большого круга
g.setAttribute('transform', `rotate(${0.5-e.x/innerWidth}, ${cx} ${cy})`)
}) body {
overflow: hidden
margin: 0
}
circle {
transition: 0.2s
cursor: pointer
}
circle:hover {
stroke-width: 15
stroke: rgba(0,0,0,0.1)
}
circle:hover + text{
font-size: 16px
}
text {
transition: 0.2s
font-size: 14px
text-anchor: middle
dominant-baseline: middle
pointer-events: none
}
.bg {
fill: none
stroke: white
pointer-events: none
}
.small {
fill: white
stroke: transparent
} preserveAspectRatio="xMidYMid meet">
PS: по мне такой вариант удобен тем, что внести в него изменения пару пустяков, поменял коэффициенты и все...
Ответ
Вот Вам svg+css и верстка по формуле, для автоматического определения положения маленьких кругов на большом.
// cx, cy - центр большого круга // r - радиус большого круга // alpha - угол в полярной системе координат let x = cx + cos(alpha - PI/2) * r let y = cy + sin(alpha - PI/2) * r
Можно отладчиком отсюда вытащить готовую svg и на странице не использовать никакие скрипты.
let r1 = 500, // радиус большого круга
r2 = 12, // радиус маленьких кругов
step = 0.08, // шаг между кругами в радианах
cx = 150, // координаты центра
cy = r1 + 40 // большого круга
let icons = ['🍣','🍟','🍩','🍔','🍕','🍦','🍜']
// функция, добавляющая круг, аргументы - x центра, y центра, радиус, классы стилей
let circle = (x,y,r,c) => ``
// функция, добавляющая текст, аргументы - x центра, y центра, текст
let text = (x,y,t) => `${t}`
let g = document.querySelector('svg g')
// большой круг
g.innerHTML += circle(cx, cy, r1, 'bg')
icons.forEach((e,i) => {
// тут я наверное слишком намудрил, сдвиг считается таким образом, чтобы расположить
// первый элемент по центру, а последующие поочередно справа и слева...
let shift = Math.floor(++i/2)* Math.sign(i%2-0.5)*step
// считаем центры малых кругов
let x = cx + Math.cos(shift - Math.PI/2)*r1
let y = cy + Math.sin(shift - Math.PI/2)*r1
// малый круг
g.innerHTML += circle(x, y, r2, 'small')
// emoji icon вставляется обычным текстом
g.innerHTML += text(x, y+2, e)
})
// а это небольшой бонус дающий эффект интерактивности
addEventListener('mousemove', e => {
// вращаем всю группу элементов вокруг центра большого круга
g.setAttribute('transform', `rotate(${0.5-e.x/innerWidth}, ${cx} ${cy})`)
}) body {
overflow: hidden
margin: 0
}
circle {
transition: 0.2s
cursor: pointer
}
circle:hover {
stroke-width: 15
stroke: rgba(0,0,0,0.1)
}
circle:hover + text{
font-size: 16px
}
text {
transition: 0.2s
font-size: 14px
text-anchor: middle
dominant-baseline: middle
pointer-events: none
}
.bg {
fill: none
stroke: white
pointer-events: none
}
.small {
fill: white
stroke: transparent
} preserveAspectRatio="xMidYMid meet">
PS: по мне такой вариант удобен тем, что внести в него изменения пару пустяков, поменял коэффициенты и все...
