Svg basic
How do I make an svg basic?
What is a svg basic? How do you make a svg basic? This script and codes were developed by Milano_O on 11 December 2022, Sunday.
Svg basic Previews
Svg basic - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>svg basic</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body> <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
<svg width="400" height="180"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
<svg width="400" height="180"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
<svg height="150" width="500"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" /> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" /> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
<svg height="100" width="500"> <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" /> <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>
<!-- line -->
<svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
<!-- polygon -->
<svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;;fill-rule:nonzero;" />
</svg>
<svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<!-- polyline -->
<svg height="200" width="500"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>
<svg height="180" width="500"> <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>
<!-- path -->
<!-- M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath -->
<svg height="400" width="450"> <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /> <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <!-- Mark relevant points --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointB" cx="250" cy="50" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Label the points --> <g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="250" y="50" dy="-10">B</text> <text x="400" y="350" dx="30">C</text> </g>
</svg>
<!-- text -->
<svg height="30" width="200"> <text x="0" y="15" fill="red">I love SVG!</text>
</svg>
<svg height="60" width="200"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
<svg height="90" width="200"> <text x="10" y="20" style="fill:red;">Several lines: <tspan x="10" y="45">First line.</tspan> <tspan x="10" y="70">Second line.</tspan> </text>
</svg>
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="https://www.w3schools.com/svg/" target="_blank"> <text x="0" y="15" fill="red">I love SVG!</text> </a>
</svg>
<!-- svg stroke -->
<!-- stroke
stroke-width
stroke-linecap
stroke-dasharray -->
<svg height="80" width="300"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="black" d="M5 40 l215 0" /> <path stroke="blue" d="M5 60 l215 0" /> </g>
</svg>
<svg height="80" width="300"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-linecap="square" d="M5 60 l215 0" /> </g>
</svg>
<svg height="80" width="300"> <g fill="none" stroke="black" stroke-width="4"> <path stroke-dasharray="5,5" d="M5 20 l215 0" /> <path stroke-dasharray="10,10" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g>
</svg>
<!-- filters and defs -->
<!-- <feGaussianBlur> -->
<svg height="110" width="110"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
<!-- <feOffset> -->
<svg height="120" width="120"> <defs> <filter id="f1" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
<!-- SVG Linear Gradient -->
<svg height="150" width="400"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
<svg height="150" width="400"> <defs> <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
<svg height="150" width="500"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
<svg height="150" width="400"> <defs> <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
<svg height="150" width="500"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>
| Developer | Milano_O |
| Username | milanodituti |
| Uploaded | December 11, 2022 |
| Rating | 3 |
| Size | 2,844 Kb |
| Views | 8,096 |
Do you need developer help for Svg basic?
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!
Milano_O (milanodituti) Script Codes
| Name | Size |
| Accordian_222 new | 3,320 Kb |
| Input, forms, datalist... | 2,530 Kb |
| A Pen by milano_O | 2,969 Kb |
| Sliding Door Reveal | 2,271 Kb |
| Push over menu | 3,978 Kb |
| Organizing Data with Tables | 2,049 Kb |
| Materialize | 2,578 Kb |
| Slide menu tn | 2,819 Kb |
| Animated_hamburger | 2,767 Kb |
| HTML-and-CSS-slide-out-navigation | 2,963 Kb |
Create amazing captions 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!
Similar Scripts & Codes
| Name | Username | Size |
| Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
| Snow collision | Wojtek1150 | 3,542 Kb |
| Update CSS Variables with JS | Wesbos | 2,335 Kb |
| IE11 Test | Boostnewmedia | 4,998 Kb |
| Portfolio Landing Page | FDfranklin | 3,585 Kb |
| Playing with transition timing | Mattgrosswork | 1,993 Kb |
| My three.js practice | Esambino | 3,203 Kb |
| Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
| E-mail Template | SoloMDFK | 4,871 Kb |
| SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!