In the first part, I define the grid and I draw the letters.
To develop the animation I created an HTML file with its basic structure, I named it index.html. At one point I also needed to create a CSS file, I named it index.css.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./index.css" /> <title>GOOD MOOD</title> </head> <body> <!-- SVG code goes here --> </body></html>/* CSS code goes here */Defining the grid
I defined a 4 columns by 2 rows grid. While columns have a fixed width, rows increase and decrease in height. Each letter is 10 units wide and oscillate between 10 and 20 units in height.
When a letter at the top increases in height, the letter below it decreases in height, and vice versa. Thus, the row heights sum is always equal to 30 units.
The columns and rows are 1 unit apart, and the animation has margins of 10 units.
Being 4 columns 10 units wide each, 1 unit apart, with margins of 10 units on each side, the total width is 63 units.
Being 2 rows where the heights sum is always equal to 30 units, 1 unit apart, with margins of 10 units at the top and bottom, the total height is 51 units.
<!-- x1 = 0 y1 = 0 x2 = 63 y2 = 51 --><svg viewBox="0 0 63 51"> <!-- other elements go here --></svg>Drawing the letters
Having defined the grid, I started to draw each letter in normal and stretched versions. In the next sections I show each command of the path element's d attribute, as well as the final outlined or filled result.
In these sections I used a viewBox that holds only one letter:
<svg viewBox="0 0 10 20" width="200"> <path d="commands go here" /></svg>I omitted the svg element that would wrap the path element to keep the code concise.
First row
I drew the letters from the first row at the top, with their stretched versions stretching down.
Regular letter G
<path d=" M0,4 Q0,0 4,0 L6,0 Q10,0 10,4 L10,4.6 L6,4.6 L6,4 C6,3 4,3 4,4 L4,6 C4,7 6,7 6,6 L5,6 L5,5 L10,5 L10,10 L7,10 L6.6,9 Q6,10 4,10 Q0,10 0,6z "/>Stretched letter G
<path d=" M0,4 Q0,0 4,0 L6,0 Q10,0 10,4 L10,14.6 L6,14.6 L6,4 C6,3 4,3 4,4 L4,16 C4,17 6,17 6,16 L5,16 L5,15 L10,15 L10,20 L7,20 L6.6,19 Q6,20 4,20 Q0,20 0,16z "/>Regular letter O
<path d=" M0,4 Q0,0 4,0 L6,0 Q10,0 10,4 L10,6 Q10,10 6,10 L4,10 Q0,10 0,6 L4,6 C4,7 6,7 6,6 L6,4 C6,3 4,3 4,4 L4,6 L0,6z "/>Stretched letter O
<path d=" M0,4 Q0,0 4,0 L6,0 Q10,0 10,4 L10,16 Q10,20 6,20 L4,20 Q0,20 0,16 L4,16 C4,17 6,17 6,16 L6,4 C6,3 4,3 4,4 L4,16 L0,16z "/>Regular letter D
<path d=" M0,0 L6,0 Q10,0 10,4 L10,6 Q10,10 6,10 L0,10 L0,7 L4,7 Q6,7 6,6 L6,4 Q6,3 4,3 L4,7 L0,7z "/>Stretched letter D
<path d=" M0,0 L6,0 Q10,0 10,4 L10,16 Q10,20 6,20 L0,20 L0,17 L4,17 Q6,17 6,16 L6,4 Q6,3 4,3 L4,17 L0,17z "/>Second row
I drew the second row letters on the bottom, with their stretched versions stretching up.
Regular letter M
<path d=" M0,10 L4,10 L5,14 L6,10 L10,10 L10,20 L7,20 L7,15 L6,20 L4,20 L3,15 L3,20 L0,20z "/>Stretched letter M
<path d=" M0,0 L4,0 L5,6 L6,0 L10,0 L10,20 L7,20 L7,7 L6,20 L4,20 L3,7 L3,20 L0,20z "/>Regular letter O
<path d=" M0,14 Q0,10 4,10 L6,10 Q10,10 10,14 L10,16 Q10,20 6,20 L4,20 Q0,20 0,16 L4,16 C4,17 6,17 6,16 L6,14 C6,13 4,13 4,14 L4,16 L0,16z "/>Stretched letter O
The same as the first row's stretched letter O.
Regular letter D
<path d=" M0,10 L6,10 Q10,10 10,14 L10,16 Q10,20 6,20 L0,20 L0,17 L4,17 Q6,17 6,16 L6,14 Q6,13 4,13 L4,17 L0,17z "/>Stretched letter D
The same as the first row's stretched letter D.
Conclusion
Having the grid defined and the letters drawn in their normal and stretched versions, I proceeded to the animation: GOOD MOOD part 2: animanting the letters.