I am trying to make a shape like this
and i managed to get this sofar
But i cant get the right arc to go outwards instead of inwards.
I cant find any help online how to do this. I tried rotation and playing around with the rx,ry but no luck.
Here is the JSFiddle to it
JsFiddle
<svg height="200" width="300">
<g stroke="none" fill="blue">
<path d="
M 150 0
a 1 1 0 0 0 0 100
l -100 0
a 1 1 0 0 0 0 -100
l 100 0
Z
"/>
</g>
</svg>
On the first arc, you simply need to flip the sweep-flag to "clockwise":
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
<svg height="200" width="300">
<g stroke="none" fill="blue">
<path d="
M 150 0
a 1 1 0 0 1 0 100
l -100 0
a 1 1 0 0 0 0 -100
l 100 0
Z
"/>
</g>
</svg>
Related
I created a circle in Inkscape and switched off the fill so that only the stroke is visible and also made the starting point 45 degrees and the ending point 315 degrees.
I then rotated it 90 degrees and this is the end result.
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="300" height="300" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg">
<path transform="rotate(90)" d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" opacity=".55814" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.583"/>
</svg>
And it renders like this:
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="300" height="300" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg">
<path transform="rotate(90)" d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" opacity=".55814" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.583"/>
</svg>
I want to be able to overlay a copy and control the length of the stroke starting at the bottom left corner. So for example display only 22% of the total length of the overlay or display the segment from the 315 degree end point to 255.60 degrees?
How would we go about this (Effectively programmatically doing the inkscape start and end controls)?
Probably easiest way would be to use pathLength attribute like:
pathlength="100" stroke-dasharray="10 100"
Altering the the first value of the stroke-dasharray would express the "percentage" (10 in above example makes it occupy 10% of the total length). Moving that segment along the path is possible thanks negative stroke-dashoffset. Funky perk of this approach is that it can be used for "tracing" any compact path:
<body bgcolor="darkslategray" text="snow">
Length:
<input id="l" type="range" value="10" max="80"
oninput="p.setAttribute('stroke-dasharray', value + ' 100');
o.max = 100 - value; nextElementSibling.value = value;
"> <output>10</output><br>
Offset:
<input id="o" type="range" value="20" max="90"
oninput="p.setAttribute('stroke-dashoffset', - value);
l.max = 100 - value; nextElementSibling.value = value;
"> <output>20</output><br>
<svg width="300" height="150" viewBox="0 0 80 80" fill="none" stroke-linecap="round"
stroke="#000" stroke-width="10">
<path d="M13 66 A 35 35 0 1 1 65 65 A 10 10 1 1 1 40 45 A 7 7 1 1 0 25 35" />
<path d="M13 66 A 35 35 0 1 1 65 65 A 10 10 1 1 1 40 45 A 7 7 1 1 0 25 35"
id="p"
stroke="#F99"
stroke-width="4"
pathlength="100.1"
stroke-dashoffset="-20"
stroke-dasharray="10 1000"
/></svg>
<!--
* 100.1 pathlength value is to keep zero length "dot" at the final 100 offset
* 1000 array "gap" value is here just to be sure; any value greater or equal pathlength should do.
-->
The following snippet takes a percentage as input and then computes the parameters of the elliptical arc curve command A in the <path> element. 100% corresponds to a three-quarter-arc.
var path = document.getElementById("path");
function draw(v) {
var theta = v * Math.PI * 0.015;
var large = theta <= Math.PI ? 0 : 1;
path.setAttribute("d", `M1,0 A1,1 0 ${large} 1 ${Math.cos(theta)},${Math.sin(theta)}`);
}
<svg width="150" height="150" viewBox="-1.2 -1.2 2.4 2.4"
transform="rotate(135)">
<path d="M1,0 A1,1 0 1 1 0,-1"
fill="none" opacity=".55814"
stroke="#000" stroke-linecap="round"
stroke-linejoin="round" stroke-width=".25"/>
<path id="path"
fill="none"
stroke="red" stroke-linecap="round"
stroke-linejoin="round" stroke-width=".1"/>
</svg>
<form onsubmit="draw(this.v.value); return false;">
<input name="v"/>%
<input type="submit" value="Draw"/>
</form>
(After reading myf's answer, it became clear that you want two arcs in total. I have adapted my code accordingly, but the idea remains basically the same.)
How can I use stroke-offset to animating path in this SVG? I very appreciate it if anyone can help me.
<svg xmlns="http://www.w3.org/2000/svg" id="logo" width="200" viewBox="0 0 132.64 140.91">
<path id="path1" d="M123.26 15.4C115.58 5 103.78 0 87.17 0H0v6.73h87.17c15.08 0 25.63 4.35 32.26 13.3 7.25 9.78 7.93 18.38 7.93 38.71v23.32c0 20.4-.68 29-7.93 38.83-8.65 11.67-20.62 13.29-32.26 13.29H5.27V33.26H0v107.65h87.17c12.21 0 26-1.83 36.08-15.39 8.95-12.08 9.39-23.79 9.39-43.46V58.74c0-19.6-.44-31.28-9.38-43.34z" fill="#f96464"/>
<path id="path2" d="M109.31 25.48c7.84 9.08 7.76 19.83 7.76 32v25.89c0 12.13 0 22.91-7.83 32-6.79 7.85-15 8.16-25.69 8.16H15.8V33.26h-7v96.42h78.37c11.74 0 22.23-1.79 29.7-11.88 6.11-8.24 7-15 7-35.74V58.74c0-20.72-.87-27.39-7-35.63-6.87-9.22-17.76-11.89-29.7-11.89H0v6.19h83.55c10.67 0 18.97.23 25.76 8.07z" fill="#00aad8"/>
<path id="path3" d="M103.41 33.8c4.67 5.41 4.88 11.38 4.87 23.29v26.32c0 12.09-.2 18.14-4.94 23.62-4.09 4.73-9.42 5.25-19.79 5.25h-59v-79h-5.24V119h64.24c10.75 0 17.69-.46 23.33-7 6.68-7.72 6.68-16.94 6.67-28.62V57.09c0-11.52 0-20.62-6.6-28.28-5.7-6.58-12.61-6.91-23.4-6.91H0v6.73h83.55c10.69 0 15.8.49 19.86 5.17z" fill="'#b7c406"/>
</svg>
This path is drawn with fill. So, I can not use 'stroke-dashoffset'.
Is there any way i could achieve this (see pictures), i have tried with fill="white" but that wont give white color to those parts where i want it, its easier to understand with picture below:
what i have done at the moment:
what i want to achieve:
my code:
import React from "react";
function Graph() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 64 64"
>
<path
fill="white"
d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
></path>
<path
fill="white"
d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
></path>
<path
fill="white"
d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
></path>
</svg>
);
}
export default Graph;
You can use react style to insert color to background
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 64 64"
style={{ backgroundColor: "black" }}
>
<path
fill="white"
d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
></path>
<path
fill="white"
d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
></path>
<path
fill="white"
d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
></path>
</svg>
I think your snippet is mostly fine as it is.
If you change all 3 fill="white" to black, and set a white background, it will look as expected
created SVG circle using path, filled the stroke with animation for particular seconds. the animation finished before the specified seconds gets over. how to resolve
<svg class="progress" id="value-svg" viewBox="0 0 115 115" data-value="66">
<path class="bg"
d="M 107,57 A 50,50 0 0 1 56,107 50,50 0 0 1 6,57 50,50 0 0 1 56,6 50,50 0 0 1 107,57 Z"
style="fill:none;stroke-width:12;stroke-opacity:1" />
<path class="meter"
d="M 107,57 A 50,50 0 0 1 56,107 50,50 0 0 1 6,57 50,50 0 0 1 56,6 50,50 0 0 1 107,57 Z"
style="fill:none;stroke-width:12;stroke-opacity:1"
stroke-dasharray="318" stroke-dashoffset="318" />
<text x="50%" y="50%" id="progress-text" text-anchor="middle" dy=".3em">04:00</text>
</svg>
and set stroke-dashoffset from script
value[i].style.transition = value[i].style.WebkitTransition = `stroke-dashoffset ${this.waitime}s ease-in-out`;
value[i].style.strokeDashoffset = '0';
I want to draw a partial arc using SVG. According to the docs, the centre of the circle is calculated automatically. But my arc overflows the circle. It is easier to demonstrate it with a picture:
<svg width="500px" height="500px" viewBox="0 0 100 100" style="border: navy solid 1px;">
<g transform="translate(10 10) scale(0.5 0.5)">
<path d="M0 50 A1 1 0 0 1 100 50 Z" fill="blue"></path>
<path d="M0 50 A1 1 0 0 1 50 0 Z" fill="purple" opacity="0.7"></path>
</g>
</svg>
Here is the link to the codepen link.
You can draw arcs before blue circle (as I draw red one) or make redrawing of circle segment (the last line - I made it green to emphasize but must be blue). So combination of circle arc + segment gives moon crescent form
<path d="M50 50 L50 0 A1 1 0 0 1 100 50 Z" fill="red" opacity="0.7"></path>
<path d="M0 50 A1 1 0 0 1 100 50 Z" fill="blue"></path>
<path d="M0 50 A1 1 0 0 1 50 0 Z" fill="purple" opacity="0.7"></path>
<path d="M50 0 A50 50 0 0 0 0 50 Z" fill="green"></path>