Part 4 : Practice Pens

Google Doodle Components

Setting the Stage

Blank Google Doodle template. A "stage" for the animations.

• Pen: Google Doodle Stage

Doodle Content

Pros: Content, like another other text, image, svg loaded with img element. Can be used for background images. No code, few features.

Cons: Limitations of image format. Can only change certain properties with animations. Lots of code, many features.

• Pen: Doodle Content

SVG as Code

Opposite of SVG as Images. Use Illustrator to make SVGs as code.

• Pen: SVG as Code

• REF: Not all SVG properties available yet, refer to SVG properties via CSS. See fill and stroke properties

Initial Positioning of Elements

Use position properties or GSAP to set initial positioning before Box Model, transforms, or animations are applied.

• Pen: Initial Positioning of Elements

The Events

Pseudo Classes on SVG

:link, :visited, :hover, :focus, :active pseudo classes work the same on SVGs, as any element.

• Pen: Pseudo Classes on SVGs

Trigger Child with Parent

Hover over parent #stage ID, then apply pseudo classes on child elements.

• Pen: Trigger Child with Parent