Ben Crowder

Blog: #svg

18 posts :: tag feed :: about the blog :: archive

A short followup to what I wrote last year about Press, my abandoned typesetting engine project: I’m now fully convinced that the web platform is where I want to do typesetting. It’s open, programmatic, and capable. Source files are plain text, easy to version control, and fairly future-proof. And even though it’s not WYSIWYG — at least not the way I’m using it — it’s much more comfortable for me as a working environment.

For non-book work (charts, some kinds of documents), I’ve found that browsers already support everything I need (like @page). That’s how I’ve done all my recent genealogy design work, and it’s how I’ll do any language charts I make going forward. And for things like books where browser support isn’t quite there yet, Paged.js works well (and will presumably be phased out once browser support gets better).

Not to mention how nice it is for both print and digital workflows (EPUB, web) to all use the same technologies. I also love that the web is cross-platform. Something I ran into when I was making charts with PlotDevice (which is Mac-only) was that people on Windows couldn’t modify the charts even when I gave them the source. That’s not a problem with the web.

I’ve even started using the web platform for less webby things like making wallpaper for my phone:

Dark cloudy background with the text of Matthew 11:28 at the center.

Here’s the HTML (the 375×812px size is the CSS resolution of my iPhone 12 Mini — RIP — and also keep in mind that this was for a one-off never to see the light of day, so I took the liberty of cutting a few corners):

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="background">
    <svg id="darknoise" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
      <filter id="noiseFilter">
        <feTurbulence baseFrequency="0.5" numOctaves="8" />
      </filter>
      <rect width="100%" height="100%" filter="url(#noiseFilter)" />
    </svg>

    <svg id="lightnoise" viewBox="0 0 375 812" xmlns="http://www.w3.org/2000/svg">
      <filter id="noiseFilter2">
        <feTurbulence seed="485" baseFrequency="0.005" numOctaves="12" />
      </filter>
      <rect width="100%" height="100%" filter="url(#noiseFilter2)" />
    </svg>
  </div>

  <div class="quote">Come unto me, all ye that labour and are heavy laden, and I will give you rest.</div>

  <div class="reference">Matthew 11:28</div>
</body>
</html>

The CSS (with the font purchased from FontShop):

* {
  box-sizing: border-box;
  font-family: Clifford Pro;
}

html {
  height: 100%;
}

body {
  color: #777;
  font-size: 1.6rem;
  margin: 0;
  text-align: center;
}

.background {
  background: radial-gradient(circle at 50% 90%, #222, #111);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.background svg#darknoise {
  bottom: 0;
  filter: saturate(0);
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.9;
  position: absolute;
  right: 0;
  top: 0;
}

.background svg#lightnoise {
  bottom: 0;
  filter: saturate(0);
  left: 0;
  mix-blend-mode: soft-light;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 0;
}

.quote {
  line-height: 1.4;
  margin: 25rem 1.5rem 0;
}

.reference {
  color: hsl(0 40% 32%);
  font-size: 1.3rem;
  font-style: italic;
  margin-top: 1rem;
}

I then used headless Chrome to export the PNG (Firefox would probably have worked as well, though I haven’t yet tested it for this):

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --disable-gpu --screenshot --window-size=375x812 index.html

It’s not the world’s most amazing wallpaper or anything, but I’m still pleased that I was able to make something I’m reasonably happy with using technologies I love. (I could have also used WebGL shaders or Canvas. Lots of options!)

Here’s to the open web.


Reply via email or via office hours

Projects — Prints 2.1

Religious art

Before the World Was VI
Before the World Was VI. Another take on the celestial yin & yang version.
Follow Me
Follow Me. I really like the bolder colors here. One of my favorites.
I’ve a Mother There III
I’ve a Mother There III. I wasn’t sure whether I wanted to do another negative space piece but decided to go for it.
In Their Own Image
In Their Own Image. Finally branched out to some other scriptures for my Heavenly Parents pieces. Initially this one looked too much like a restroom sign. Also, I don’t know that I’ve found the simplest way to represent this idea yet.
A Beloved Daughter
A Beloved Daughter. I was reading Elder Renlund’s conference talk and realized I hadn’t done this yet.
Prodigal Son II
Prodigal Son II. Fairly close to the first iteration but without the unnecessary ground.

Other art

Lately I’ve been playing around with making meaningless decorative pieces in Blender, using displacement maps with (for the most part) procedural heightfields. For these I’ve generally textured the heightfield in Affinity Photo and sometimes also textured a separate color map. Looking forward to doing more work in this vein.

Pattern 001
Pattern 001. This is the one that wasn’t procedural; I made the heightfield in Figma. While I like the way the sun lamp lights things evenly, it still feels maybe a little too harsh to me. I think of this piece as some kind of vintage fabric.
Pattern 002 A
Pattern 002 A. Kind of going for a Central American archaeological feel here. For this I wrote a Python script that generated rectangles on a grid in SVG for the heightfield. Switched to a spotlight lamp, and added some fog. I added the green in post.
Pattern 002 B
Pattern 002 B. Same script as 002 A, this time with different textures and lighting. Going for a Middle Eastern archaeological feel. I also added a slight bit of rippling and rotational blur on top to make it feel a little magical.
Pattern 003 A
Pattern 003 A. New script. Fairly pleased with how this turned out — all the different varieties that come out from random circles. (Since that’s all the heightfield is, really.) I added the lower-level squares on a last-minute impulse and I’m glad I did.
Pattern 003 B
Pattern 003 B. Same script as 003 A. I love love love the way the heightfield texture makes it look like things are growing, in a creepy way. Added depth of field to make things look more underwater. I’m happy with the old-photograph feel, too.
Pattern 004
Pattern 004. It still blows my mind that I can take a black-and-white heightfield and use it to generate art like this. Kind of cool how several of these look like they’re bowls even though the interiors aren’t actually rounded.

Reply via email or via office hours

Just added diagonal graph paper to the note paper page. It looks like this:

https://cdn.bencrowder.net/images/projects/note-paper/diagonal-grid-40x40-light.png

Why would you use this? No idea. I haven’t been able to come up with any good use cases for it, but the itch needed to be scratched so here we are.

Sidenote: I made the original lined/grid paper with PlotDevice but decided to use SVG instead this time, converting the files to PDF with Inkscape.


Reply via email or via office hours

Update on Press (the PDF compiler). I haven’t worked on it at all lately, but I wanted to document its current state for history’s sake, and as part of working in public. (I’ve also been sitting on this post for over a year.)

Back in 2017 I did end up re-architecting Press to use Low Ink as an intermediate page description language. In the process, Low Ink changed from a JSON-based idea to this:

:page 11x8.5in
:bleedbox x=0.125in y=0.125in w=5.75in h=8.75in
:fontmap family=helv weight=regular style=normal standard=Helvetica
:yinvert
:push
:translate x=72 y=72

# ascender
:push
:translate x=0 y=1040
:strokecolor hex=#999
:linewidth 0.25pt
:line x1=0 y1=0 x2=1080 y2=0
:stroke
:push
:fillcolor hex=#999
:font family=helv size=14pt
:text x=1085 y=-3 text="ascender"
:pop
:pop

# filled glyph
:push
:translate x=1320 y=240
:fillcolor hex=#000
:moveto x=0 y=0
:pathto x=400 y=300 cx1=120 cy1=300 cx2=140 cy2=300
:pathto x=320 y=200 cx1=540 cy1=300 cx2=320 cy2=180
:lineto x=350 y=350
:lineto x=450 y=250
:lineto x=150 y=0
:moveto x=200 y=200
:lineto x=200 y=250
:lineto x=250 y=250
:lineto x=250 y=200
:lineto x=200 y=200
:fill
:pop

It was intended to be a fairly low-level wrapper on the PDF format, with the idea being that other libraries/apps would provide more ergonomic abstractions on top of it.

I initially used Python because Press started out as a library, but with the pivot to a compiler model, I think Go or Rust would probably end up being a better choice (Rust would make integrating HarfBuzz a bit easier, at any rate).

Potential improvements

To my 2021 eyes, the language design isn’t particularly elegant. I like that the parameters are named (clarity), but for most of the commands there aren’t actually that many parameters, because many of the settings that would normally be parameters are separate commands. For parameters that are clearly unambiguous, the names hamper readability. For example, I think something like this might be better:

:line 0,0 to 1080,0
:fillcolor #345

I’ve also thought that push and pop could potentially be clearer as curly braces, and that the initial colons aren’t really necessary:

{
  translate 0,1040
  strokecolor #999
  linewidth 0.25pt
  line 0,0 to 1080,0
  stroke

  {
    fillcolor #999
    font 14pt helv
    text 1085,-3 "ascender"
  }
}

The future

My initial reason for building Press was to have an easy, programmable cross-platform way to create language chart PDFs (so I could move away from PlotDevice/DrawBot), and what I’ve realized (acknowledging that I haven’t really been making language charts in recent years) is that there are some other, better options now.

One that seems decent is SVG, converted to PDF by way of Inkscape. Initial tests here seem like it would probably work fine.

Another promising option that I admittedly haven’t looked into very much yet is Paged.js. HTML and CSS are already great for declarative typesetting, and the more I’ve thought about programmatic typesetting, the more this model seems to be the future I’d want to work with (and not just because of parity with web, though that makes it much more compelling).

tl;dr I don’t see myself continuing on with Press, so we may as well call a mortem on it.


Reply via email or via office hours

Lately I’ve been playing around with implementing genealogy sparklines on the web. Still very much a work in progress, but I’m trying to do more working in public, so here’s the messy current status (and at some point I’ll post the actual HTML/CSS):

Ruby test

sparkline-test-002.png

Implementation notes:

  • The sparklines use inline SVG
  • This test uses the <ruby> and <rt> tags, with ruby-position set to under and ruby-align set to start (though only Firefox supports it so it’s not sadly viable for actual use yet)
  • I don’t really like that it makes the leading uneven (lines that have ruby vs. lines that don’t)

Design notes:

  • Rather than having solid squares at the births and deaths, I’ve gone for vertical lines so they’re less obtrusive (and have also considered just getting rid of the vertical lines, though I haven’t tried it out yet)
  • Circles are simple so I went with them for marriages and children

Absolute positioning test

sparkline-test-003.png

Implementation notes:

  • The names are wrapped in span tags with position: relative set, and the SVG gets position: absolute. Fairly simple.
  • Even leading!
  • There’s some wonkiness right now when the span is at the beginning of a line (the sparkline shows up at the end of the previous line), haven’t tried very hard to fix it yet

Reply via email or via office hours

New artwork: The Gathering of Israel. For a few months I’d been thinking about how to symbolically represent this idea and eventually settled on a vector field (with artistic license rashly taken) as the best fit, at least for this version. The textures all generated in SVG via a small Python script.


Reply via email or via office hours

Links #41

Rob Weychert’s Plus Equals, a new zine about algorithmic art. The first issue was good, looking forward to future installments.

Riccardo Scalco’s Textures.js, SVG patterns for d3.js. Yum. I don’t even use d3 (at least not right now), but I’m tempted to do something with it just so I can use these.

Jason Kottke on the invention of a new pasta shape. Max sauceability as a concept will stick with me for a long time, I think.

Rytis Bieliunas on some of the darker corners of Go (the programming language). I’m writing a lot of Go at work now and this was helpful.

Austin Kleon on blogging as a forgiving medium. The idea of continually editing and refining posts after publishing them intrigues me. I fix typos if I find them, but that’s about it at the moment.


Reply via email or via office hours

A short update on Cirque:

I took out the turbulence filters, because they shouldn’t have been there in the first place (at least not the way I had them). Instead, I’m planning to build a tool that makes it easy to apply filters to SVG elements. It’ll be more generally useful, since the SVG input won’t have to have come from Cirque.

Manually placing circles is partway done. (Placing them works; editing and deleting them is next on the list.)

I’m also refactoring to clean things up and to make the imperative code more functional where I can.


Reply via email or via office hours

Introducing Cirque

As schoolwork starts to wind down, I’m finally starting to make progress on the creativity tools and HCI explorations I talked about back in September. This week I’ve also realized that graphical tools for art and design are what I want to focus most on. (I do still intend to explore textual interfaces, but they’re on the backburner for now.)

In the spirit of working in public, then, Cirque is a small WIP web app I’m building for making patterns via circle packing:

cirque-01.png
cirque-02.png
cirque-03.png
cirque-04.png

This is very much a rough initial MVP. You can tweak some settings, generate new patterns using a simple circle-packing algorithm, and export SVG (with the turbulence/displacement filters enabled by default), but that’s it. Some of the features I’m planning to build next:

  • Replace the settings text box with, you know, good UI (I’m also excited to explore color picker design here)
  • Add the ability to manually place both circles and anticircles (so artists are able to create intentional negative space)
  • Add a way to programmatically set the circle colors (probably via something like shaders, so you could say all circles smaller than a certain size get one color and the rest get another, or circle color is dependent on position or something else)

I’ve also thought about moving the circle packing code from JavaScript to Rust, to be able to play around with WebAssembly, but it seems overkill, at least at this point. (Instead I think I’ll plan to Rust and WebAssembly on the graphical type design tool I want to build.)


Reply via email or via office hours

New artwork: Peace, Be Still. I dialed up the SVG turbulence filters to get the effect on the left. Also used the erode operator throughout (with the feMorphology filter primitive). I couldn’t get Inkscape to show the lines with the filters applied, though, so I ended up screenshotting the piece via QuickLook and then upscaling in Photoshop (hacky, but hopefully not too obvious).


Reply via email or via office hours