Let No One Ignorant of Geometry Enter

Dmitry Baranovskiy at Web Directions Developer Summit 2025

From Plato’s Academy to the Printed Page

Dmitry Baranovskiy traces the word “academy” to Plato’s school and interprets its legendary geometric entrance requirement as an invitation to mathematical understanding. He then uses the Van de Graaf canon to show why geometric construction once produced more accurate page margins than numerical measurement.

Paper Proportions and Ancient Precision

Baranovskiy constructs the square-root-of-two rectangle that underpins A-series paper sizes and preserves its proportions when halved. Babylonian calculations, irrational numbers, the Pythagorean theorem, and continued fractions reveal the sophistication and enduring influence of ancient mathematics.

From Root Rectangles to the Golden Ratio

Baranovskiy extends geometric construction to square-root-of-three rectangles and connects classical proportions to familiar screen formats. He derives the golden ratio, relates it to Fibonacci numbers, and demonstrates how JavaScript and modern CSS can calculate and visualize these patterns, including the golden angle.

Golden Myths and Infinite Spirals

Baranovskiy challenges exaggerated claims that the golden ratio governs famous buildings, artworks, and nature. He distinguishes quarter-circle approximations from true logarithmic spirals, explores their infinite form and finite length, and contrasts Jacob Bernoulli’s beloved curve with the Archimedean spiral mistakenly carved on his tomb.

Building Bézier Curves from Interpolation

Baranovskiy recounts how Paul de Casteljau and Pierre Bézier independently developed the curves now central to digital graphics. He builds quadratic and cubic Bézier curves from repeated linear interpolation, then applies them to SVG, CSS transitions, circle approximations, sinusoidal paths, and evenly parameterized animation.

Why CSS Matrices Have Six Values

Baranovskiy explains scaling, rotation, and translation as matrix multiplication and identifies why a two-by-two matrix cannot represent translation. Homogeneous coordinates add the missing coordinate, while DOMPoint and DOMMatrix expose the same mathematics directly through browser APIs and CSS-compatible matrices.

Lines, Intersections, and Points at Infinity

Baranovskiy moves from symmetry and reflection to representing lines in homogeneous coordinates. Cross products turn pairs of points into lines and pairs of lines into intersections, while points at infinity provide a practical representation of vectors and parallel-line intersections.

Brunelleschi, Perspective, and Geometry on the Web

Baranovskiy credits Filippo Brunelleschi with formalizing artistic perspective and shows how projection maps three-dimensional points onto a plane. He demonstrates vanishing points and depth using only matrices, straight lines, and SVG, then encourages developers to rediscover mathematics as a practical and enjoyable creative tool.

Good evening, everybody. It's nice to be a closing speaker for the day. It was quite a busy day with lots of great talks. Let's hope this one wouldn't be the worst one of all.

My history teacher used to tell me that If you want to start your conversation in a very good manner and sound smarter than you are, you have two ways, two starters: in ancient Greece and in ancient Rome. So, in ancient Greece, there was a tradition to, you know, celebrate heroes alongside with the gods.

So they have like parks and gardens in names of some gods and some prominent figures, but also about the heroes. And heroes in Greece were like just citizens who did like an awful lot for their city. And one of those heroes was AcademiUs. I don't think we know what he did, but there was a garden named in his name, AcademiUs gardens.

And that's where Plato made his school. For teaching geometry, among other things, which eventually was called Academia by the name of the region where it was placed. And the word Academia survived to our days, so we all use it every now and then. So Academia lives forever, even though nobody knows what he did.

That's just a small historical lesson. And on the gates of this school, supposedly, was written This, at least the myth goes like that, this was written. I tried to recreate roughly what it was, how it was written back there, because that's how Greeks were writing there. Any Greek here, any Greek speaking person?

No? Oh, good, so nobody can catch. Nobody could catch me online. So it says, I wouldn't say what it says, but it says if you translate it in English, Let no one ignorant of geometry enter. Basically means if you suck, get out. No, I don't think it means that.

I think it means that you should actually understand what geometry is. And obviously for Plato, geometry means more than what we understand under this word now. It's not about circles and squares and connecting them around. I think geometry was what we understand under the word mathematics in general. So it's an important piece.

To talk about geometry and why it's important for us as developers nowadays and how we even connect to ancient Greeks, that's probably what I'm trying to do today. Once I was trying to make margins for the printing page and since I'm not a very good designer, I decided that, well, I don't need to think what margins should be, I better find the formula. So I looked around, found this is a very known Wanda Graf Canon of media well Canon for the margins and how they should be calculated to make the book look really nice.

So I decided, okay, well, I just employ whatever people smarter than me did before. So I decided, okay, let me calculate it. Unfortunately, because I'm lazy developer like most developers, I didn't read to the end of the article and start calculating all these margins because yeah, this is nice way of drawing it, but when I have to put it into my InDesign or whatever software you use, I need to put actual numbers and this is not very handy with the numbers. So I started writing how to calculate all this, how to find the actual margins in numerical way rather than geometrical way.

And it's just one-ninth of the page, actually. And that's actually a good example of when you think, why they didn't just write one-ninth? Well, they wrote in the article, I just haven't finished reading, but why they use it? Well, the reason is because if you give two people, one people, you give one person, you give One nymph and another person you give the actual scheme and give them ruler and compass to draw.

The guy with the ruler who was using this scheme will actually do much better and precise job and faster. Because when you start measuring, you actually lose a lot in precision. And when you're drawing the lines and cross them, you get much more precise things. So for the guys who are using rulers, the original way was much better than using one nymph.

And for us, digital people, this is much, much better way than using things. So geometry is important and understanding geometry is important. That's it. Thank you very much. Okay, so let's talk about proportions. So I'll start with the pages. Let's talk about pages a bit more.

So obviously, proportion square is a great proportion, one to one. Nothing beats that. Then you draw a diagonal of the square, which length will be square root of two. Then you drop it down and you have another rectangle, which proportion is square root of two. And it's very famous rectangle because if you could divide it in half, you get the rectangle of the same proportion.

And you keep dividing, you will keep getting the same rectangles. And that's where our paper formats are coming from. So the Pages A4, A3 and so on are built using this proportion because it's convenient because you can divide them in half. Not any proportion can be like that, but some can be, well, one, the only one proportion can be, and this is the one.

It's very interesting standard because area of A0 is exactly one square meter. And then you divide it in half, in half, in half, in half, and you arrive to A4. I have troubles when I was trying to explain to my American friends and explain them the dead paper. And they asked, so what's our paper format based on?

And I'm like, nothing. Okay? They're just based on nothing. They were upset. Okay. Our paper format is based on geometry. Okay? Square root of 2 going down all the way to whatever, about 1700 BC. So this is a little clay fragment actually shows how to calculate the square root of 2.

So 1700 BC, it's like, it's very long time ago, right? It's like almost 4,000 years ago. And the funny thing that they use, it's from Babylonian area, so they used to have hexadecimal, sexagesimal system for calculations, so base 60.

And if you think, what a crazy idea is where they use base 60, well, you use base 60 when you're counting time and degrees of the angles. That's actually legacy of the Babylonian math. Surprise, surprise. And they use this formula, it's written there, trust me, or don't trust me, but that's what it is.

It's written there that the square root of 2 or diagonal of a square is roughly equal to this number. For comparison, actual square root of 2 equals roughly this number. So the difference between those is roughly this. Meaning, if you decide to build a fence of one kilometer wide, kilometer per kilometer, and you decide to use this ancient formula to calculate the amount of fence you need for diagonal, then you will make a mistake about one centimeter.

So that's how precise these calculations go. Isn't it amazing? Well, square root of two is had a lot of other interesting stories like the Pythagoreans tend to believe that everything is rational in the world and everything could be expressed as a rational number.

And one guy named Hypatius, he proved that square root of 2 is irrational. So they put him on board, sent him to sea and drowned him there. So he wouldn't tell anybody. And that's why this Proof that square root of 2 is irrational is probably the most famous proof in the math history right now.

So it's irrational means it goes on forever, this never ending, like when people say, oh, pi goes on forever, any irrational numbers goes on forever, square root of 2 goes on forever, and it's just diagonal of a square. How cool is that? There are other interesting clay pieces, like this one, for example, which is about the same age.

It shows Pythagorean theorem. Pythagoras lived 500 BC. So it's like about 1000 years before Pythagoras, there was a Pythagorean theorem. Just so you know, that's how life goes. Somebody invented Pythagorean theorem, somebody give it a name.

But I don't blame Pythagoras. He was a cool guy. He probably invented a lot of other things. So how to calculate square root of 2? Well, one way is to use this infinite fraction, continuous fraction, sorry. And you can see the pattern here, like at the left there is always 2 going down, except for the first number.

And you can stop at any point and it will give you estimation of square root of 2. Estimation because nobody knows what square root of 2 actually is. So if somebody asks, what is square root of 2? Nobody knows. Because you can only get an estimation. I could give you an estimation square root of 2, but I can't give you exact answer.

That's a bit of mathematical thing, but anyway. So this is how you can calculate square root of 2. Nobody does it this way, but ancients probably did. We are lucky. We have JavaScript. So we could just get square root of 2. From here, this is as much precision as we get actually. So it's also not exactly equal to square root of 2, but it's good approximation, good enough for our needs.

That's as much code we have in my slides, so enjoy by the class. What next? Square root of 2 is a great proportion, it's a great format, but obviously there is more. And one of them is obviously to draw another diagonal over here. And let it drop.

And that we have square root of 3, rectangle. And it's very useful. You can also divide it in 3 equal parts, so with the same proportion. And it's actually quite useful if you do anything with the equilateral triangles, because you can see how they will fit into this proportion very nicely. Maybe not a coincidence that our screen format 16:9 is actually very close to this proportion.

Proportions are important for, especially very important for ancient people, but they're important for us as well. So when you choose, I don't know, any rectangular elements on the page, that probably makes sense to make sure that they are somehow aligned with the classical proportions because then they look nicer. Not because they have magical feature, but because they just look nicer for us since we've grown up on looking at rectangles like that.

And that's why those rectangles look good for us, other way. Square root of 3 has its own continuous fraction, and you can see how we have now 1 and 2 kind of flipping. So that gives us another way to finding the square root of 3 more precisely. What will happen if we keep looking at this infinite fraction and we decide what will happen if I just replace all digits with 1?

Will it be some interesting number, huh? Something like this. Let's call it phi. And we just put all the ones. Will it be an interesting number? Yes, it will be a very interesting number. Otherwise known as the golden proportion. So what is golden proportion?

If you have a segment and you divide it in proportion a and b, Then the relation of A plus B to A is the same as relation to A to B. So relation of the whole to the biggest part is the same as relation of biggest part to the smallest part. And we call it phi because we like Greek letters because Greeks were awesome about 1,000 years ago.

I mean, they feel good, I guess. So how to find the actual phi? We can just solve this equation, write it A equals Bphi using the second equation, then substitute it in the first equation, we got this, then we can get B out, then we get remove the B, we have this fraction, now we multiply both sides by phi and we have this square equation which has these roots.

So we only care about positive roots, so this is the value of the Golden section. That's what people use all the time everywhere. You will see it over and over and over again. It's a magical number. It's divine proportion. It's have a lot of bullshit to its name, but it's just a nice number to be honest. It's roughly equal to this 1.618.

It's used, you can see it in Fibonacci numbers. So everybody knows Fibonacci numbers because it's famous. Interview question, write a function to compute the Fibonacci number. And Fibonacci number, yeah, for those who for some reason doesn't know, the next number is equal to sum of the two previous numbers. And how it's connected to golden ratio at all?

Well, actually, there is a trick. I used it in the interview once, which upsets my interviewer to the death. When he asked me to calculate the nth number, I knew the formula and the formula is this. So nth Fibonacci number equal round of phi in power of n divided by square root of 5.

So you could just calculate any number instantly without calculating all the preceding numbers. So it really ruined the interview because we can't talk about recursion, we can't talk about memorization, we can't talk It's just like, ah, anyways. So just for fun, here's the CSS version of finding the Fibonacci number.

Because we can now, right? Because CSS is so powerful nowadays. We can calculate things. It works. You can test it out. I mean, I'm not sure how it will perform, but it works for small numbers. It works pretty well. Another interesting code for Fibonacci number we can use to find the golden angle. So the golden angle here in the comments it's roughly 137.5 degrees and help us to package items in a nice compact way. It's something you can see when you look at the sunflower seeds. They are in this particular pattern which you can calculate using this interesting algorithm. So if you run this code, you will get something like this. It's used in visualizations.

I use it. I use this visualization. I saw some other people use it in many other places. So this where the golden section suddenly pops up as well and could give you some nice visual visuals for whatever reason you need. Maybe just want to draw flowers. That's also works. It's very serious thing like it's used in Art very seriously. There are books written on these proportions and how you divide the page in different lines, different lines and different proportions.

And some people take it very seriously. I do not, but you're free to take it seriously. You can read these books. I'm not saying they're bad, but some people go crazy and say, oh, everything is golden section everywhere, golden proportion everywhere. Look at this. Buildings, they use golden proportion.

Look at pyramids. See, golden proportion. If you look at this spiral, you actually will notice that it's actually squeezed just to match the photo. Not to mention that position of the Sphinx is actually depends on the way the photographer is standing. But it's golden proportion, no problem. It's divine. Everything is divine proportion.

Look, divine proportion everywhere. All the nature is pierced through divine proportion. Seriously, stop it. And golden spiral. See, golden spiral. There is no golden spiral. Well, there is golden spiral. And we can draw a golden spiral with something like this.

Like this. Yeah, so you cut the square of the page, cut and cut and cut and cut and cut. And then you draw like this quarter circles. But quarter circles don't make a spiral because in this particular point, the curvature changes rapidly and spiral should be smooth. And this is not a spiral. Well, this is a spiral.

And this is not a golden spiral. This is just logarithmic spiral. It's just one of many logarithmic spirals. It's a family of spirals. Talking about spirals. I just love spirals because they're cool. So the logarithmic spiral is the most famous spiral of all because we see it all the time.

And the cool thing about logarithmic spiral, it's infinite. So if we try to zoom in, then we can go forever and really enjoy this talk. This is the best talk you ever see. Sorry, I should try it. It goes like this forever. We are not spinning it.

I'm actually zooming it to make this animation. And you can see it goes on and on and on. So it's also called a equiangular spiral because it's very much dependent on the angle of the tangent. And if we cut the spiral up to this level and unroll it, then it actually has a finite length.

So that's for any calculus student, it doesn't cause any questions, but when I give it to designers, they will like blown away. So it's infinite, but it's finite length. Meaning if I ask you to draw, it will take you forever, but I know exactly how much ink you need. Yeah, don't come close, then it wouldn't be puzzling you.

But I thought it's a nice, it's a nice touch. So the angle of the tangent to the spiral, which you draw from the radius, always the same, no matter where you put it. That's why it's called equiangular. And this angle also defines the spiral. So if we change the angle, we can see all the families of spirals all around the place.

So, angle is actually the only thing that defines this type of spirals. So it's fascinating. One of the biggest fans of the spirals was Jacopo Bernoulli, who called it the wonderful spiral. And he was so fascinated that he asked to engrave on his GravThump, the spiral and this Latin saying, Idem mutata resurgo, which means I will rise again the same but changed.

Because the spiral, no matter what transformation you apply to them, they still stay spirals. And that's what makes you happy. Unfortunately, and that's where design collides with math. The graver didn't do the good job because this is not a logarithmic spiral. This is actually Archimedean spiral.

In this spiral, the steps between each loop is the same, and it's not infinite at all. When you zoom in, you just zoom in. It's used a lot, like in compact disks, for example, and in this grammar, I don't know, Venn diagram kind of things, whatever they called. There are lots of spirals.

I love spirals. I can talk about, I can give a special talk just about spirals, but I don't have time. So if you want to talk about spirals, talk to me. I love to talk about spirals. This is a order spiral, Fermat spiral, I love the spirals, whatever. Move on. Talking about curves, I can't not talk about Bezier curves, right? Who doesn't like nice Bezier curve in the morning?

And to talk about Bezier curve, I cannot just give a credit where it takes and talk about who actually invented Bezier curves. And surprisingly, it's not just one person, kind of. So, Sergei Bernstein is a Soviet mathematician. I'm really happy to mention him because he was teaching in the uni in my city way before I was born, but nevertheless, I have some connection at least because two other guys, just French guys, I don't know them.

So Paul, the Castel Jew, is the guy who actually invented Bezier curves, but because he was working for Citroen, and Citroen was very, you know, secret, they didn't want to tell about this, so he didn't patented the his invention. He even didn't talk about his invention. And then Pierre Bezzi just about a year later invented the same curves, but he was working for Renault, so he patented them, published them, and they gave their name, his name.

That's how it works, guys. So share your knowledge, otherwise you will be like poor CastorJewel. We get CastorJewel algorithm to calculate Bezicurve, so at least some credit was given. But nevertheless. So, bezier curves, easy as that. We do the linear interpolation between two points. I just quickly try to fill the gap.

So I have four points, alpha beta gamma delta, because I started from Greeks, so Greek names. And if I do linear interpolation between alpha and beta, I will move along this line like this. Yes, so I have some value t and it's somewhere between. Then I could get the same for beta gamma and then I connect these points of interpolation themselves in and interpolate along them as well. So it's like second level of interpolation.

