Tic Tac Toe with CSS and SVG

Learn how to make a fully functioning Tic Tac Toe game that doesn't need any client-side JavaScript!
For this course, we'll be using Pug and Stylus which are preprocessors for HTML and CSS respectively.
Learn how to:
Generate markup with loops and template literals
Leverage native HTML behavior
Create SVG
Use CSS variables and scope
Implement game logic with HTML forms
Animate SVG with CSS
Use CSS Animation to provide motion
Use Pug Mixins
Disable motion when users don't want it
Apply visual effects using CSS filter and backdrop-filter
Generate random animations using Pug and CSS variables

• Use Pug For Loops to Generate Form Markup
• Use Type Reset to Reset Form State
• Use Display Grid To Lay Out Elements
• Use Checkboxes to Optionally Display Elements
• Use Inline CSS Variables to Position Elements
• Use the Adjacent Sibling Combinator to Optionally Display Elements
• Use Selector Combinations to Optionally Display Elements
• Use SVG to Create Lines
• Use Chained CSS Transforms to Position Elements
• Use SVG to Create a Circle
• Use SVG to Create an Animatable Cross
• Use CSS Animation to Draw SVG
• Use CSS Variable Scope to Color SVG Elements
• Use Scoped CSS Variables to Stagger CSS Animations
• Use a Backdrop Filter to Shift Focus to the Foreground
• Use Animation Fill Mode to Retain Keyframe Styling
• Use Pug Mixins for Reusable Blocks of Markup
• Use Chained CSS Filter to Apply Visual Effects
• Use Media Queries to Detect a User Preference for Motion
• Use the Hover Pseudo Selector to Style Child Elements
• Use the Combination of Scoped CSS Variables and Pug to Generate Random CSS Animations