css - Draw a crescent moon using SVG in HTML -


is possible draw crescent moon using svg in html? i've been trying things out @ w3 schools don't see example of this. don't need of shading see in typical google images of 'crescent moon', solid border crescent moon.

please note solution might not best. not expert when comes vector graphics , should other solution

the approach took draw image same background. like: drawing 2 images

to eliminate border draw circle above it

drawing third image

now set 3rd image border white like:

eliminate border

if not using borders need use 2 circles

you might wanna take @ clipping , masking. might better approach.

<!doctype html> <html> <body>  <h1>my first svg</h1>  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />    <circle cx="115" cy="50" r="30" stroke="black" stroke-width="2" fill="white" />    <circle cx="130" cy="50" r="23" stroke="white" stroke-width="2" fill="white" /> </svg>   </body> </html> 

side note : w3schools isn't reference should relying on. it's full of wrong information , outdated stuff. better resources include:

  1. mozilla developers network
  2. web platform

Comments

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -