0

I have this html svg path code which is an example of a heart with angle gradient colors. I need to edit that path code so that instead of a heart shape would be a normal circle

HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gradients</title>
    <link rel="stylesheet" href="./style.css">
    <script type="text/javascript" src="./dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var item = project.importSVG(document.getElementById('svg'));
    </script>
</head>
<body>
    <svg>
        <clipPath id="clip">
          <path d="M 65,29 
          C 59,19 49,12 37,12 20,12 7,25 7,42 7,75 25,80 65,118 105,80 123,75 123,42 123,25 110,12 93,12 81,12 71,19 65,29 z" />
        </clipPath>
        <foreignObject width="128" height="128" clip-path="url(#clip)">
          <div />
        </foreignObjct>
      </svg>
      <!-- partial -->
        
</body>
</html>

CSS code:

div {
  width: 100%;
  height: 100%;
  background: conic-gradient(darkorange, hotpink, mediumaquamarine);
}

This is the final result

enter image description here

What i need is to change that path tag to a circle, instead of a heart, my plan is to import that svg to illustrator and change the form.

I tried by pasting just the svg tags into a notepad and save the file as .svg then open it on illustrator but it didnt work, this is the content of that .svg file

<svg>
<clipPath id="clip">
<path d="M 65,29 C 59,19 49,12 37,12 20,12 7,25 7,42 7,75 25,80 65,118 105,80 123,75 123,42 123,25 110,12 93,12 81,12 71,19 65,29 z"/>
</clipPath>
</svg>

is there any other method?

4
  • Works for me? Hard to say anything since there is no substance in the post to help me help you.
    – joojaa
    Oct 11 at 6:29
  • the .svg file works for you? Oct 11 at 6:33
  • 1
    Yeah since its a partial file i removed the clip path shatement since your not using the clip anywere
    – joojaa
    Oct 11 at 6:50
  • That is the answer dear, please post it to solve this question Oct 11 at 15:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.