Creating shapes

revision:

Content

hexagons making a grid of hexagons create a "rhombus" grid making a grid of octagons an interactive model pyramidal grids

hexagons

top
holiday
holiday holiday holiday
code: 
                <div id="one">
                    <div id="hexagon"></div>
                    <div id="hexagon1"></div>
                    <div id="hexagon2"></div>
                    <div id="hexagon3"><img src="../images/1.jpg" alt="holiday" width="100%" height="auto"/></div>
                    <img id="hexagon4" src="../images/2.jpg" alt="holiday"/>
                    <img id="hexagon5" src="../images/3.jpg" alt="holiday"/>
                    <img id="hexagon6" src="../images/4.jpg" alt="holiday"/>
                </div>
                <style>
                    #one{display: grid; grid-template-columns: 1fr 1fr 1fr; width: 45vw;}
                    #hexagon {width: 10vw;  aspect-ratio: .866; clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 
                        100% 75%, 100% 25%, 50% 0%); background: radial-gradient(#8A9B0F,#3B8686);}
                    #hexagon1 {width: 10vw; aspect-ratio: cos(30deg);  clip-path: polygon( -50% 50%, 50% 100%, 
                        150% 50%, 50% 0%  );background: radial-gradient(red,orange);}
                    #hexagon2 {width: 10vw; aspect-ratio: 1/cos(30deg);  clip-path: polygon(50% -50%, 
                        100% 50%, 50% 150%, 0% 50% );background: radial-gradient(burlywood,brown);}
                    #hexagon3 {width: 10vw; aspect-ratio: 1/cos(30deg);  clip-path: polygon(50% -50%, 
                        100% 50%, 50% 150%, 0% 50% );background: radial-gradient(burlywood,brown);}
                    #hexagon4 {--b: 2vw; height: 10vw; aspect-ratio: 1/cos(30deg); clip-path: 
                        polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%, var(--b) 50%, calc(25% + 
                        var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)), calc(75% - 
                        var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)), calc(100% - var(--b))
                         50%, calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)), 
                         calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)), var(--b) 50%); 
                         background-color: transparent;}
                    #hexagon5 {height: 10vw; aspect-ratio: 1/cos(30deg); clip-path: polygon(50% -50%,
                        100% 50%,50% 150%,0 50%);  background: #3B8686;}
                    #hexagon6 {height: 10vw; aspect-ratio: cos(30deg); clip-path: polygon(-50% 50%,
                        50% 100%,150% 50%,50% 0); background: #3B8686;}
                </style>

making a grid of hexagons

top
code: 
                <div class="main">
                    <div class="container">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
        
                    </div>
                </div>
                <style>
                    .main {display: flex;--s: 7vw;  /* size  */ --m: 0.2vw; --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);}
                    .container {font-size: 0; /* disable white space between inline block element */}
                    .container div{ width: var(--s); margin: var(--m);height: calc(var(--s)*1.1547);  
                        display: inline-block; font-size:initial; clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 
                        100% 75%, 100% 25%, 50% 0%); background: skyblue; margin-bottom: calc(var(--m) - var(--s)*0.2885);}
                    .container div:nth-child(odd) {background:orange;}
                    .container::before { content: ""; width: calc(var(--s)/2 + var(--m)); float: left; height: 120%; 
                    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000  0 var(--f));}
                </style>

create a "rhombus" grid

top
code: 
                <div class="main-1">
                    <div class="container-1">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
        
                    </div>
                </div>
                <style>
                    .main-1 {display: flex;--s: 7vw;  /* size  */ --m: 0.2vw; --f: calc(var(--s) + 4 * var(--m));}
                    .container-1 {font-size: 0; /* disable white space between inline block element */}
                    .container-1 div{ width: var(--s); margin: var(--m);height: var(--s);  display: inline-block; font-size:initial; 
                        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: burlywood; 
                        margin-bottom: calc(var(--m) - var(--s)*0.5);} 
                    .container-1 div:nth-child(odd) {background:brown;}
                    .container-1::before { content: ""; width: calc(var(--s)/2 + var(--m)); float: left; height: 120%; 
                    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000  0 var(--f));}
                </style>

