Search code examples
csssvgborder

convert svg to css shape

i am trying to do this "circle-Egg" in css and its not working with me.

i have this circle as an SVG , and i want to use it in my website and place an image inside it , using Pattern and Image to place image inside the svg was not working with me because i cant control background size and repeat . 

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="115" height="120"><defs><path id="a" d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z"/></defs><use fill="#00C1B1" fill-rule="evenodd" transform="translate(-33)" xlink:href="#a"/></svg>

so i decided to make this picture using css

please note top left corner Circle

.circle{
  margin-top:50px;
  margin-left:50px;
  background-color:#00C1B1;
  border-radius: 70% 50% 60% 60% / 70% 70% 55% 60%;
  height: 120px;
  width:115px;
}
<div class="circle">
</div>

i have tried to play around with border radius but it does not seems to work with me .

Thanks

Solution

  • Use the SVG as mask and you can easily consider background. Simply make sure to correctly set the viewBox of the SVG:

    .box {
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="30 0 120 120" ><path d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z" fill="black"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="30 0 120 120" ><path d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z" fill="black"/></svg>') center/contain no-repeat;
   width:200px;
   display:inline-block;
   background:red;
}
/* to maintain the ratio */
.box::before {
   content:"";
   display:inline-block;
   padding-top:100%;
}


svg {
  border:1px solid;
}
    <div class="box"></div>

<div class="box" style="background:url(https://picsum.photos/id/1000/800/800.jpg) center/cover;width:150px;"></div>

<div class="box" style="background:url(https://picsum.photos/id/1074/800/800.jpg) center/cover;width:100px"></div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" viewBox="30 0 120 120" ><path d="M93.174 120C124.931 120 148 93.748 148 61.364S127.605 0 95.849 0C64.092 0 33 28.98 33 61.364S61.418 120 93.174 120z" fill="black"/></svg>