Skip to content

Instantly share code, notes, and snippets.

@brandenbyers

brandenbyers/dapperFace.svg

Last active August 29, 2015 14:14
Show Gist options
  • Save brandenbyers/01f33ee4a181a53cf707 to your computer and use it in GitHub Desktop.
Save brandenbyers/01f33ee4a181a53cf707 to your computer and use it in GitHub Desktop.
Download ZIP
Dapper D3
Display the source blob
Display the rendered blob
Raw
dapperFace.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="dapperFace" x="0" y="0" viewBox="0 0 337.7 467.3" enable-background="new 0 0 337.7 467.3" xml:space="preserve">
<path id="glasses" fill="#262626" d="M170.1 250.3c-16.3 0-17.1 13.3-17.1 13.3 -1.3 77.1-67.2 72.1-67.2 72.1 -75.6-3.9-73.7-84.3-73.7-84.3 -2-9.2-11.2-8.1-11.2-8.1v-12.1C95 183.4 158.9 220 158.9 220c2-5.2 11.3-4.7 11.3-4.7H170c0 0 8.2-0.6 10.2 4.7 0 0 62.8-36.5 156.8 11.2v12.1c0 0-8.1-1.1-10.1 8.1 0 0 2.5 80.3-73.1 84.3 0 0-65.6 5.1-66.9-72 0 0-0.6-13.3-16.9-13.3H170.1zM327.3 233.1c-2.3 0-4.2 1.9-4.2 4.2 0 2.3 1.9 4.2 4.2 4.2s4.2-1.9 4.2-4.2C331.5 235 329.6 233.1 327.3 233.1zM14.3 233.1c-2.3 0-4.2 1.9-4.2 4.2 0 2.3 1.9 4.2 4.2 4.2s4.2-1.9 4.2-4.2C18.5 235 16.6 233.1 14.3 233.1zM88.6 215.7c-30.1 0-54.5 24.4-54.5 54.5s24.4 54.5 54.5 54.5 54.5-24.4 54.5-54.5S118.7 215.7 88.6 215.7zM253.6 215.7c-30.1 0-54.5 24.4-54.5 54.5s24.4 54.5 54.5 54.5c30.1 0 54.5-24.4 54.5-54.5S283.7 215.7 253.6 215.7z"/>
<path id="mustache" fill="#262626" d="M171.6 364.7c0 0 11.9-24.1 34.1-16.9 22.2 7.1 82.4 33.3 106.5 31.3 24.2-2 14.1-22.9 14.1-22.9s21.2 24.2-12.1 37.9c-33.3 13.7-97.4 22.3-119.6 18.4s-24-16.2-24-16.2h0.4c0 0-1.8 12.3-24 16.2s-86.3-4.6-119.6-18.3 -12.1-37.9-12.1-37.9 -10.1 20.9 14.1 22.9 84.3-24.2 106.5-31.3 34.1 16.9 34.1 16.9"/>
<circle id="pupilR" fill="#262626" cx="111.3" cy="293.2" r="10.8"/>
<circle id="pupilL" fill="#262626" cx="231.3" cy="293.2" r="10.8"/>
<path id="eyebrowR" fill="#262626" d="M115.8 195.5c0 0-61.1-47.4-78.8 0C37 195.5 53.4 168.5 115.8 195.5z"/>
<path id="eyebrowL" fill="#262626" d="M225 195.5c0 0 61.1-47.4 78.8 0C303.8 195.5 287.5 168.5 225 195.5z"/>
<path id="hat" fill="#262626" d="M169 0C135 0 47.4-2.4 44 51.5c-1.3 20.8 21.5 89.3-11.2 92.2 -13.4 1.2-13.3-21-25.7-13.2 -11 7-8.2 12.4 0.3 22.7 10.1 12.2 29.4 11.8 43.2 12.5 39.1 2.2 79.3-0.9 118.3-1.4 39.2 0.5 79 3.6 118.2 1.4 13.8-0.8 33-0.3 43.1-12.5 8.5-10.3 11.2-15.7 0.3-22.7 -12.3-7.8-12.3 14.4-25.7 13.2 -32.6-2.9-9.7-71.4-11-92.2C290.4-2.4 203 0 169 0z"/>
<path id="gotee" fill="#262626" d="M170.8 427.6l10.7-5.3c0 0-10.1 21-11 45h-0.1c-1-24-11.1-45-11.1-45L170.8 427.6"/>
</svg>
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
width: 960px;
padding-top: 40px;
margin: auto;
position: relative;
}
svg {
width: 100%;
max-height: 400px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type='text/javascript'>
window.addEventListener('load', function () {
d3.xml('dapperFace.svg', 'image/svg+xml', function (error, data) {
d3.select('body').node().appendChild(data.documentElement);
var svg = d3.select('svg');
var face = svg.select('#dapperFace');
var mustache = svg.select('#mustache')
.on('mouseenter', function () {
mustache.style('fill', '#AB69C6');
})
.on('mouseleave', function () {
mustache.style('fill', '#000000')
})
// .on('click', function () {
// mustache
// .transition()
// .duration(1000)
// .ease('bounce')
// });
// var eyebrowR = svg.select('#eyebrowR')
// .on('click', function() {
// eyebrowR
// .
// })
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment