Cloak HN: A easy hand drawn HTML/CSS theme

Cloak HN: A easy hand drawn HTML/CSS theme

A easy hand drawn HTML/CSS theme.

By Chris McCormick (@mccrmx)

Salvage the source code on GitHub.

Rapidly demo

Easy glean out how to make use of it

The main stylesheet is doodle.css:


Then add the class doodle to the give up stage element you are searching to apply the theme to:


Load the Immediate Stack web font:


There’s furthermore an npm installable model:

npm install doodle.css

There are furthermore a bunch of alternative vectors it is probably you’ll maybe use in doodles.svg.

You might well well maybe be ready to furthermore build a doodle field spherical the rest utilizing the class .doodle .border or .doodle-border.


This stylesheet is closely inspired by the Hand Drawn Vector UI Equipment by Tony Thomas.
I needed a CSS theme that looked honest genuine love that, so I drew a bunch of linked ingredients and received them working on the catch.

HTML coverage utilizing HTML Kitchen Sink.

The font is Immediate Stack.

Various HTML Substances

h2 Lend a hand in my quaint backyard

h3 Jaunty zinnias vie with flaunting phlox

h4 5 or six colossal jet planes zoomed immediate by the recent tower.

h5 Demand expert signwriters to make use of many jazzy, quaint feeble alphabets effectively.
h6 Pack my field with 5 dozen liquor jugs.

This paragraph is nested inner an article. It contains many varied, infrequently precious, HTML5 tags.
No doubt there are classics love emphasis, solid, and puny
however there are many others as properly.
Cruise the following textual verbalize for abbreviation sign: abbr. Within the same trend, it is probably you’ll maybe use acronym sign love this: ftw.
You might well well maybe be ready to account for deleted textual verbalize
which in most cases will get replaced with inserted
textual verbalize.

You might well well maybe be ready to furthermore use keyboard textual verbalize, which infrequently is styled equally to the
or samp
tags. Draw more namely, there might well be an illustration honest genuine for variables. Now to now not be wrong with blockquotes

below, the quote sign helps you to denote something as
quoted textual verbalize. Lastly fetch now not neglect the sub (H2O) and sup (E = MC2) tags.

  • Unordered List item one
    • Nested list item
      • Degree 3, item one
      • Degree 3, item two
      • Degree 3, item three
      • Degree 3, item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

Blockquote: I immediate outlined that many colossal jobs gain few hazards

Here's a mult-line blockquote with a cite reference. Folks mediate focal level methodology saying certain to the object youโ€™ve received to focal level on. But thatโ€™s now not what it methodology at all. It methodology saying no to the hundred other genuine suggestions that there are. Or now not it is valuable to capture
in moderation. Iโ€™m undoubtedly as delighted with the things we havenโ€™t performed as the things I in point of fact gain performed. Innovation is saying no to 1,000 things.
Steve Jobs โ€“ Apple Worldwide Buildersโ€™ Conference, 1997

Tables can gain captions now.
Particular person Number Third Column
Anyone Lastname 900 Nullam quis risus eget urna mollis ornare vel ecu leo.
Particular person Name 1200 Vestibulum identity ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
One other Particular person 1500 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam identity dolor identity nibh ultricies vehicula ut identity elit.
Final One 2800 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

Definition List Title
Definition list division.
Kitchen Sink
Feeble in expressions to report work by map of which all imaginable (and some impossible) sources were mined. On this case, a bunch of markup.
Defines verbalize excluding the page verbalize
Defines a share that is quoted from but another source

1 Countless Loop

Cupertino, CA 95014

United States

pre {
  present: block;
  padding: 7px;
  background-color: #F5F5F5;
  border: 1px solid #E1E1E8;
  border-radius: 3px;
  white-home: pre-wrap;
  notice-atomize: atomize-all;
  font-family: Menlo, Monaco;
  line-height: 160%;

Fig1. A image of Invoice Murray from

Hi there. You've got reached the conclude of the page. Thanks for checking it out. Own a effective day.

Join the pack! Join 8000+ others registered customers, and fetch chat, build teams, submit updates and build friends spherical the sector!



Hey! look, i give tutorials to all my users and i help them!