We can achieve the latter with an SVG feature called clipping.Ī clip defines an outline, and only the area inside the outline is visible. You can get an inner stroke by drawing a double-width centred stroke, then discarding everything outside the boundary of the shape – or alternatively, only showing everything inside the shape. 90% size + 100% size → inconsistent stripesįor more complex shapes, it gets even harder (sometimes impossible) to combine different sizes in a way that doesn’t leave gaps. Right: A heart3 with a blue-red striped stroke. Middle: A blue heart3 with an outer3 stroke. Notice how the red stripe is much thicker than the blue stripe, and the width of the blue stripe is inconsistent: Left: A red heart3 with an inner3 stroke. It gives a consistent, even line around the whole shape, whereas combining different sizes gives a messier result. Using inner/outer strokes tends to look better than combining different sizes of the same shape. I wanted to replicate this effect in SVG, so that I create the stripes programatically, rather than fiddling around with a graphics program. For example, to draw four stripes, you could draw two outer strokes and two inner strokes. inner stroke + outer stroke → striped strokeīy adding more strokes of different widths, you can create more complex stripes. Right: A heart with a blue-red striped stroke. Middle: A blue heart with an outer stroke. When I made my initial heart graphic in OmniGraffle, I combined inner and outer strokes to create something that looked like a striped stroke. If you’re interested, I found a Stack Overflow thread that links to several of the proposals – it also gave me some ideas about how I’d implement this myself. There have been several proposals to make stroke alignment part of the SVG spec, so you could write something like stroke-alignment="inner" to position your strokes, but so far none of them have been accepted. inner stroke centre stroke outer strokeĪlthough the square is the same size in all three cases, notice how the stroke alignment changes the size of the final shape. In some graphics programs, you can choose to draw an inner stroke (which puts the entire stroke inside the shape) or an outer stroke (which puts the entire stroke outside the shape): Three examples of a rectangle with inner, centre, and outer strokes. (You get an extra half a stroke’s width on both sides of the shape – thus, an extra stroke width.) Falling hearts svg plus#This means the visible width of the shape is actually the width of the shape plus the width of the stroke. Normally, the stroke is centred on the boundary of the shape: that is, half of the stroke is inside the shape, and half of it is outside. In this context, I’m thinking of the path that encloses an entire shape its outline. In vector graphics, a stroke is a visible line that you draw along a path – think of it like the stroke of a brush. This seems like something I might use again, and it helped me understand both features, so in this post I’m going to explain how I did it. It was partly for fun, partly to play with some SVG features that I hadn’t used before: clipping and masking.Īs part of the app, I came up with a way to draw inner and outer strokes in SVG. A pair of interlocked hearts: one in rainbow colours on the left, one in trans pride colours on the right.Īt the weekend, I wrote a fun little app to make SVGs of interlocking rainbow hearts. Although it’s more effort, I can write much simpler images by hand than with an app, and it forces me to really understand how SVG works. I write most of my SVGs by hand, rather than using an app like Illustrator or Inkscape. Simple diagrams work well as vector images, I can store them as text alongside source code, and they look sharp at any size. We can call an image of a heart and set it as the background of an element.I make a lot of box-and-arrow diagrams, and I typically make them as SVGs. In the spirit of Valentine’s Day, I thought it would be fun to push this concept a little further with the many ways we can make hearts in HTML & CSS. Consider the variety of options we have to write black in CSS: There are rules, semantics and, like love itself, it can be communicated in many ways. If written well, it can be as lovely as poetry. I like to think of CSS as a love language.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |