Manipulate text in graphics (font style, curves)

19 Graphics Creation – Manipulating Text in Graphics 🎨

Font Styles and Effects 🖌️

Think of fonts like different musical instruments. A bold font is a drum – loud and strong. An italic font is a violin – smooth and slanted. By changing these styles you can change the mood of your graphic.

• Bold – makes the text thicker.
• Italic – slants the text to the right.
• Underline – adds a line beneath the text.
• Large/Small – changes the size of the letters.
• Color – choose any color to match your design.

Text Curves and Paths 📐

Curving text is like bending a string of beads into a shape. In SVG (Scalable Vector Graphics), you can create a <path> and then use <textPath> to follow that path.

Example of a simple quadratic curve:
$y = ax^2 + bx + c$
If you set a = 0.01, b = 0, c = 0, the curve will be a gentle upward arc.

1. Draw the path using d="M 10 80 Q 95 10 180 80".
2. Wrap your text in <textPath> pointing to that path.
3. Adjust startOffset to move the text along the curve.

Practical Example: Creating a Logo 🚀

Let’s build a simple logo that says “STARS” with a curved text effect.

1. Choose a bold font for impact.
2. Set the font size to 48px.
3. Pick a bright color, e.g., #1e90ff.
4. Create a circular path: d="M 100 100 m -75 0 a 75 75 0 1 1 150 0 a 75 75 0 1 1 -150 0".
5. Place the text inside <textPath> and align it to the path.
6. Add a subtle shadow: text-shadow: 2px 2px 4px #555;.

Result: A dynamic, eye‑catching logo that feels like it’s floating in space! 🌌

Key Takeaways 📌

• Font styles (bold, italic, underline, color) change the tone of your text.
• Curving text uses SVG paths; think of it as guiding the text along a road.
• Combining styles and curves can create professional, memorable graphics.
• Practice by designing a logo or a poster for a school event.