Is there a way to implement an SVG path onto an image using CSS?

I am trying to create an image in the shape of a blob using the following code:

root{
  --blob: "M43.1,-67.8C56.1,-58.7,67,-8BQAzQwVETtFWGmAFZjAwNSYA7M4EczfocpPa2kZ6AiC1tVQuAhJTRjLG5Nkk4QqFWHxiKBdi6RuUFjC5zMhvhUyK7tatMA,56.1C5.8,55,-4.8,53.8,-18.3,53.8C-31.8,53.7,-4JUdGzvrMFDWrUUwY3toJATSeNwjn54LkCnKBPRzDuhzi5vSepHfUckJNxRL2gjkNrSqtCoRUrEDAgRwsQvVCjZbRyFTLRNyDmT1a1boZV2,-54.4,-53.1,-40.1,-61.7C-25.7,-70.2,-12.9,-80.4,1.1,-82C15,-83.7,30.1,-76.9,43.1,-67.8Z";

}

.img-class{
  clip-path: path(var(--blob));
  overflow: hidden;
}
<svg viewBox="0 0...

Unfortunately, it's not working and I'm not sure what's wrong. I followed a tutorial that did the same thing.

Update: I think I figured out why it's not rendering correctly. The SVG path code keeps changing when I paste it, so the code is invalid. Although I copy one path, it pastes another one that is incorrect.

htmlcsssvg

Answer №1

the issue lies within the SVG code itself

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#E8B224" d="M43.1,-67.8C56.1,-58.7,67,-8BQAz...oom out)...

when trying to copy the code, it becomes problematic due to its length. Limiting copied characters to around 50 at a time can prevent this issue. The cause may be related to a bug in the Windows clipboard. This workaround helps avoid the problem.

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

Issues arising from a dysfunctional table inside a div container

Currently developing a quiz page and facing the challenge of integrating a scoreboard. Encountering an issue with placing the scoreboard in a table. As the table grows beyond 4 rows (which is expected), it extends endlessly. Attached below is a visual re ...

javascriptphphtmlcss

Form design featuring inline radio buttons and text fields arranged horizontally

I am struggling to arrange a radio button with two text fields in a horizontal form using Bootstrap. Unfortunately, I can't embed the image for reference. Despite my efforts in using Jade markup, I haven't been able to achieve the desired layout ...

csstwitter-bootstraptwitter-bootstrap-3

"Enhancing user experience with dynamic select option autofill using J

I am working with three select options that all have the same class called 'film' There is a list that is storing all of the select options When a list item is clicked on, the first select option will change and I want the other select options ...

jqueryhtmlselect

What is the method for adjusting the width of a Bootstrap 4 toast message?

I have a webpage featuring a Bootstrap 4 toast with the position set as position: fixed. The entire code snippet for the toast section is shown below: <div class="container mt-5"> <button type="button" class="btn btn-pri ...

csstwitter-bootstrapbootstrap-4css-positionwidth

Loading 3D models in Three.js from the cache

Every time my page reloads, the loader loads objects from the URL instead of cache. Is there a way to check if the resource is in cache and load it directly? Appreciate your help! ...

javascripthtmlthree.js

Identify text truncation using JavaScript

I have a container with CSS that truncates text to show ellipsis when it reaches a certain width. Despite the truncation, the full text remains unchanged inside. To test this feature, I'd like to be able to access the truncated text with JavaScript. I ...

javascriptcss

Ajax is able to fetch the URL without any issues, but the page is not being updated as expected. Instead,

I am currently working on implementing next/prev buttons using JavaScript, and have utilized a DynamicPage script for testing purposes. The only modification I made was to the beginning of the URL variable in pagenumber.js, although it essentially delivers ...

javascripthtmljqueryajax

Clickable div containing a hyperlink

I need assistance with a clickable div that contains a link. Here is the setup: HTML: <div onClick="goToCat(2);" class="author-topics-block "> <a href="http://mywebsite/page/?cat=2">The woman in steel</a> </div> CSS: .author ...

javascripthtmlhyperlink

Creating an automated HTML tag for a form input

https://i.sstatic.net/ZBDk2.png Is there a plugin to create form inputs like the one shown above? How can I add this feature to my own website? I would like for every user input to automatically add the < br > tag. ...

phphtmlforms

The functionality of a JQuery post within a PHP loop is not functioning optimally

I am encountering an issue with my list.php file, which generates a list with items and a button (Erledigt!) that triggers a jQuery Post to wishdelete2.php. The problem is that the jQuery post sometimes requires multiple clicks (3x or 5x) before it process ...

javascriptphpjqueryhtml

Animation of underline on hover for NavLink

As a newcomer to React, I am currently exploring how to create an animated underline effect when hovering over a NavLink from reactstrap. I have managed to get the underline working on hover thanks to the solution provided at , but I am struggling with imp ...

cssreactjscss-animationsreact-bootstrap

Can you set the line thickness for "text-decoration: line-through;" using CSS?

When it comes to the line-through property in CSS, the default weight of 1px is ideal for body copy set at 1em. However, for larger items like a price set at 3em on an offer site, 1px can feel too light. Is there a way to increase the line weight for line ...

css

Generating containers in Angular using *ngFor

As a beginner in Angular, Bootstrap, and front-end programming, I am looking to create multiple boxes that reveal detailed information when clicked. This is the desired outcome: https://i.sstatic.net/Ak0eA.png After clicking on box number 1: https://i.s ...

htmlcssangulartwitter-bootstrap

Showcase the loop field of Advanced Custom Fields

I've been struggling to get a repeater field consisting of images to show up on my WordPress template, but it's just not cooperating. I even went through the documentation of the plugin: Unfortunately, I still can't seem to get it to functi ...

phpjavascriptjqueryhtmlplugins

Struggling with JavaScript's while loops and if statements :(

I am working on creating a function that will randomly select global variables based on a number and add them to an array. This process will be repeated 5 times for an online 2D game. The idea is to have cards with information that can later be used to pla ...

javascripthtmlif-statementwhile-loopglobal-variables

Transferring data from jQuery to HTML

Is there a way to incorporate the width and height of an uploaded image into the HTML img src at the bottom of my page using jQuery within Umbraco? <script> function getMeta(varA, varB) { if (typeof varB !== 'undefined') { ...

htmljquerycss

Ways to avoid losing data when a page is refreshed

After encountering a frustrating issue with my form, I turned to research in hopes of finding a solution. However, each attempt has resulted in disappointment as the data is lost every time the page is refreshed. If anyone has advice on how to prevent th ...

javascriptphpjqueryhtmlajax

Fill the second dropdown menu options based on the selection made in the first dropdown menu

I need assistance with dynamically populating my second drop-down menu based on the selection made in the first drop-down. Here are the steps I've taken so far: form.php - Utilizing javascript, I have set up a function to call getgeneral.php. The se ...

javascriptphphtmlajax

Using Document.querySelector() in combination with Bootstrap CSS may lead to unexpected results

CSS & HTML <html lang="en"> <head> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384x ...

javascripthtmlcssbootstrap-4

Converting Markdown to HTML using AngularJS

I'm utilizing the Contentful API to retrieve content. It comes in the form of a JSON object to my Node server, which then forwards it to my Angular frontend. This JSON object contains raw markdown text that has not been processed yet. For instance, t ...

javascripthtmljsonangularjsmarkdown