making a grid of octagons

top
code: 
                <div class="main-2">
                    <div class="container-2">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
        
                    </div>
                </div>
                <style>
                    .main-2 {display: flex;--s: 7vw; --r: 1; --hc: 1.5vw; --vc: 1.5vw; --m: 2vw; --m-h: calc(var(--m) + var(--s) - 2*var(--hc))/2;
                        --f: calc(2*var(--s) + 4*var(--m) - 2*var(--vc) - 0.2vw);}
                    .container-2 {font-size: 0; /* disable white space between inline block element */}
                    .container-2 div{ width: var(--s); margin: var(--m) var(--m-h); height: calc(var(--s)*var(--r)); display: inline-block; 
                        font-size: initial; background: aqua; clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% 
                        calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)),0 var(--vc));  
                        margin-bottom: calc(var(--m) - var(--vc));}
                    .container-2 div:nth-child(odd) {background:crimson;}
                    .container-2::before {content: ""; width: calc(var(--s)/2 + var(--m-h)); float: left; height: 135%; 
                    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000  0 var(--f));}
                </style>

an interactive model

top
Size: [100px]
Ratio: [1]
Spacing: [4px]
Clip-path
hc: [0.25]
vc: [0.35]
code: 
            <div class="panel">
                <div>Size: [<span>100px</span>] <input type="range" min="20" max="200" step="10" value="100" name="s"></div>
                <div>Ratio: [<span>1</span>] <input type="range" min="0" max="2" step="0.05" value="1" name="r"></div>
                <div>Spacing: [<span>4px</span>]<input type="range" min="0" max="10" step="1" value="4" name="mv"></div>
                <div>Clip-path<br>
                    hc: [<span>0.25</span>]<input type="range" min="0" max=".5" step=".05" value=".25" name="h"><br>
                    vc: [<span>0.35</span>]<input type="range" min="0" max=".5" step=".05" value=".35" name="v">
                </div>
            </div>
            <div class="main-3">
                <div class="container-3">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
                <style>
                .main-3 {display:flex; --s: 100px; --r: 1; --h: 0.25; --v: 0.35; --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ; --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); --mv: 4px; --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2);
                     --f: calc(2*var(--s)*var(--r) + 4*var(--mv)  - 2*var(--vc) - 2px);margin-top: 2vw; margin-bottom:3vw;}
                .container-3 {font-size: 0; }
                .container-3 div {width: var(--s); margin: var(--mv) var(--mh); height: calc(var(--s)*var(--r)); display: inline-block; font-size:initial; clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0,100% var(--vc),
                    100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%,var(--hc) 100%,0 calc(100% - var(--vc)),0 var(--vc)); background: navy; margin-bottom: calc(var(--mv) - var(--vc)); }
                .container-3 div:nth-child(odd) {background:yellow;}
                .container-3::before {content: ""; width: calc(var(--s)/2 + var(--mh)); float: left;  height: 135%; shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 2px), #000  0 var(--f));}
                .panel {position: relative;width: 20vw;top: 2vw; left: 2vw;padding: 1vw;border: 0.1vw solid;border-radius: 1vw;background: skyblue; font-family: Helvetica, sans-serif;opacity: .5; }
                .panel:hover {opacity:1}
                .panel > div:not(:last-child) {border-bottom: 0.1vw solid;padding-bottom: 1vw;margin-bottom: 1vw;}
                *,*::before {transition:0.5s linear}
            </style>
            <script>
                let inputs = document.querySelectorAll('input[type=range]')
                let elem = document.querySelector('.main-3')
                inputs.forEach(input => {
                    input.addEventListener('change', function(e) {
                        var p = e.target.getAttribute('name');
                        if(p=="s" || p=="mv") {
                            elem.style.setProperty("--"+p, this.value+"px");
                            e.target.previousElementSibling.innerHTML = this.value+"px";
                        } else { 
                            elem.style.setProperty("--"+p, this.value);
                            e.target.previousElementSibling.innerHTML = this.value;
                        }
                    });
                });
            </script>

pyramidal grids

top
Size: [100px]
Ratio: [1]
Spacing: [4px]
Clip-path
hc: [0.25]
vc: [0.35]
code: 
            <div class="panel-4">
                <div>Size: [<span>100px</span>] <input type="range" min="20" max="200" step="10" value="100" name="s"></div>
                <div>Ratio: [<span>1</span>] <input type="range" min="0" max="2" step="0.05" value="1" name="r"></div>
                <div>Spacing: [<span>4px</span>]<input type="range" min="0" max="10" step="1" value="4" name="mv"></div>
                <div>Clip-path<br>
                    hc: [<span>0.25</span>]<input type="range" min="0" max=".5" step=".05" value=".25" name="h"><br>
                    vc: [<span>0.35</span>]<input type="range" min="0" max=".5" step=".05" value=".35" name="v">
                </div>
            </div>
            <div class="main-4">
                <div class="container-4">
                  <i></i>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
            </div>
            <style>
                .panel-4 {position: relative; width: 20vw; top: 2vw;left: 2vw;padding: 0.5vw;border: 0.1vw solid;border-radius: 1vw; background: aqua; font-family: Helvetica, sans-serif;opacity:.5}
                .panel-4:hover {opacity:1}
                .panel-4 > div:not(:last-child) {border-bottom: 0.1vw solid;padding-bottom: 0.5vw;margin-bottom: 0.2vw;}
                *,*::before {transition:0.5s linear}
                .main-4 {display:flex;--s: 7vw; --r: 1; --h: 0.25; --v: 0.35; --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ; --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); --mv: 0.2vw; --mh: calc(var(--mv) + (var(--s) 
                     - 2*var(--hc))/2); --f: calc(2*var(--s)*var(--r) + 4*var(--mv)  - 2*var(--vc) - 2px);--nr:5;}
                .container-4 {font-size: 0; max-width:calc(var(--nr)*(var(--s) + 2*var(--mh))); margin:0 auto;  text-align:center;}
                .container-4 div {width: var(--s); margin: var(--mv) var(--mh); height: calc(var(--s)*var(--r)); display: inline-block; font-size:initial; clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0,
                    100% var(--vc),100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%,var(--hc) 100%, 0 calc(100% - var(--vc)),0 var(--vc)); background: saddlebrown;  margin-bottom: calc(var(--mv) - var(--vc)); }
                .container-4 div:nth-child(odd) {background:indigo;}
                .container-4::before , .container-4 i{ content: ""; width: calc(50% - var(--mh) - var(--s)/2);  float: left;  height: calc(var(--f)*(var(--nr) - 1)/2); shape-outside: linear-gradient(to bottom right,#000 49%,#0000 0);}
                .container-4 i {float:right;shape-outside: linear-gradient(to bottom left,#000 49%,#0000 0);}
            </style>  
            <script>
                let inputs_4 = document.querySelectorAll('.panel-4 div input[type=range]')
                let elem_4 = document.querySelector('.main-4')
                inputs_4.forEach(input_4 => {
                    input_4.addEventListener('change', function(e) {
                        var p = e.target.getAttribute('name');
                        if(p=="s" || p=="mv") {
                            elem_4.style.setProperty("--"+p, this.value+"px");
                            e.target.previousElementSibling.innerHTML = this.value+"px";
                        } else { 
                            elem_4.style.setProperty("--"+p, this.value);
                            e.target.previousElementSibling.innerHTML = this.value;
                        }
                    });
                });
            </script>