Skip to content

Instantly share code, notes, and snippets.

@pstuffa

pstuffa/.block

Last active March 9, 2017 15:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pstuffa/c4c4e536fa28ea20018dd72e824aa67f to your computer and use it in GitHub Desktop.
Save pstuffa/c4c4e536fa28ea20018dd72e824aa67f to your computer and use it in GitHub Desktop.
Download ZIP
Chained Emoji Transitions
Raw
.block
license: gpl-3.0
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle {
fill: #000;
stroke: #000;
stroke-width: 1.5px;
}
.smiley {
display: none;
}
</style>
<svg width="960" height="500">
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 10, right: 70, bottom: 70, left: 10},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var y = d3.scalePoint()
.domain(d3.range(50))
.range([0, height]);
var z = d3.scaleLinear()
.domain([10, 0])
.range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"])
.interpolate(d3.interpolateHcl);
var smiley = d3.select(".smiley")
var smileyContainer = g.selectAll(".smiley-face")
.data(y.domain())
.enter().append("g")
.attr("class","smiley-face")
.attr("transform", function(d,i) { return "translate(0," + y(i) + ")" });
smileyContainer.transition()
.duration(2500)
.delay(function(d) { return d * 100; })
.on("start", function repeat() {
var currentY = d3.select(this).attr("transform").split(",")[1].replace(")", "");
d3.active(this)
.attr("transform", "translate(" + width + "," + y + ")")
.attr("transform", function(d,i) { return "translate(" + width + "," + currentY + ")" })
.transition()
.attr("transform", function(d,i) { return "translate(0," + currentY + ")" })
.transition()
.on("start", repeat);
});
// Thank you http://emojione.com/
smileyContainer.append("circle")
.attr("cx", 32)
.attr("cy", 32)
.attr("r", 30)
.style("fill", "#ffdd67");
smileyContainer.append("path")
.attr("d","m49.7 34.4c-.4-.5-1.1-.4-1.9-.4-15.8 0-15.8 0-31.6 0-.8 0-1.5-.1-1.9.4-3.9 5 .7 19.6 17.7 19.6 17 0 21.6-14.6 17.7-19.6")
.style("fill", "#664e27");
smileyContainer.append("path")
.attr("d","m33.8 41.7c-.6 0-1.5.5-1.1 2 .2.7 1.2 1.6 1.2 2.8 0 2.4-3.8 2.4-3.8 0 0-1.2 1-2 1.2-2.8.3-1.4-.6-2-1.1-2-1.6 0-4.1 1.7-4.1 4.6 0 3.2 2.7 5.8 6 5.8 3.3 0 6-2.6 6-5.8-.1-2.8-2.7-4.5-4.3-4.6")
.style("fill", "#4c3526");
smileyContainer.append("path")
.attr("d","m24.3 50.7c2.2 1 4.8 1.5 7.7 1.5 2.9 0 5.5-.6 7.7-1.5-2.1-1.1-4.7-1.7-7.7-1.7s-5.6.6-7.7 1.7")
.style("fill", "#ff717f");
smileyContainer.append("path")
.attr("d","m47 36c-15 0-15 0-29.9 0-2.1 0-2.1 4-.1 4 10.4 0 19.6 0 30 0 2 0 2-4 0-4")
.style("fill", "#fff");
var tears = smileyContainer.append("g")
.style("fill", "#65b1ef")
tears.append("path")
.attr("d", "m59.4 36.9c7.3 7.7-2.6 18.1-9.9 10.4-5.3-5.6-5.6-16.3-5.6-16.3s10.2.3 15.5 5.9")
tears.append("path")
.attr("d", "m14.5 47.3c-7.3 7.7-17.2-2.7-9.9-10.4 5.3-5.6 15.5-5.9 15.5-5.9s-.3 10.7-5.6 16.3")
var eyes = smileyContainer.append("g")
.style("fill", "#664e27")
eyes.append("path")
.attr("d", "m28.5 28.7c-1.9-5.1-4.7-7.7-7.5-7.7s-5.6 2.6-7.5 7.7c-.2.5.8 1.4 1.3.9 1.8-1.9 4-2.7 6.2-2.7 2.2 0 4.4.8 6.2 2.7.6.5 1.5-.4 1.3-.9")
eyes.append("path")
.attr("d", "m50.4 28.7c-1.9-5.1-4.7-7.7-7.5-7.7s-5.6 2.6-7.5 7.7c-.2.5.8 1.4 1.3.9 1.8-1.9 4-2.7 6.2-2.7s4.4.8 6.2 2.7c.5.5 1.5-.4 1.3-.9")
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment