Date : 27th April 2024

For all the latest browsers

CSS PLAY WEBSITE
MENUS LAYOUTS DEMONSTRATIONS &

Information

Just CSS. Absolutely NO jQuery/javascript or any other programming language.

Two demonstrations of using svg textPath and pattern image

First demonstration

This uses a single svg path to produce a circle such that the text is always the right way up and readable from left to right.

It also uses 'defs' with 'pattern image' to define an image which can be placed in the center of the circle using 'fill'.

Second demonstration

This uses three paths to define an oval with a horizontal path through the center.

Text is then placed along each path and aligned to the center of their paths.

In all cases the text is a link to other pages.

Just use 'view page source' to see the svg code and stylesheet.

Check out SVG <path> builder to produce your svg path(s).

The stylesheet for this demonstration is in the page head, but if you use this, please keep my copyright comment with the stylesheet.

Please consider making a donation, every little helps.