0

I'm looking for some help creating this design See design

I'd need to create those 5 segments but in some situations, I will need only 4 segments instead of 5. I have tried many things but can't get a similar result. I'd need the possibility to add the glow effect when the user hovers one of the segments.

So far this is the best result I got using this CSS code:

.pie__segment[data-value='72'] {
-webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 111.8033988% 240.2113032%);
clip-path: polygon(51% 51%,100% 56%,100% 100%,109.803399% 239.211303%);}

.pie__segment:nth-of-type(1) {
background: #1e90ff;}

.pie__segment:nth-of-type(2) {
background: #639;}

.pie__segment:nth-of-type(3) {
background: #2eec71;}

.pie__segment:nth-of-type(4) {
background: #e74c3c;}

.pie__segment:nth-of-type(5) {
background: #ffa500;}

.pie__segment {
height: 100%;
position: absolute;
width: 100%;
transform: rotate(-90deg) rotate(calc(var(--start) * 1deg));}

.pie {
height: 400px;
position: relative;
-webkit-clip-path: circle(40% at 50% 50%);
        clip-path: circle(47% at 50% 50%);
width: 400px;
background-color: black;}

.center {
width: 40%;
height: 40%;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;}

.simon-container {
width: 400px;
height: 400px;
position: relative;
box-shadow: 0px 17px 10px 0px #161616;
background-color: black;
border-radius: 100%;}

And this is the HTML code

<div class="simon-container">
    <div class="pie" id="pie">
        <div id="blue" class="pie__segment" data-value="72" style="--start: 0"></div>
        <div id="violet" class="pie__segment" data-value="72" style="--start: 72"></div>
        <div id="green" class="pie__segment" data-value="72" style="--start: 144"></div>
        <div id="red" class="pie__segment" data-value="72" style="--start: 216"></div>
        <div id="yellow" class="pie__segment" data-value="72" style="--start: 288"></div>
    </div>
    <div class="center"></div>
</div>

This is the result I got so far see image

Any help is welcome. Thank you all!

Alexandre Nypels
  • 11
  • 3
  • To go down to 4 segments you need to reset the %s and the start values. Have you tried that? Also, please show what you have already tried on the hovering. – A Haworth Jan 05 '22 at 11:02

1 Answers1

-1

Maybe try to do this with an svg.

Basically, you would need to build the design with Illustrator or possibly another programme that lets you export to SVG.

Then open the SVG in a text or code editor and copy the paths into your html. You can add classes to the elements and edit them via css, including color changes on hover. Adding tags around paths, such as turning segments into links, should also not be a problem.

SmilyLily
  • 88
  • 8