Successfully replicated their primary header appearance using pure CSS (no JS) and only a single <h1> element (as opposed to their multiple h1 elements):
Side-by-side comparison:
https://i.sstatic.net/U3jcK.png
Curious about the source of the rounded, concave inside borders
Expected to find pseudo-elements like ::before or ::after on those middle-column sections, but none were observed.
The rounded corners are present - the visibility might have been missed:
https://i.sstatic.net/mlFmt.png
Their method involves a solid color and
border-bottom/top-right/left-radius:
for the curved corners, which functions effectively on a solid background color - whereas my method employs
mask-image: with a
radial-gradient to achieve proper transparency, allowing it to work on any background texture.
html {
font-family: sans-serif;
}
h1 {
display: grid;
grid-template-columns: repeat(2, auto) 100px;
grid-template-rows: repeat(3, 1fr);
outline: 1px solid red;
}
h1 > span {
display: inline-block;
/* outline: 1px solid blue;*/
background-color: cyan;
border-radius: 15px;
padding: 0.5em;
position: relative;
}
h1 > span:nth-child(1) {
grid-column: 1 / span 2;
grid-row: 1 / 2;
justify-self: end;
border-bottom-right-radius: 0;
}
h1 > span:nth-child(2) {
grid-column: 2 / 3;
grid-column: 1 / span 2;
grid-row: 2 / 3;
justify-self: end;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
}
h1 > span:nth-child(3) {
grid-column: 2 / 4;
grid-row: 3 / 4;
justify-self: end;
border-top-left-radius: 0;
}
h1 > span::before,
h1 > span::after {
content: '';
display: inline-block;
display: none;
width: 15px;
height: 15px;
background-color: cyan;
-webkit-mask-image: radial-gradient(15px at bottom left, rgba(0, 0, 0, 0) 99%, black 99%);
position: absolute;
}
h1 > span:nth-child(2)::before {
display: inline-block;
top: 0;
left: -15px;
}
h1 > span:nth-child(2)::after {
display: inline-block;
bottom: 0;
right: -15px;
-webkit-mask-image: radial-gradient(15px at top right, rgba(0, 0, 0, 0) 99%, black 99%);
}
h1 > span:nth-child(3)::before {
top: 0;
left: -15px;
display: inline-block;
}
<h1>
<span>Dyslexia for</span>
<span>Cure</span>
<span>Found</span>
</h1>
<h1>
<span>Business Intelligence</span>
<span>built around</span>
<span>data teams</span>
</h1>
An alternative method to explore is implementing Metaballs using CSS shadows and filters - the resources linked below focus primarily on free-floating/circular metaballs, rather than incorporating metaball-like characteristics into existing rectangular HTML elements.
This particular demo stands out to me for some reason:
https://codepen.io/keithclark/pen/WNgRMQ
/* From https://codepen.io/keithclark/pen/WNgRMQ */
body,
html,.wrap {
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
body {
-webkit-filter: contrast(25);
filter: contrast(25);
background: black;
}
.wrap {
background: inherit;
animation: 7s spin ease-in-out infinite;
}
.meta::before,
.meta::after {
content: "";
position: absolute;
width:100px;
height:100px;
left:50%;
top:50%;
margin:-50px;
background: rgba(160,230,245,.9);
border-radius:50%;
-webkit-filter: blur(25px);
filter: blur(25px);
animation: move 12s infinite alternate ease-in-out;
}
.meta::before {
animation-duration: 19.3s;
animation-delay: -3.3s;
}
.meta:nth-child(2)::before {
animation-duration: 14.7s;
animation-delay: -2.7s;
}
.meta:nth-child(2)::after {
animation-duration: 8.7s;
animation-delay: -5.32s;
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
@keyframes move {
0% {
transform: translate(0%, 100%);
}
15% {
transform: translate(-120%, 160%);
}
30% {
transform: translate(100%, -80%);
}
40% {
transform: translate(-140%, 0%);
}
60% {
transform: translate(40%, -80%);
}
80% {
transform: translate(-160%, -20%);
}
100% {
transform: translate(40%, 60%);
}
}
<div class="wrap">
<!-- From https://codepen.io/keithclark/pen/WNgRMQ -->
<div class="meta"></div>
<div class="meta"></div>
</div>