Last active
March 26, 2017 15:00
-
-
Save ktzanev/6b665e685610711effcf97138fa3032b to your computer and use it in GitHub Desktop.
SVG - css (GistRun)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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