Skip to content

Instantly share code, notes, and snippets.

@lbonanomi
Last active October 30, 2020 18:07
Show Gist options
  • Save lbonanomi/c32a7c6ae982ae4d81f4ac884258e006 to your computer and use it in GitHub Desktop.
Save lbonanomi/c32a7c6ae982ae4d81f4ac884258e006 to your computer and use it in GitHub Desktop.
Partially automated SVG scrolls
#!/bin/bash
wd=$(mktemp -d)
function gothique {
# re-type everything in unicode blackletter font
#
seed=1D56C
for num in $(seq 65 90; seq 97 122)
do
dseed=$(echo "obase=10; ibase=16; $seed" | bc)
letter=$(echo | awk '{ print sprintf("%c", '$num') }')
cat $1 | awk '{split($0,chars,"");for(i=1;i<=length($0);i++) {if (chars[i] == "'$letter'") {system("printf \"\\U'$seed'\"")} else {printf chars[i]}}}' > $1.tmp && mv $1.tmp $1
seed=$(echo "obase=16; ibase=10; $((dseed+1))" | bc)
done
}
function initial {
# Firt letter of first line a little bigger, and in a colored box
#
echo $1 > $wd/initialize
gothique $wd/initialize
printf '<svg height="2000" width="5000">\n<rect x="550" y="150" width="480" height="380" style="fill:rgb(0,100,80);stroke:gold;stroke-width:20;opacity:1.0" />'
printf '<text x="600" y="450" fill="rgb(0,0,111)" font-size="23em">'$(cat $wd/initialize)'</text>'
echo;echo;
rm $wd/initialize
}
if [[ -z "$1" ]]
then
echo "$0 reads files, not streams"
exit 1
fi
# Add SVG headers
#
printf '<?xml version="1.0" standalone="no"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="5000" height="2250" style="background: white">'
# Break-down input into individual lines. First letter of fist line should be made fancier
# https://en.wikipedia.org/wiki/Initial
#
ln=0
cat $1 | while read line
do
if [[ $ln == "0" ]]
then
echo $line | cut -c1 --complement > /$wd/$ln
initial $(echo $line | cut -c1)
else
echo "$line" > /$wd/$ln
fi
gothique /$wd/$ln
ln=$(($ln+1))
done
# Initial vertical tab. NOTE: Also controls indentation
line=490
for part in $(ls $wd)
do
if [[ $line == 490 ]]
then
awk '{ print "<text x=\"1000\" y=\"'$line'\" font-size=\"10em\">"$0"</text>"}' $wd/$part
else
awk '{ print "<text x=\"600\" y=\"'$line'\" font-size=\"10em\">"$0"</text>"}' $wd/$part
fi
line=$(($line+200))
done
printf "</svg>\n"
# Source handsome braidwork borders
curl https://gist.githubusercontent.com/lbonanomi/89f743923407b2f1443feada0dc80a3c/raw/0148a2c2c908541da9714352f4adde5b6de2c47f/left-braid.svg
curl https://gist.githubusercontent.com/lbonanomi/accac40b46ede8049aeca3a69d881730/raw/cb373974b0e04e6408c7ff6f98ca25e6c545c7bb/right-braid.svg
printf "</svg>\n"
Display the source blob
Display the rendered blob
Raw
<?xml version="1.0" standalone="no"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="5000" height="2250" style="background: white"><svg height="2000" width="5000">
<rect x="550" y="150" width="480" height="380" style="fill:rgb(0,100,80);stroke:gold;stroke-width:20;opacity:1.0" /><text x="600" y="450" fill="rgb(0,0,111)" font-size="23em">𝕷</text>
<text x="1000" y="490" font-size="10em">π•­π–”π–“π–†π–“π–”π–’π–Ž π–’π–Žπ–˜π–˜π–Šπ–˜ 𝖆𝖑𝖑 𝖔𝖋 π–π–Žπ–˜ π–‹π–—π–Žπ–Šπ–“π–‰π–˜ 𝖆𝖙</text>
<text x="600" y="690" font-size="10em">π–™π–π–Š π•Έπ–†π–—π–žπ–‘π–†π–“π–‰ π•½π–Šπ–“π–†π–Žπ–˜π–˜π–†π–“π–ˆπ–Š π•±π–†π–Žπ–—π–Š.</text>
<text x="600" y="1090" font-size="10em">𝕿𝖍𝖆𝖙 π–Žπ–˜ 𝖆𝖑𝖑.</text>
</svg>
<svg height="2250" width="7000">
<rect width="500" height="2550" x="0" y="0" style="fill:rgb(255,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
<line x1="250" y1="0" x2="0" y2="250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="0" x2="500" y2="250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="00" y1="250" x2="250" y2="500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="500" y1="250" x2="250" y2="500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="250" x2="0" y2="500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="250" x2="500" y2="500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="0" y1="500" x2="250" y2="750" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="500" y1="500" x2="250" y2="750" style="stroke: rgb(220,220,80);stroke-width:25" />
<!-- 250 500 attaches the line to the tip of the top diamond, the 250,1000 to the top of the bottom diamond -->
<path d="M 250 500 Q 500,750 250,1000" stroke="rgb(220,220,80)" stroke-width="25" fill="none" />
<path d="M 250 500 Q 0,750 250,1000" stroke="rgb(220,220,80)" stroke-width="25" fill="none" />
<line x1="250" y1="750" x2="0" y2="1000" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="750" x2="500" y2="1000" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="0" y1="1000" x2="250" y2="1250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="500" y1="1000" x2="250" y2="1250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="1000" x2="0" y2="1250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="00" y1="1250" x2="250" y2="1500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="1500" x2="500" y2="1250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="1000" x2="500" y2="1250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="1250" x2="0" y2="1500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="1250" x2="500" y2="1500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="0" y1="1500" x2="250" y2="1750" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="500" y1="1500" x2="250" y2="1750" style="stroke: rgb(220,220,80);stroke-width:25" />
<path d="M 250 1500 Q 500,1750 250,2000" stroke="rgb(220,220,80)" stroke-width="25" fill="none" />
<path d="M 250 1500 Q 0,1750 250,2000" stroke="rgb(220,220,80)" stroke-width="25" fill="none" />
<line x1="250" y1="1750" x2="0" y2="2000" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="1750" x2="500" y2="2000" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="0" y1="2000" x2="250" y2="2250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="500" y1="2000" x2="250" y2="2250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="2000" x2="0" y2="2250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="00" y1="2250" x2="250" y2="2500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="2500" x2="500" y2="2250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="250" y1="2000" x2="500" y2="2250" style="stroke: rgb(220,220,80);stroke-width:25" />
</svg> <svg height="2250" width="7000">
<rect width="500" height="2550" x="4500" y="0" style="fill:rgb(255,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
<line x1="4750" y1="0" x2="4500" y2="250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="0" x2="5000" y2="250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4500" y1="250" x2="4750" y2="500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="5000" y1="250" x2="4750" y2="500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="250" x2="4500" y2="500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="250" x2="5000" y2="500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4500" y1="500" x2="4750" y2="750" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="5000" y1="500" x2="4750" y2="750" style="stroke: rgb(220,220,80);stroke-width:25" />
<!-- 250 500 attaches the line to the tip of the top diamond, the 250,1000 to the top of the bottom diamond -->
<path d="M 4750 500 Q 5000,750 4750,1000" stroke="rgb(220,220,80)" stroke-width="25" fill="none" />
<path d="M 4750 500 Q 4500,750 4750,1000" stroke="rgb(220,220,80)" stroke-width="25" fill="none" />
<line x1="4750" y1="750" x2="4500" y2="1000" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="750" x2="5000" y2="1000" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4500" y1="1000" x2="4750" y2="1250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="5000" y1="1000" x2="4750" y2="1250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="1000" x2="4500" y2="1250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4500" y1="1250" x2="4750" y2="1500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="1500" x2="5000" y2="1250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="1000" x2="5000" y2="1250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="1250" x2="4500" y2="1500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="1250" x2="5000" y2="1500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4500" y1="1500" x2="4750" y2="1750" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="5000" y1="1500" x2="4750" y2="1750" style="stroke: rgb(220,220,80);stroke-width:25" />
<path d="M 4750 1500 Q 5000,1750 4750,2000" stroke="rgb(220,220,80)" stroke-width="25" fill="none" />
<path d="M 4750 1500 Q 4500,1750 4750,2000" stroke="rgb(220,220,80)" stroke-width="25" fill="none" />
<line x1="4750" y1="1750" x2="4500" y2="2000" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="1750" x2="5000" y2="2000" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4500" y1="2000" x2="4750" y2="2250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="5000" y1="2000" x2="4750" y2="2250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="2000" x2="4500" y2="2250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4500" y1="2250" x2="4750" y2="2500" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="2500" x2="5000" y2="2250" style="stroke: rgb(220,220,80);stroke-width:25" />
<line x1="4750" y1="2000" x2="5000" y2="2250" style="stroke: rgb(220,220,80);stroke-width:25" />
</svg></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment