How to draw a shape vector for "quarter" circle - vector

I've been going round and round on this. Apparently, my usual muddle-through-the-geometry approach is not working.
I'm just trying to create a perfect "quarter" circle sector in draw.io.
I read through https://desk.draw.io/support/solutions/articles/16000052874-how-to-create-and-edit-shapes-
But it is very vague.
Here is my best attempt, but it isn't right, the edges are to hard:
<shape name="Quarter Circle" h="49" w="49" aspect="variable" strokewidth="inherit">
<connections>
<constraint x="0.5" y="0" perimeter="0" name="N"/>
<constraint x="0.5" y="1" perimeter="0" name="S"/>
</connections>
<background>
<path>
<move x="49" y="0"/>
<line x="0" y="0"/>
<line x="0" y="49"/>
<arc rx="90" ry="90" x-axis-rotation="0" large-arc-flag="0" sweep-flag="0" x="49" y="0"/>
<close/>
</path>
</background>
<foreground>
<fillstroke/>
</foreground>
</shape>
I really want a quarter circle that if you rotate four of them, you end up with a perfect circle.


The arc radii (rx and ry) have to match the shape size to achieve what you want. Just replace your arc line with this:
<arc rx="49" ry="49" x-axis-rotation="0" large-arc-flag="0" sweep-flag="0" x="49" y="0"/>

Related

Creating a custom "cross section" line (svg) for Recharts

I am currently using Recharts for React.
I am trying to recreate this line style:
This is what I've been able to achieve until now, but what I am missing is for the middle line to be a dashed line, and maybe for the start/end of the line to taper off.
I am pretty new to SVG world, so I am not sure how to proceed.
I've used a filter to create the current line.
Here is my current code:
<defs>
<filter id="crossSection">
<feMorphology in="SourceGraphic" result="a" operator="dilate" radius="3" />
<feMorphology in="SourceGraphic" result="b" operator="dilate" radius="1.8" />
<feComposite in="SourceGraphic" in2="a" result="aa" operator="xor" />
<feComposite in="aa" in2="b" operator="xor" />
</filter>
</defs>
<Line
strokeWidth={2}
yAxisId="section"
activeDot={{ r: 8 }}
dot={false}
type="monotone"
dataKey="section"
stroke="black"
filter="url(#crossSection)"
/>
Any insight or help would be greatly appreciated!

SVG: How to programmatically center an <Text/> based on <Rect/> position and size

I've made this sudoku board on Figma
and I want to put this on my website using ReactJS. My goal is to add events listeners to the rects and change the value based on user pressing 1-9 numbers (just like sudoku works). The problems is that I don't know how to programmatically position text based on rect (x,y) position and size.
For example:
<g x="7.49219" y="4.37108" width="34.8721" height="34.8721">
<rect
x="7.49219"
y="4.37108"
width="34.8721"
height="34.8721"
rx="4.75"
stroke="#D5D5D5"
stroke-width="0.5"
/>
<text id="text_test" fill="red" fontSize={24}>
5
</text>
</g>
I've calculated the text position as
x = rectXPos + (rectWidth / 2)
y = rectYPos + (rectHeight / 2)
but it gives me:
I thought considering the text width and height in the formula to center it. But I just get the text size in pixels on the browser
So when I try to update the formula to
x = rectXPos + (rectWidth / 2) - (textWidth / 2)
y = rectYPos + (rectHeight / 2) + (textHeight / 2)
I get this:
The X position works but the Y don't.
What am I missing?
Is there a better way to implement what I want?

You can rearrange the text element with the attributes text-anchor="middle" and dominant-baseline="middle" and set the position the middle of the expected "frame". So, in this case the <rect> and the <text> have the same starting point. The <rect> is 40x40 and then the <text> needs to be in 20,20.
You can see from the example that you can use <g> and its attribute transform/translate to move around the elements. This gives mush more readable code now that you have 9x9 elements that need to be placed.
If this is going to be used in a browser I will suggest you to use CSS for styling. Like replace the attribute stroke etc. with a stylesheet like:
svg.sudoku rect {
stoke: #D5D5D5;
stroke-width: .5px;
}
<svg viewBox="0 0 200 200">
<g transform="translate(5 5)">
<g transform="translate(0 0)">
<rect
width="40"
height="40"
rx="4.75"
stroke="#D5D5D5"
stroke-width="0.5"
fill="none"
/>
<text x="20" y="20" text-anchor="middle" dominant-baseline="middle" fill="red" font-size="20">5</text>
</g>
<g transform="translate(45 0)">
<rect
width="40"
height="40"
rx="4.75"
stroke="#D5D5D5"
stroke-width="0.5"
fill="none"
/>
<text x="20" y="20" text-anchor="middle" dominant-baseline="middle" fill="red" font-size="20">2</text>
</g>
</g>
</svg>

Applying filters on SVG straight lines make line disappear - discussing workaround for flood color filters [duplicate]

