Excuse me, while I draw a line onto your computer screen.

In the immortal words of Jonathan Cash.

Okay.

So fine.

I've drawn a line.

A line is a kind of an emaciated rectangle joining two points in space.

In this case point A and point C where's point B you might ask point B is somewhere over here, off screen because points B forgot to bring their [beep] release form and cannot therefore take part in this video.

Sorry.

The question is, how did I draw this line onto your screen? How did I make all the right pixels light up to form that line like shape? And the answer is, none of your [beeping] business.

Seeyalater yeah? If you're still there.

I suppose I can tell you how I might have drawn my line.

Number 1 the Horizontal Rule HTML doesn't have a l element because if it did people, wouldn't be able to tell if it was l for line or capital I for, uh, I am a line instead there's the verbosity and officiously named horizontal rule La De Dah.

The horizontal role is a semantic element representing a thematic break in your content.

For example, you might use a horizontal rule to separate to the long rambling travelogue part of your recipe page from the actual recipe, it's arguably more helpful to use an h2 heading with the actual text, the actual cooking recipe, but I digress.

By default, browsers give horizontal rules their lineishness using the border property.

You'll notice there's what appears to be a shadow cast by the line, which really makes it pop.

But what the lame stream media doesn't tell you is that this shadow isn't really a shadow, but the effect of using a border style of inset on all sides of an elements with no height, if you want to remove this thing, that isn't really a shadow there is a property for the horizontal rule.

Curiously named no shade.

The no shade property is what's called deprecated.

Which means you shouldn't use it anymore, [even though you can] like don't, [but seriously, go ahead.

It's fine].

But for how long? [no you're good].

Or are you?, in any case you can just restart the border using CSS, make the border more permissive with border style, dashed, or use pseudo contents to label the points sh*t like that.

All of this styling we can do to a horizontal rule.

We can just as easily do to a div, but there are reasons why div is short for divisive . Firstly, screen readers do not acknowledge empty divs, meaning screen reader users would be ushered from blah-blah-blah , sunkissed rural Tuscany into one tablespoon toasted Sesame oil, without any kind of warning.

Secondly, divs are not recognized by shorthand syntax, like markdown.

Why should a content editor have to write div class equals horizontal hyphen rule closed div when a horizontal rule in markdown is just three asterisks.

Number two, Scalable Gector graphics Scalable vector graphics, or sverg are named for their incorporation of graphics that are scalable on account of them being vectors like HTML they're a kind of markup and because they can be embedded into HTML, they are a kind of markup that is kind of a part of a kind of markup.

SVG offers a number of ways to draw lines.

If you're interested in being obtuse, you could use a rec elements with a height of one.

Naturally.

The name Rec is short for rectangle from the Latin etymology rectum.

A more on the nose approach would be to use the line elements, whether it's x1 y1 x2 and y2 attributes.

These lines are only ever straight, or at least that's what they tell themselve.

To make your line change direction and create corners you want to polyline which takes a set of points.

By far the most powerful and versatile line thingy in SVG is the path.

The paths d attribute, which stands for dem points can include special commands like M the M command lets you start a new line using the same path beginning at a different position.

Monk is a word that starts with M which is pertinent here because a group of monks from the 12th century, presumably in the early hours, before they got beeped up on monastic beer, invented a numbering system wherein every number between zero and 9,999 can be represented by a single character made of lines.

That rhymes.

Using paths I can quickly and efficiently recreate the first nine monk numbers in SVG for multiples of 10.

I simply take the multiples of one reuse the paths where they use elements, but flip them horizontally and transform them using scale and translate.

For multiples of a hundred, I flipped vertically.

And for multiples of 1000, I flipped both horizontally and vertically.

Now to recreate any number between one and 9,999.

I just need to reference each components by ID inside another SVG.

In this case, the number is 6,969.

Nice knives.

Should you need to calculate the length of your path.

You have a couple of options.

1.

Try to recall all the trigonometric functions you were taught at school, which would be futile because you weren't actually listening where you? Or 2.

Use the built-in get total length method of the SVG geometry element interface, which does all of this for you, thereby coddling you and destroying your capacity for independent thought.

The value returned is not in pixels, but user units, the units you use to draw the path relative to the view box.

One thing this is useful for is knowing how large one of two adjacent circles can be before it starts touching another circle.

Step one, or possibly step zero in a circle packing routine you might use to create a basic generative artwork.

Using the special commands.

C.

S.

Q.

T.

& A.

You can curve your path too.

Exacting curves is difficult, but there are some hacks.

For example, if I take the zigzag path and stick an S before my second point, I go from zigzager to squiggler in a second.

Each curve, the s command produces is a mirror of the previous curve.

Hence the total annihilation of pointy bits.

It should be no surprise then that the S stands for smooth as in operators, baby's bottoms and jazz.

Combine curbs with fills, and you can draw pretty much anything with a single path element.

For example, this picture of Bobby Hill from King of the Hill, as the goat deity Baphomet with the inscription 'that's my purse I don't know you' in gothic script.

Here is another single path.

This time illustrating a skull.

When you include a skull in your artwork, it is sometimes known as a momento mori .A convenient reminder that you will, at some point die.

If you're not an art lover, you can instead set up daily notifications with a calendar app.

The point is though, right? That by converting the d string into an array, mapping it and randomizing the integers.

I could use this image to create randomized glitchy artifacts, which is also fun to do.

Number 3 UTF-8 Encoded SVG Background Images.

If you're a pervert for HTTP requests, you can of course, grab a ropey JPEG image of a line and set it as a background image.

The more cultured among you might prefer to use a UTF eight encoded SVG data URL.

All we need is a one by one SVG with a filled wrecked element.

Drawing a line just requires repeating the SVG in one direction and setting the width of the line using background site.

We can even make it a dotted line by bleep with the view box.

Now the image is twice as wide as the wrecked inside it to leaving gaps.

Repeat this SVG in both directions and , we've got stripes.

If you were to include your UTF-8 encoded SVG data URL in the context of a CSS in JS tool, like styled components.

And if you were to include an inline style on that SVG.

Technically you would be writing.

CSS in SVG and CSS in JS which is three orders of galaxy brain higher than mere CSS in JS Number 4 Linear Gradients.

As versatile as this simple SVG is, one thing you can't easily do is rotate the background to make diagonal stripes, but you can achieve this effect with gradients, unlike with the data URLs, which are strings, we can now interpolate custom properties, giving us easy control over the stripe dimensions and colors.

Notes that line end is a kind of reactive property.

When you change either line, gap or line width, it's value is automatically updated.

JavaScript, doesn't do this reactive thing out of the box.

You need a library like React instead.

That's because unlike CSS, it is not really a grownup programming language.

Hashtag shade, hashtag tea hashtag hashtag hashtag number Number 5 Houdini Paint Worklets Harry Houdini was a famous magician and illusionist who tragically died when he cast a spell on his internal organs and made them disappear.

Jerry Houdini, no relation, was a famous technologist who created a number of methods for writing CSS using low level browser APIs.

Who tragically died when he simultaneously choked on a honeydew melon and spontaneously combusted.

A paint worklet turns any HTML element into your canvas, letting you draw on it like you would a canvas element.

Drawing a line across the middle of an element using a paint worklet is as simple as defining the widths and stroke color, finding the elements middle, then procedurally joining two points.

We moved to the middle of the left hand side, draw a line to the right-hand side, equal to size dot width.

Then apply the stroke.

If you use a Houdini paint worklet to draw a simple line like this, not only will melon averse, Jerry Houdini start turning rapidly in his grave, but I will write to you a very strongly worded letter that will read something like this.

Dear Mr.

Poopy pants, Mc Wrong Brain.

It has come to my attention that you have enlisted a paint worklet and with it, a JavaScript dependency in order to elicit a simple line artifact in your original design, when you could have deferred any number more efficient and well supported CSS techniques, you are a complete and utter parsnip.

Best wishes for the future.

Haydon.

P.s, bye bye.

Bye bye bye bye bye.

Bye bye.

Before you use Houdini, you have to ask yourself what can Houdini do that CSS can't do otherwise? One thing is having access to JavaScript's math objects, which means we can use math dot random to generate to randomized line paths.

What's more by registering the custom properties, amplitude and frequency.

I can control the parameters within which that randomization takes place.

Once these properties are incorporated into the worklets using the input properties method, you can start tweaking the values live in your browser's dev tools.

In practice I can use these scrawlings to stylize my lo-fi mock-ups lorem ipsum text, which not only looks kind of neat, but also saves having to explain to my client why the word cum, keeps appearing in their copy.

Number Six WebGL.

Arguably the pinnacle of over-engineering would be to create this simple line using WebGL, which even just to draw a line, still requires things like vertices and matrices, shader algorithms, and the necessity to commit shameful depraved acts like dynamically generating float 32 arrays and stuffing them inside buffers.

But whatever, this line exists in simulated 3D space now.

You just can't tell because you're looking at it directly side on In Summary Lines are rectangles that are really thin unless they are curved lines, in which case they are not rectangles at all but squigglys, weblers and doodiely dos.

You can make Browsers draw lines in all sorts of different ways.

Always choose the simplest and most efficient way to draw the line for the given purpose or use case.

The Baphomet does not in isolation, represent evil.

It is a composition of supposed opposites, good and evil, man and woman, light and dark.

Eliphas Levi the creator of this depiction of Baphomet refered to it as the sabbatic goat.

It did not invent Levi jeans.

Some lines are decorative and others are meaningful.

If your line means something, make sure that meaning is accessible to everyone, including those that hear, rather than see what the line represents.

The leading cause of death among males in the United Kingdom is choking on an unchewed mellon.

The second most common cause of death is spontaneous combustion.

And the leading cause of spontaneous combustion is informing someone CSS is a programming language.