And if I draw all the points when I interpolate through, then I will get quadratic bezier curve. And if I continue this and put another level on top of it, so I draw gamma delta line. And now I connect this point and then I connect that point. So I get, like, next level of interpolation and go through all of them. Then if I draw again these points, then I will get a cubic Bezier curve.

And I don't really need to stop here. I can go more and more and more and more, deeply and deeply and deeply. But usually cubics are just fine for our needs. Well, quadratics. Actually also fine, but cubics are fine too. Most of the curves you see on the screen, all of the curves you see on the screen are Bezier curves, including all the fonts you see. So it's kind of important think of the geometry.

So quickly going through. So we have a function a, which is linear interpolation between alpha and beta, which I could calculate like 1 minus t times alpha plus t times beta. Then I have function b between beta and gamma. Then I have, I will go faster, sorry, I don't have time to go through this.

I have c for gamma delta. And then I could have function d, which is the same, but now I put the functions a and b and interpolate between their values. If I open the, substitute them and open the brackets, I got this formula, which is actually formula of quadratic Bezier curves. And if I go one level deeper and open these brackets, then I will get this formula, which is called cubic Bezier curve.

And now you see why it's called cubic, because it has cubes. It's okay if you don't understand this, you don't have to. But you understand this. So I can have linear interpolation function which interpolates between A and B with some parameter t, and I can use this simple function to calculate any point on Bezier curve by just nesting it three times in. This is not the best performance-wise way to calculate Bezier points, but it works.

And it explains how simple it is. It's actually just a bunch of linear interpolations. We use bezier curves everywhere in SVGs and in CSS for transitions and for just clip paths. Clip paths are basically the same as SVGs. For transitions, for some reason, use only four numbers there. Well, that's because it's going from 0, 0 and 1, 1.

So we just have two handles to move. Mentioned, otherwise other two are just fixed in the thing. We use Bezier curve to draw other shapes, like for example circles. The problem is that Bezier curve cannot draw a circle. You can only approximate a circle with Bezier curve. So that looks pretty good, but it doesn't match.

If I zoom in, you will eventually see that it's not actually matching the circle, especially in the middle. But it's All the circles you see on the screen drawn with four Bezier curves usually. So how to calculate this length of the handles? So if I know the radius of a circle, how can I find the handles length so I can draw a circular arc?

Well, if you just multiply radius by this and you get the circle arc. If you need not 90 degrees, but some varied arc theta, then this convenient formula, which is easy to remember and you can use to calculate it anytime. I needed recently to calculate the Bézier curve to find the sinusoid.

So I have a sinusoidal wave and I need to express it through Bézier curve. And surprisingly, I was Googling it and can't find anything about it. So I have to invent. Here's my invention. If you want sinusoidal to represent as a sinusoidal curve, then your points should be this.

And this will give you a sinusoidal curve. If you want a more precise, then you could calculate for the water of the sinusoidal and but the points looks much much more uglier and harder to remember but nevertheless. Nevertheless. And one thing to remember if you animate a long bezier curve especially if it's a straight line you should understand that straight line when your anchors are actually matching the starting and ending points would give you a busy curve where the points are not spread equally and it's important to put them on one third from each side to give a extra spread, like normal spread of the points.

If you want to learn more about busy curves, I really recommend you to watch this video by Freya Holmer. If you haven't watched it, you're up for the treat. If you have watched it, you should rewatch it because it's just great. Let's move to transformations. Transformations. Is what we do most of the time with the things we have CSS transformations, we have other transformations.

But in the nutshell, it's matrix multiplication. So we have X and Y points and we multiply it by matrix, ACBD, and we have new point and tada, we have transformed point. Unfortunately, they have the problem. If you can scale with this two by two matrix, you can rotate with this two by two matrix.

But you cannot translate this two by two matrix because it sucks. But we use it all the time, right? We have span, transform, translate, rotate, scale. Or we just use one matrix to do all the things above. But hey, look at this matrix. It doesn't have four numbers, it actually have six, which is a completely weird number of parameters.

So why six? Let's talk about homogeneous coordinates. So homogeneous coordinates, it's just coordinates where we add extra value. So we have x, y, we add w. w for WTF. Why the hell is there? So let's try to figure out.

So it's not the z, it's not extra dimension, it's just extra value here. Well, X, Y, W. Okay. But then we have three numbers, and now we can have this three by three matrix. And now we can have enough numbers to perform this. So, if you look at this, I just translated this into mathematical language.

It looks like this. We just multiply the three matrices together, and we got new matrix. Back, it's all working now. If you notice the right column on all four matrices is 0, 0, 1. That's why usually we don't really bother about this right column and we only work with first two columns. That's why matrices in CSS has only six values.

Actually, there are nine values, but we just kind of ignore the last three because it's always kind of the same. It's not always the same. But we assume it's always the same, right? Because it creates our problems for the future, that otherwise life would be hard and boring. We actually have an API in JavaScript in your browser, right, for this. So we have a DOM point.

The DOM point actually have x, y, and w as parameters. And you can create DOM points, you can create DOM metrics, and you can multiply metrics by a point to get the new point. So this API is over there, right there. You don't need to include any libraries, just in the browser, which is pretty cool. I don't know who ever used this API.

Oh, somebody uses API. Look, it's not useless at all, apparently. So you can create a matrix and you can apply the same, it's the same transformation. So I translate, rotate, and then I scale. And then if I log and to string, it actually give me the CSS notation for this matrix. So it's pretty useful.

So what is a homogeneous coordinate again? So homogeneous basically say that we grab any x, y coordinate from Cartesian plane and we just add 1. And that's the same coordinate. And when we have x, y, w, we just divide by w and we return back to Cartesian space. Just as easy as that. Most of the time w is 1.