I have the following SVG document:
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
<path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
</g>
</svg>
In Firefox, when I open the SVG document, it simply shows a very thin (not 5 wide) vertical line. In Chrome, it doesn't show anything (nor does it in codepen, here: https://codepen.io/jwir3/pen/BJBqEK ).
I'm not quite sure what I'm doing incorrectly here, but it has something to do with the filter, because, if I remove the filter: url(#dropShadow) from the path definition, the line shows up as expected.

You can't use objectBoundingBox units if your shape has no height or width.
Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.
The default for filterUnits is objectBoundingBox units so you need to change that to userSpaceOnUse i.e.
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
<title>Line Drop Shadow</title>
<description>A red line with 5px width thickness and round caps, having a drop-shadow. This highlights the regression documented in PURP-1017.</description>
<defs>
<filter id="dropShadow" filterUnits="userSpaceOnUse">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round">
<path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1"></path>
</g>
</svg>

When processing filters, different browsers process in different stroke.
Chrome considers stroke as a value with a zero pixel, so it does not include it in the filter region.
Therefore, to make the result look the same in different browsers, it is better to replace path with stroke-width ="5", a rectangle with a width of 5px withoutstroke (stroke="none")
In addition, the default values for the filter area are: x =" - 10% "" y = "- 10%" `` width = "120%" `` height = "120%"- large blur sizes are usually truncated .
By default, filterUnits = "objectBoundingBox" and therefore the values are specified in percentages.
To make it easier to calculate the size of the filter region action, specify the value offilterUnits = "userSpaceOnUse" and then you can specify all dimensions for thefilter region` in pixels.
<svg preserveAspectRatio="xMinYMin meet" width="100%" height="100%" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg" >
<defs>
<filter id="dropShadow" filterUnits = "userSpaceOnUse" x="4" y="0" width="12" height="472">
<feDropShadow dx="6" dy="4" stdDeviation="3"></feDropShadow>
</filter>
</defs>
<g id="Artboard" fill="#FF0000" filter="url(#dropShadow)" >
<!-- <path style="filter: url(#dropShadow)" d="M7.5,8.5 L7.5,471.5" id="path-1" stroke-width="5" ></path>-->
<rect x="5" y="5" width="5" stroke="none" height="463" />
</g>
</svg>

Swapping to userSpaceOnUse is the correct answer in most circumstances but has the following limitations:
The filter effects region will apply from -10% to 120% of the canvas, rather than the bounding box of the element (using more memory and processing time)
For large dynamic SVGs (such as created by d3) it can be hard to calculate the required filter x/y/width/height to ensure the filter applies to all elements.
An alternate (less elegant) solution is to apply the filter to a <g> and use a hidden node within this to give the group the correct width or height:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow" width="20">
<feDropShadow dx="4" dy="0" stdDeviation="4"></feDropShadow>
</filter>
</defs>
<g id="Artboard" style="filter: url(#dropShadow)">
<circle r="5" cx="0" cy="0" visibility="hidden"></circle>
<path d="M10,10 L10,100" stroke-width="5" stroke="#FF0000" fill="#000000" stroke-linecap="round"></path>
</g>
</svg>

SVG Animation with CSS

iam currently trying to get a pinch to zoom animation done, with two different svg graphics. Is there a way, to transform or blend the first svg image into the second one, without using javascript, and maybe even without css?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="-13 15 100 100" enable-background="new -13 15 100 100" xml:space="preserve">
<g id="Ebene_11">
<path fill="#010202" d="M78.5,93.1l0.8,1.4l-24.3,10l-0.4-1.4c0,0-0.8-2.6-3-4.2C49.7,97.4,29.7,81.2,30.2,75
c0.3-3.2-0.8-5.4-1.6-7c-0.7-1.3-1.3-2.5-0.7-3.7c0.4-0.9,1.3-1.5,2.6-1.7c1.8-0.3,4.8,0.3,6.8,2.5c1.7,1.8,2.8,4.8,3.9,7.7
c0.2,0.5,0.6,1.4,1,1.8c2.4,2.9,4.2,2.6,6,0.8c1.9-1.9,1.6-13.6-0.8-15c-1.8-1-4-1-6.8-1.9c-2.9-0.9-6.1-1.7-5.9-5.2
c0.3-1.6,0.7-2.4,2.8-3.2c4.7-1.8,14.9-2.2,19.5,2.5c1.2,1.2,2.2,1.8,2.8,3.1c0.7-0.4,2.3-1.1,3.4-1.1c3.8,0,14.4,16.8,14.5,16.9
c1.4,2.6-0.3,12.5-0.9,15.5C76.5,89.1,78.5,93.1,78.5,93.1z M56.6,100.9l18.8-7.8c-0.7-1.6-1.7-4.3-1.2-6.6
c1.1-5.7,1.8-12.5,1.2-13.7c-1.7-3.1-10.1-14.7-12.2-15.5c-0.8,0-1.3,0.4-1.6,0.6c0.4,1.2,0.6,2.4,0.9,3.4c0.3,1.4,0.6,2.6,1,3.6
c0.3,0.7,0,1.5-0.7,1.8c-0.7,0.3-1.5,0-1.8-0.7c-0.6-1.3-0.9-2.7-1.2-4.2c-0.3-1.2-0.5-2.5-1-3.7c0,0,0-0.1-0.1-0.1
c-0.6-1.6-2-2.8-3.4-4.3c-3.7-3.7-12.8-3.3-16.6-1.8c-1.6,0.6-1.7,1.5-1.7,1.7c-0.1,1.1,1,1.6,4.1,2.6c3.2,1,7.8,0.8,9.6,4.6
c0.3,0.6,0.9,3.6,0.9,4.6c0.4,8.3-0.2,10.8-4.3,13.2c-3.1,1.2-7.2-0.9-8.8-5.1c-1-2.6-2-5.4-3.3-6.8C34,65.4,32.3,65,31.3,65
c-0.5,0-0.8,0.1-0.9,0.2c0.1,0.3,0.4,0.9,0.6,1.4c0.9,1.8,2.2,4.5,1.9,8.4c-0.4,4.6,15.3,17.5,20.3,21.4
C55,98,56.6,100.9,56.6,100.9z">
<animate id="animation1"
attributeName="opacity"
from="1" to="0" dur="2s"
style="opacity:0"
repeatCount="1" />
</path>
</g>
<g>
<path style="opacity:0" d="M76.9,87.2c0.5-2.9,2.1-12.7,0.8-15.2c-0.1-0.2-10.6-16.5-14.3-16.5c-0.9,0-1.6,0.2-2.3,0.5c-0.5-2.9-1-6-1.2-8.5
c-0.4-5.3-1.3-8.5-4.9-8.9c-0.5-0.1-1.3,0-2.1,0.7c-2.1,2-3.3,8.3-2.8,16.2c0.6,12.3-1.1,20.5-3.2,21.3c-1.3,0.5-4-2.2-6.1-4.3
c-2.1-2.2-4.3-4.4-6.6-5.4c-2.7-1.1-5.5-0.5-7.1,0.5c-1,0.7-1.6,1.6-1.6,2.6c0,1.3,1,2.1,2.1,3.1c1.3,1.1,3.2,2.6,4.3,5.6
c2.1,5.7,18.3,18.5,20.2,20c2.2,1.6,3,4.1,3,4.1l0.4,1.4l23.7-10l-0.8-1.3C77.9,92.2,76.5,89.2,76.9,87.2z M57.2,100.9
c-0.6-1.2-1.6-2.8-3.4-4.1C49,93,36.1,82.3,34.5,78.1c-1.3-3.7-3.6-5.5-5.1-6.8c-0.4-0.3-0.9-0.8-1.1-1c0.1-0.1,0.3-0.3,0.8-0.5
c0.9-0.4,2.6-0.7,4.2,0c1.8,0.7,3.7,2.8,5.7,4.7c3.1,3.2,6,6.2,9,5c5.6-2.3,5.1-18.9,4.9-24c-0.5-8.9,1.2-13.5,2-14.1
c0.9,0.1,2,0.4,2.4,6.4c0.4,5.9,2.3,15.5,3.9,19.2c0.3,0.7,1.1,1,1.8,0.7c0.7-0.3,1-1.1,0.7-1.8c-0.6-1.3-1.3-3.9-2-6.8
c0.3-0.3,0.8-0.6,1.6-0.7c2.1,0.8,10.3,12,12,15.1c0.6,1.1-0.1,7.8-1.1,13.4c-0.5,2.3,0.5,4.9,1.2,6.5L57.2,100.9z">
<animate id="animation2"
attributeName="opacity"
from="0" to="1" dur="3s"
style="opacity:1"
repeatCount="1" />
</path>
</g>
</svg>
Didnt fount much on the aether about it...thanks in advance

got it
just added this to the first image
<animate id="animation1"
begin="0.8s"
attributeName="opacity"
from="1" to="0" dur="0.5s"
fill="freeze"/>
and this to the second one, and voila the animation is played once and stops then.
<animate id="animation2"
begin="0.8s"
attributeName="opacity"
from="0" to="1" dur="1.3s"
fill="freeze"/>
yay :)

SVG - Polyline with quadratic bezier

I want to create a SVG path with several points and several bezier curves. If I add a bezier curve the SVG is not rendered. How can I have several bezier curves?
SVG
<polyline points="0,50 Q0,20 101,40 404,50"
stroke="black"
stroke-width="3" fill="none">
</polyline >

If you want to draw a beziere curve you need to use the <path> element. So your example would become:
<path d="M0,50 Q0,20 101,40"
stroke="black"
stroke-width="3" fill="none">
</path>
Now, if you wanted to add more connected curves you would write:
<path d="M0,50 Q0,20 101,40 Q100,0 120,40"
stroke="black"
stroke-width="3" fill="none">
</path>

Try something like this:
<svg height="180" width="500">
<polyline points="0,50 0,20 101,40 404,50" stroke="black" stroke-width="3" fill="none" />
</svg>

Resources