My understanding is, svg circle with stroke-width renders two concentric circles (or a doughnut like image) with its internal radius as r and its external radius as r plus stroke-width.
It looks like,
But, as one can see when the stroke-width increases from 4 to 24, the inner circle has become smaller?
Plunker code is here.
So, what is wrong with the formula,
external radius = r + stroke-width
More importantly, why does inner circle size depend on stroke width?
I'm afraid your understanding is wrong.
An SVG circle with stroke-width renders two concentric circles (or a doughnut like image) with its internal radius as r - ½ the stroke width and its external radius as r + ½ stroke-width.
Related
I'm trying to build a Flower of Life VR example using A-Frame.
The closest thing that I found is using the opacity property in <a-circle>.
Is there a way to create just the border of the circle?
Not sure if it fits your use case but you could use a cylinder with a small height:
https://aframe.io/docs/1.0.0/primitives/a-cylinder.html
Or a tube:
https://github.com/donmccurdy/aframe-extras/tree/master/src/primitives
Or just a flat plane with png texture with a circle with transparency
I have a handwritten signature to animate as if it is beeing written. I draw it into Illustrator as a path, but with the variable width tool I gave it a nice shape to look like it made by pen. I generated the svg code, but it made me a filled element with strokes, so I can only animate the stroke.
Is there a way to animate just the fill, or I can only animate stroke with equal width.
Or can I save svg some other way?
It seems that generally a css clip-path is used to hide beginning at the edges of an element. I can use something like this:
clip-path:circle(70% at center);
and get something like this:
Is there a way I can invert that? I want my result to be something like this:
I want to clip the center of the image, not the edges. It's an SVG, so I tried something like this pen, animating a radial gradient: http://codepen.io/ethanclevenger91/pen/myMYwQ
But that didn't work like expected. There's the animated one and then one with what I assume the final step of the animation cycle should look like, but it doesn't. Any light on either of these would be appreciated.
You can use a still use a clipPath if you use it in its url form i.e. as svg markup. Draw the path outer rectangle clockwise and the inner ellipse (using two or more elliptical arcs) anticlockwise, drawing everything as a single path together with clip-rule="evenodd"
Alternatively you could use a <mask>. This is a simpler, but slower solution. Draw a white ellipse within the mask area and that part of the mask will be opaque.
So here's what ended up happening:
Since the background I was trying to match was a solid color, I gave the circles a stroke double their radius (since stroke is applied centered on the edge of the object) and then applied a clip-path the size of the object. Then I animated the stroke to 0. Will update with a link to the application when it's live.
I have a small square sprite, and I need to get the top center of the sprite based on rotation.
Here's an image describing what I want:
The left sprite is the sprite at it's natural position, and the other sprites are rotated. The black dot's position is what I want to get (the position on the sprite).
I know this is probably a dumb question achieved with a basic knowledge of trig, but I can't figure it out.
I got it, here's my solution:
x = (float) (PlayerEntity.getPos().x + Math.cos(Math.toRadians(PlayerEntity.getAngle())));
y = (float) (PlayerEntity.getPos().y + Math.sin(Math.toRadians(PlayerEntity.getAngle())));
I can't find any css gradient color generators that do what i'm trying to do.
A diagonal gradient with no blending, just a sharp color change from #252525 to #0099ff(for example), with the line where the two colors meet being about 70% from the left of the container, so the line would start a little more than halfway across the x axis of the container, and the line would end maybe halfway down the y axis of the right side of the container.
If you would be able to emphasize what numbers are specifically for calculating the degree of tilt, and the x y coordinates of the beginning of the gradient, that would be so extremely helpful. I'm just confused at this point.