![]() ![]() You will also notice that CSS drawings scale great. If you do it right, you won't notice the connections at 100% zoom but, if you zoom in, you will notice that they are far from perfect. This may be the trickiest part of it all because the lines on CSS are not going to match perfectly leaving gaps between them. And that's what I did.Īfter adding those "straight" lines, our Homer looked more like Homer: This looks more like it, just final touches missingįinally, we need to add the lines to connect everything. If you make the circle big enough and only display a section of it, you may see a little curvature, but in general, it will look like a straight line. If you have a really big circle but can only see a small part of it, will it actually look like a circle? To answer the question: the straight lines are a bit trickier, but not that complicated. Your next thought will probably be " That drawing's super-cool already -Thanks!- but how about the straight lines? Homer is not all curves and so far it is just a bunch of circles". I like using the eyes as a starting point because they are easy to do and they already give personality to the drawing.Īdding the first cropped circles leaves us with something like this: Not there yet, but you can already see Homer So let's focus on Homer Simpson's features that are mostly circles: eyes, ears, nose tip, top of the head, etc. I know we are only using circles, so it would be more of breaking it into circular and not-so-circular shapes. The next step would be breaking the image into shapes. Which translated into code looks like this: ĭiv ![]() It has no borders, no fill, nothing but an overflow: hidden. The exterior circle is used for cropping the interior one.It has a border and it is positioned absolutely inside the other circle. The interior circle is used to draw the line.The trick is using two circles for each line: one circle to draw the line in itself, and another circle to crop it. I didn't draw Homer Simpson from memory, I had a background image that I used for guidance, tracing the lines over it. It is also not the right way to do things -if there's such thing as the right way-, but a different (and interesting) approach to this problem.Īnd now is when you may ask " How are you going to draw Homer Simpson using only circles?" And that's a great question. On top of that, this cartoon was done as part of a CodePen challenge that consisted of building something limiting ourselves to one shape: the circle, which adds an interesting restriction to the mix.īecause of that, this is not going to be a regular article on how to draw on CSS. A cartoon character like Homer Simpson doesn't fit in that category, which makes drawing it in CSS a challenge. CSS drawings are normally compositions of shapes that result in a vectorial-looking image. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |