blobs

by Richard Hunter

HTML

<div>
  <svg width="0" height="0" viewBox="0 0 504 504">
    <clipPath id="foo" clipPathUnits="objectBoundingBox">
      <path d="M0.37321 0.97317c-0.31545 -0.08452 -0.43091 -0.28451 -0.34638 -0.59996C0.11134 0.05776 0.31133 -0.05769 0.62678 0.02682c0.31545 0.08452 0.43091 0.284504 0.34638 0.5999c-0.08452 0.31544 -0.28450 0.43091 -0.5999 0.34638Z" fill-rule="evenodd" />
    </clipPath>
  </svg>


  <div class="style-guide__blob-header">
    <h1 class="style-guide__blob-header-1">Hello&nbsp;World</h1>
    <ul class="style-guide__blob-links">
      <li>link1</li>
      <li>link1</li>
      <li>link1</li>
    </ul>
    <h2 class="style-guide__blob-header-2">blah balalal alal alal </h2>
    <div class="style-guide__blob-clip-path"></div>
    <div class="style-guide__blob-clip-path-2"></div>
  </div>
</div>

CSS

.style-guide__blob-header {
  color: red;
  margin: auto;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 1200px;
  position: relative;
}
ul {
  list-style: none
}

.style-guide__blob-links {
  margin: 1rem;
  display: flex;
  font-weight: 700;
  flex-direction: row;
  color: yellow;
  font-size: 2em;
  z-index: 1;
}

.style-guide__blob-header-1 {
  margin: 1rem;
  color: white;
  z-index: 1;
}

.style-guide__blob-header-2 {
  margin: 1rem;
  z-index: 1;
  margin-left: auto;
  color: pink;
}

.style-guide__blob-clip-path,
.style-guide__blob-clip-path-2 {
  clip-path: url(#foo);
  position: absolute;
}

.style-guide__blob-clip-path {
  background: #ff2d92;
  width: 1300px;
  height: 1300px;
  left: 0;
  top: -1079px;
  mix-blend-mode: multiply;
}

.style-guide__blob-clip-path-2 {
  background: rebeccapurple;
  mix-blend-mode: multiply;
  top: 140px;
  width: 520px;
  height: 520px;
  left: -99px;
  top: -342px;
}