transform svg into css pattern

I've been attempting to create a "circle-Egg" in CSS, but I'm encountering some difficulties.

I have an SVG circle that I want to use on my website and insert an image inside it. However, using Pattern and Image to insert an image inside the SVG is not working for me because I can't control the 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 have decided to create this image using CSS.

Please note the 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 experimented with the border-radius property, but it doesn't seem to work for me.

Thanks

csssvgborder

Answer №1

To create a unique background effect, utilize SVG as a mask and ensure proper setting of the viewBox:

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The HTML code does not seem to be acknowledging the CakePHP link

When using Cakephp to generate a link with Html->link, the code looks like this: echo $this->Html->link('Download',array( 'plugin'=> 'galleries', 'controller'=> 'galleries', 'a ...

htmlcsscakephp

Troubleshooting: Navbar Hover Effect in Tailwind CSS Not Functioning as Expected

This week, I've been working on building a navbar and it seems like the layout is coming together nicely. However, I've encountered a couple of small issues with the hover effect and the links for the menu items on the left and the logo in the ce ...

cssreactjsnext.jstailwind-css

"Create a flexible CSS grid with a dynamically changing number of rows and customizble

I am currently working on a project that involves creating a dynamic grid layout with two resizable columns, namely #red-container and #green-container. The goal is to make each column resizable horizontally while also allowing the main container #containe ...

htmlcss

Guide to positioning a toolbar within an element when hovering over it in HTML with the help of JQuery

function attachMenuBar() { $('body').on('mouseover mouseout', '*:not(.printToolBar)', function (e) { if (this === e.target) { (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.t ...

javascriptjqueryhtmlcss

Mobile view doesn't quite center using flexbox, even though it works fine on desktop

Utilizing flexbox, the two distinct sentences that form the content of the page are centered. However, upon viewing the website on my mobile phone, the second sentence appears aligned to the left side. Here's how the site appears on a phone I've ...

htmlcssflexboxmedia-queriestext-align

Guide to aligning a WordPress div to the top of the webpage

Currently, I am in the process of creating a page template that features a transparent header. My main goal is to have the #content div align perfectly with the top of the page right below the header. I have experimented with various CSS properties such a ...

htmlcsswordpress

Hide specific content while displaying a certain element

Creating three buttons, each of which hides all content divs and displays a specific one when clicked. For instance, clicking the second button will only show the content from the second div. function toggleContent(id) { var elements = document.getEl ...

javascripthtmljquerycss

The website is experiencing display issues when viewed on Internet Explorer 10 and above

I am currently managing a few websites running on aspx with an older version of DNN 4.x. While these sites display properly on Google Chrome, Fire Fox, Opera, etc., I have noticed that there are rendering issues specifically on IE 10 and above for the navi ...

htmlcssinternet-explorer-10internet-explorer-11

Is it possible to alter the color of a parent's pseudo-element when it is focused using CSS3?

This situation is quite challenging, and I believe achieving it with plain CSS3 alone is difficult (easier with jQuery, but I'm trying to avoid that). Are there any potential workarounds or hacks? My main goal is for it to be cross-browser compatible ...

csscolorspseudo-element

What is the best approach to modifying the color of a menu item in the sidebar upon clicking it using Material-UI in a React application?

I am a beginner with this framework and my goal is to change the color when clicking on a Menu Item in the Sidebar. For example, clicking on the table component should change the table name and icon to white color. Could someone please help me figure out h ...

javascripthtmlcssreactjsmaterial-ui

Display of content visible via stationary div

Recently, I successfully implemented a fixed div that remains at the top of my webpage. However, I encountered an issue where text would appear through the div when scrolling. You can witness this phenomenon by visiting this site and simply scrolling down ...

htmlcss

Looking to center the numbers in my ordered list within a border box - any tips on how to achieve this?

I'm attempting to create a numbered order list with a circular border around it. The goal is to have the number of the list item centered within the circular border and the entire circle centered within the paragraph. Currently, both the number and th ...

htmlcss

Viewing at full width on mobile exceeds 100% [React]

I'm attempting to make a div cover exactly 100% of the width on mobile devices, but no more. The code I'm using is as follows: Here is my React code: <div className="max-width-100vw"> HELLO I AM A UNIQUE SENTENCE HERE??? </div> And ...

htmlcssreactjsmobile

How can I use JavaScript to show a div upon clicking an input element?

I am looking to make a block div visible when an input field is clicked. <input class="indifferent" type="radio" name="decision" value="indifferent"> Indifferent </br> <div class="input" style="display: none;"> Please assist with our com ...

javascripthtmlcssinputtags

Maintain a consistent header height with CSS even when using the calc() function

--dis: calc(var(--max-height) - var(--min-height)); /* @media large{--min-height:13rem}; @media small{--min-height:6.5rem}; --max-height:75vh; */ --percent: calc(var(--scroll-ani) / var(--dis)); /* in js: document.body.style = "--scroll-ani: ...

javascripthtmlcss

"Enhancing the appearance of sorted divs using CSS3 animations in jQuery

Looking to enhance the sorting functionality of divs using jQuery by incorporating CSS3 transition animations for smoother transitions. Encountering an issue where the CSS3 transition animation is not functioning as expected, currently investigating the r ...

jquerycss

The hidden DIV containing an ASP.NET CheckBox consistently yields a value of false

I have a group of form elements located within a hidden div which looks like this: <div id="jDivUpdateFolder" style="display:none;"> <asp:TextBox ID="txtEditFolderName" runat="server"></asp:TextBox><br /> <asp:TextBox ID ...

javascriptasp.netcssvb.netwebforms

What is the best way to reveal a concealed "div" when hovering the mouse over it?

Currently in the process of developing a dropdown menu to house a search engine form within a static menu bar. The desired functionality is for the search form to appear upon hovering over the "search icon." However, it seems that the submenu fails to disp ...

htmlcsshover

What is the best way to center all items in a vertical list of text?

Having trouble aligning elements in my Angular app - specifically date, file total, and file size. When one number has more digits than the others, it throws off the alignment. I've attempted adjusting padding margins and using display properties lik ...

htmlcssangular

Creating sequential hover animations with CSS in HTML

I have a total of four divs that I want to hover continuously, one after the other. Here is the code I am currently using: #rij1 .content-overlayz, #rij1 .content-details { animation-duration: 2s; animation-name: stepped-pulse; animation-iterati ...

javascripthtmlcssanimationhover