Logos...
| Filename | Preview | Remarks |
|---|---|---|
logo.svg |  | The full original Illustrator design file. |
logo-animated.svg |  | An animated variant. |
logo-paths.svg |  | A simplified monochrome variant with stroked paths instead of outlined compound clipping paths. Necessary for animations. |
logo-cropped.svg |  | A cropped variant with no padding. |
logo-simple.svg |  | A simplified variant with a non-stylised logomark. |
Note
All (non-animated) .svg images within the ~/assets/ directory are automatically minified and optimised (-min.svg) using SVGO by the Optimise SVG Actions workflow.
Animated Logo...
The animated logo is created using SVG Artista.
Create the simplified
logo-pathsfile from the full logo file in Illustrator—ie skip the outline stroke/compound path stepsOptimise with
SVGOMG
Warning
To prevent import errors, I must change the default settings of:
- Remove unknowns & defaults
- Remove hidden elements
- Round/rewrite paths
- Import to
SVG Artista, using the below settings
Note
Requires a manual time-delay to be applied to the wordmark animation.
Warning
Transition animation types do not seem to work, I must use the Animation option.
Copy the markup and save it as
logo-animated.svgManually insert the
<g>groups fromlogo-min.svg, and add the CSS transitions to fade in/out from animated to full gradient