And then it's very easy, but sometimes it's not. So it means that the points 2-1 and 10-5 are not the same, but points 2-1-1 and 10-5-5 in homogeneous space are actually the same point. So if you divide by 5 the right bracket, then you will get the same point on the left.

And that helps us to create these matrices now, which actually And now we can translate, and that actually works. And as you can see again, the right column is always 0, 0, 1. That's why in CSS we sort of put it down. A bit on symmetry, I need to say. So symmetrical transformation is any transformation where the difference between two points stays the same. So not just the butterfly effect, it's symmetrical transformation.

Translation is symmetrical transformation. Rotation is symmetrical transformation. So let's be technical here. And all these are symmetrical transformations. The only thing that for scale, it should be SX and SY should be 1 or -1. Then everything is symmetrical. If you want to reflect something, if you have line ABC and you want to reflect in line ABC, this easy formula helps you to reflect.

Nobody is writing down. Okay. The interesting thing that I said line ABC because in homogeneous space you can define line also as three numbers A, B and C like this. This is the equation of the line in homogeneous space and we can define it just as vector of two or three numbers. So if we could define line as lambda ABC then we have points P1 and P2, like XYW, then if I do cross product of these two points, I will get the line, which is very convenient.

So if you have two points in homogeneous coordinates, you just cross product them and you get line which goes through two points. Cool. So basically, lambda is this. If you forgot what is cross product, which you should probably, you should, if you remember, you're scary. Okay? This is what it looks like. And opposite also works.

If I have two lines and I cross product them, I get the coordinates of the points at which they are crossing. Pretty cool. What will happen if they are parallel? No. If the lines are parallel and I find the point of the intersection, I get something, right? What is it? How does it even make sense? Well, I get something like this.

Where w is equal to 0. And that's a very interesting concept in homogeneous coordinates because this is a point at infinity, which doesn't make sense. It helps us to figure out, but if we add two points in homogeneous space, we got third point, which makes sense. And this point will be in the middle, like a midpoint. Between those two.

If we subtract two points, then we get a vector or point at infinity. If you multiply point by the number, we get still a point, nothing changes. If we add two vectors to points at infinity, we get the third vector. And if we subtract vectors, we got the vector which is subtracted.

And we multiply vector, we scale the vector. So basically, You can trade points at infinity as vectors, and all vector math is working. So you can add them, you can subtract them, you can multiply by scalar. It all works the same way, which makes it very convenient for any math if you need to work with vectors, unless you don't need to work with vectors.

Then your life is boring. So let's talk about perspective. And let's move all the way to Florence. This is the biggest brick dome in the world, which was built in 15th century by Filippo Brunelleschi, the famous architect and artist.

So it's an engineering miracle and if you ever I have nothing to do in the evening, just Google about how it was built and why it's a miracle. But we don't talk about Dom. We talk about Filippo Brunelleschi and his other invention. As a real Renaissance man, he wasn't just an architect and builder, he was an artist and he invented perspective, surprisingly.

If you look at paintings before Brunelleschi, there is something missing in these paintings. And they already say perspective three times, so it's easy to guess what is missing. You would think the right picture is actually older than the left one, which is not true. Actually, there are two centuries between these pictures, and the left one is actually older than the right one, surprisingly.

But you can see that perspective is missing equally. In all the pictures. And if you look at images after Brunelleschi, they look something like this, where clearly the artist knew what he was doing. It's surprising how it's just 15th century, not so long ago. So before people didn't know how to draw perspective. So what is perspective?

Basically we have a point V and the plane, which we define as a normal N. And we just project from this point race and see where they land on the plane. The point, however, could be at infinity. That's where homogeneous coordinates are very helpful because we can actually work with these points and define them and perform operations like there is nothing extraordinary about them.

And basically the formula to calculate the matrix which will transform your 3D coordinates into coordinates on the plane is like this. Yeah, if you open it up, it's like this. Make a screenshot, you will need it. Oh, maybe not. But it's useful, so you can look at the, you can grab something simple as a square and put it in a 3D space and then apply some perspective to it.

Oops, sorry. Sometimes click sometimes doesn't. Apply perspective to it and have like pointed and finite, you have parallel perspective. Then you put point closer and apply the same transformation. You have the full illusion of 3D, 3D moving around. And it works for parallel lines.

So parallel lines actually, when they applied through this matrix transformation, get to the point which is actually quite visible and real. So the point where they connect is actually particular point on the screen, but when you go here, it actually goes to infinity, and you still can operate with these points without losing your sanity in homogeneous coordinates. So I really like them.

And obviously, you can have all these different points of vanishing points where the lines go back and forth, and so on and so on and so on. So it's very useful. For some who play this perspective. But I don't know, I feel like it's quite fun that I just draw this. Well, for the record, it's all drawn in the web page and it's not using any 3D library, just plain matrices transformations and straight lines.

It's all in SVG. So I hope I opened a bit of the door into the mathematical things and maybe inspire some of you to refresh some of the mathematical knowledge you obviously get in high school and forgot because you don't need it. It's actually, take it from me, it's actually way more fun to come back to math now than it was back in high school.

And there are lots of interesting stories and interesting ideas which you can discover now again and actually enjoy. So Thank you very much.

ΑΓΕΩΜΕ
ΤΡΗΤΟΣ
ΜΗΔΕΙΣ
ΕΙΣΙΤΩ

Let No One Ignorant of Geometry Enter

A two-page spread is constructed with an outer rectangle, a central division, and diagonals connecting the corners to the spread’s center.

The page-spread construction is extended with intersecting diagonals and two shaded text areas, demonstrating a geometric method for determining balanced book margins.

A dashed grid overlays the geometric page construction, revealing that the derived margins and text areas align to simple fractional divisions of the spread.

Proportions

1 × 1

A unit square establishes the 1:1 proportion.

Diagonal: √2

A diagonal crosses the unit square, demonstrating through geometry that its length is √2.

1 × √2

The square’s diagonal is rotated to define the width of a new rectangle whose sides are in the proportion 1:√2.

1 × √2

The √2 rectangle is repeatedly divided into halves, each retaining the same proportion and illustrating the geometry behind standard paper sizes.

YBC 7289, 1700 BC

An ancient Babylonian clay tablet bears a square, its diagonals, and cuneiform numbers used to approximate √2.

1 + 24/60¹ + 51/60² + 10/60³ ≈ 1.41421296…

√2 ≈ 1.41421356…

Δ ≈ 0.00000059…

YBC 7289, 1700 BC

The Babylonian tablet’s sexagesimal value is compared with √2, showing an error of only about 0.00000059.

√2 = 1.41421 35623 73095 04880
16887 24209 69807 85696
71875 37694 80731 76679
73799 07324 78462 10703
88503 87534 32764 15727
35013 84623 09122 97024
92483 60558 50737 21264
4121…

Beside the Babylonian tablet, the decimal expansion of √2 grows line by line. The sequence continues without terminating, emphasizing that √2 is irrational.

IM 67118

A densely inscribed Babylonian clay tablet records mathematical work associated with right triangles, predating Pythagoras.

√2 = 1 +

√2 = 1 + 1/(2 + 1/(2 + 1/(2 + …)))

The nested continued fraction repeats the value 2 indefinitely, providing progressively closer rational approximations to √2.

Math.SQRT2 = 1.4142135623730951

Height: 1
Width: √2

A rectangle of proportion 1:√2 marks unit length and √2 along its base.

Height: 1
Width: √2

A diagonal across the 1-by-√2 rectangle prepares a geometric extension to the next root proportion.

Height: 1
Width: √3

The previous diagonal is rotated to extend the rectangle’s width from √2 to √3.

Height: 1
Width: √3

The 1-by-√3 rectangle is divided into three equal vertical sections, with diagonals showing that each section preserves a related geometric construction.

Height: 1
Width: √3

Shaded equilateral triangles fit within the three-part √3 rectangle, demonstrating why this proportion is useful for triangular geometry.

√3

√3 = 1 + 1/(1 + 1/(2 + 1/(1 + 1/(2 + …))))

The continued fraction for √3 alternates 1 and 2 indefinitely.

φ = 1

φ = 1 + 1/(1 + 1/(1 + 1/(1 + …)))

The continued fraction repeats 1 indefinitely, defining the golden ratio φ.

(a + b)/a = a/b = φ

1, 1, 2, 3, 5, 8, 13, 21, 34, …

F_n = F_n−1 + F_n−2

F_n = round(φⁿ/√5)

.n-th_Fibonacci {
  --n: 10;
  --φ: calc((1 + sqrt(5)) / 2);
  --F: calc(round(pow(var(--φ), var(--n)) / sqrt(5)));
  width: calc(var(--F) * 1px);
}

const φ = (1 + Math.sqrt(5)) / 2;
const α = (2 * π) / (φ * φ); // ≈2.4 (137.5°)
for (let i = 0; i < n; i++) {
  const r = Math.sqrt(i);
  const θ = i * α;
  x = r * Math.cos(θ);
  y = r * Math.sin(θ);
}

Hundreds of evenly sized dots are packed into interlocking spirals, demonstrating the compact phyllotaxis pattern produced by repeatedly rotating through the golden angle while increasing the radius.

The Elements of Dynamic Symmetry — Jay Hambidge

The Painter’s Secret Geometry: A Study of Composition in Art — Charles Bouleau

Covers of two books about geometric proportions and compositional systems in art.

A classical Greek temple façade is overlaid with nested rectangles, squares, and diagonal guides presented as evidence of golden-ratio proportions in its architecture.

A photograph of the Great Pyramid and Sphinx is overlaid with a golden rectangle and spiral. The spiral has been stretched to fit the composition, illustrating how golden-ratio claims can be imposed on an image.

A curled sleeping cat is overlaid with a golden rectangle and spiral, another example of retrospectively fitting golden-ratio geometry to a natural form.

An animation constructs a golden rectangle, recursively divides it into squares, and adds quarter-circle arcs. A smooth red curve is then compared with the joined black arcs. Although the arcs resemble a spiral, their curvature changes abruptly at square boundaries; the final red curve shows the genuinely smooth logarithmic spiral.

Spirals

A logarithmic spiral is repeatedly magnified to show that its self-similar inward progression continues indefinitely. Tangent-and-radius guides marked θ demonstrate that the angle remains constant everywhere, hence “equiangular spiral.” Changing θ produces tighter or looser members of the logarithmic-spiral family. The sequence also explains the paradox that an infinitely winding inward spiral can have finite total length.

Jacob Bernoulli’s ornate memorial plaque is shown beside a close-up of its spiral engraving and the Latin motto “Eadem mutata resurgo,” meaning that transformed, it rises again the same.

An Archimedean spiral has a constant gap between successive turns, unlike a logarithmic spiral whose spacing scales geometrically.

A spiral with progressively increasing distance between turns illustrates another member of the broader family of spiral curves.

A single open S-shaped curve introduces a two-ended spiral form.

The S-shaped curve now curls inward at both ends, forming a double spiral.

The double spiral terminates in two emphasized circular centres, showing the two poles of the form.

A dense geometric construction combines concentric circular waves, two orbiting spiral centres, and looping paths around a central point.

Bézier

Sergei Bernstein

Paul de Casteljau

Pierre Bézier

Portraits identify three key figures behind Bézier curves: Bernstein developed the polynomial basis, de Casteljau devised the recursive evaluation algorithm, and Bézier popularised the curves for industrial design.

t = 0%

Four control points α, β, γ, and δ are shown. A dashed segment from α to β introduces linear interpolation at the starting parameter value.

t = 51%

At the same parameter value, points are interpolated along α–β and β–γ, then between those results. The nested line segments demonstrate de Casteljau’s construction for a quadratic Bézier curve.

t = 30%

