Mission 20: Animating the Emblem
First, apply the division's standard color scheme to the static emblem.
Mission Objective
Step 1 / 3
System Briefing: Holographic Artistry
The newly-formed "Optimization Specialist" division needs a dynamic, official emblem. Your task is to design and animate it using Scalable Vector Graphics (SVG) and CSS. Unlike raster images (JPEG, PNG), SVGs are XML-based vector images, meaning every line and shape is an element you can target and style with CSS, just like HTML.
Styling SVG Elements
You can give elements inside an SVG a class or id and target them from your stylesheet. Instead of color and background-color, you'll use fill (the inside color) and stroke (the outline color).
The "Drawing" Animation Effect
A popular SVG animation technique involves two properties:
stroke-dasharray: Defines the pattern of dashes and gaps used to stroke paths. If you set this to the total length of the path, it becomes one single dash.stroke-dashoffset: Specifies the distance into the dash pattern to start the drawing.
By animating stroke-dashoffset from the total length of the path down to 0, you can create the illusion that the path is being drawn on screen.