revision:
<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">
<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>
<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 {display: grid; grid-template-columns: repeat(auto-fit,calc(var(--s) + 2*var(--mh))); justify-content:center; --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);}
.container {grid-column: 1/-1; font-size: 0;}
.container 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: red; margin-bottom: calc(var(--mv) - var(--vc)); }
.container div:nth-child(odd) { background:green;}
.container::before{content: ""; width: calc(var(--s)/2 + var(--mh)); float: left; height: 120%;
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-color: 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')
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>
<div class="panel-1">
<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-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>
<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>
.panel-1 {position: relative;width: 20vw;top: 2vw; left: 2vw;padding: 1vw;border: 0.1vw solid;border-radius: 1vw;background-color: skyblue; font-family: Helvetica, sans-serif;
opacity: .5; margin-bottom: 2vw;}
.panel-1:hover {opacity:1}
.panel-1 > div:not(:last-child) {border-bottom: 0.1vw solid;padding-bottom: 1vw;margin-bottom: 1vw;}
*,*::before {transition:0.5s linear;}
.main-1 {display: grid; grid-template-columns: repeat(auto-fit,calc(var(--s) + 2*var(--mh))); justify-content:center; --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); --nr: 7; --lw: calc(var(--nr)*(var(--s) + 2*var(--mh)));}
.container-1 {font-size: 0; max-width: var(--lw); grid-column: 1/-1; margin: 0 auto;}
.container-1 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: darkgrey; margin-bottom: calc(var(--mv) - var(--vc)); }
.container-1 div:nth-child(odd) { background:yellow;}
.container-1::before{ content: ""; width: clamp(0px, (var(--lw) - 100%)*1000,calc(var(--s)/2 + var(--mh))); float: right; height: 120%;
shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),#000 0 var(--f));}
.container-1 i::before , .container-1 i::after{ content: ""; width: clamp(0px, (100% - var(--lw) + 1px)*1000,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 50.5%,#0000 0);}
.container-1 i::after {float:right; shape-outside: linear-gradient(to bottom left,#000 49%,#0000 0);}
</style>
<script>
let inputs_1 = document.querySelectorAll('.panel-1 > div input[type=range]')
let elem_1 = document.querySelector('.main-1')
inputs_1.forEach(input_1 => {
input_1.addEventListener('change', function(e) {
var p = e.target.getAttribute('name');
if(p=="s" || p=="mv") {
elem_1.style.setProperty("--"+p, this.value+"px");
e.target.previousElementSibling.innerHTML = this.value+"px";
} else {
elem_1.style.setProperty("--"+p, this.value);
e.target.previousElementSibling.innerHTML = this.value;
}
});
});
</script>
<div class="panel-2">
<div>
Type of the pyramid<br>
<input type="radio" name="pyramid" value="0" checked> Normal
<input type="radio" name="pyramid" value="1"> Inverted
</div>
<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-2">
<div class="container-2">
<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>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
.main-2 {display: grid; grid-template-columns: repeat(auto-fit,calc(var(--s) + 2*var(--mh))); justify-content:center; --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); --nr:6; --lw:calc(var(--nr)*(var(--s) + 2*var(--mh)));}
.container-2 {font-size: 0; max-width:var(--lw); grid-column: 1/-1; margin:0 auto;}
.container-2 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: red; margin-bottom: calc(var(--mv) - var(--vc)); }
.container-2 div:nth-child(odd) {background:green;}
.container-2::before {content: ""; width: clamp(0px, (var(--lw) - 100%)*1000,calc(var(--s)/2 + var(--mh))); float: left; height: 120%;
shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),#000 0 var(--f)); }
.container-2 i::before , .container-2 i::after{ content: ""; width: clamp(0px, (100% - var(--lw) + 1px)*1000,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 50.5%,#0000 0);}
.container-2 i::after {float:right; shape-outside: linear-gradient(to bottom left,#000 49%,#0000 0); }
.inverted .container-2 i::before, .inverted .container-2 i::after{ margin-top: calc(var(--f)/2 + 2px);
shape-outside: linear-gradient(to top right,#000 49.5%,#0000 0);}
.inverted .container-2 i::after{ shape-outside: linear-gradient(to top left,#000 49%,#0000 0);}
.panel-2 {position: relative;top: 20px;left: 20px;padding: 10px; width: 20vw; border: 1px solid;border-radius: 10px;
background: darkgreen;font-family: sans-serif;opacity:.5; color: white;}
.panel-2:hover {opacity:1}
.panel-2 > div:not(:last-child) {border-bottom: 1px solid;padding-bottom: 10px;margin-bottom: 10px;}
*,*::before {transition:0.5s linear}
</style>
<script>
let inputs_2 = document.querySelectorAll('.panel-2 div input[type=range]')
let elem_2 = document.querySelector('.main-2')
let type = document.querySelectorAll('.panel-2 div input[type=radio]')
inputs_2.forEach(input_2 => {
input_2.addEventListener('change', function(e) {
var p = e.target.getAttribute('name');
if(p=="s" || p=="mv") {
elem_2.style.setProperty("--"+p, this.value+"px");
e.target.previousElementSibling.innerHTML = this.value+"px";
} else {
elem_2.style.setProperty("--"+p, this.value);
e.target.previousElementSibling.innerHTML = this.value;
}
});
});
type.forEach(t => {
t.addEventListener('change', function(e) {
elem_2.classList.toggle("inverted");
});
});
</script>
<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>
<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: grid; grid-template-columns: repeat(auto-fit, calc(var(--s) + 2 * var(--mh))); justify-content: center; --s: 80px; --r: 1.15; --h: 0.5;
--v: 0.25; --hc: calc(clamp(0, var(--h), 0.5) * var(--s)); --vc: calc(clamp(0, var(--v), 0.5) * var(--s) * var(--r)); --mv: 2px; --mh: calc(var(--mv) + (var(--s) - 2 * var(--hc)) / 2); /* horizontal */
--f: calc(2 * var(--s) * var(--r) + 4 * var(--mv) - 2 * var(--vc) - 2px);}
.container-3 {grid-column: 1/-1; max-width: 790px; margin: 0 auto; font-size: 0; position: relative; padding-bottom: 50px; filter: drop-shadow(2px 2px 1px #333);
}
.container-3 div { width: var(--s); 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)); margin-bottom: calc(var(--mv) - var(--vc));}
.container-3::before { content: ""; width: calc(var(--s) / 2 + var(--mh)); float: left; height: 120%; shape-outside: repeating-linear-gradient( transparent 0 calc(var(--f) - 2px),
#fff 0 var(--f));}
.container-3 div::before {padding-top: 80px; content: "An interesting \A experience"; text-transform: uppercase; white-space: pre; font-size: 75px; font-family: sans-serif;
font-weight: bold; text-align: center; position: absolute; color: #fff; background: linear-gradient(45deg, #f03355, #25b09b); inset: 0;}
.container-3 div {animation: show 3s infinite; opacity: 0; }
@for $i from 1 through 43 {
.container div:nth-child(#{$i}) {animation-delay: (2 * random()) * 1s;}
}
@keyframes show {
60% { opacity: 1;}
}
</style>
<div class="frame">
<div class="growing"></div>
</div>
<style>
.frame {margin:0; height:40vh; display:grid; place-items:center; background:lightblue;
overflow:hidden;}
.growing {width:10vw; height:10vw; position:relative; clip-path:inset(-50vh 0);}
.growing:before { content:""; display:block; width:400%; height:100%; background:
/*1*/
radial-gradient(farthest-side,#639510 97%,#0000) 12.5% 65%/12px 9px,
linear-gradient(#996b52 0 0) 9% 80%/9.4% 9%,
linear-gradient(#996b52 0 0) 10% 100%/7% 25%,
linear-gradient(#639510 0 0) 12.5% 100%/5px 36%,
/*2*/
radial-gradient(farthest-side,#639510 97%,#0000) 35.5% 50%/15px 10px,
radial-gradient(farthest-side,#639510 97%,#0000) 38% 64%/15px 10px ,
linear-gradient(#996b52 0 0) 35.5% 80%/9.4% 9%,
linear-gradient(#996b52 0 0) 36% 100%/7% 25%,
linear-gradient(#639510 0 0) 37% 100%/5px 52%,
/*3*/
radial-gradient(farthest-side,#fb3e4c 98%,#0000) 64.5% 40.5%/10px 9px,
radial-gradient(farthest-side at bottom,#0000 calc(100% - 5px),#639510 0 100%,#0000)
63.6% 34%/20px 10px,
radial-gradient(farthest-side,#639510 97%,#0000) 61% 50%/15px 10px,
radial-gradient(farthest-side,#639510 97%,#0000) 63.5% 64%/15px 10px ,
linear-gradient(#996b52 0 0) 63.5% 80%/9.4% 9%,
linear-gradient(#996b52 0 0) 63.1% 100%/7% 25%,
linear-gradient(#639510 0 0) 62% 100%/5px 62%,
/*4*/
radial-gradient(farthest-side at 50% 4px,#fb3e4c 98%,#0000) 88.1% 17.5%/17px 13px,
radial-gradient(farthest-side,#639510 97%,#0000) 87% 50%/15px 10px,
radial-gradient(farthest-side,#639510 97%,#0000) 89.5% 38%/15px 10px,
radial-gradient(farthest-side,#639510 97%,#0000) 89.5% 64%/15px 10px,
linear-gradient(#996b52 0 0) 91% 80%/9.4% 9%,
linear-gradient(#996b52 0 0) 90% 100%/7% 25%,
linear-gradient(#639510 0 0) 87.5% 100%/5px 77%;
background-repeat:no-repeat; animation:m 4s .5s both; }
.growing:after { content: ""; position: absolute; inset: -50vh 49px 42px 54px;
background:
conic-gradient(at 2px 50%,#0000 270deg,#fff 0)0 0/8px 10px,
conic-gradient(at 2px 50%,#0000 270deg,#fff 0)4px 5px/8px 10px;
animation:s 4s .5s both; }
@keyframes m{
0%,20% {transform:translate(0%)}
33.33%,53.33% {transform:translate(-24%)}
66.66%,86.66% {transform:translate(-49.5%)}
100%{transform:translate(-74.5%)}
}
@keyframes s {
0% {inset: -100vh 49px 100vh 54px}
10% {inset: -100vh 49px 42px 54px;opacity:1}
20% {inset: -100vh 49px 42px 54px;opacity:0}
20.01%, 33.33% {inset: -100vh 49px 100vh 54px;opacity:1}
43.33% {inset: -100vh 49px 42px 54px;opacity:1}
53.33% {inset: -100vh 49px 42px 54px;opacity:0}
53.34%, 66.66% {inset: -100vh 49px 100vh 54px;opacity:1}
76.66% {inset: -100vh 49px 42px 54px;opacity:1}
86.66%, 100%{inset: -100vh 49px 42px 54px;opacity:0}
}
</style>