Generating svg using js code, it keeps returning the same result? - javascript

Sorry, I didn't really know how to decide the title properly. Let me explain what I am experiencing.
So I am trying to generate some svg elements and add them into my div. Here's my code:
const drawInfographics = (data) => {
console.log(data);
const generateSymbol = (width) => {
return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="unown" width="50" height="50" viewBox="0 0 400 334">
<path d="M195.083 13.357 C 155.599 14.240,116.551 28.209,85.250 52.650 L 82.917 54.472 77.083 48.676 C 70.927 42.559,69.949 41.744,67.264 40.490 C 51.251 33.013,34.125 48.036,39.513 64.833 C 40.788 68.809,41.805 70.168,48.676 77.083 L 54.472 82.917 52.650 85.250 C 6.781 143.993,0.434 225.132,36.600 290.417 C 40.050 296.646,42.329 299.118,46.565 301.230 C 60.057 307.955,75.667 298.355,75.667 283.333 C 75.667 279.026,74.959 276.681,72.106 271.534 C 26.856 189.889,67.396 88.127,156.333 60.109 C 163.475 57.859,176.941 54.833,179.813 54.833 C 179.950 54.833,180.000 58.461,180.000 68.250 C 180.000 81.235,179.990 81.667,179.689 81.667 C 179.518 81.667,178.224 81.896,176.814 82.177 C 113.956 94.696,72.109 153.756,81.169 217.167 C 90.527 282.662,151.496 328.240,217.167 318.832 C 269.767 311.296,311.231 269.851,318.819 217.225 C 320.981 202.230,320.222 186.196,316.658 171.566 C 305.469 125.630,267.906 90.156,221.708 81.895 L 220.000 81.589 220.000 68.211 C 220.000 57.620,220.043 54.833,220.208 54.834 C 222.179 54.838,233.093 57.090,238.833 58.677 C 313.324 79.273,358.928 153.634,343.565 229.449 C 340.627 243.950,335.172 258.536,327.667 271.963 C 325.068 276.612,324.333 279.118,324.333 283.333 C 324.333 297.873,339.056 307.498,352.444 301.710 C 356.686 299.876,359.772 296.902,362.541 291.978 C 399.622 226.035,393.632 144.525,347.350 85.250 L 345.528 82.917 351.324 77.083 C 358.121 70.243,359.085 68.974,360.382 65.167 C 366.015 48.633,349.387 33.280,333.353 40.211 C 330.251 41.553,329.555 42.116,323.083 48.526 L 317.083 54.469 314.887 52.753 C 283.743 28.423,244.001 14.094,205.750 13.405 C 203.275 13.360,200.950 13.307,200.583 13.286 C 200.217 13.265,197.742 13.297,195.083 13.357 M207.083 120.435 C 244.223 123.654,274.515 152.755,279.234 189.750 C 285.334 237.565,248.150 279.845,200.000 279.845 C 148.966 279.845,110.950 232.476,122.014 182.674 C 130.707 143.546,167.038 116.965,207.083 120.435 M195.849 180.344 C 181.455 183.447,175.155 200.402,184.024 212.171 C 192.270 223.115,209.134 222.537,216.777 211.049 C 220.423 205.570,221.049 198.071,218.377 191.890 C 214.702 183.388,204.939 178.384,195.849 180.344" />
<path d="M203.058 186.903 C 193.647 189.186,195.319 203.333,205.000 203.333 C 209.498 203.333,213.333 199.498,213.333 195.000 C 213.333 189.703,208.198 185.656,203.058 186.903" fill="#ffffff" />
</symbol>
<g clip-path="url(#cutout)">
<use xlink:href="#unown" x="10" y="5" />
<use xlink:href="#unown" x="60" y="5" />
<use xlink:href="#unown" x="110" y="5" />
<use xlink:href="#unown" x="160" y="5" />
<use xlink:href="#unown" x="210" y="5" />
<use xlink:href="#unown" x="360" y="5" />
<use xlink:href="#unown" x="410" y="5" />
<use xlink:href="#unown" x="460" y="5" />
<use xlink:href="#unown" x="510" y="5" />
<use xlink:href="#unown" x="560" y="5" />
</g>
<defs>
<clipPath id="cutout">
<rect x="0" y="0" height="100%" width="${width}%" />
</clipPath>
</defs>
</svg>
`;
};
document.getElementById("infog-day-one").innerHTML += generateSymbol(
data[0]
);
document.getElementById("infog-day-two").innerHTML += generateSymbol(
data[1]
);
};
As you can see I am passing "data" as a parameter and it is an array of numbers. If the value is 40, then it will clip the svg for 40% (look at the defs tag inside)
And all values of data array is different. So what I am experiencing is, at the end of the code, document.getElementById, as you can see they are trying to use different value (index) of the data array. But they are generating exactly the same svg.
So if the data array is [20, 30, 40, 50, 60, 70] then what I wanted is the first div with id "infog-day-one" clips 20% of the image, and the div with id "infog-day-two" clips 30%, and so on.
But everything just clips 20%. I have tried everything I can do. Changing div's id and etc. Nothing works.
Can anyone please help? I am going crazy now.


You are referencing the clipPath from its id. No matter how you create it, there can only be one definition per id in an html document. When you add the second svg (data[1]), there are two #cutout ids, and the behavior is not defined. You might try something like <clipPath id="cutout-${width}%">, and referencing it like that in each svg. In that case, you would have to make sure that you are not creating two svgs with the same width (it would work, but it would not be correct).

Related

Flip textPath without changing path d attribute

I have a textPath as such:
body{
padding-left:10rem;
}
<svg style="overflow:visible">
<path id="path1" stroke="black" d="M 0 0 L -100 100" stroke-width="3" />
<text font-size="24" dy="-10" text-anchor="middle">
<textPath href="#path1"startOffset="50%">Hello there</textPath>
<textPath href="#path1" startOffset="50%" dominant-baseline="central">➤</textPath>
</text>
</svg>
I need to simply invert the text such that it aligns like this:
and I'm trying to do so without changing M & L of the d attribute of path, how do I achieve this?

SVG: dynamically created <use> won't show [duplicate]

One of the use elements is created dynamically, one is created statically. I have written a jsfiddle.
https://jsfiddle.net/rhedin/r0dbf6uy/6/
<!doctype html>
<body>
<svg
id="svg_box"
width="200px"
height="100px"
viewBox="0 0 200 100"
style="background-color:pink"
>
<defs>
<g id="b">
<path d="m 4.23,7.7400001 0,-7.14000002 C 4.23,0.18000008 3.96,7.6293944e-8 3.39,7.6293944e-8 l -2.22,0 C 0.39000002,7.6293944e-8 1.9073486e-8,0.36000008 1.9073486e-8,1.0500001 c 0,0.75 0.420000000926514,1.02 1.349999980926514,1.02 0.21,0 0.45,0.03 0.66,0.03 L 2.01,17.1 c -0.12,0 -0.21,0 -0.3,0 C 0.51000002,17.1 1.9073486e-8,17.28 1.9073486e-8,18.12 1.9073486e-8,18.81 0.39000002,19.17 1.17,19.17 l 2.67,0 c 0.45,0 0.6,-0.24 0.6,-0.75 l 0,-1.17 c 0.99,1.47 2.52,2.19 4.56,2.19 3.93,0 6.93,-3.09 6.93,-6.9 0,-3.8699999 -2.94,-6.8999999 -6.87,-6.8999999 -2.07,0 -3.72,0.72 -4.83,2.1 z M 8.79,17.13 c -2.73,0 -4.62,-1.98 -4.62,-4.68 0,-2.7299999 1.92,-4.6799999 4.62,-4.6799999 2.73,0 4.62,2.01 4.62,4.6799999 0,2.79 -1.89,4.68 -4.62,4.68 z" />
</g>
</defs>
<use x="130px" y="10px" xlink:href="#b" />
</svg>
<script>
var svgElt = document.getElementById('svg_box');
var newUse = document.createElementNS("http://www.w3.org/2000/svg", 'use');
newUse.setAttribute('x', '150px');
newUse.setAttribute('y', '10px');
newUse.setAttribute('xlink:href', '#b');
svgElt.appendChild(newUse);
</script>
</body>
Two both appear the same in Chrome's debugger. Why does only one show up?
Thanks, Rick

You can't set an xlink:href attribute using setAttribute, you need to use setAttributeNS
var svgElt = document.getElementById('svg_box');
var newUse = document.createElementNS("http://www.w3.org/2000/svg", 'use');
newUse.setAttribute('x', '150px');
newUse.setAttribute('y', '10px');
newUse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#b');
svgElt.appendChild(newUse);
<!doctype html>
<body>
<svg
id="svg_box"
width="200px"
height="100px"
viewBox="0 0 200 100"
style="background-color:pink"
>
<defs>
<g id="b">
<path d="m 4.23,7.7400001 0,-7.14000002 C 4.23,0.18000008 3.96,7.6293944e-8 3.39,7.6293944e-8 l -2.22,0 C 0.39000002,7.6293944e-8 1.9073486e-8,0.36000008 1.9073486e-8,1.0500001 c 0,0.75 0.420000000926514,1.02 1.349999980926514,1.02 0.21,0 0.45,0.03 0.66,0.03 L 2.01,17.1 c -0.12,0 -0.21,0 -0.3,0 C 0.51000002,17.1 1.9073486e-8,17.28 1.9073486e-8,18.12 1.9073486e-8,18.81 0.39000002,19.17 1.17,19.17 l 2.67,0 c 0.45,0 0.6,-0.24 0.6,-0.75 l 0,-1.17 c 0.99,1.47 2.52,2.19 4.56,2.19 3.93,0 6.93,-3.09 6.93,-6.9 0,-3.8699999 -2.94,-6.8999999 -6.87,-6.8999999 -2.07,0 -3.72,0.72 -4.83,2.1 z M 8.79,17.13 c -2.73,0 -4.62,-1.98 -4.62,-4.68 0,-2.7299999 1.92,-4.6799999 4.62,-4.6799999 2.73,0 4.62,2.01 4.62,4.6799999 0,2.79 -1.89,4.68 -4.62,4.68 z" />
</g>
</defs>
<use x="130px" y="10px" xlink:href="#b" />
</svg>
</body>

create a responsive svg with react

I want to create an svg that will be easily scaled on whatever width I'll give it. In that svg I have a circle and path with relative paths so I want it to be easily scaleable.
But for some reason the position of x,y are not right.
You can see the image below, the circle has (x,y)=(0,0)
but it is set in the middle.
I assume "viewBox" is causing problems.
jsfiddle link:
https://jsfiddle.net/tzookb/69z2wepo/174297/
code:
const ExclamationIcon = props => (
<svg {...props} viewBox="0 0 140 140">
<circle fill="#f66868" cx="70" cy="70" r="70" />
<g transform="translate(58,30)">
<path fill="white" d="M 11,56.7 L 9,56.7 L 4.2,13.2 C 4,11.4 4,10 4,9 C 4,7 4.5,4.9 5.6,3.5 C 7,2.2 8.3,1.5 10,1.5 C 11.7,1.5 13,2.2 14.4,3.5 C 15.5,4.9 16,7 16,9 C 16,10 16,11.4 15.8,13.2 z M 10,64 A 6,6 0 1,1 10,76 A 6,6 0 1,1 10,64 z"/>
</g>
</svg>
);
class Hello extends React.Component {
render() {
return (
<div>
asdas
<svg className="main">
<rect x="20" y="20" width="100" height="40" fill="red" />
<ExclamationIcon width="30" x="0" y="0" />
</svg>
</div>
);
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);

Looks like this issue goes away if the height is set on the inner svg. I'm guessing that if the height is not set it automatically takes up all the available height and centres itself. I wish I had a better explanation but this completely stumped me.
JS Fiddle
const ExclamationIcon = props => (
<svg {...props} viewBox="0 0 140 140">
<circle fill="#f66868" cx="70" cy="70" r="70" />
<g transform="translate(58,30)">
<path fill="white" d="M 11,56.7 L 9,56.7 L 4.2,13.2 C 4,11.4 4,10 4,9 C 4,7 4.5,4.9 5.6,3.5 C 7,2.2 8.3,1.5 10,1.5 C 11.7,1.5 13,2.2 14.4,3.5 C 15.5,4.9 16,7 16,9 C 16,10 16,11.4 15.8,13.2 z M 10,64 A 6,6 0 1,1 10,76 A 6,6 0 1,1 10,64 z"/>
</g>
</svg>
);
class Hello extends React.Component {
render() {
return (
<div>
asdas
<svg className="main">
<rect x="20" y="20" width="100" height="40" fill="red" />
<ExclamationIcon width="30" height="30" x="0" y="0" />
</svg>
</div>
);
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);

CSS JS animate image along path and make dashes afterwards

I would like to animate an image on a path and show the route of the object (e.g a plane flying over a map). It should look like on this image:
But the dashes should apply after the object has reached the position, so the dashes were shown after the object.
I have tried multiple times, but I can do only once. Dash animation or plane on path . Does someone knows a solution.

animate a mask over the dashed path
move the plane along the same path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="200" width="400">
<defs>
<path id="basePath" d="M 50,150 A 280 500 0 0 1 350,150" />
<mask id="mask">
<use xlink:href="#basePath" stroke-width="3" stroke="white"
stroke-dasharray="1000,0" fill="none">
<animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0"
begin="0s" dur="5s" fill="freeze" />
</use>
</mask>
</defs>
<circle r="4" cx="50" cy="150" fill="grey" />
<circle r="4" cx="350" cy="150" fill="grey" />
<use xlink:href="#basePath" stroke-width="2" stroke-dasharray="10"
stroke="grey" fill="none" mask="url(#mask)"/>
<path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z"
fill="white" stroke="black" stroke-width="1.5">
<animateMotion rotate="auto" begin="0s" dur="5s" fill="freeze">
<mpath xlink:href="#basePath"/>
</animateMotion>
</path>
</svg>
The main thing to do is to calculate the length of the path, so you can set the stroke-dasharray values for the mask animation such that they keep pace with the animated plane. You can get that length in Javascript with
document.querySelector('#basePath').getTotalLength()

html5 How to morph or animate one SVG to another?

I did some searching but I have to admit, I have 0 experience with SVG, I've seen a bunch of modern libraries, such as Raphael, PaperJS, KineticJS, EaselJS but I have no idea of what would fit the goal here, maybe even CSS keyframes would do the trick.
Pointers to this problem would be greatly appreciated.
Goal
On the browser, I want to animate svg1 into svg2, using transition type ease-out
Constraints
Any javascript library, if required at all
Should be able to every element to the other element of same ID
morph shapes, paths, fill*, stroke*, cx, cy, rc, ry
Should work on current Firefox and Chrome, IE 10 would be nice to have
Should work in new mobiles such as iphone 5, nexus 4 and 7
Decent performance, even on mobiles
Indifferent if it renders as <svg> or <canvas>
svg1:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<linearGradient id="svg_6">
<stop stop-color="#828236" offset="0"/>
<stop stop-color="#7d7dc9" offset="0.99219"/>
</linearGradient>
<linearGradient id="svg_7" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#828236" offset="0"/>
<stop stop-color="#7d7dc9" offset="0.99219"/>
</linearGradient>
<linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_1">
<stop offset="0" stop-color="#828236"/>
<stop offset="0.99219" stop-color="#7d7dc9"/>
</linearGradient>
</defs>
<g>
<title>Layer 1</title>
<ellipse ry="145" rx="116" id="svg_2" cy="201" cx="317" fill-opacity="0.36" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="url(#svg_7)"/>
<ellipse ry="21" rx="10" id="svg_5" cy="137" cx="274" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/>
<ellipse ry="31" rx="17" id="svg_9" cy="114" cx="346" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/>
<path id="svg_14" d="m235,239c55.66666,-1.33333 133.33334,-71.66667 167,-4l-167,4z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
</g>
</svg>
svg2:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<linearGradient id="svg_6">
<stop offset="0" stop-color="#828236"/>
<stop offset="0.99219" stop-color="#7d7dc9"/>
</linearGradient>
<linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_7">
<stop offset="0" stop-color="#828236"/>
<stop offset="0.99219" stop-color="#7d7dc9"/>
</linearGradient>
<linearGradient id="svg_1" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#828236" offset="0"/>
<stop stop-color="#7d7dc9" offset="0.99219"/>
</linearGradient>
</defs>
<g>
<title>Layer 1</title>
<ellipse id="svg_2" fill="url(#svg_7)" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.36" cx="317" cy="201" rx="116" ry="145"/>
<ellipse id="svg_5" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="277.5" cy="132.5" rx="13.5" ry="25.5"/>
<ellipse id="svg_9" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="349.5" cy="110" rx="20.5" ry="35"/>
<path id="svg_14" fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m235,240c21.66666,81.66669 114.33334,96.33331 167,-4l-167,4z" />
</g>
</svg>
ps you can visualize here, by simply pasting the codes in the area.
I have no code to show, I didn't want to start off wrong. My intuition tells me there is a 50% chance that the best solution don't involve navigating those nodes one by one diffing then!

Have to mention that 2015 have brought us several pretty nice libraries for svg morph:
https://alexk111.github.io/SVG-Morpheus/
http://greensock.com/morphSVG (probably the best of the best, but you
have to buy their license)
https://github.com/gorangajic/react-svg-morph (for react)

As far as I can see you only want to morph paths
This is a nice tutorial: SVG Essentials/Animating and Scripting SVG
W3C spec for SVG Paths: w3.org/TR/SVG/paths
W3C spec for animation: w3.org/TR/SVG/animate
Here's an example: carto.net/svg/samples/path_morphing

paraphrasing:
Currently you have to use the same number of vertices in both path-elements, and they have to be of the same type and appear in the same order in the other path-description. You should also orient both polygons in the same direction (left-right and right-left would produce unwanted results).
So you can do it (see the link below for an example) but you need to plan it out so that you create shape A's path and shape B's path in the exact same way with identical curve types, points, etc.
I created one shape in illustrator
i duplicated that shape.
I modified the duplicate into a new shape, careful not to add vertices or change from bezier to linear curve type etc
fyi to confirm point count you can select the path, then go path>simplify and it will show you current points on that path...
I save that svg file, then copy/paste those paths into another svg with the animation information.
NOTE: the paths are placed within an element in the svg file that corresponds to the layer name that it's on in illustrator. If you keep both shapes on different layers in illustrator and name them clearly it will help keep your svg files organized.
NOTE #2: If you create your shape and it's very simple, ie only straight lines, it will likely get saved as a _polygon instead of a _path which I personally found difficult to animate, so I recommend adding a bezier handle to at least a single point(and the identical corresponding point in the second shape).

Indeed, there are quite a few libraries that allow svg morphing, as Darwin mentioned.
Some extras I've found were: snap.svg, KUTE.js, GSAP. Svg.js has a plugin for svg morph and I don't believe velocity.js has support for this yet.

If you can define the morphing as a list of changes instead of second SVG, you could use d3 http://d3js.org/ framework
It has a bit steep learning curve, but it gives you a lot of power. If you want something easier I suggest Raphael http://raphaeljs.com/ - capabilities are similiar, but it's easier to start.

Looking at a pure SVG option (ie. no Javascript) and building on the previous answers, here's a working example that might reduce the hairpulling for others.
<svg height="120px" width="120px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path>
<animate
dur="10s"
repeatCount="indefinite"
attributeName="d"
calcMode="spline"
keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
fill="freeze"
values="
M 336,0
c -97.2,0 -176,78.8 -176,176
c 0,18.7 2.9,36.8 8.3,53.7
c 0,0 0,0 -161.3,161.3
c -4.5,4.5 -7,10.6 -7,17
c 0,0 0,0 0,80
c 0,13.3 10.7,24 24,24
c 0,0 0,0 80,0
c 13.3,0 24,-10.7 24,-24
c 0,0 0,0 0,-40
c 0,0 0,0 40,0
c 13.3,0 24,-10.7 24,-24
c 0,0 0,0 0,-40
c 0,0 0,0 40,0
c 6.4,0 12.5,-2.5 17,-7
c 0,0 0,0 33.3,-33.3
c 16.9,5.4 35,8.3 53.7,8.3
c 97.2,0 176,-78.8 176,-176
C 512,78.8 433.2,0 336,0
Z
M 376,176.5
c -22.4,0 -40.5,-18.1 -40.5,-40.5
c 0,-10.5 4,-20 10.5,-27.2
c 7.4,-8.2 18.1,-13.3 30,-13.3
c 22.4,0 40.5,18.1 40.5,40.5
c 0,22.4 -18.1,40.5 -40.5,40.5
Z;
M 256,0
c -45,0 -85.8,15.8 -115.6,41.5
c -30.2,26.1 -49,62.4 -49,102.5
c 0,0 0,0 0,48
c 0,0 0,0 -18.3,0
c -35.3,0 -73.1,35.3 -73.1,64
c 0,0 0,0 0,192
c 0,35.3 32.8,64 73.1,64
c 0,0 0,0 78.9,0
c 0,0 0,0 104,0
c 0,0 0,0 107,0
c 0,0 0,0 75.9,0
c 40.3,0 73.1,-28.7 73.1,-64
c 0,0 0,0 0,-192
c 0,-35.3 -32.8,-64 -73.1,-64
c 0,0 0,0 -18.3,0
c 0,0 0,0 0,-48
c 0,-39.2 -17.9,-74.7 -47,-100.7
C 343.7,16.6 302.1,0 256,0
Z
M 164.6,192
c 0,0 0,0 0,-48
c 0,-44.2 40.9,-80 91.4,-80
c 50.5,0 91.4,35.8 91.4,80
c 0,0 0,0 0,48
c 0,0 0,0 24,0
Z;
M 336,0
c -97.2,0 -176,78.8 -176,176
c 0,18.7 2.9,36.8 8.3,53.7
c 0,0 0,0 -161.3,161.3
c -4.5,4.5 -7,10.6 -7,17
c 0,0 0,0 0,80
c 0,13.3 10.7,24 24,24
c 0,0 0,0 80,0
c 13.3,0 24,-10.7 24,-24
c 0,0 0,0 0,-40
c 0,0 0,0 40,0
c 13.3,0 24,-10.7 24,-24
c 0,0 0,0 0,-40
c 0,0 0,0 40,0
c 6.4,0 12.5,-2.5 17,-7
c 0,0 0,0 33.3,-33.3
c 16.9,5.4 35,8.3 53.7,8.3
c 97.2,0 176,-78.8 176,-176
C 512,78.8 433.2,0 336,0
Z
M 376,176.5
c -22.4,0 -40.5,-18.1 -40.5,-40.5
c 0,-10.5 4,-20 10.5,-27.2
c 7.4,-8.2 18.1,-13.3 30,-13.3
c 22.4,0 40.5,18.1 40.5,40.5
c 0,22.4 -18.1,40.5 -40.5,40.5
Z;
"/>
</path>
</svg>

Categories

Resources