Hexagon pattern CSS Doodle

Question

I've got stack with this hexagonal pattern using CSS Doodle. Problem is: I want to make hexagons 1.5-2 times smaller and more symmetric (now it is like a little bit stretched by X-axis), but responsive when the viewport is changed must be saved. I tried to combine many values, but it is the final version of what I was able to do. There is a codepen and code down here:

https://codepen.io/mepuduah/pen/dyyjRqP

:doodle {
  position: absolute;
  @grid: 1000 / 102vw;
  height: 103vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  top: -3%;
  left: -2%;
}

  @shape: hexagon;
  background: #000;
  @size: 69% 42%;
  -webkit-transition: 2s;
  transform: rotate(45deg) scaleY(2) scaleX(2);
  margin: 45% 55%;
  :hover { 
    background: #fff;
    transition: 0.5s easy-in;
  }

why the rotation? and can you share the final result? – Temani Afif Nov 12 '19 at 08:05 — Temani Afif, Nov 12 '19 at 08:05

yuanchuan · Answer 1 · 2019-11-14T02:57:54.130

It's hard to keep the ratio with scaleX/Y and width/height together. But there's another way to make the gap small between the hexagons by using translate:

--x: calc((@col() - 1) * -8%); 
--y: calc((@row() - 1) * -20%);
--xx: 0;

@row(even) { 
  --xx: 47%; 
}

transform: 
  translate(var(--x), var(--y)) 
  translateX(var(--xx));

If you want to do rotation you can change the :container element:

:container {
  transform: scale(1.5) rotate(-15deg); 
}

Also note that 32x32 is the maximum dimension css-doodle can make. See it on CodePen:

https://codepen.io/yuanchuan/pen/qBBMMGa

score -1 · Answer 2 · answered Nov 12 '19 at 09:20

-1

Final result I want like this https://codepen.io/nosovk/pen/yLLEWLY

answered Nov 12 '19 at 09:20

ЖМЕНЯ

36
3

1

With the empty code block you workaround this requirement: "Links to codepen.io must be accompanied by code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon." Please fix it. – Christopher Stephan Nov 12 '19 at 09:42

Hexagon pattern CSS Doodle

2 Answers2