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:
to eliminate border draw circle above it
now set 3rd image border white like:
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:
Comments
Post a Comment