<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : LB_write-on-paths.html |
| Author : Leonidas Bothmer |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>writing in a dodgy circle</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 3.75vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
svg {
/* sets the width of the svg; without this line the SVG fills the screen width */
width: 500px;
}
</style>
</head>
<body>
<!-- Viewbox: first two numbers move the viewbox, so the slightly smaller circle is centered -->
<svg viewBox="-45 -45 500 500">
<!-- id: need to set to later place text -->
<!-- d: a path, can be done in illustrator or figma and copied into code; shapes like perfect circles have different syntax and do not work -->
<path
id="curve"
fill="transparent"
d="M400 200C400 359.524 274.79 400 200 400C162.185 400 0 371.008 0 200C0 136.415 40.056 0 200 0C386.415 0 400 89.5431 400 200Z"/>
<text width="500">
<!-- links the text path to the path with the same id. # stands for id. -->
<textPath xlink:href="#curve">
We are writing in a dodgy circle, because we can. We are only doing it using SVG, no CSS required.
</textPath>
</text>
</svg>
</body>
</html>
