Skip to content

Instantly share code, notes, and snippets.

@ktzanev

ktzanev/index.html

Last active March 26, 2017 15:00
Show Gist options
  • Save ktzanev/6b665e685610711effcf97138fa3032b to your computer and use it in GitHub Desktop.
Save ktzanev/6b665e685610711effcf97138fa3032b to your computer and use it in GitHub Desktop.
Download ZIP
SVG - css (GistRun)
Raw
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple SVG et CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1><small>Positionner la souris sur</small> Craig</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="370" height="570" viewBox="0 0 370 570">
<path id="pants" d="M343.3 573l-3.7 2-152-2c-42.4-1.3-91.8-2.2-134.5-2.5h-7.8l-7.8-1.8 22.8-7 4.6-2.3-.3-44.5.2-18 252.4-.6.7 34 2.3 18.4 1.7 13.4 6 3 11.8 5.2 3.6 2.7z"/>
<path id="blouson" d="M63.5 507.6c44.4 10.4 81.8 10.6 125 12.4 43 .2 86.2-4 127.7-15.5 15.7-14 37-26.7 40.3-49.4-2.8-29.3-14.3-56.7-29.3-83-17.5-23.5-26-28.6-55.4-37.3-59-18.2-124.8-20.2-182.2 4.2-32.3 18.2-51 52.6-64 86-6.5 14.7-14.6 42.5-8.7 48.7 9 11 23.2 18.8 35.3 27 3.3 2 5 3.5 11 7z"/>
<path id="col" d="M66.4 357.4c19.2 23 46.3 37.7 73 50.7 16 5.4 31 9.3 46.7 5.6 7.3 4 22 7 36.2 2.6 26.8-7.8 54-18 74-38 12-9 12.4-24.8-2.3-14-25.2 14.6-52 27.2-80.6 33-24.7 2.7-49.7-1.4-74-6.4-11.8-4.2-22.3-11.5-33.8-16.7-11.3-5.5-22-12.2-32.3-19.6-3-1.6-11.4-3.4-7 3z"/>
<path id="boutons" d="M174.6 464.3c0 3-2.5 5.5-5.6 5.5-3.2 0-5.7-2.4-5.7-5.4s2.5-5.5 5.6-5.5 5.5 2.4 5.5 5.4zm2.7-37.4c0 3-2.6 5.5-5.8 5.5-3 0-5.7-2.5-5.7-5.6 0-3.2 2.6-5.8 5.8-5.8s5.8 2.6 5.8 5.7zm-5.4 77c0 2.7-2.4 5-5.2 5-3 0-5.2-2.3-5.2-5s2.3-5 5.2-5c2.8 0 5 2.3 5 5z"/>
<path fill="#0a0f41" d="M71.5 435c-8.2 23.3-8 72-6.5 72.3 6 5.5 23.4 2 51.3 7.7 14.5 2 29.6 3.7 44.3 3.7 19.2 1 16 4.4 16.4-14.5 1.4-28.6 4.6-60.5 6-89 3-6.4 2.5 7.8 1.3 14.8-1.4 30-4.3 60-4.5 90 28-.6 50 .8 82.3-5.8 17-2 35.6-6.3 52.3-9.7-4-27-7.7-55.8-15-82.6.8-.4 1.7-1.2 2.3.4 2.6 6 4.4 17 5.5 22.4 4 19 6 38.5 10.2 57.4 2 8-9.5 5.7-27.5 10.2-35.6 6-71.6 12-108 10.5-31-.5-62-4.7-92.8-9-8.7-.7-24.7.6-26-5.4-2-8.3.4-18.7 0-27.3 0-15.8 0-29.6 5.5-44.4.6-1 1.6-2.3 2.8-2z"/>
<path class="peau" d="M364 480c0 15.7-13.3 28.5-29.6 28.5s-29.6-12.8-29.6-28.6 13.2-28.7 29.6-28.7S364 464 364 480z"/>
<path class="peau" stroke="#513617" stroke-width="1.8" d="M326.5 472.3c0 7.4-6 13.5-13.5 13.5s-13.5-6-13.5-13.5 6-13.5 13.5-13.5c7.4 0 13.5 6 13.5 13.5z"/>
<path class="peau" d="M368.8 215.4c0 103.2-80.8 187-180.5 187S7.8 318.5 7.8 215.3c0-103.3 81-187 180.5-187s180.5 83.7 180.5 187z"/>
<path id="chapeau" d="M26 384.3c-16 2.2-10.4-30-16.4-51.6C1 278-4.7 219.3 6 166.7c11.8-51.2 44-98 89-125.4 64.7-27.6 112.3-28.7 165.2-6.5 51.8 22.8 93 70.6 103 127 9.7 40.7 10.7 84.8-7.3 123.4-10.3 28.8-14.6 60-16.6 90.5-8 23-13.8 5.8-8-24 7.8-42.3 7.6-85.7 8.5-128.6 1-17.2-11.4-31.3-27-37-55.5-23.5-121.5-25.7-181.7-11-27.5 7-59 13.2-84 29.4-17.5 9.7-26 26.4-25.2 48.8-4.2 37.6 1.5 75 11 111.4.8 7 .7 16.8-7.2 19.8z"/>
<path id="pompon" d="M116.2 27.5c3.3-6.6 10.4-6.8 16.5-8.2 4.8-3.6 6-10.3 11.6-12.7 6.7-3.3 15.8 1.7 21-4.5 6.6-1.4 13.5 0 20-1 6 1 12.4-1.2 18.3-1 7.6 1.8 13 8.8 20.8 10 9 0 12.6 5.6 14.6 12.2 2 5-5 6.2-7 9-7.5 2.7-15.5-2.3-22.5 1.3-5.2 3.6-11.3 7.4-17.8 5.7-6-3-12.4-7.3-19.5-3.8-5.6 3-12.7 8-19 3.4 0-5.5 0-15.4-6-7-4.2 3.7-7 10.3-13.5 8.6-6.3 0-14 1.5-18.6-4-1.8-2.4-1.5-6 1-8z"/>
<path class="oeil" d="M201.2 265.4c19.4 26 52.8 33.8 74.7 17.5 21.8-16.3 24-50.6 4.6-76.6-19.3-26-52.8-33.8-74.7-17.5-22 16.2-24 50.5-4.8 76.5z"/>
<path d="M224.7 237.4c0 3.7-3 6.7-6.7 6.7s-6.6-3-6.6-6.6c0-3.6 3-6.6 6.7-6.6s6.8 3 6.8 6.6z"/>
<path class="oeil" d="M177.7 265.8c-19.4 26-53 34-75 17.6s-24-50.8-4.7-77c19.4-26 53-34 75-17.6s24.3 50.8 4.8 77z"/>
<path d="M166.7 236.7c0 3.7-3 6.8-6.8 6.8s-6.8-3-6.8-6.8 3-6.8 6.8-6.8c3.7 0 6.7 3 6.7 6.7z"/>
<path stroke="#000" stroke-width="2.9" d="M166.6 349.6c23-7.3 34-1 50.7 4.4" opacity=".6" stroke-linecap="round"/>
<path class="peau" d="M12.3 487c0 15.8 13.2 28.6 29.5 28.6s29.5-12.8 29.5-28.6-13.3-28.6-29.6-28.6-29.5 12.8-29.5 28.6z"/>
<path class="peau" stroke="#513617" stroke-width="1.8" d="M49.7 479.4c0 7.5 6 13.5 13.5 13.5s13.5-6 13.5-13.6c0-7.5-6-13.5-13.5-13.5s-13.5 6-13.5 13.4z"/>
</svg>
</body>
</html>
Raw
styles.css
body {
background: lightblue;
}
h1 {
color: white;
font-family: sans-serif;
}
svg {
margin:10vmin;
height:50vmin;
}
#pants {
fill:#1c171f;
}
#blouson, #chapeau {
fill:#3c4c8a;
}
#col {
fill:#22265c;
}
#boutons {
fill:#0a0f41;
}
#pompon {
fill:#e1c40b;
}
.peau {
fill:#e2c19c;
}
.oeil {
fill: #e2e2e1;
}
svg:hover .oeil {
fill:red;
cursor: help;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment