1

I am new in SVG. I want make this curved stroke: picture of the stroke This picture of the stroke

How can I make that with SVG? I've already done with SVG. But do not get out. Who can help me with this stroke? Thanks for help!

dnagirl
  • 20,196
  • 13
  • 80
  • 123
Mike Vierwind
  • 1,482
  • 4
  • 23
  • 44

1 Answers1

3

It's not perfect, but something like this will give you a good start.

    <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='200' height='200'>
                <path fill='none' stroke="black" stroke-width='4' d='M 90,80 A60,60 0 0,1 90,5'/>
</svg>

You can see it here in action.

Tweaking the 60,60 values will make it more or less circular. The 90,80 and 90,5 values are the start and end points. The rest should be self explanitory but let me know if you have any questions.

gotohales
  • 3,665
  • 1
  • 20
  • 34
  • Thanks for your help! And do you know, how can i make a mirror of this stroke? – Mike Vierwind Jan 09 '13 at 18:56
  • @MikeVierwind No problem! And just change the 0,1 to 0,0 and it will mirror the direction :) – gotohales Jan 09 '13 at 18:58
  • Is it also posible. That i can make. The svg element the width and the height of the path element. Now the svg element is 200 width en 200 height. But can i make this width 21 and height 79. The width and height of the path. When i now set that height and width. The path is out the box. – Mike Vierwind Jan 09 '13 at 19:06
  • @MikeVierwind Sure, just change the start and end points to be in the area, as it is drawing both x values at 90 (which would be outside your height and width). Swap both 90s to 21 and it should be in the right place, though you'll probably want to tweak the y values as well. – gotohales Jan 09 '13 at 19:08