The quadratic de Casteljau construction is shown at a different parameter value: two first-level interpolated points are joined, and a second interpolation locates the corresponding point on the curve.

t = 81%

The accumulated second-level interpolation points form a red quadratic Bézier curve from α toward γ; the current point at 81% is highlighted on the curve.

t = 0%

The construction resets to four control points α, β, γ, and δ connected as a control polygon, preparing to extend the interpolation process from a quadratic to a cubic Bézier curve.

t = 86%

Three levels of nested interpolation are shown across the four control points. Interpolating along the three control-polygon edges, then between those results, yields the final point of a cubic Bézier curve.

t = 0%

The completed four-point control polygon α–β–γ–δ remains as the basis for the cubic Bézier construction.

t = 100%

A cubic Bézier curve runs from α to δ. The control polygon joins α, β, γ, and δ, while the curve itself bends toward the two intermediate control points.

A(t) = α(1 − t) + βt

B(t) = β(1 − t) + γt

C(t) = γ(1 − t) + δt

D(t) = A(t)(1 − t) + B(t)t

D(t) = (α(1 − t) + βt)(1 − t) + (β(1 − t) + γt)t

D(t) = α(1 − t)² + 2βt(1 − t) + γt²

E(t) = B(t)(1 − t) + C(t)t

E(t) = β(1 − t)² + 2γt(1 − t) + δt²

F(t) = D(t)(1 − t) + E(t)t

F(t) = α(1 − t)³ + 3βt(1 − t)² + 3γt²(1 − t) + δt³

const lerp = (a, b, t) => a * (1 - t) + b * t;

const bezier = (α, β, γ, δ, t) => lerp(
  lerp(lerp(α, β, t), lerp(β, γ, t), t),
  lerp(lerp(β, γ, t), lerp(γ, δ, t), t),
  t,
);

<path d="M 20 240 C 20 0 300 0 300 240 Z"/>

<path d="M 20 240 C 20 0 300 0 300 240 Z"/>

span {
  transition: translate 0.3s cubic-bezier(0.3, 0.8, 0.3, 2.3);
  clip-path: path("M 20 240 C 20 0 300 0 300 240 Z");
}

t = 100%

A cubic Bézier curve from α to δ is compared with a dashed circular arc. The curve follows its control polygon through β and γ but only approximates the circle, with a visible discrepancy between the two paths.

t = 100%

A cubic Bézier segment approximates one quarter of a circle. Its endpoints α and δ lie on the circle, while β and γ form perpendicular tangent handles that pull the curve into a near-circular arc.

4(√2 − 1) / 3

(4 / 3) · (√(2(1 + cos θ)) − (1 + cos θ)) / sin θ

(0, 1)

(π, −1)

A red cosine wave from (0, 1) to (π, −1) is approximated by a single cubic Bézier curve. A straight control polygon connects the endpoints through two intermediate control points, and the approximation crosses the horizontal axis with the wave.

(0, 1)

((π − 2) / 2, 1)

(3π² / 8 + 1 / 2 − π, 3π / 2 − 3π² / 8 − 1 / 2)

(π / 2, 0)

A Bézier approximation is shown over the first quarter of a cosine wave. The endpoint and two control-point coordinates are labelled, including a short horizontal tangent at the maximum.

(0, 1)

((π − 2) / 2, 1)

(3π² / 8 + 1 / 2 − π, 3π / 2 − 3π² / 8 − 1 / 2)

(π / 2, 0)

A closer view compares a black Bézier approximation with the red cosine curve from its maximum at (0, 1) to its zero at (π / 2, 0). The curves nearly coincide, with the two control points defining the approximation.

(0, 1)

(π − 2, 1)

(2, −1)

(π, −1)

A single cubic Bézier curve approximates the cosine segment from (0, 1) to (π, −1). Horizontal control handles end at (π − 2, 1) and begin at (2, −1), making the Bézier curve closely overlap the cosine wave.

The Beauty of Bézier Curves

https://youtu.be/aVwxzDHniEw

A video thumbnail illustrates flowing paths around two dark circular forms.

A straight cubic Bézier has coincident endpoint pairs: α overlaps β at the left and γ overlaps δ at the right. Sample marks along the curve bunch near both ends and spread farther apart through the middle, demonstrating non-uniform motion along this parameterization.

The Beauty of Bézier Curves

https://youtu.be/aVwxzDHniEw

A recommended video thumbnail illustrates flowing Bézier paths around two dark circular forms.

Transformations

(x y) · ((a c), (b d)) = (ax + by, cx + dy)

Scale: ((S_x 0), (0 S_y))

Rotate: ((cos θ sin θ), (−sin θ cos θ))

Translate: ?

span {
  transform: translate(20px, 30px) rotate(30deg) scale(2, -1);
}

span {
  transform: matrix(1.73205, 1, 0.5, -0.866025, 20, 30);
}

Note on Homogeneous Coördinates

(x, y, w)

(x y w) · ((a d g), (b e h), (c f k)) = (ax + by + cw, dx + ey + fw, gx + hy + kw)

span {
  transform: translate(20px, 30px) rotate(30deg) scale(2, -1);
}

span {
  transform: matrix(1.73205, 1, 0.5, -0.866025, 20, 30);
}

((1 0 0), (0 1 0), (20 30 1)) · ((√3/2 1/2 0), (−1/2 √3/2 0), (0 0 1)) · ((2 0 0), (0 −1 0), (0 0 1)) = ((√3 1 0), (1/2 −√3/2 0), (20 30 1))

span {
  transform: translate(20px, 30px) rotate(30deg) scale(2, -1);
}

span {
  transform: matrix(1.73205, 1, 0.5, -0.866025, 20, 30);
}

((1 0 0), (0 1 0), (20 30 1)) · ((√3/2 1/2 0), (−1/2 √3/2 0), (0 0 1)) · ((2 0 0), (0 −1 0), (0 0 1)) = ((√3 1 0), (1/2 −√3/2 0), (20 30 1))

const p1 = new DOMPoint(12, 5);
const p2 = DOMPoint.fromPoint({ x: 24, y: 10, w: 2 });
const m = new DOMMatrix([2, 0, 0, 2, 10, 10]);
const p3 = p1.matrixTransform(m);

const m = new DOMMatrix();
m.translateSelf(20, 30);
m.rotateAxisAngleSelf(0, 0, 1, 30);
m.scaleSelf(2, -1);
console.log(m.toString()); // "matrix(...)"

(x, y) ↦ (x, y, 1)

(x, y, w) ↦ (x / w, y / w)

(2, 1) ≠ (10, 5)

(2, 1, 1) = (10, 5, 5)

Scale

⎛ Sₓ  0   0 ⎞
⎜ 0   Sᵧ  0 ⎟
⎝ 0   0   1 ⎠

Rotate

⎛  cos θ   sin θ  0 ⎞
⎜ −sin θ   cos θ  0 ⎟
⎝    0       0    1 ⎠

Translate

⎛ 1   0   0 ⎞
⎜ 0   1   0 ⎟
⎝ Δx  Δy  1 ⎠

Note on Symmetry

Scale

⎛ Sₓ  0   0 ⎞
⎜ 0   Sᵧ  0 ⎟
⎝ 0   0   1 ⎠

Rotate

⎛  cos θ   sin θ  0 ⎞
⎜ −sin θ   cos θ  0 ⎟
⎝    0       0    1 ⎠

Translate

⎛ 1   0   0 ⎞
⎜ 0   1   0 ⎟
⎝ Δx  Δy  1 ⎠

Reflection in line (a, b, c)

⎛ b² − a²    −2ab       0    ⎞
⎜  −2ab      a² − b²    0    ⎟
⎝  −2ac       −2bc    a² + b² ⎠

ax + by + cw = 0

λ = (a, b, c)

p₁ = (x₁, y₁, w₁) p₂ = (x₂, y₂, w₂)

ax + by + cw = 0

λ = (a, b, c)

p₁ = (x₁, y₁, w₁) p₂ = (x₂, y₂, w₂)

λ = p₁ × p₂

λ = (y₁w₂ − w₁y₂, w₁x₂ − x₁w₂, x₁y₂ − y₁x₂)

(x, y, 0)

p₁ + p₂ = p₃

Two isolated points labeled p₁ and p₂ illustrate the operands whose homogeneous-coordinate sum produces p₃.

p₁ + p₂ = p₃

p₂ − p₁ = v⃗₁

ap₁ = p₁

A vector diagram contrasts homogeneous points and vectors: p₁ and p₂ lie along the direction v⃗₁, with p₃ between them; vectors v⃗₁ and v⃗₂ are placed head-to-tail, while v⃗₃ spans directly from the common origin to the final endpoint.

Perspective

A panoramic view of Florence Cathedral shows Brunelleschi’s vast masonry dome beside Giotto’s bell tower, introducing the historical discussion of perspective.

Filippo Brunelleschi

1377–1446

A statue portrays Brunelleschi seated with drafting instruments, identifying the architect associated with the development of linear perspective.

Two medieval manuscript illustrations place figures and architecture without consistent depth or converging spatial lines, exemplifying images made before systematic linear perspective.

A Renaissance painting organizes people and buildings within a convincingly receding architectural setting, illustrating the use of linear perspective after Brunelleschi.

A projection diagram shows an object viewed from point V. Rays from V pass through the object and meet an image plane defined by normal vector n, forming a larger projected image.

The projection point V is moved to infinity, making the projection rays parallel. The object is therefore projected orthographically onto the plane whose normal is n.

M = nᵀV − (n · V)I₄

Σ = n₁v₁ + n₂v₂ + n₃v₃ + n₄v₄

    ⎛ n₁v₁−Σ   n₁v₂     n₁v₃     n₁v₄   ⎞
    ⎜ n₂v₁     n₂v₂−Σ   n₂v₃     n₂v₄   ⎟
M = ⎜ n₃v₁     n₃v₂     n₃v₃−Σ   n₃v₄   ⎟
    ⎝ n₄v₁     n₄v₂     n₄v₃     n₄v₄−Σ ⎠

A single square serves as the simple two-dimensional object that will be placed in three-dimensional space and transformed with perspective.

A wireframe cube is centered within a long projection corridor, with elliptical cross-sections above and below it. The diagram demonstrates the cube positioned in three-dimensional space before perspective is viewed from an endpoint.

The projected object returns to a simple square, showing the cube aligned face-on so its depth collapses in the image.

A face-on wireframe cube appears as nested squares joined at their corners, making its depth visible under perspective projection.

The cube is again shown within the projection corridor, reinforcing how the same three-dimensional object maps to the nested-square perspective view.

A viewpoint looks directly along a perspective corridor toward the cube. The corridor edges converge at the cube while circular and square cross-sections overlap around the vanishing region.

Repeated transverse lines are added across the receding corridor. Their spacing compresses toward the central vanishing point, making perspective depth explicit.

The corridor is shown from the side with regularly spaced cross-sections, a central cube, and elliptical sections. This reveals the underlying parallel three-dimensional structure behind the converging perspective view.

A rotated wireframe cube is extended by dashed construction lines toward vanishing points, demonstrating how separate families of parallel edges converge in perspective.

A wireframe cube is surrounded by dashed extensions toward vanishing points on the left, right, and above, demonstrating three-point perspective.

A wireframe cube is drawn in perspective. Solid edges define the cube, while dashed construction lines extend from its corners toward multiple vanishing points, illustrating how matrix transformations and straight SVG lines create a three-dimensional perspective effect.

A tall rectangular plane turns in three-dimensional perspective, partially revealing a second plane covered with mathematical equations. The image concludes the geometry demonstration by suggesting that mathematical concepts can be opened up and explored visually using SVG and matrix transformations.