I am trying to display Arabic text by replacing English words in span elements. But it interchanged by its words.
I have tried by adding direction, xml: lang, unicode-bidi to svg attributes. It changes to RTL but it did not changes order
Please refer this fiddles:
Expected output with english words modelOutput.
<!DOCTYPE html>
<html>
<head>
<title>SVG with english words</title>
</head>
<body>
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
dominant-baseline="undefined"><tspan
x="19" fill="#dbdbdb">Browsers</tspan><tspan
x="25" dy="27" fill="#dbdbdb">Opera : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
</body>
</html>
Actual output actual.
<!DOCTYPE html>
<html>
<head>
<title>SVG with Arabic words</title>
</head>
<body>
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined"
dominant-baseline="undefined"><tspan
x="19" fill="#dbdbdb">ذكي متصفح</tspan><tspan
x="25" dy="27" fill="#dbdbdb">كروم : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
</body>
</html>
I expect that Browsers will be replaced with متصفح ذكي. Similarly opera with ايفون.
Actual output image actual.
Expected output expect.
Can anyone help me to acheive this?
The problem arises because the sequence " : " has no defined direction. Unicode has a group of bidirectional control characters that help with the interpretation of such situations. If you insert a left-to-right mark between the كروم and the following interpunction, it is made clear everything that follows goes left-to-right.
While in HTML the mark could be written as , this does not work inside the SVG namespace, which is pure XML. There you have to use the numeric entity instead. The extra <tspan> I introduced is not strictly neccesary, but it makes reading of the code a bit easier - otherwise the apparent order on the screen would be a bit confusing.
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
dominant-baseline="undefined"><tspan
x="19">ذكي متصفح</tspan><tspan
x="25" dy="27">كروم</tspan><tspan> : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
Wouldn't live be easier without bugs? Theoretically, that should be the solution, and in Chrome in fact it is. In Firefox, the width of a rtl <tspan> is computed wrong, and the following ltr part disappears to the right. The best workaround I can find is to change the layout a bit so that the percentage number appears right-aligned at the end of the second line:
<svg id="container_svg" width="117.5" height="71.5" opacity="1">
<g id="container_group" opacity="1">
<path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path>
<text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start"
dominant-baseline="undefined"><tspan
x="19">ذكي متصفح</tspan><tspan
x="25" dy="27">كروم</tspan><tspan text-anchor="end" x="107"> : </tspan><tspan
fill="#ffffff" style="font-weight:bold">37%</tspan></text>
<path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path>
<defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs>
<g id="container_trackball_group">
<ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse>
</g>
</g>
</svg>
Related
What I am trying to accomplish is several buttons aligned like a circle. It is supposed to be circular although it looks like an egg. I hope the image makes sense.
It's not super easy but you can do it. You would basically do something like this only you overlay another circle on the centre.
I think the best way here is to use svg.
Take a look here:
svg{width:170px}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<path fill="red" d="M 13.3974 50 A 100 100 0 0 1 186.6025 50 L 143.3012 75 A 50 50 0 0 0 56.6987 75 Z"></path>
<path fill="blue" d="M 186.6025 50 A 100 100 0 0 1 100 200 L 100 150 A 50 50 0 0 0 143.3012 75 Z"></path>
<path fill="green" d="M 100 200 A 100 100 0 0 1 13.3974 50 L 56.6987 75 A 50 50 0 0 0 100 150 Z"></path>
<g dominant-baseline="middle" text-anchor="middle" fill="white">
<path id="btn1" d="M 62.5 35.048 A 75 75 0 0 1 137.5 35.048" fill="transparent" />
<path id="btn2" d="M 175 100 A 75 75 0 0 1 137.5 164.9519" fill="transparent" />
<path id="btn3" d="M 62.5 164.9519 A 75 75 0 0 1 25 100" fill="transparent" />
<text>
<textPath startOffset="50%" xlink:href="#btn1">
Button 1
</textPath>
</text>
<text>
<textPath startOffset="50%" xlink:href="#btn2">
Button 2
</textPath>
</text>
<text>
<textPath startOffset="50%" xlink:href="#btn3">
Button 3
</textPath>
</text>
</g>
<text x="100" y="100" dominant-baseline="middle" text-anchor="middle" fill="black">Hello world!</text>
</svg>
You can check here about svg path, and here about text path.
For calculating the x and y of the points on the circle, note that x = centerX + Math.cos(angle) * radius and y = centerY + Math.sin(angle) * radius.
For example, at the example above the viewportis 200*200, so centerX = 100, centerY = 100, with outer radius 100, and inner radius 50. the top part going from angle -5*Math.PI/3, so the x point is 100 + Math.cos(-5*Math.PI/3)*100 = 13.3974 and y point is 100 + Math.sin(-5*Math.PI/3)*100 = 50 and so on
My Svg animation not working as my expectation in my page,The preview looks good, but it not work on my page. here is my svg code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="450" width="450" margin-top="20px">
<image x="0" y="0" width="450" height="450" xlink:href="https://test.creapowa.com/ke/data/User/Minty/home/desktop/Elastic/img/roundtripplain.svg"></image>
<defs>
<path id="basePath" d="M 120,150 A 280 500 0 0 1 320,145 L320 145 360 150 "></path>
<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" repeatCount="indefinite"></animate>
</use>
</mask>
</defs>
<circle r="4" cx="120" cy="150" fill="#c86706"></circle>
<circle fill="#c86706" cy="150" cx="360" r="4"></circle>
<use xlink:href="#basePath" stroke-width="2" stroke-dasharray="10" stroke="#c86706" fill="none" mask="url(#mask)"></use>
<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="#fef1ba" stroke="black" stroke-width="1.5">
<animatemotion rotate="auto" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#basePath"></mpath>
</animatemotion>
</path>
<defs>
<path id="basePath1" d="M 330,330 A 500 1500 0 0 1 120,330"></path>
<mask id="mask1">
<use xlink:href="#basePath1" 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" repeatCount="indefinite"></animate>
</use>
</mask>
</defs>
<circle r="4" cx="120" cy="330" fill="#c86706"></circle>
<circle fill="#c86706" cy="330" cx="330" r="4"></circle>
<use xlink:href="#basePath1" stroke-width="2" stroke-dasharray="10" stroke="#c86706" fill="none" mask="url(#mask1)"></use>
<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="#fef1ba" stroke="black" stroke-width="1.5">
<animatemotion rotate="auto" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#basePath1"></mpath>
</animatemotion>
</path>
</svg>
But in my page( Chrome browser ), The stroke-dasharray and are missing and the coordinate isn't in the right place as my expectation in the upper part, its good in the lower part. like image below:
Stroke-dash are missing in the top part and coordinate is not in the right place
Did i need to add more function? Please help me to figure out,
Thank you,
The use tag in my SVG works on Chrome latest versions (58, 59, maybe 50+),
but not work on Chrome 46 (maybe 40+). why?
<svg>
<defs>
<g id="diamond" viewBox="0 0 120 60" enable-background="new 0 0 120 60">
<path d="M 11 -24 L 44 -6 Q 55 0 44 6
L 11 24 Q 0 30 -11 24
L -44 6 Q -55 0 -44 -6
L -11 -24 Q 0 -30 11 -24" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="2px" stroke-miterlimit="10"></path>
</g>
</defs>
<g>
<use href="#diamond" transform="translate(60,30)" class="diamond" style="opacity: 1;"></use>
</g>
</svg>
The ability to write href rather than xlink:href is fairly new. It's a part of the SVG 2 specification. The SVG 1.1 specification only defines xlink:href.
If you need to target old browsers, or Safari, you'll need to use xlink:href as well or instead of href.
I made a responsive animation grid with SVG, but I dont know why my circles are stretched. When I resize window in some proportions, then circles looks nice.
There you can see - JSFiddle
This is my SVG Code
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path id="firstLine" d="M 0 100 L 50 0, M 50 0 L 100 100 ,M 100 100 L 0 50 ,M 0 50 L 100 0,M 100 0 L 0 100" class="first-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<path id="secondLine" d="M 100 100 L 0 0, M 0 0 L 100 50, M 100 50 L 0 100, M 0 100 L 25 0, M 25 0 L 50 100, M 50 100 L 75 0, M 75 0 L 100 100" class="second-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<path id="thirdLine" d="M 50 100 L 0 0, M 0 0 L 25 100, M 25 100 L 50 0, M 50 0 L 75 100, M 75 100 L 100 0, M 100 0 L 50 100" class="third-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#firstLine"/>
</animateMotion>
</circle>
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#secondLine"/>
</animateMotion>
</circle>
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#thirdLine"/>
</animateMotion>
</circle>
<circle cx="35" cy="20" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
</circle>
</svg>
Maybe you dont need it now but I could do it giving the viewbox the desired ratio:
i.e: 0 0 100 100 for an square ratio
0 0 25 100 for an vertical ratio
0 0 100 25 for a horizontal ratio.
Then give to the svg tag a width and height of 100% and put the svg tag inside a div, this way I can keep the ratio of the circles, lines, other draws without stretching when the user resizes the window.
I am trying to achieve animation for a balloon. I want the thread to move a bit as if the balloon is floating in the air. I am able to get the movement but for some reason the position of the thread has gone wrong. I understand the positioning values of thread is wrong but how do i match it with the balloon?
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="595.28" height="841.89" viewPort="0 0 595.28 841.89">
<g>
<path id="thread" fill="none" stroke="#010101" d="M 302 540 l 1 -150">
<animate attributeType="XML" attributeName="d" values="M60 302 c0 10 -10 90 0 131;
M60 302 c0 10 3 90 0 136;
M60 302 c0 10 10 90 0 138;
M60 302 c0 10 -3 90 0 136;
M60 302 c0 10 -10 90 0 131" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" />
</path>
<path fill="none" stroke="#EF393C" stroke-width="1.028" stroke-miterlimit="10" d="M318.682 354.28c-25.82-22.654-68.935 16.096-49.36 46.686 15.468 24.175 49.806 30.21 66.513 5.493 8.354-12.358 9.695-25.44 1.834-39.134-6.35-11.054-20.36-19.99-30.232-19.99"></path>
<path fill="#EF393C" d="M338.955 371.226c-.933-2.055-1.78-4.726-3.24-6.524-.73-.903-1.504-1.738-2.353-2.547-.828-.783-1.63-1.45-2.41-2.053-3.12-2.377-4.55-5.104-7.417-6.565-.697-.35-.936-.977-1.63-1.302-1.694-2.052-4.723-1.792-7.653-3.91-2.03-.31-3.71-1.208-6.188-1.303-1.238-.044-2.98-.385-4.36-.29-.675.046-1.396.12-2.223.233-.79.116-1.867-.505-2.638-.317-1.222.11-1.923.284-3.247.465-1.267.175-2.32.325-3.94.694-1.524.362-2.95.867-4.406 1.392-2.9 1.084-6.554 2.604-8.812 4.636-1.528 1.367-2.778 1.75-3.876 3.456-.605.43-1.726 1.653-2.28 2.117-1.227 1.016-1.982 2.665-2.78 3.54-1.71 1.882-2.156 3.628-3.393 6.304-.48 1.042-1.71 3.7-2.046 4.91-.918 2.237-1.293 6.39-1.637 8.8-.43 2.94.146 5.817.52 8.548.374 2.736 1.067 5.28 1.936 7.616 1.75 4.68 3.137 7.178 5.728 10.64 2.608 3.458 5.764 6.442 8.8 9.208 1.323 1.27 2.26 2.32 3.48 2.66 1.355 2.065 3.347 1.8 5.576 3.446.28.206.564.41.857.61.433.29.875.576 1.324.853.897.555 1.82 1.077 2.767 1.557 1.892.962 3.866 1.757 5.875 2.264.417.103.837.188 1.258.268-1.608 1.887-1.022 2.784-.944 2.887.19.247.51.385.886.384.03 0 .06.006.09-.002.297-.068.606-.03 1.06-.642.246.35 1.366.53 2.106.633.47.063.914-.22 1.104-.707.11-.283.305-1.128-.653-2.262.395-.017.788-.036 1.183-.092 2.018-.298 3.92-1.01 5.77-1.93 1.846-.922 3.622-2.02 5.37-3.138l1.308-.846.62-.405.425-.248c.56-.33.896-.708 1.457-1.004l1.092-.836c2.068-1.81 3.067-2.996 3.746-3.257 2.39-2.125 2.548-2.06 4.785-4.49 1.12-1.222 1.73-2.037 2.865-3.478.568-.727 1.566-2.566 2.17-3.447.3-.44.603-.908.943-1.462.273-.46.52-.893.755-1.325 1.876-3.475 2.75-6.212 3.664-9.858.896-3.645 1.266-7.83 1.16-11.826-.118-3.973-.685-7.924-2.555-12.054zm-47.22 1.378c.04-.043.075-.096.114-.14-.003.045-.036.093-.116.14zm10.388 2.03c.03.008.063.02.094.027l.01.003.11.032c-.08.038-.156.082-.24.12 0-.068.016-.122.026-.18zm2.568 3.93H304.7h-.01zm.345-.048c.035-.004.074-.012.107-.015l.08-.004h.03c-.072.002-.145.012-.217.02z"></path>
</g>
</svg>
A translate transform can move the path.
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="595.28" height="841.89" viewPort="0 0 595.28 841.89">
<g>
<path id="thread" transform="translate(242, 130)" fill="none" stroke="#010101" d="M 302 540 l 1 -150">
<animate attributeType="XML" attributeName="d" values="M60 302 c0 10 -10 90 0 131;
M60 302 c0 10 3 90 0 136;
M60 302 c0 10 10 90 0 138;
M60 302 c0 10 -3 90 0 136;
M60 302 c0 10 -10 90 0 131" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" />
</path>
<path fill="none" stroke="#EF393C" stroke-width="1.028" stroke-miterlimit="10" d="M318.682 354.28c-25.82-22.654-68.935 16.096-49.36 46.686 15.468 24.175 49.806 30.21 66.513 5.493 8.354-12.358 9.695-25.44 1.834-39.134-6.35-11.054-20.36-19.99-30.232-19.99"></path>
<path fill="#EF393C" d="M338.955 371.226c-.933-2.055-1.78-4.726-3.24-6.524-.73-.903-1.504-1.738-2.353-2.547-.828-.783-1.63-1.45-2.41-2.053-3.12-2.377-4.55-5.104-7.417-6.565-.697-.35-.936-.977-1.63-1.302-1.694-2.052-4.723-1.792-7.653-3.91-2.03-.31-3.71-1.208-6.188-1.303-1.238-.044-2.98-.385-4.36-.29-.675.046-1.396.12-2.223.233-.79.116-1.867-.505-2.638-.317-1.222.11-1.923.284-3.247.465-1.267.175-2.32.325-3.94.694-1.524.362-2.95.867-4.406 1.392-2.9 1.084-6.554 2.604-8.812 4.636-1.528 1.367-2.778 1.75-3.876 3.456-.605.43-1.726 1.653-2.28 2.117-1.227 1.016-1.982 2.665-2.78 3.54-1.71 1.882-2.156 3.628-3.393 6.304-.48 1.042-1.71 3.7-2.046 4.91-.918 2.237-1.293 6.39-1.637 8.8-.43 2.94.146 5.817.52 8.548.374 2.736 1.067 5.28 1.936 7.616 1.75 4.68 3.137 7.178 5.728 10.64 2.608 3.458 5.764 6.442 8.8 9.208 1.323 1.27 2.26 2.32 3.48 2.66 1.355 2.065 3.347 1.8 5.576 3.446.28.206.564.41.857.61.433.29.875.576 1.324.853.897.555 1.82 1.077 2.767 1.557 1.892.962 3.866 1.757 5.875 2.264.417.103.837.188 1.258.268-1.608 1.887-1.022 2.784-.944 2.887.19.247.51.385.886.384.03 0 .06.006.09-.002.297-.068.606-.03 1.06-.642.246.35 1.366.53 2.106.633.47.063.914-.22 1.104-.707.11-.283.305-1.128-.653-2.262.395-.017.788-.036 1.183-.092 2.018-.298 3.92-1.01 5.77-1.93 1.846-.922 3.622-2.02 5.37-3.138l1.308-.846.62-.405.425-.248c.56-.33.896-.708 1.457-1.004l1.092-.836c2.068-1.81 3.067-2.996 3.746-3.257 2.39-2.125 2.548-2.06 4.785-4.49 1.12-1.222 1.73-2.037 2.865-3.478.568-.727 1.566-2.566 2.17-3.447.3-.44.603-.908.943-1.462.273-.46.52-.893.755-1.325 1.876-3.475 2.75-6.212 3.664-9.858.896-3.645 1.266-7.83 1.16-11.826-.118-3.973-.685-7.924-2.555-12.054zm-47.22 1.378c.04-.043.075-.096.114-.14-.003.045-.036.093-.116.14zm10.388 2.03c.03.008.063.02.094.027l.01.003.11.032c-.08.038-.156.082-.24.12 0-.068.016-.122.026-.18zm2.568 3.93H304.7h-.01zm.345-.048c.035-.004.074-.012.107-.015l.08-.004h.03c-.072.002-.145.012-.217.02z"></path>
</g>
</svg>