SIMPLE & USEFUL
A guide to web design

Small graphics using unicode, css and svg


Unicode

Unicode is a computing industry standard for encoding, representation and handling of text expressed in most of the world’s writing systems. It has 110,182 graphical, formatting and control characters, covering those languages, as well as, many mathematical, musical and other symbols.

Here are four of the sets of symbols and graphical elements which are included in Unicode and work on all platforms.

Dingbats

✠ ✤ ✱ ✈ ❋

✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖✚✖

A border made using the characters #10006 and #10010.

✄ ✄
THE CUT-UPS

A title for a brand.

Miscellaneous symbols

♣ ♨ ★ ♀

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
A border made using the characters #9898 and #9899.

▼Lookdown▲Pickup

For social action.

Geometric shapes

▣ □ ◆ ◈

◣◢◤◥◣◢◤◥◣◢◤◥◣◢◤◥◣◢◤◥◣◢◤◥◣◢◤◥◣◢◤◥

A border made using the characters #9699, #9698, #9700 and #9701.

◎eyes◎

A business logo

Block elements

▇ ░ ▌ ▓ ▁

▁▁▄▌▁▁▄▌▁▁▄▌▁▁▄▌▁▁▄▌▁▁▄▌▁▁▄▌▁▁▄▌▁▁▄▌▁▁▄▌

A border made using the characters #9600, #9604 and #96129.

▋▊▉Aroundtheblock

A neighborhood logo


CSS – circle, star and triangle

CSS Specifications – http://www.w3.org/Style/CSS/specs

CSS3 Transforms – http://www.w3.org/TR/css3-3d-transforms/


SVG – Scalable Vector Graphics

Basic shapes – https://svgwg.org/svg2-draft/pservers.html

Color & SVG – http://www.personal.psu.edu/jxm22/svgopen2010/index.html

Circle, square and triangle

Rectangle, star and polygon

Example polygon01 - star and hexagon

Rectangles, circles and color

Here is very small file (1.6k) which show how transparency can be used for delicate and subtle effects in svg files.

Below is another file (2.8k), also repeated three times, which gives an illusion of depth and shows a range of reds.