My text dividers (Everyone is welcome to use them for their posts!)

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@cryptosharon·
0.000 HBD
My text dividers (Everyone is welcome to use them for their posts!)
<center><h1>I love dem text dividers!</h1></center>

<div class="pull-left"><img src="https://i.ibb.co/Ksmj0Sp/497e05fa21b9ee2c1de2c7102d577552.png"></div>

Two years ago, when I first arrived at Steem, I made a **small collection of flowery text dividers**. They made me excited to post because there was always an air of aesthetic originality. While I've gotten used to them (after 2 years of using them), I still find them to be *really pretty*!

They were originally grey, as you can see to the left. I got them from [PngTree.com](https://pngtree.com/) because I thought that the default divider (`<hr>`/`---`) was *extremely* dull. I still very rarely use it.

However, grey is not the best definition of liveliness, so I **sprayed some colour onto them**! I first painted them red with a [Krita](https://krita.org/) brush, then I put some yellow and cyan, and maybe some other colour. This resulted in the image just like the one on the left, but filled with colours.

<p>I saved the project as a <code>.tiff</code> file on Krita (each horizontal ruler being its own layer). Then, I used <a href="https://www.imagemagick.org/">ImageMagick</a> to  separate them  with the CLI command <code>convert result.tiff -trim layer.png</code>. And as the name of the program implies, it magically converted each layer into a separate PNG with a consecutive name (1, 2, 3, etc.)

Here, I give you the resulting text dividers. You're free to use them in your own posts if you want, or to make your own. If you would rather make your own, [this old post](https://hive.blog/howto/@ddua/how-to-do-an-awesome-separator-or-steemit) explains how to make them from the comfort of your browser. So let's go:

<center><h2>Some text dividers</h2></center>

<img src="https://i.ibb.co/R4P7fsm/fVLQG1J.png">
<center>Code to use: `<img src="https://i.ibb.co/R4P7fsm/fVLQG1J.png">`</center><br>
<img src="https://i.ibb.co/yQLGVQB/cS8GXPJ.png">
<center>Code to use: `<img src="https://i.ibb.co/yQLGVQB/cS8GXPJ.png">`</center><br>
<img src="https://i.ibb.co/yF0wr9w/n0GHXPP.png">
<center>Code to use: `<img src="https://i.ibb.co/yF0wr9w/n0GHXPP.png">`</center><br>
<img src="https://i.ibb.co/8mcrbrk/KxT9Uwc.png">
<center>Code to use: `<img src="https://i.ibb.co/8mcrbrk/KxT9Uwc.png">`</center><br>
<img src="https://i.ibb.co/2YC368R/MeKfwD0.png">
<center>Code to use: `<img src="https://i.ibb.co/2YC368R/MeKfwD0.png">`</center><br>
<img src="https://i.ibb.co/f2LLqF3/1gtTwu5.png">
<center>Code to use: `<img src="https://i.ibb.co/f2LLqF3/1gtTwu5.png">`</center><br>
<img src="https://i.ibb.co/RP17fq0/1IIQlts.png">
<center>Code to use: `<img src="https://i.ibb.co/RP17fq0/1IIQlts.png">`</center><br>
<img src="https://i.ibb.co/3NVwmz5/yFgf4yG.png">
<center>Code to use: `<img src="https://i.ibb.co/3NVwmz5/yFgf4yG.png">`</center><br>
<img src="https://i.ibb.co/8MPPnRG/1PuLYcm.png">
<center>Code to use: `<img src="https://i.ibb.co/8MPPnRG/1PuLYcm.png">`</center><br>
<img src="https://i.ibb.co/N10wKGS/E9ymaq8.png">
<center>Code to use: `<img src="https://i.ibb.co/N10wKGS/E9ymaq8.png">`</center><br>
<img src="https://i.ibb.co/nnxJmCw/swHdOk9.png">
<center>Code to use: `<img src="https://i.ibb.co/nnxJmCw/swHdOk9.png">`</center><br>
<img src="https://i.ibb.co/FXV5dNH/cBLGlwe.png">
<center>Code to use: `<img src="https://i.ibb.co/FXV5dNH/cBLGlwe.png">`</center><br>
<img src="https://i.ibb.co/S740p87/57raa1k.png">
<center>Code to use: `<img src="https://i.ibb.co/S740p87/57raa1k.png">`</center><br>

<center><h1>Making the list</h1></center>

If you're curious, I didn't make the list by hand! (too long). I bulk uploaded all the images to [ImgBB](https://imgbb.com), copied the provided list of links, then I simply pressed F12 in Firefox (works on Chrome too) and put some code in the console:

```js
const text = `https://i.ibb.co/R4P7fsm/fVLQG1J.png
https://i.ibb.co/yQLGVQB/cS8GXPJ.png
https://i.ibb.co/yF0wr9w/n0GHXPP.png
https://i.ibb.co/8mcrbrk/KxT9Uwc.png
https://i.ibb.co/2YC368R/MeKfwD0.png
https://i.ibb.co/f2LLqF3/1gtTwu5.png
https://i.ibb.co/RP17fq0/1IIQlts.png
https://i.ibb.co/3NVwmz5/yFgf4yG.png
https://i.ibb.co/8MPPnRG/1PuLYcm.png
https://i.ibb.co/N10wKGS/E9ymaq8.png
https://i.ibb.co/nnxJmCw/swHdOk9.png
https://i.ibb.co/FXV5dNH/cBLGlwe.png
https://i.ibb.co/S740p87/57raa1k.png`

console.log(text.split('\n').map(n => `<img src="${n}">\n<center>Code to use: \`<img src="${n}">\`</center><br>`).join('\n'))
```

In the last 2 years, many other people have given away **super cool text dividers** for the Steem ➡️ Hive ecosystem! I have to give some honorary mentions to these inspiring people.

<center><h1>More great text dividers made by beautiful people</h1></center>

#### By @byn (collection):
- [10 Free Colorful Dividers for You!](https://hive.blog/steemit/@byn/10-free-colorful-dividers-for-you)

#### By @thepeakstudio (collections):

- [Hive blog text animated dividers ! spice up your blog](https://hive.blog/hive-156509/@thepeakstudio/hive-blog-text-animated-dividers-spice-up-your-blog)
- [Hive Graphics For The Community!](https://hive.blog/hive/@jacobtothe/hive-graphics-for-the-community)
- [Hive blog text dividers to decorate your posts ( Free to use )](https://hive.blog/hive-148441/@thepeakstudio/hive-blog-text-dividers-to-decorate-your-posts-free-to-use)

#### By @ddua (guide):

- [How To Do An Awesome Separator](https://hive.blog/howto/@ddua/how-to-do-an-awesome-separator-or-steemit)

#### By @scrooger (super favourite collection)

- [Animated Text Dividers! - - Simply Copy and Paste .gif dividers](https://hive.blog/steemit/@scrooger/animated-text-dividers-simply-copy-and-paste-gif-dividers)

#### By @mayvil (guide & collection):

- [Creating text dividers @mayvil](https://steemit.com/steemit/@mayvil/creating-text-dividers-mayvil)

<center><h1>Origin story</h1></center>

I made these dividers 2 years ago and [made a post about it](https://hive.blog/steemit/@cryptosharon/my-horizontal-rulers-everyone-is-welcome-to-use-them). However, I've noticed that Imgur does not store images forever. **Some of my old posts have deleted images**, only salvaged by Steemit and Hive CDNs. I decided that, rather than risk losing some of these dividers forever, I'd re-upload them to ImgBB (multiple required points of failure instead of a single one; **sturdier backup!**).

I also noticed that there is a small trend of new bloggers joining. I want people to feel welcome to have **sleek aesthetics** for their posts. Last time I posted my text dividers, other people followed and shared their own, thus creating a chain of great media.

<center><h1>Comparing my old and new scripts</h1></center>

Funnily enough, we can se my progress in learning how to code by the way I made the list the last time. I also included a picture of my code in my 2-year-old post.

<img src="https://images.hive.blog/p/2bP4pJr4wVimqCWjYimXJe2cnCgn8vJm6FfAMfWQnG6">

I can't believe I bothered to use `.reduce()` and a bracket function 😂 I must have spent an eternity fixing it. But it does solve the problem in one less step  by merging the `.map()` and `.join()`

<center><h1>Do you like these dividers? Will you be using any?</h1></center>

<center>Do leave a comment to tell me what you think</center>
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,