How to use CSS and D3 to achieve the effects of endless hexagon space

This article introduces you to the article is about how to use CSS and D3 to achieve the effect of endless hexagon space, has a good reference value, hoping to help the needy friends.

Effect Preview

Code interpretation

To define the DOM, the container contains 1 5 <span> of these <p> :

<p class= "Container" >    <p class= "hexagons" >        <span></span>        <span></ span>        <span></span>        <span></span>        <span></span>    </p ></p>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background:radial-gradient (circle at center, gold, Black);}

Defines the dimensions of the outer container of the circle:

. container {    width:20em;    Height:20em;    font-size:20px;    border-radius:50%;}

Draw 1 rectangles in a hexagon container:

. hexagons {    width:inherit;    Height:inherit;    Display:flex;    Align-items:center;    Justify-content:center;}. Hexagons span {    position:absolute;    Width:calc (20em/1.732);    Height:inherit;    Background-color:currentcolor;}

Create 2 more rectangles of the same size with pseudo-elements, together forming a hexagon:

. hexagons span:before,.hexagons Span:after {    content: ';    Position:absolute;    Width:inherit;    Height:inherit;    Background-color:currentcolor;}. Hexagons Span:before {    transform:rotate (60deg);}. Hexagons Span:after {    transform:rotate ( -60deg);}

To interleave the color of the hexagon:

. hexagons Span:nth-child (odd) {    color:gold;}. Hexagons Span:nth-child (even) {    color: #222;}

Set the variable so that the hexagon shrinks, and the small hexagon overlaps the top of the large hexagon:

. hexagons span {    Transform:scale (Var (--scale));}. Hexagons Span:nth-child (1) {    --scale:1;}. Hexagons Span:nth-child (2) {    --scale:calc (1 * 0.9);}. Hexagons Span:nth-child (3) {    --scale:calc (1 * 0.9 * 0.9);}. Hexagons Span:nth-child (4) {    --scale:calc (1 * 0.9 * 0.9 * 0.9);}. Hexagons Span:nth-child (5) {    --scale:calc (1 * 0.9 * 0.9 * 0.9 * 0.9);}

Then set the variable so that the hexagon tilts the different angles in turn:

. hexagons span {    Transform:scale (Var (--scale)) Rotate (Calc (var (--n) * 6deg);}. Hexagons Span:nth-child (1) {    --n:1;}. Hexagons Span:nth-child (2) {    --n:2;}. Hexagons Span:nth-child (3) {    --n:3;}. Hexagons Span:nth-child (4) {    --n:4;}. Hexagons Span:nth-child (5) {    --n:5;}

To define an animation effect:

. hexagons {    animation:twist 0.5s linear Infinite;} @keyframes Twist {from    {        transform:rotate (0deg) scale (1);    }    to {        transform:rotate (Calc (6deg *-2)) scale (1.25);}    }

Hide content outside the container:

. container {    Overflow:hidden;}

Next, use D3 to create the hexagon in bulk.
Introducing the D3 Library:

<script src= "Https://d3js.org/d3.v5.min.js" ></script>

To create a hexagonal DOM element with D3:

Const COUNT = 5;d3.select ('. hexagons ').    selectall (' span ').    data (D3.range (COUNT)).    Enter ()    . Append (' span ');

Use D3 to assign values to the--n and--scale variables of the hexagon:

D3.select ('. hexagons ').    selectall (' span ').    data (D3.range (COUNT)).    Enter ()    . Append (' span ')    . Style ('--scale ', (d) = Math.pow (0.9, D))    . Style ('--n ', (d) = + D + 1);

Delete the hexagon DOM elements in the HTML file, and the variables declared in the CSS file.

Finally, change the number of hexagons to 100:

Const COUNT = 100;

Done!