< home

dividers are very cool. you want a divider fast 'n easy? yeah me too.

⨳ the simple humble bar:

the code:

1

![](data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='4'><rect width='800' height='4' fill='%234099a0'/></svg>){100%:4}

below it's an analysis how to customise it:

red box - the thickness of your bar. you can use px, rem or hv for measurements. don't forget to change height attribute to the same value
green box - the color of your divider. %23 is the URI encoding for the hashtag so you only add your color code after without a #

1

fill = '%23ffffff`

to add color names, discard %23:

1

fill = 'blue'

results:

make sure your colors are between single quotes all time to work.

to change opacity, go "get transparent color" and get your color with a certain transparency and copy the code and paste it without the #:

1

fill = '%238E91B833'

results:

⨳ faded ends bar

the code:

1

![](data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><defs><linearGradient id='g' x1='0%25' x2='100%25'><stop offset='0' stop-color='%234099a0' stop-opacity='0'/><stop offset='0.5' stop-color='%234099a0' stop-opacity='1'/><stop offset='1' stop-color='%234099a0' stop-opacity='0'/></linearGradient></defs><rect width='800' height='800' fill='url%28%23g%29'/></svg>){100%:4}

to change color, just change the green boxes like you would in the simple bar. size is done the same way you would do with the simple bar: