Skip to content

Instantly share code, notes, and snippets.

View techindepth's full-sized avatar
👋

ANISH ANTONY techindepth

👋
View GitHub Profile
@techindepth
techindepth / index.html
Last active August 25, 2020 09:13
SVG Smooth Bazier curve example
<svg height="200" width="800" fill="none">
<path d="M 10 100 S 60 0 110 100 Z" stroke="#c40000" stroke-width="3"/>
<path d="M 150 100 s 50 -100 100 0 s 50 100 100 0 Z" stroke="#c40000" stroke-width="3"/>
<path d="M 400 100 c 50 -100 50 -100 100 0 s 50 100 100 0 Z" stroke="#c40000" stroke-width="3"/>
</svg>
@techindepth
techindepth / index.html
Last active August 25, 2020 09:12
SVG Cubic Bezier curve example
<svg height="200" width="800" fill="none">
<path d="M 10 100 C 40 50 80 50 110 100 Z" stroke="#c40000" stroke-width="3"/>
<path d="M 120 100 c 0 -50 110 -50 110 0 z" stroke="#c40000" stroke-width="3"/>
<path d="M 240 100 c 50 -100 50 -100 100 0 z" stroke="#c40000" stroke-width="3"/>
<path d="M 350 100 c 0 -100 50 -50 100 0 Z" stroke="#c40000" stroke-width="3"/>
</svg>
@techindepth
techindepth / index.html
Created August 25, 2020 00:16
SVG Closepath Example
<svg height="200" width="800" fill = "none">
<path d="M 10 10 V 100 H 100" stroke="#c40000" stroke-width="3" />
<path d="M 110 10 V 100 H 200 Z" stroke="#c40000" stroke-width="3"/>
<path d="M 210 10 v 90 h 50 v -90 h 50 v 90 h 50 " stroke="#c40000" stroke-width="3"/>
<path d="M 400 10 v 90 h 50 v -90 h 50 v 90 h 50 Z" stroke="#c40000" stroke-width="3"/>
<path d="M 600 10 v 90 h 50 v -90 Z h 60 v 90 h 50 Z" stroke="#c40000" stroke-width="3"/>
</svg>
@techindepth
techindepth / index.html
Last active August 25, 2020 09:11
SVG Vertical Line Example
<svg height="250" width="200">
<path d="M 100 10 V 200 " stroke="#c40000" stroke-width="3"/>
</svg>
<svg height="200" width="300">
<path d="M 50 50 H200 " stroke="#c40000" stroke-width="3"/>
</svg>
<svg height="400" width="300" fill="none">
<path d="M 10 10 L100 100 L 10 100" stroke="#c40000" stroke-width="3"/>
<path d="m 10 150 l100 100 l 10 100" stroke="#c40000" stroke-width="3"/>
</svg>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg height="200" width="200">
<path d="M 50 50 L100 100 Z" stroke="#c40000" stroke-width="2"/>
</svg>
</body>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg height="150" width="400">
<polygon points="20,80 20,40 40,20 80,20 100,40 100,80 80,100 40,100 " style="stroke: #c40000; stroke-width: 3; fill: #ececec;" opacity="0.5"/>
</svg>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg height="200" width="400">
<ellipse cx="100" cy="100" rx="75" ry="50" style="stroke: #c40000; stroke-width: 3; fill: #ececec;"/>
</svg>
</body>
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg height="250" width="400">
<circle cx="100" cy="100" r="70" style="stroke: #c40000; stroke-width: 3; fill: #ececec;"/>
</svg>
</body>
</html>