Skip to content

Instantly share code, notes, and snippets.

@ktzanev
Last active March 26, 2017 14:45
Show Gist options
  • Save ktzanev/e9e57f9d9f16d1cefe1daff780d28cd9 to your computer and use it in GitHub Desktop.
Save ktzanev/e9e57f9d9f16d1cefe1daff780d28cd9 to your computer and use it in GitHub Desktop.
SVG - background (GistRun)
Display the source blob
Display the rendered blob
Raw
<?xml version='1.0'?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="-200 -150 400 300">
<ellipse cx="0" cy="0" rx="200" ry="150" fill="#ff87a1"/>
<ellipse cx="0" cy="70" rx="100" ry="80" fill="#d45589"/>
<circle cx="-30" cy="70" r="20" fill="#88224c"/>
<circle cx="30" cy="70" r="20" fill="#88224c"/>
<circle cx="-50" cy="-70" r="40" fill="white"/>
<circle cx="-50" cy="-70" r="30" fill="black"/>
<circle cx="-40" cy="-80" r="10" fill="white"/>
<circle cx="50" cy="-70" r="40" fill="white"/>
<circle cx="50" cy="-70" r="30" fill="black"/>
<circle cx="60" cy="-80" r="10" fill="white"/>
</svg>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple utilisatoin SVG</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Exemple utilisatoin SVG</h1>
<div class="exemple cochons"</div>
</body>
</html>
.exemple {
border: 1px solid #eef;
height:300px;
width:300px;
display:inline-block
}
.cochons {
background: url(cochon.svg);
background-size: 100px 100px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment