How did I make this website?

I wanted the orangest website I could possibly make, but I had a few other parameters. I wanted it to be small, easy to maintain, adaptable for dark mode, and I wanted the UI to scale to any size. I'm already familiar with lots of web technology, so making the orange graphics was actually the hardest part! To make them scale well, I chose SVG, a file format that makes lines and shapes out of math.

A juicy slice

I knew there had to be some way to describe the shapes I was seeing inside the orange slices using math. They seemed so regular and repeatable. They formed juicy pockets that narrowed at the ends and thickened in the middle, with other pockets filling the space where they narrowed. The wave-like structure of this initially drew me to try automating a walk back and forth through each segment, but in the end I found that describing the path manually gave me a lot more control. I wrote a program to do the many calculations and construct the slice based on my plans, so that I wouldn't have to rewrite half the file by hand every time I wanted to tweak it.

Almost the entire orange is generated based on circles. A set of circles for how big the orange rind is, a set of circles for where each of the vesicles begin and end, a set of circles for how big the core should be. I start by writing out a list of these circles as well as the angles within them that I'll need. One such circle might be described this way:

240:7.5,17.5,27.5,37.5

The first number is the radius of the circle. The list afterward are angles between 0 and 45 degrees to place markers along the circumference.

Next, I write a different list of how to walk through those markers based on a simple system:

M2,4-4+3-3

This instruction tells the pen to start in the 2nd ring, at the 4th angle in that ring. It steps inside one ring to its fourth angle, outside one ring to its third angle, and inside again to its third angle. That shape forms a zig-zag.

Here's a copy of that program that you can play around with, if you're interested.

radius:angle sets step sets rind size slice border center thickness vein thickness

An appeeling background

I made the background image as SVG, too, but I used a different method. I wanted it to have an organic-looking distribution of dots, like an orange peel. But I didn't want to make one very large image, to keep the site compact, and I also didn't want to generate it with each page load, because that would take a long time. That meant I would need a small image to tile repeatedly, and I would need to generate it ahead of time.

In order to get the organic look, I did a little research on circle packing, and finally landed on a JavaScript library called D3. I placed a bunch of circles at random points inside of a square and used a force simulation to make them separate from each other until they were nicely distributed. I ran this simulation many times with different spacings and dot sizes until I had some I liked.

Here's a copy of that program, too. Fun fact: I've made my web pages so small, the D3 library required to run this is bigger than anything else on this page!

square size relative # dots dots spacing dots thickness border jitter

Wrapping the orange

A few other technologies make the site what it is. I wrote this text in Markdown and used PHP Markdown to convert it to HTML. I used micromodal to show bigger photos on click. CSS gradients make for smooth color transitions without storing large images. MDN web docs were very useful to reference. And I thank every friend who encouraged me by saying they wanted to eat my website. You're welcome to try.