1

I'm trying to use an absolute positioned SVG in a container and should be able to scale on container resize and should flow with the content.

The bottom content generated with SVG should keep the shape on resize or fluid content. Right now none of the requirements are working

here is a preview what I'm trying

https://codepen.io/deroccha/pen/poLZqqL

here a second trying/approach https://codepen.io/deroccha/pen/XWEPgrm

body {
  padding: 15%;
}

.card {
  max-width: 400px;
  box-shadow: 0 2px 6px #0003;
  border-radius: 25px;
  position: relative;
  background-color: #e5bb4c;
  overflow: hidden;
}
.card__header-content {
  padding: 1px 46px;
}
.card__header-content h2 {
  margin: 25px 0;
}
.card__header {
  padding: 0;
  margin: 0;
  position: relative;
  background-color: #f2efe9;
  z-index: 9;
}
.card__header svg {
  position: absolute;
  top: 0%;
  z-index: -1;
}
.card__content {
  padding: 15px;
  padding-top: 50%;
}
.card__footer {
  position: relative;
}
<div class="card">
  <div class="card__header">
    <div class="card__header-content">
      <div class="card__header-title"><h2>title</h2></div>
        <div class="card__header-teaser">
          Nulla blandit in diam nec pharetra. Quisque quis faucibus nibh. Sed ornare lacus eu auctor mollis. Aliquam posuere elementum imperdiet.
        </div>
    </div>
            <svg viewBox="0 0 387 266" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <path d="M193.5,266 C300.367099,266 387,189.007066 387,121.760563 C387,54.5140611 300.367099,0 193.5,0 C86.6329009,0 0,54.5140611 0,121.760563 C0,189.007066 86.6329009,266 193.5,266 Z" id="path-1"></path>
        <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-2">
            <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
        </filter>
    </defs>
    <g id="Design-System-Overview" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="$singlebubble1">
            <mask id="mask-3" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use id="Form-Mask-1-Copy" fill="#F2EFE9" filter="url(#filter-2)" xlink:href="#path-1"></use>
        </g>
    </g>
</svg>
  </div>
  <div class="card__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut pretium sem. Nunc malesuada mauris et elit semper, dapibus euismod felis aliquet. Curabitur id ipsum ac elit consequat ornare in tempor metus. Morbi eget elementum urna, quis sollicitudin tellus. Quisque condimentum quis nisi in semper. Aliquam in accumsan ante, et sagittis diam. Duis bibendum interdum facilisis. In placerat sapien sit amet risus auctor pretium maximus ut risus. Donec sit amet tellus eleifend, lobortis nisi nec, pretium nisl. Cras malesuada urna non est tincidunt, vitae sodales tellus molestie.
  </div>
  
  <div class="card__footer">
  </div>
  
</div>
fefe
  • 8,755
  • 27
  • 104
  • 180
  • 1
    In your snippet, there is only one `` element, but in the codepen there are two, and they have content elements with identical IDs. Please make sure IDs are unique within the DOM. – ccprog Aug 11 '22 at 17:22

1 Answers1

1

Hope this helps.

body {
  padding: 15%;
}

.card {
  max-width: 400px;
  box-shadow: 0 2px 6px #0003;
  border-radius: 25px;
  position: relative;
  background-color: #e5bb4c;
  overflow: hidden;

  resize: auto;  /*>>>>>>> to resize the card, remove this line*/
}
.card__header-content {
  padding: 1px 46px;
}
.card__header-content h2 {
  margin: 25px 0;
}
.card__header {
  padding: 0;
  margin: 0;
  position: relative;
  background-color: #f2efe9;
  z-index: 9;
}
.card__header svg {
  position: absolute;
  z-index: -1;
  width: 120%;
  transform: translate(-8%, -66%);
}
.card__content {
  padding: 15px;
  padding-top: 50%;
}
.card__footer {
  position: relative;
}
<div class="card">
  <div class="card__header">
    <div class="card__header-content">
      <div class="card__header-title"><h2>title</h2></div>
        <div class="card__header-teaser">
          Nulla blandit in diam nec pharetra. Quisque quis faucibus nibh. Sed ornare lacus eu auctor mollis. Aliquam posuere elementum imperdiet.
        </div>
    </div>
            <svg viewBox="0 0 387 266" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <path d="M193.5,266 C300.367099,266 387,189.007066 387,121.760563 C387,54.5140611 300.367099,0 193.5,0 C86.6329009,0 0,54.5140611 0,121.760563 C0,189.007066 86.6329009,266 193.5,266 Z" id="path-1"></path>
        <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-2">
            <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
        </filter>
    </defs>
    <g id="Design-System-Overview" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="$singlebubble1">
            <mask id="mask-3" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use id="Form-Mask-1-Copy" fill="#F2EFE9" filter="url(#filter-2)" xlink:href="#path-1"></use>
        </g>
    </g>
</svg>
  </div>
  <div class="card__content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut pretium sem. Nunc malesuada mauris et elit semper, dapibus euismod felis aliquet. Curabitur id ipsum ac elit consequat ornare in tempor metus. Morbi eget elementum urna, quis sollicitudin tellus. Quisque condimentum quis nisi in semper. Aliquam in accumsan ante, et sagittis diam. Duis bibendum interdum facilisis. In placerat sapien sit amet risus auctor pretium maximus ut risus. Donec sit amet tellus eleifend, lobortis nisi nec, pretium nisl. Cras malesuada urna non est tincidunt, vitae sodales tellus molestie.
  </div>
  
  <div class="card__footer">
  </div>
  
</div>
Dakshank
  • 689
  • 4
  • 15