6

Thankfully I've found a hexagon on SO but now I've a problem. The hexagon can be filled with any color - currently orange but I need to fill it with a color and a shadow:

<svg viewBox="0 0 180 100" style="width:180px;height:130px">
  <defs>
    <clipPath id="hexagon_clip">
      <path id="hexagon" d="M38,2 
           L82,2 
           A12,12 0 0,1 94,10 
           L112,44 
           A12,12 0 0,1 112,56
           L94,90       
           A12,12 0 0,1 82,98
           L38,98
           A12,12 0 0,1 26,90
           L8,56
           A12,12 0 0,1 8,44
           L26,10
           A12,12 0 0,1 38,2" />
    </clipPath>
  </defs>
  <use xlink:href="#hexagon" x="0" y="0" stroke="orange" stroke-width="12" fill="transparent" />
</svg>

This is my current example I want to re-build:

enter image description here

So my goal is it to pass a color hex code at the end. Is this possible or not?

With colored shadow I mean the darker color at the right inside of each hexagon. Sorry for being to unclear!

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Mr. Jo
  • 4,946
  • 6
  • 41
  • 100
  • 1
    Just create a generic hexagon SVG with the shadow, and use CSS to change the colors. Really simple. – Sean Stopnik Jan 14 '21 at 20:35
  • @SeanStopnik for someone how did this a lot of times haha :D it's my first try with this. – Mr. Jo Jan 14 '21 at 20:38
  • 1
    My approach - https://codepen.io/seanstopnik/pen/6d30d9a0dc54456f9be26d41e9747785 – Sean Stopnik Jan 14 '21 at 21:48
  • @SeanStopnik I really like this one too! Hard decision for me. If I could I would accept both answers. Is there a way too showing a box-shadow around the hexagon? `box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);`. Maybe this will help others because in my case I needed this too. – Mr. Jo Jan 14 '21 at 21:56
  • If a box shadow would be possible I think I would choose this one because it's more sharper somehow. What do you mean? – Mr. Jo Jan 14 '21 at 22:18
  • 1
    if you want sharper I can easily edit my answer. It's easier without rounded corner (simply remove the filter) – Temani Afif Jan 14 '21 at 22:33
  • @TemaniAfif If you have time no problem but I'm already very happy with it! It was just a thing I found out comparing both ideas of great work - really! – Mr. Jo Jan 14 '21 at 22:45
  • 1
    @Mr.Jo no need time, simply remove the filter property from the CSS – Temani Afif Jan 14 '21 at 23:02

3 Answers3

6

I will consider a different hexagon taken from this answer then as a background coloration I will use two layers, the main color and the gradient to simulate the shadow:

.hex {
  width: 200px;
  display: inline-block;
  color:orange;
  position:relative;
  filter: url('#goo'); /* to get the rounded edge */
}
.hex::before,
.hex::after { /* the polygon shape */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex;
}
.hex::before{
  content: "";
  background:
    linear-gradient(50deg,transparent 10px, rgba(0,0,0,0.2) 0 calc(100% - 45px),transparent calc(100% - 44px)) 
    100% 100%/ 70% 89% no-repeat, 
    currentColor; /* Use the color defined by "color" */
  padding-top: 86.6%; /* 100%*cos(30) */
}
.hex::after {
  content: attr(data-text);
  font-size:80px;
  position:absolute;
  top:18px;
  left:18px;
  right:18px;
  bottom:18px;
  background:#fff; /* this should match the main background */
  align-items:center;
  justify-content:center;
}
<div class="hex" data-text="01"></div>
<div class="hex" data-text="02" style="color:pink;filter:none"></div>
<div class="hex" data-text="03" style="color:lightblue"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • I really like this approach! How can I remove the dark line at the inside top which makes this 3D look? – Mr. Jo Jan 14 '21 at 20:43
  • 1
    @Mr.Jo which one? – Temani Afif Jan 14 '21 at 20:45
  • Maybe it's my browsers fault but when I zoom in, I can see a little dark line at the inside top of each hexagon. Can you also see it? – Mr. Jo Jan 14 '21 at 20:45
  • Done! I've posted an update inside my answer that shows the problem. – Mr. Jo Jan 14 '21 at 20:49
  • 1
    @Mr.Jo no don't put it in your question please .. I see the issue. decrease the 90% in my code and use 89% or lower until you get what you want – Temani Afif Jan 14 '21 at 20:50
  • Oh sorry. Where should I sent it next time? Just to be sure I don't do this mistake again! – Mr. Jo Jan 14 '21 at 20:51
  • 1
    @Mr.Jo simply add a comment here ;) check the update, it should be gone – Temani Afif Jan 14 '21 at 20:51
  • Alright. Thanks a lot Temani for your help! This will come out great on my page :) – Mr. Jo Jan 14 '21 at 20:52
  • One last question I came up with - why is it not working when I add my box shadow to the `#hex'` CSS: `box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);`? – Mr. Jo Jan 14 '21 at 20:56
  • 1
    @Mr.Jo box-shadw won't work because of the filter effect. try to update the filter like this `filter: url('#goo') drop-shadow(5px 5px 3px rgba(0,0,0,0.5))` – Temani Afif Jan 14 '21 at 21:00
  • Ah I understand. Thanks a lot! – Mr. Jo Jan 14 '21 at 21:01
  • Somehow my IDE has a problem with this part of CSS: `rgba(0, 0, 0, 0.2) 0 calc(100% - 45px), transparent calc(100% - 44px))`. When I remove the `0` before the calc my IDE is happy but not the hex. The error is: `Mismatched parameters ([[ | to? ] ,]? [, ]+) `. Any idea? – Mr. Jo Jan 14 '21 at 21:44
  • @Mr.Jo you did copy/past the whole thing? you should have no issue since my code is valid (as you can run here), maybe you changed something? – Temani Afif Jan 14 '21 at 21:52
  • Jup I did and changed nothing instead of some class names but not the actual CSS. – Mr. Jo Jan 14 '21 at 21:54
  • 1
    @Mr.Jo you can ignore then, many IDE aren't up to date for some syntax. – Temani Afif Jan 14 '21 at 21:58
  • Is it possible to make the thing responsive so that the SVG resizes when I make the browser smaller? – Mr. Jo Jan 15 '21 at 07:14
  • 1
    @Mr.Jo the code is already responsive, change the width and everything will adjust accordingly (you can use percentage value any other unit) – Temani Afif Jan 15 '21 at 08:03
4

My approach - create a generic SVG and use CSS to change the colors:

Codepen: https://codepen.io/seanstopnik/pen/6d30d9a0dc54456f9be26d41e9747785

body {
  font-family: sans-serif; /* for demo only */
}

.hex {
  position: relative;
  width: 200px; /* for demo only - see Codepen */
}

.hex__heading {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 66.6666666667px; /* for demo only - see Codepen */
  font-weight: 700;
  transform: translate(-50%, -50%);
}

.hex__center {
  fill: #fff;
}

.hex--primary .hex__heading {
  color: #97db54;
}
.hex--primary .hex__stroke {
  fill: #97db54;
}
.hex--primary .hex__shadow {
  fill: #6cc245;
}

.hex--secondary .hex__heading {
  color: #5fc69e;
}
.hex--secondary .hex__stroke {
  fill: #5fc69e;
}
.hex--secondary .hex__shadow {
  fill: #4c9f67;
}

.hex--tertiary .hex__heading {
  color: #4da2bf;
}
.hex--tertiary .hex__stroke {
  fill: #4da2bf;
}
.hex--tertiary .hex__shadow {
  fill: #2b648a;
}
<div class="hex hex--primary">
  <span class="hex__heading">01</span>
  <svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
    <path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
    <path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
    <path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
  </svg>
</div>

<div class="hex hex--secondary">
  <span class="hex__heading">02</span>
  <svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
    <path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
    <path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
    <path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
  </svg>
</div>

<div class="hex hex--tertiary">
  <span class="hex__heading">03</span>
  <svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
    <path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
    <path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
    <path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
  </svg>
</div>
Sean Stopnik
  • 1,868
  • 11
  • 9
2

I'd recommend using linearGradient: https://jsfiddle.net/um4yhrxj/

I won't do all the work for you though, haha!

XLIME
  • 185
  • 6