md`# TEXTING & TITLING`
html`
<h1 class="big-bold h1">Thunderbird</h1>
<h2 class="big-bold h2">BubbleGum</h2>`
//imported by webfont loader
BigBoldHeading = html`
<i style="color:salmon">Big and Bold Heading Styles</i>
<link href="https://fonts.googleapis.com/css?family=Bungee&display=swap" rel="stylesheet">
<style>
.big-bold{
font-family: Bungee;
text-align: center;
min-width: ${width}px;
text-align: center;
white-space: no-wrap;
}
.h1{
line-height: 4.5rem;
font-size: 4.5rem;
color: rgb(249, 69, 96);
text-shadow: rgb(65, 32.5, 80) 0.4rem 0.4rem,
rgb(255, 200, 60) 0.8rem 0.8rem;
}
.h2{
font-size: 3rem;
color: ${d3.lab(74, 95, 20)};
background: #43214F;
line-height: 3.4rem;
height: 3.6rem;
text-shadow: rgb( 67, 33, 79) 0.2rem 0.2rem,
rgb(249, 70, 100) 0.3rem 0.3rem;
vertical-align:top;
}
</style>`
md`---`
TypeWriter
md`---`
Embossed = {
let embossed_uid = DOM.uid('embossed');
let view = html`
<div id="${embossed_uid.id}">
<span class="embossed-text">Impressive Embossing</span>
</div>
<style>
#${embossed_uid.id} {
user-select:none;
font-family: Crimson Pro;
font-variation-settings: 'wght' ${weight};
background: #222;
color: #131313;
text-align:center;
font-size:50px;
border:white 3px double;
}
#${embossed_uid.id} > span{
box-sizing:border-box;
min-width:${width}px;
vertical-align:center;
text-align: center;
text-transform: uppercase;
text-shadow: #666 0px 1px 2px;
font-variant: small-caps;
line-height:100px;
}</style>
`;
yield view;
}
viewof weight = slider({ min: 100, max: 900, step: 100, value: 900 })
VariableFont = html`<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900"><div style="font-family: Crimson Pro; font-size: 3rem; text-align: center; font-variation-settings: 'wght' ${weight}"> ${d3
.range(0, 26, 1)
.map(x => String.fromCharCode(65 + x))
.join(',')}</div>`
md`---`
Tradingday = {
let TD_uid = DOM.uid("trading-day-title");
let view = html`
<svg width=${width} height=150 id=${TD_uid.id}>
<text text-anchor=middle dominant-baseline=middle x=${width /
2} y=75>TradingDay</text>
</svg>
<style>
#${TD_uid.id} > text
{
stroke:black;
stroke-width:1;
stroke:black;
opacity:1;
font-family: Playfair Display;
font-weight:900;
font-size: 6em;
filter: ${money};
}
</style>`;
yield view;
}
{
//using this as a class...
let ref = DOM.uid();
return html`
<div class="${ref.id}" contenteditable>NYSE</div>
<h3 contenteditable>NYSE:AMEX</h3>
<h3 contenteditable>NYSE:ARCA</h3>
<div class="${ref.id}" contenteditable>NASDAQ</div>
<h3 contenteditable>NASDAQ:PHLX</h3>
<h3 contenteditable>NASDAQ:CapitalMarkets</h3>
<h3 contenteditable>NASDAQ:GlobalMarkets</h3>
<div class="${ref.id}" contenteditable>The Options Clearing Corp (TheOCC)</div>
<style>
.${ref.id} {
margin: 0;
padding-bottom: 0.05em;
background: ${colors[Math.floor(Math.random() * colors.length)]};
border-bottom: 0.15em solid black;
text-align: center;
font-family:;
font-size: 3em;
font-style: italic;
font-weight: 900;
color: white;
letter-spacing: -0.05em;
-webkit-text-stroke: 0.04em black;
text-transform: uppercase;
text-shadow: -0.02em 0.02em 0 black, -0.04em 0.04em 0 black, -0.06em 0.06em 0 black, -0.08em 0.08em 0 black, -0.10em 0.10em 0 black, -0.12em 0.12em 0 black, -0.14em 0.14em 0 black;
}
${d3.range(0, 8).map((x, i) => {
return `.${ref.id}:nth-child(1) {
background: ${colors[i]};`;
})}
</style>
<hr>
`;
}
md`---`
//click on any letter to turn on lighting
FlickerText('CLICK-BAIT')
function* FlickerText(someText) {
let splitText = someText.split('');
let flickerableText = splitText.map(d => {
return `<span class="flickerable">${d}</span>`;
});
yield html`${flickerableText}`;
d3.selectAll('.flickerable').on('click', function() {
d3.select(this).attr('style', function() {
return (
d3.select(this).attr('style') +
`animation: text-flicker-in-glow ${Math.random() *
4}s linear both;color: hsla(${d3.randomNormal(
0,
360
)()}, 100%, 80%, 1);`
);
});
});
}
html`<style>
@import url('https://fonts.googleapis.com/css?family=Monoton');
@-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}
.flickerable {
font-weight: 400;
font-size: 128px;
text-align: center;
transition:text-flicker-in-glow;
font-family:Monoton;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
}
.flickerable::selection{
none;
}
</style>
`
SimpleGradient = html` <hr><hr>
<div class="blue-gradient"> <span class="blue-gradient-text">TradingDay Styles</span></div>
<style>
.blue-gradient {
background:#222222;
position: relative;
font-size: 4rem;
margin-top: 0;
font-family:serif;
}
.blue-gradient .blue-gradient-text {
margin-left: 25%;
text-decoration: none;
color: salmon;
position: absolute;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
}
.blue-gradient:after {
opacity:0.5;
mix-blend-mode:screen;
content : 'TradingDay';
color: blue;
text-shadow: 0 1px 0 white;
margin-left:25.4%;
opacity:0.3;
}
</style>
`
SnakeyText = {
let text = "STOCK MARKET";
let stroke_uid = DOM.uid('stroked');
let height = 150;
let view = html`<svg width=${width} height=${height}>
<symbol id=${stroke_uid.id} >
<text text-anchor="middle"
dominant-baseline="hanging"
x="50%"
y="0%"
class="text--line"
>
${text}
</text>
</symbol>
<use xlink:href="#${stroke_uid.id}"
class="text-copy">
</use>
</svg>
<style>
.text--line {
font-size: 7rem;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 5 2;
stroke-width: 3px;
font-size:1rem;
-webkit-animation: stroke-offset 20s infinite linear;
animation: stroke-offset 20s infinite linear;
}
.text-copy:nth-child(1) {
stroke: #360745;
stroke-dashoffset: 20%;
}
.text-copy:nth-child(2) {
stroke: #D61C59;
stroke-dashoffset: 40%;
}
.text-copy:nth-child(3) {
stroke: #E7D84B;
stroke-dashoffset: 60%;
}
.text-copy:nth-child(4) {
stroke: #EFEAC5;
stroke-dashoffset: 80%;
}
.text-copy:nth-child(5) {
stroke: #1B8798;
stroke-dashoffset: 100%;
}
@-webkit-keyframes stroke-offset {
50% {
stroke-dashoffset: 0%;
stroke-dasharray: 100% 87.5%;
}
}
@keyframes stroke-offset {
50% {
stroke-dashoffset: 100%;
stroke-dasharray: 100% 87.5%;
}
}
</style>`;
return view;
}
Lined = {
let text_uid = DOM.uid('lined-with-shadow');
let view = html`
<svg width=${width} height=150 id=${text_uid.id}>
<text text-anchor=middle dominant-baseline=middle x=${width /
2} y=75>IBM</text>
<svg>
<style>
#${text_uid.id} > text {
stroke:black;
stroke-dasharray:6 2;
stroke-dashoffset:500;
font-family: sans-serif;
font-weight:900;
font-size: 6rem;
fill: ${sanbornHatch};
filter:${shadow};
}
</style>`;
yield view;
}
shadow=DOM.uid('shadow')
StripedFilter = {
return html`<span style="color:pink;"><i>StripedFilter</i></span><svg height=0 width=0>
<defs>
<pattern id=${sanbornHatch.id} width="4" height="4" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="4" style="stroke:black; stroke-width:1;fill:black;" />
</pattern>
<filter id=${shadow.id} height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="10" dy="10" result="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs></svg>`;
}
sanbornHatch=DOM.uid('sanborn')
MoneyFilter = html`<span style="color:pink;"><i>MoneyFilter</i></span>
<svg width='0' height='0'>
<filter id="${money.id}">
<feMorphology in='SourceGraphic' operator='dilate' radius='2' result='expand'/>
<feOffset in='expand' dx='1' dy='1' result='shadow_1'/>
<feOffset in='expand' dx='2' dy='2' result='shadow_2'/>
<feOffset in='expand' dx='3' dy='3' result='shadow_3'/>
<feOffset in='expand' dx='4' dy='4' result='shadow_4'/>
<feOffset in='expand' dx='5' dy='5' result='shadow_5'/>
<feOffset in='expand' dx='6' dy='6' result='shadow_6'/>
<feOffset in='expand' dx='7' dy='7' result='shadow_7'/>
<feMerge result='shadow'>
<feMergeNode in='expand'/>
<feMergeNode in='shadow_1'/>
<feMergeNode in='shadow_2'/>
<feMergeNode in='shadow_3'/>
<feMergeNode in='shadow_4'/>
<feMergeNode in='shadow_5'/>
<feMergeNode in='shadow_6'/>
<feMergeNode in='shadow_7'/>
</feMerge>
<feFlood flood-color='#ebe7e0'/>
<feComposite in2='shadow' operator='in' result='shadow'/>
<feMorphology in='shadow' operator='dilate' radius='1' result='border'/>
<feFlood flood-color='#35322a' result='border_color'/>
<feComposite in2='border' operator='in' result='border'/>
<feOffset in='border' dx='1' dy='1' result='secondShadow_1'/>
<feOffset in='border' dx='2' dy='2' result='secondShadow_2'/>
<feOffset in='border' dx='3' dy='3' result='secondShadow_3'/>
<feOffset in='border' dx='4' dy='4' result='secondShadow_4'/>
<feOffset in='border' dx='5' dy='5' result='secondShadow_5'/>
<feOffset in='border' dx='6' dy='6' result='secondShadow_6'/>
<feOffset in='border' dx='7' dy='7' result='secondShadow_7'/>
<feOffset in='border' dx='8' dy='8' result='secondShadow_8'/>
<feOffset in='border' dx='9' dy='9' result='secondShadow_9'/>
<feOffset in='border' dx='10' dy='10' result='secondShadow_10'/>
<feOffset in='border' dx='11' dy='11' result='secondShadow_11'/>
<feMerge result='secondShadow'>
<feMergeNode in='border'/>
<feMergeNode in='secondShadow_1'/>
<feMergeNode in='secondShadow_2'/>
<feMergeNode in='secondShadow_3'/>
<feMergeNode in='secondShadow_4'/>
<feMergeNode in='secondShadow_5'/>
<feMergeNode in='secondShadow_6'/>
<feMergeNode in='secondShadow_7'/>
<feMergeNode in='secondShadow_8'/>
<feMergeNode in='secondShadow_9'/>
<feMergeNode in='secondShadow_10'/>
<feMergeNode in='secondShadow_11'/>
</feMerge>
<feImage x='0' y='0' width='${width}' height='200' xlink:href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/stripes.svg'/>
<feComposite in2='secondShadow' operator='in' result='secondShadow'/>
<feMerge>
<feMergeNode in='secondShadow'/>
<feMergeNode in='border'/>
<feMergeNode in='shadow'/>
<feMergeNode in='SourceGraphic'/>
</feMerge>
</filter>
</svg>
`
money=DOM.uid("money")
md`---
Some Readings:
- [Line Height & Vertical Align](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align)
- [CSS Alignment](https://www.smashingmagazine.com/2019/03/css-alignment/)
- [Many Ways to Center](https://www.w3.org/Style/Examples/007/center.en.html)
---
## Workspace`
html`
<div class="body"><div class="logo">
<svg class="text" viewBox="0 0 ${width} ${400}">
<text
fill="none"
stroke="#fff"
transform="translate(3 152)"
stroke-width="3"
font-size="222"
font-family="Montserrat-Black, Montserrat"
font-weight="800"
letter-spacing="0.1em"
class="is-active">
<tspan>TextText</tspan>
</text>
</svg>
</div>
<style>
.body {
background-color: #171717;
display: flex;
justify-content: center;
height: 400px;
}
.text {
width: 100%;
max-width: 900px;
}
.text text {
color: #F3F3F3;
stroke-width: 3px;
stroke-dashoffset: -800;
stroke-dasharray: 800;
}
.text text.is-active {
animation-name: text;
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes text {
50% {
fill: transparent;
}
75% {
fill: transparent;
stroke-dashoffset: 0;
stroke-width: 3px;
}
100% {
stroke-dashoffset: 0;
fill: #F3F3F3;
stroke-width: 0px;
}
}
</style>
`
md`---
## ANX`
WebFont = require("https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js")
fonts = new Promise(active =>
WebFont.load({
google: {
families: ["Playfair Display", "Bungee"]
},
active
})
)
import { slider } from '@jashkenas/inputs'
d3=require('d3')
import { ColorObject } from '@stroked/utils'
colors = Object.values(ColorObject)
GeneratingColors = {
let colorCross = [];
for (let a of ['c', 'b']) {
for (let b of ['e', 'e']) {
for (let c of ['b', '3']) {
colorCross.push([a, b, c]);
}
}
}
return colorCross;
}
StylingStyles = html`<style>
i{
color:salmon;
}
</style>`
html`STOP ALL SELECTIONS<style>
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}</style>`
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.
