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
Last active September 18, 2020 19:51
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="1000" height="700">
<defs>
<g id="leaf" transform="translate(650,300) scale(0.75) rotate(20)">
<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
@techindepth
techindepth / index.html
Created September 18, 2020 19:43
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="1500" height="700">
<defs>
<g id="leaf" transform="translate(50,150) scale(0.5)">
<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
@techindepth
techindepth / index.html
Created September 18, 2020 06:26
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="1000" height="700">
<g id="leaf" transform="matrix( 0.866, 0.5,-0.5, 0.866,400,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 16, 2020 09:02
<!DOCTYPE html>
<html lang="en">
<body>
<svg width="300" height="300">
<defs>
<linearGradient id="gradient1"
x1="0%" y1="0%"
x2="100%" y2="0%"
spreadMethod="pad">
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
@techindepth
techindepth / index.html
Created September 16, 2020 08:53
<!DOCTYPE html>
<html lang="en">
<body>
<svg width="300" height="300">
<defs>
<mask id="clip-rectangle">
<circle cx="170" cy="150" r="120" fill="#666"></circle>
</mask>
</defs>
<path d="M 100 0 L175 200 L0 75 L200 75 L25 200 Z" style="stroke:#ffe800; fill:#FFF58F; mask: url(#clip-rectangle);"></path>
@techindepth
techindepth / index.html
Last active September 19, 2020 05:15
<!DOCTYPE html>
<html lang="en">
<body>
<svg width="300" height="300">
<defs>
<mask id="clip-rectangle">
<circle cx="170" cy="150" r="120" fill="#fff"></circle>
</mask>
</defs>
<path d="M 100 0 L175 200 L0 75 L200 75 L25 200 Z" style="stroke:#0a7a0a; fill:#1e9b2f; mask: url(#clip-rectangle);"></path>
@techindepth
techindepth / index.html
Last active September 19, 2020 05:00
<!DOCTYPE html>
<html lang="en">
<body>
<svg width="3000" height="800">
<defs>
<clipPath id="clip-rectangle">
<text x="20" y="400" style="font-size: 300px; ">HELLO MEDIUM</text>
</clipPath>
</defs>
<pattern id="pattern-circles" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
@techindepth
techindepth / index.html
Last active September 19, 2020 04:52
<!DOCTYPE html>
<html lang="en">
<body>
<svg width="900" height="900">
<clipPath id="clip-circle">
<circle cx="170" cy="150" r="80"></circle>
</clipPath>
<path id="heart-path" d="M340.8,98.4c50.7,0,91.9,41.3,91.9,92.3c0,26.2-10.9,49.8-28.3,66.6L256,407.1L105,254.6c-15.8-16.6-25.6-39.1-25.6-63.9
c0-51,41.1-92.3,91.9-92.3c38.2,0,70.9,23.4,84.8,56.8C269.8,121.9,302.6,98.4,340.8,98.4 z"
/>
@techindepth
techindepth / index.html
Last active September 19, 2020 04:40
<!DOCTYPE html>
<html lang="en">
<body>
<svg width="300" height="300">
<defs>
<clipPath id="clip-rectangle">
<circle cx="170" cy="150" r="120"></circle>
</clipPath>
</defs>
<path d="M 100 0 L175 200 L0 75 L200 75 L25 200 Z" style="stroke:#0a7a0a; fill:#1e9b2f; clip-path: url(#clip-rectangle);"></path>
@techindepth
techindepth / index.html
Last active September 18, 2020 20:11
<html>
<head>
<title>SVG Example</title>
</head>
<body>
<svg width="1000" height="1000">
<g id="rect1" transform="skewX(10)">
<rect x="100" y="100" width="200" height="400" style="stroke: #388E3C; stroke-width: 3; fill: #4CAF50;"/>
</g>
<g id="rect2" transform="skewY(10)">