Skip to content

Instantly share code, notes, and snippets.

View techindepth's full-sized avatar
👋

ANISH ANTONY techindepth

👋
1 follower · 0 following
View GitHub Profile
@techindepth
techindepth / index.html
Created September 15, 2020 13:27
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="1000" height="700">
<g id="leaf" transform="rotate(30,0, 450)">
<path fill="#4CAF50" d="M469,7c-2-4-6-7-10-7C45,0,0,172,0,245
c0,96,73,160,181,160c137,0,166-130,181-200c15-71,51-136,104-187
C469,15,470,11,469,7z"></path>
@techindepth
techindepth / index.html
Last active September 18, 2020 05:34
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="1000" height="500">
<g id="leaf" transform="translate(500,0) scale(0.5,0.5)">
<path fill="#4CAF50" d="M469,7c-2-4-6-7-10-7C45,0,0,172,0,245
c0,96,73,160,181,160c137,0,166-130,181-200c15-71,51-136,104-187
C469,15,470,11,469,7z"></path>
@techindepth
techindepth / index.html
Created September 15, 2020 13:06
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="1000" height="500">
<g id="leaf" transform="translate(500,0)">
<path fill="#4CAF50" d="M469,7c-2-4-6-7-10-7C45,0,0,172,0,245
c0,96,73,160,181,160c137,0,166-130,181-200c15-71,51-136,104-187
C469,15,470,11,469,7z"></path>
@techindepth
techindepth / index.html
Created September 15, 2020 12:17
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="500" height="500">
<g id="leaf" stroke="#cd13d4" stroke-width="3" stroke-dasharray="6 2">
<path fill="#4CAF50" d="M469,7c-2-4-6-7-10-7C45,0,0,172,0,245
c0,96,73,160,181,160c137,0,166-130,181-200c15-71,51-136,104-187
C469,15,470,11,469,7z"></path>
@techindepth
techindepth / index.html
Created September 14, 2020 11:46
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="500" height="500">
<g id="leaf" color="#de3e3e">
<path fill="currentcolor" d="M469,7c-2-4-6-7-10-7C45,0,0,172,0,245
c0,96,73,160,181,160c137,0,166-130,181-200c15-71,51-136,104-187
C469,15,470,11,469,7z"></path>
@techindepth
techindepth / index.html
Created September 14, 2020 11:23
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="500" height="500">
<g id="leaf" fill="#de3e3e">
<path d="M469,7c-2-4-6-7-10-7C45,0,0,172,0,245
c0,96,73,160,181,160c137,0,166-130,181-200c15-71,51-136,104-187
C469,15,470,11,469,7z"></path>
@techindepth
techindepth / index.html
Last active September 17, 2020 15:12
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="500" height="500">
<g id="leaf">
<path style="fill:#4CAF50;" d="M469,7c-2-4-6-7-10-7C45,0,0,172,0,245
c0,96,73,160,181,160c137,0,166-130,181-200c15-71,51-136,104-187
C469,15,470,11,469,7z"></path>
@techindepth
techindepth / index.html
Created August 25, 2020 00:34
SVG Elliptical Arc Example
<svg height="400" width="3000" fill="none">
<path d="M 0 200 l 50 0 a 150 100 0 0 0 300 0 l 50 0" stroke="#c40000" stroke-width="3"></path>
<path d="M 500 200 l 50 0 a 150 100 30 0 0 300 0 l 50 0" stroke="#c40000" stroke-width="3"></path>
<path d="M 1000 200 l 50 0 a 150 100 30 0 1 300 0 l 50 0" stroke="#c40000" stroke-width="3"></path>
<path d="M 1500 200 l 50 0 a 150 100 30 0 0 200 0 l 50 0" stroke="#c40000" stroke-width="3"></path>
<path d="M 1900 200 l 50 0 a 150 100 30 1 0 200 1 l 50 0" stroke="#c40000" stroke-width="3"></path>
</svg>
@techindepth
techindepth / index.html
Last active August 25, 2020 09:15
Smooth Quadratic Bazier Curve
<svg height="300" width="800" fill="none">
<path d="M 0 100 Q 50 0 100 100 T 200 100 T 300 100" stroke="#c40000" stroke-width="3"/>
</svg>
@techindepth
techindepth / index.html
Created August 25, 2020 00:27
SVG Quadratic Bazier Curve Example
<svg height="300" width="800" fill=none>
<path d="M 10 10 Q 10 110 110 110 " stroke="#c40000" stroke-width="3" />
<path d="M 150 110 q 50 -100 100 0 " stroke="#c40000" stroke-width="3"/>
<path d="M 300 110 q 0 100 100 100 q 100 0 100 -100 q 0 -100 -100 -100 q -100 0 -100 100" stroke="#c40000" stroke-width="3" />
</svg>