Published
Edited
Dec 5, 2020
Insert cell
Insert cell
lateNight = html`
<h2>Late night</h2>
<div class="example">
</div>
<style>
.example {
height: 400px;
width: ${width};
background-color: #03063d;
background-image: linear-gradient(180deg, #03063d 26%, #103852 74.7%, #092716 75%, #092716 100%);
}
</style>
`
Insert cell
dayTime = html`
<h2>Beautiful Day</h2>
<p>(Those of you wondering how a single, thin, grey cloud could perfectly cover the whole sky have never lived in Seattle 😟)</p>
<div class="dayTime">
</div>
<style>
.dayTime {
height: 400px;
width: ${width};
background-color: #ffffff;
background-image: linear-gradient(180deg, #4da3d6 0%, #4da3d6 2%, #dddddd 7%, #dddddd 10%, #4da3d6 15%, #63AAD4 65%, #096F24 66%, #11b33b 100%);
}
</style>`
Insert cell
sunset = html`
<h2>Sunset</h2>
<div class="sunset">
</div>
<style>
.sunset {
height: 400px;
width: ${width};
background-image: linear-gradient(180deg, #fa709a 0%, #fee140 65%, #506F09 66%, #88B311 100%);
}
</style>`
Insert cell
Insert cell
sunset2 = html`
<p>So first let's make our sun set in the corner of the screen.</p>
<div class="sun-corner">
</div>
<style>
.sun-corner {
height: 400px;
width: ${width};
background-image: linear-gradient(150deg, #FA8970 0%, #fa709a 60%, #fee140 95%, #fee140 100%);
}
</style>`
Insert cell
sunset2backgrounds = html`
<p>Now we can drop our second background, which has transparency, on top of that.</p>
<div class="sunset3" id="particles1">
</div>
<style>
.sunset3 {
height: 400px;
width: ${width};
background:
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 65%, #506F09 66%, #88B311 100%),
linear-gradient(150deg, #FA8970 0%, #fa709a 65%, #fee140 75%, #fee140 100%)
;
}
</style>`
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more