<link href="https://fonts.googleapis.com/css?family=Exo+2:800|Maven+Pro:900|Source+Sans+Pro:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Modak|Montserrat:900" rel="stylesheet">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<video playsinline autoplay loop muted poster="" id="bgvid">
<source src="http://www.danielsilber-baker.com/_content/sunset.mp4" type="video/mp4">
</video>
<div id="container" class="svg-container"></div>
/*SETUP*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
color: #FFA847;
/* font-family: 'Montserrat', sans-serif; */
/* font-family: 'Modak', cursive; */
font-family: 'Maven Pro', sans-serif;
font-size: 90px;
width: 100vw;
margin: auto;
}
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
#container {
/* position: relative; */
width: 100vw;
height: 75vh;
margin-top: 0;
top:0;
position:absolute;
}
.svg-container {
background-color: rgba(79, 0, 16, .1);
display: inline-block;
/* position: relative; */
width: 100%;
vertical-align: top;
overflow: hidden;
}
var vid = document.getElementById("bgvid");
vid.playbackRate = 0.5;
// console.log(vid.duration)
let margin = {top: 0, bottom: 0, left: 0, right:50}
let width = 960-margin.left-margin.right;
let height = 800-margin.top-margin.bottom;
let offset = [width*.33, width*.66]
let circleSize = 150;
// let lineData = [
// { "x": 0,"y": height/2+circleSize},
// { "x": offset[1]-offset[0] , "y": height/2+(circleSize*2)},
// { "x": width, "y": height/2+circleSize}
// ]
let lineData = [
{ "x": 0,"y":900},
{ "x": offset[0] , "y": 600},
{ "x": offset[1], "y": 600},
{ "x": width, "y": 900}
]
var xScale = d3.scaleLinear().range([25, width-25])
var yScale = d3.scaleLinear().range([height-50,50])
xScale.domain(d3.extent(lineData, function(d) { return d.x; }));
yScale.domain([0, d3.max(lineData, function(d,i) { return d.y*i; })]);
// var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
var lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d, i) { return d.y; })
// .curve(d3.curveBasisClosed)
.curve(d3.curveMonotoneY);
// var arc = d3.arc()
// .innerRadius(280)
// .outerRadius(240)
// .startAngle(90);
var graph = d3.select("div#container")
.append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 800")
.classed("playground", true)
let path = graph.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "rgba(165, 102, 139, 0)")
.attr("stroke-width", 4)
.attr("id", "wavy") //Unique id of the path
.attr("fill", "none");
graph.append("text")
.style("stroke", "rgba(225, 227, 224, .1)")
.style("fill", "transparent")
.style("font-size", "250px")
.attr("dy", ".5em")
.attr("dx", ".15em")
// .attr("transform", "translate(100,-10) rotate(-29)")
.attr("transform", "translate(-10, -150)")
.attr("x", width/2)
.append("textPath") //append a textPath to the text element
.attr("xlink:href", "#wavy") //place the ID of the path here
.style("text-anchor","middle") //place the text halfway on the arc
// .attr("transform", "translate(400,150) rotate(0)")
.attr("textLength","900")
.style("filter", "url(#drop-shadow)")
.text("MOON")
var defs = graph.append("defs");
// create filter with id #drop-shadow
// height=130% so that the shadow is not clipped
var filter = defs.append("filter")
.attr("id", "drop-shadow")
.attr("height", "130%");
// SourceAlpha refers to opacity of graphic that this filter will be applied to
// convolve that with a Gaussian with standard deviation 3 and store result
// in blur
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", 5)
.attr("result", "blur");
// translate output of Gaussian blur to the right and downwards with 2px
// store result in offsetBlur
filter.append("feOffset")
.attr("in", "blur")
.attr("dx", 5)
.attr("dy", 5)
.attr("result", "offsetBlur");
// overlay original SourceGraphic over translated blurred opacity by using
// feMerge filter. Order of specifying inputs is important!
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
.attr("in", "offsetBlur")
feMerge.append("feMergeNode")
.attr("in", "SourceGraphic");
repeat();
function repeat(){
var p = d3.transition()
.duration(13500)
// .ease(d3.easePolyInOut);
.ease(d3.easeCubicOut);
d3.selectAll("text")
.transition(p)
// .style("font-size", "340px")
.styleTween("fill", function() {
return d3.interpolateRgb("rgba(225, 227, 224, .001)", "rgba(245, 247, 241, .06)" );
})
// .attr("transform", "translate(20,-400) ")
// .attr("textLength","1200")
.attr("transform", "translate(120, -550) rotate(9) ")
// .attr("transform", "translate(100, -500) rotate(9)")
.transition()
.delay(1500)
.duration(500)
.attr("opacity", 0)
.transition()
.duration(250)
// .attr("transform", "translate(-200,400) rotate(-9)")
.attr("transform", "translate(-200,550)")
// .style("font-size", "300px")
.transition()
.delay(20)
.duration(500)
// .style("fill", "rgba(225, 227, 224, .1)")
.attr("opacity", 1)
.on("end", repeat);
}
This Pen doesn't use any external CSS resources.