SVG Circle Documentation

Developer
Size
2,198 Kb
Views
46,552

How do I make an svg circle documentation?

What is a svg circle documentation? How do you make a svg circle documentation? This script and codes were developed by Tim Ruby on 03 July 2022, Sunday.

SVG Circle Documentation Previews

SVG Circle Documentation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Circle Documentation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container white">
<h1>SVG &ltcircle&gt</h1>
<h4>The &ltcircle&gt element is used to create a circle:</h4>
<p>The following commands are needed for circle data: (Stroke and Stroke-Width Are Optional)</p>
<dl> <dd><span>cx</span> = define the x coordinate of the center of the circle.</dd> <dd><span>cy</span> = define the y coordinate of the center of the circle.</dd> <dd><span>r</span> = the radius of the circle.</dd> <dd><span>stroke</span> = the color of the stroke. </dd> <dd><span>stroke-width</span> = the width in pixels of the stroke.</dd> <dd><span>fill</span> = the fill color of the circle.</dd>
</dl> <p>Note: If cx and cy are omitted, the circle's center is set to <span>(0,0)</span>.</p>
</div>
<hr />
<div class="container"> <p>Example:</p> <xmp> <svg height="500" width="500"> <circle cx="250" cy="100" r="80" stroke="teal" stroke-width="3px" fill="white"></circle> </svg> </xmp> <svg height="500" width="500"> <circle cx="250" cy="100" r="80" stroke="teal" stroke-width="3px" fill="white"></circle>
</svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

SVG Circle Documentation - Script Codes CSS Codes

body { margin: 0; padding: 0; height: 100%; background-color: #9FDFE4; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 300; color: #555;
}
hr { border: none; border-top: 1px solid teal; box-shadow: 0 1px 0 1px #75C6C8;
}
.white { background: white; padding: 50px; border-radius: 5px; border: solid 2px #75C6C8;
}
xmp { margin: 15px; text-align: left; background: teal; border-radius: 5px; color: #FFF; border: solid 2px #75C6C8;
}
h1, h2, h3, h4, h5, h6, p, dl { margin: 15px; text-align: left;
}
h1 { font-size: 24px; font-weight: 600; color: teal;
}
h4 { font-size: 18px; font-weight: 400; color: teal;
}
dd { padding: 5px 0; text-align: left;
}
span { color: teal; font-weight: 600;
}
.container { margin: 30px auto; width: 800px; height: auto; text-align: center;
} 
SVG Circle Documentation - Script Codes
SVG Circle Documentation - Script Codes
Home Page Home
Developer Tim Ruby
Username TimRuby
Uploaded July 03, 2022
Rating 3
Size 2,198 Kb
Views 46,552
Do you need developer help for SVG Circle Documentation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Ruby (TimRuby) Script Codes
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!