Skip to content

Instantly share code, notes, and snippets.

@enjalot

enjalot/.block

Last active November 16, 2017 21:54
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 enjalot/740429dcf26cb1a3530e6cebc6ac4b88 to your computer and use it in GitHub Desktop.
Save enjalot/740429dcf26cb1a3530e6cebc6ac4b88 to your computer and use it in GitHub Desktop.
Download ZIP
siumei 囍 ian
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700" rel="stylesheet">
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
text {
font-size: 140px;
font-family: 'Libre Baskerville', serif;
text-anchor: middle;
}
.mei {
fill: "#f33"
}
</style>
</head>
<body>
<script>
var cX = 500;
var cY = 300;
var txm = 50;
var mei = [
{c: 's', tx: txm + 365},
{c: 'i', tx: txm + 320},
{c: 'u', tx: txm + 265},
{c: 'm', tx: txm + 155},
{c: 'e', tx: txm + 55},
{c: 'i', tx: txm},
];
var txi = 130
var ian = [
{c: 'i', tx: txi},
{c: 'a', tx: txi + 55},
{c: 'n', tx: txi + 130},
];
//var AND = "&";
var AND = "囍";
var speed = 0.01
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
// RENDER MEI
var meig = svg.selectAll("g.mei").data(mei)
var meigE = meig.enter().append("g").classed("mei", true)
.attr("transform", function(d,i) {
if(i == 5)
return "translate(" + [cX, cY] + ")"
return "translate(" + [cX - 25 - txm, cY] + ")"
})
.style("opacity", function(d,i) {
if(i == 5) return 1
return 0;
})
meigE.append("rect")
//.attr("width", 20)
//.attr("height", 20)
meigE.append("text")
.text(function(d) {return d.c})
meig = meigE.merge(meig)
meig
.transition()
.duration(function(d,i) {
if(i == 5) return (1000) * speed
return (1200 + (5-i) * 200) * speed;
})
.delay(function(d,i) {
if(i == 5) return 0;
return (1000 + (5-i) * 100) * speed
})
.style("opacity", 1)
.attr("transform", function(d,i) {
return "translate(" + [cX - d.tx, cY] + ")"
})
// RENDER IAN
var iang = svg.selectAll("g.ian").data(ian)
var iangE = iang.enter().append("g").classed("ian", true)
.attr("transform", function(d,i) {
if(i == 0)
return "translate(" + [cX, cY] + ")"
return "translate(" + [cX + txi + 25, cY] + ")"
})
.style("opacity", function(d,i) {
if(i == 0) return 1
return 0;
})
iangE.append("rect")
//.attr("width", 20)
//.attr("height", 20)
iangE.append("text")
.text(function(d) {return d.c})
iang = iangE.merge(iang)
iang
.transition()
.duration(function(d,i) {
return (1000 + (i) * 500) * speed
})
.delay(function(d,i) {
if(i == 0) return 0
return (400 + (i) * 600) * speed
})
.style("opacity", 1)
.attr("transform", function(d,i) {
return "translate(" + [cX + d.tx, cY] + ")"
})
var amp = svg.append("text").text(AND)
.attr("x", cX + 40)
.attr("y", cY - 6)
.style("fill", "#111")
.style("font-size", "120px")
.style("font-family", "LiHei Pro")
.style("opacity", 0)
.transition()
.ease(d3.easeSin)
.duration(2000 * speed)
.delay(2500 * speed)
.style("opacity", 1)
.style("fill", "#992300")
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment