Animated Logo with CSS and SVG

The presented script animates the logo you see in the header (disabled on mobile). The frequency of shuffling the animations has been greatly increased on this page for better illustration. On any other page the logo only occasionally breaks its static demeanor by going nuts briefly. The resulting animations are achieved by combining CSS key frame animations with linear SVG point data interpolation. There is some code at the end to make them match up, with a bit of randomness added to it. This effectively gives more depth to the animations, as the mixing and matching of the two techniques allows for a grade of controlled unpredictability.

I drew the SVG (scalable vector graphic) of my logo in adobe illustrator and the resulting point data can be seen in the HTML below. Then I substituted the original, static logo for my SVG. A few CSS animations have been created, and a script structure built for their randomization and triggering. Then I implemented the morphing of point data of my logo into other shapes. I also have a simple loop to make sure an animation is never played twice in a row, other than that, the CSS animations are selected at random and there is conditional logic which pairs them with the SVG point data interpolations.

You may notice that I have two arrays for my CSS animations instead of one. This was needed because certain properties can only be animated on the SVG element itself which largely behaves as a DIV (the majority of the animations, such as blur and large translation values only work on the SVG container), while other properties, such as shape color fill and border manipulations, can only be animated on the polygon shape within the SVG element.

To start the selection cycle I assigned an introductory animation to the new logo in CSS, supplemented by the SVG morphing into a shape resembling my artist signature. I made sure that the point morphing logic smoothly returns the shape back to the original, after each animation cycle. After creating the functionality for both animation techniques to work together, some effort was required to make sure the pairing looks presentable in terms of timing.

A lot more is possible with morphing SVG point data than presented in this proof of concept. The best approach is to initially draw your SVG such that it has all the extra points you might need for animating it, even if the original shape does not require them, although nothing is stopping you from changing your original SVG completely, as long as you don’t mind forfeiting the morphs which might have already been made for it prior.

HTML:

<svg id="PolivantageLogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1200">
<polygon id="PolivantageLogoOutline" points="585.11 0 718.17 0 201.66 899.84 328.87 899.84 780.93 113.56 1303.52 1014.94 910.69 1014.94 715.46 680.55 783.29 565.37 979.53 900.22 1108.88 901.57 779.45 345.43 400.01 1014.94 0 1014.94 585.11 0"/>
</svg>

JAVASCRIPT:

<script>
document.addEventListener('DOMContentLoaded', function () {
const newLogo = document.getElementById('PolivantageLogo'); 
//mobile check
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
if (isTouch === false) {
//replace the old logo
const oldLogoPlace = document.querySelector('.header-title-logo');
const oldLogoImage = oldLogoPlace.querySelector('img');
oldLogoImage.style.opacity = '0';
oldLogoPlace.appendChild(newLogo);
//assign link to homepage
newLogo.addEventListener("click", (event) => {
event.preventDefault();
window.location.href = '/';
}); 
//main setup
const logoOutline = document.getElementById('PolivantageLogoOutline');
let animationPlaying = false;
let animatingOutline = true;
let previousAnimation = 'none';
let currentAnimation = 'none';
let minInterval = 1 * 60 * 1000;
let maxInterval = 2 * 60 * 1000;
//for illustration purposes decreased interval on dedicated blog page
const subString = '/developmentlog/animatedlogo';
const getURL = window.location.href; 
if (getURL.includes(subString)) {
minInterval = 1000;
maxInterval = 2000;
}
//arrays of css animations
const outlineAnimationsArray = [
'logoPulseRed 4s linear 2 forwards',
'logoStrobeWhite 0.3s linear 4 forwards'
];
const logoAnimationsArray = [
'logoFlyAway 17s ease 1 forwards',
'logoRotate 10s ease 1 forwards',
'pulse 0.4s ease 5 forwards',
'logoTumble 17s ease 1 forwards',
'logoFall 10s ease 1 forwards',
'logoDematerial 10s ease 1 forwards',
'logoTeleport 20s ease 1 forwards',
'logoShrink 9s ease 1 forwards',
'logoBump 12s ease 1 forwards',
'logoSlide 20s ease 1 forwards',
'logoSpin 10s ease 1 forwards',
'logoTriRotate 6s ease  1 forwards'
];
const leanToOutlineAnimation = outlineAnimationsArray.length / (outlineAnimationsArray.length + logoAnimationsArray.length);
//random animation selection
function getRandomInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomAnimation() {
if (animatingOutline === true) {
const randomIndex = Math.floor(Math.random() * outlineAnimationsArray.length);
return outlineAnimationsArray[randomIndex];
} else {
const randomIndex = Math.floor(Math.random() * logoAnimationsArray.length);
return logoAnimationsArray[randomIndex];
}
}
function startRandomAnimations() {
if (animationPlaying === false) {
animatingOutline = Math.random() < leanToOutlineAnimation;
animationPlaying = true;
do { //never play the same animation twice in a row
currentAnimation = getRandomAnimation();
} while (currentAnimation === previousAnimation || currentAnimation === 'none');
if (animatingOutline === true) {
logoOutline.style.animation = currentAnimation;
} else {
newLogo.style.animation = currentAnimation;
newLogo.style.pointerEvents = 'none';
}
previousAnimation = currentAnimation;
mapPointToCssAnims(); // attach point animation to css animation
}
}
//trigger the animations 
function triggerAnimation() {
animationPlaying = false;
logoOutline.style.animation = 'none';
logoOutline.offsetHeight;
newLogo.style.animation = 'none';
newLogo.offsetHeight;
newLogo.style.pointerEvents = 'auto';
setTimeout(() => {
startRandomAnimations();
}, getRandomInterval(minInterval, maxInterval)); 
}
logoOutline.addEventListener('animationend', () => {
triggerAnimation();
});
newLogo.addEventListener('animationend', () => {
triggerAnimation(); 
});
//svg point data animations
const originalPoints = logoOutline.getAttribute('points');
const pointAnimations = new Map([
[ "pyramid",
"585.11 0 718.17 0 201.66 899.84 201.66 899.84 718.17 0 1303.52 1014.94 910.69 1014.94 400.01 1014.94 779.45 345.43 1108.88 901.57 1108.88 901.57 779.45 345.43 400.01 1014.94 0 1014.94 585.11 0" ],
[ "line",
".85 0 201.66 0 201.66 0 328.87 0 780.93 0 1302.01 0 1302.01 114.97 780.93 114.97 780.93 0 979.53 .38 1108.88 1.72 780.93 114.97 400.01 115.09 0 115.09 .85 0" ],
[ "arrow",
"0 1184.37 244.27 786.29 244.27 786.29 244.27 786.29 696.33 0 1218.92 901.38 1218.92 901.38 1371.94 1184.37 1250.44 1184.37 1024.28 788.01 1024.28 788.01 694.85 231.87 315.41 901.38 147.46 1184.37 0 1184.37" ],
[ "letterM",
"526.25 0 591.49 114.26 201.66 793.42 328.87 793.42 780.93 7.13 1303.52 908.51 910.69 908.51 455.38 118.6 526.25 0 979.53 793.79 1108.88 795.14 779.45 239 400.01 908.51 0 908.51 526.25 0" ],
[ "slightAlterationOne",
"519.04 1.05 641.67 1.05 201.66 786.29 328.87 786.29 780.93 0 1303.52 901.38 910.69 901.38 518.54 901.26 584.88 788.64 979.53 786.66 1108.88 788.01 779.45 231.87 400.01 901.38 0 901.38 519.04 1.05" ],
[ "slightAlterationTwo",
"0 1.05 122.63 1.05 410.43 786.29 537.63 786.29 989.7 0 1512.29 901.38 1050.71 901.26 916.23 1212.55 777.03 1212.55 989.7 787.66 1317.64 788.01 988.22 231.87 608.77 901.38 316.96 901.26 0 1.05" ],
[ "cube",
".85 .31 718.17 0 718.17 0 780.93 .31 1302.01 .31 1303.52 1014.94 910.69 1014.94 400.01 1014.94 779.45 345.43 1108.88 901.57 1108.88 901.57 779.45 345.43 400.01 1014.94 0 1014.94 .85 .31" ],
[ "six",
"0 0 150.13 0 149.01 891.95 614.25 892.48 621 0 1303.52 0 1303.52 1014.5 719.89 1014.5 772.71 893.07 1154.79 893.07 1162.66 132.38 786.19 133.39 782.82 1014.5 0 1014.63 0 0" ],
[ "LP",
"0 0 116.44 1.13 124.15 900.67 545.7 899.53 561.43 0 1303.52 0 1303.52 649.21 655.22 653.68 656.29 542.53 1190.76 542.53 1196.37 117.66 660.33 122.15 651.76 1014.5 0 1014.63 0 0" ],
[ "hollowTriangle",
"651.76 0 651.76 0 651.76 0 651.76 0 651.76 0 1303.52 1014.63 910.69 1014.63 0 1014.63 90.36 873.96 1075.02 878.55 1075.02 878.55 651.76 217.67 172.61 1014.5 0 1014.63 651.76 0" ]
]);
let animatingToTarget = true;
let pointAnimationActive = true;
let pointAnimDuration = 3 * 1000;
let waitBeforeRevert = 3 * 1000;
//get random points animation
function getRandomPointsAnimation() {
const keys = Array.from(pointAnimations.keys());
const randomIndex = Math.floor(Math.random() * keys.length);
return keys[randomIndex];
}
let selectedAnimation = getRandomPointsAnimation(); 
//to animate points
function interpolatePoints(start, end, progress) {
const startPoints = start.split(' ').map(Number);
const endPoints = end.split(' ').map(Number);
const interpolated = startPoints.map((startPoint, index) => {
return startPoint + (endPoints[index] - startPoint) * progress;
});
return interpolated.join(' ');
}
function animatePoints(animationName, duration, waitBeforeRevert) {
if (!pointAnimationActive) return;
const targetPoints = pointAnimations.get(animationName);
const startTime = performance.now();
function animate() {
const currentTime = performance.now();
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const newPoints = interpolatePoints(
animatingToTarget ? originalPoints : targetPoints,
animatingToTarget ? targetPoints : originalPoints,
progress
);
logoOutline.setAttribute('points', newPoints);
if (progress < 1) {
requestAnimationFrame(animate);
} else {
animatingToTarget = !animatingToTarget;
if (animatingToTarget) {
pointAnimationActive = false;
pointAnimationComplete();
} else {
setTimeout(() => {
animatePoints(animationName, duration, waitBeforeRevert);
}, waitBeforeRevert);
}
}
}
requestAnimationFrame(animate);
}
function pointAnimationComplete() {
pointAnimationActive = true; 
}
//combining css and point animations
function mapPointToCssAnims(){
if (currentAnimation === 'logoFall 10s ease 1 forwards') {
animatePoints(Math.random() > 0.7 ? 'pyramid' : 'cube', 500, 8000);
} else if (currentAnimation === 'logoBump 12s ease 1 forwards') {
animatePoints('arrow', 1200, 9500);   
} else if (currentAnimation === 'logoFlyAway 17s ease 1 forwards') {
animatePoints(Math.random() > 0.5 ? 'slightAlterationOne' : 'letterM', 700, 15000); 
} else if (currentAnimation === 'logoShrink 9s ease 1 forwards') {
animatePoints(Math.random() > 0.5 ? 'slightAlterationOne' : 'letterM', 500, 8000); 
} else if (currentAnimation === 'logoRotate 10s ease 1 forwards') {
if (Math.random() > 0.5) {
animatePoints(Math.random() > 0.35 ? 'slightAlterationTwo' : 'hollowTriangle', 1000, 8000); 
}
} else if (currentAnimation === 'logoSlide 20s ease 1 forwards') {
animatePoints('line', 700, 16500); 
} else if (currentAnimation === 'logoTumble 17s ease 1 forwards') {
if (Math.random() > 0.8) {
animatePoints('pyramid', 600, 13100); 
}
} else if (currentAnimation === 'logoSpin 10s ease 1 forwards') {
animatePoints('six', 700, 8000);  
} else if (currentAnimation === 'logoDematerial 10s ease 1 forwards') {
if (Math.random() > 0.3) {
animatePoints('LP', 1000, 8000);  
}
} else if (currentAnimation === 'logoTriRotate 6s ease  1 forwards') {
if (Math.random() > 0.3) {
animatePoints('hollowTriangle', 500, 5000);  
}
} 
}  
animatePoints('LP', 550, 3630); //intro point anim
//exit
} else {
newLogo.remove();
}
});
</script>

CSS:

@keyframes logoFadeIn {
0% {opacity: 0; filter: blur(50px); transform: rotate(90deg);}
25% {opacity: 1; filter: blur(0px); transform: rotate(90deg);}
40% {transform: rotate(-15deg);}
60% {transform: rotate(0deg);}
100% {opacity: 1; transform:  rotate(0deg)}
}
@keyframes logoPulseRed {
0% {fill: black;}
50% {fill: var(--color3);}
100% {fill: black;}
}
@keyframes logoStrobeWhite {
0% {fill: black;}
25% {fill: white;}
50% {fill: black;}
75% {fill: white;}
100% {fill: black;}
}
@keyframes logoShrink {
0% {transform: scale(1) translateY(0px) rotate(0deg);}
10% {transform: scale(0.7) translateY(15px);}
15% {transform: scale(0.7) translateY(15px);}
30% {transform: scale(0.7) translateY(-300px) rotate(0deg);}
35% {transform: scale(0.5) translateY(-300px) rotate(180deg);}
50% {transform: scale(0.5) translateY(20px) rotate(180deg);}
55% {transform: scale(0.5) translateY(0px) rotate(180deg);}
60% {transform: scale(0.5) translateY(20px) rotate(180deg);}
65% {transform: scale(0.5) translateY(0px) rotate(180deg);}
70% {transform: scale(0.5) translateY(20px) rotate(180deg);}
75% {transform: scale(0.5) translateY(0px) rotate(180deg);}
80% {transform: scale(0.5) translateY(20px) rotate(180deg);}
90% {transform: scale(0.5) translateY(20px) rotate(360deg);}
100% {transform: scale(1) translateY(0px) rotate(360deg);}
}
@keyframes logoFlyAway {
0% {opacity: 1; transform: scale(1) rotate(0deg) translateY(0) scaleY(1);}
5% {opacity: 1; transform: scale(1) rotate(0deg) translateY(0) scaleY(1);}
10% {opacity: 1; transform: scale(0.6) rotate(-90deg) translateY(0) scaleY(1);}
15% {opacity: 1; transform: scale(0.6) rotate(-90deg) translateY(0) scaleY(1);}
35% {opacity: 0; transform: scale(0.6) rotate(-90deg) translateY(-1700px) scaleY(1);}
65% {opacity: 0; transform: scale(0.6) rotate(-90deg) translateY(-1700px) scaleY(1);}
85% {opacity: 0; transform: scale(0.6) rotate(-90deg) translateY(-1700px) scaleY(1);}
85.01% {opacity: 0; transform: scale(0.0) rotate(90deg) translateY(1700px) scaleY(1);}
85.02% {opacity: 0; transform: scale(0.6) rotate(90deg) translateY(1700px) scaleY(1);}
95% {opacity: 1; transform: scale(0.75) rotate(90deg) translateY(0) scaleY(1);}
100% {opacity: 1; transform: scale(1) rotate(0deg) translateY(0) scaleY(1);}
}
@keyframes logoTumble {
0% {transform: scale(1) translateY(0px);}
3% {transform: scale(0.9) translateY(0px);}
4% {transform: scale(0.9) translateY(26px);}
12% {transform: scale(0.9) translateY(26px);}
25% {transform: scale(0.9) translateY(3px) translateX(-26px) rotate(-45deg);}
28% {transform: scale(0.9) translateY(24px) translateX(-48px) rotate(-120deg);}
35% {transform: scale(0.9) translateY(16px) translateX(-90px) rotate(-180deg);}
41% {transform: scale(0.9) translateY(34px) translateX(-130px) rotate(-240deg);}  
58% {transform: scale(0.9) translateY(34px) translateX(-130px) rotate(-240deg);} 
67% {transform: scale(0.9) translateY(9px) translateX(-180px) rotate(-310deg);} 
71% {transform: scale(0.9) translateY(26px) translateX(-210px) rotate(-360deg);}
79% {transform: scale(0.9) translateY(3px) translateX(-230px) rotate(-405deg);}
82% {transform: scale(0.9) translateY(12px) translateX(-190px) rotate(-340deg);}
84% {transform: scale(0.9) translateY(8px) translateX(-180px) rotate(-390deg);}
90% {transform: scale(0.9) translateY(0px) translateX(-90px) rotate(-250deg);}
96% {transform: scale(0.9) translateY(0px) translateX(5px) rotate(-375deg);}
100% {transform: scale(1) translateY(0px) translateX(0px) rotate(-360deg);}
}
@keyframes logoFall {
0% {transform: scale(1) translateY(0px);}
5% {transform: scale(0.9, 0.9) translateY(0px);}
10% {transform: scale(0.9, 0.9) translateY(26px);}
30% {transform: scale(0.1, 0.9) translateY(26px);}
60% {transform: scale(1.3, 0.9) translateY(26px);}
80% {transform: scale(0.76, 0.9) translateY(26px);}
85% {transform: scale(0.9, 0.9) translateY(26px);}
95% {transform: scale(0.9, 0.9) translateY(0px);}
100% {transform: scale(1) translateY(0px);}
}
@keyframes logoDematerial {
0% {opacity: 1; filter: blur(0px); transform: scale(1);}
20% {opacity: 0.2; filter: blur(5px); transform: scale(1);}
40% {opacity: 1; filter: blur(0px); transform: scale(1);} 
50% {opacity: 1; filter: blur(0px); transform: scale(1);} 
70% {opacity: 0; filter: blur(50px); transform: scale(2);}  
80% {opacity: 0; filter: blur(50px); transform: scale(2);} 
100% {opacity: 1; filter: blur(0px); transform: scale(1);}
}
@keyframes logoRotate {
0% {transform: translateY(0px) rotate(0deg) scale(1);}
10% {transform: translateY(0px) rotate(180deg) scale(0.85);}
20% {transform: translateY(-19px) rotate(180deg) scale(0.8);}  
30% {transform: translateY(5px) rotate(180deg) scale(0.8);}  
40% {transform: translateY(-19px) rotate(180deg) scale(0.8);} 
50% {transform: translateY(5px) rotate(180deg) scale(0.8);} 
60% {transform: translateY(-19px) rotate(180deg) scale(0.8);} 
70% {transform: translateY(5px) rotate(180deg) scale(0.8);} 
80% {transform: translateY(-19px) rotate(180deg) scale(0.8);} 
90% {transform: translateY(-8px) rotate(180deg) scale(0.85);}
100% {transform: translateY(0px) rotate(360deg) scale(1);}
}
@keyframes logoTeleport {
0% {opacity: 1; filter: blur(0px); transform: translateX(0px)}
16% {opacity: 0; filter: blur(50px); transform: translateX(0px)}
17% {opacity: 0; filter: blur(50px); transform: translateX(-300px)}
23% {opacity: 1; filter: blur(0px); transform: translateX(-300px)}
26% {opacity: 1; filter: blur(0px); transform: translateX(-300px)}
34% {opacity: 0; filter: blur(50px); transform: translateX(-300px)} 
35% {opacity: 0; filter: blur(50px); transform: translateX(300px)}
40% {opacity: 1; filter: blur(0px); transform: translateX(300px)}
50% {opacity: 1; filter: blur(0px); transform: translateX(300px)}
60% {opacity: 0; filter: blur(50px); transform: translateX(300px)}
63% {opacity: 0; filter: blur(50px); transform: translateX(-100px)}
70% {opacity: 1; filter: blur(0px); transform: translateX(-100px)}
75% {opacity: 1; filter: blur(0px); transform: translateX(-100px)}
90% {opacity: 0; filter: blur(50px); transform: translateX(-100px)}
93% {opacity: 0; filter: blur(50px); transform: translateX(0px)}
100% {opacity: 1; filter: blur(0px); transform: translateX(0px)}
}
@keyframes logoBump {
0% {transform: scale(1) translateY(0px);}
3% {transform: scale(0.9) translateX(0px) translateY(-10px) rotate(90deg);}
5% {transform: scale(0.9) translateX(0px) translateY(-10px) rotate(90deg);}
15% {transform: scale(0.6) translateX(40vw) translateY(-10px) rotate(90deg);}
20% {transform: scale(0.6) translateX(35vw) translateY(-10px) rotate(90deg);}
25% {transform: scale(0.6) translateX(40vw) translateY(-10px) rotate(90deg);}
30% {transform: scale(0.6) translateX(35vw) translateY(-10px) rotate(90deg);}
35% {transform: scale(0.6) translateX(40vw) translateY(-10px) rotate(90deg);}
40% {transform: scale(0.6) translateX(35vw) translateY(-10px) rotate(90deg);}
45% {transform: scale(0.6) translateX(40vw) translateY(-10px) rotate(90deg);}
50% {transform: scale(0.6) translateX(40vw) translateY(-10px) rotate(270deg);}
75% {transform: scale(0.7) translateX(-20vw) translateY(-10px) rotate(270deg);}
80% {transform: scale(0.7) translateX(-20vw) translateY(-10px) rotate(90deg);}
92% {transform: scale(0.78) translateX(0px) translateY(-7px) rotate(87deg);}
100% {transform: scale(1) translateX(0px) rotate(0deg);}
}
@keyframes logoSlide {
0% {transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);}
10% {transform: translateX(0px) translateY(52px) scale(0.9);}
20% {transform: translateX(0px) translateY(73px) scale(0.9);}  
30% {transform: translateX(200px) translateY(73px) scale(0.9);}  
40% {transform: translateX(-300px) translateY(73px) scale(0.9);} 
50% {transform: translateX(400px) translateY(73px) scale(0.9);} 
60% {transform: translateX(-500px) translateY(73px) scale(0.9);} 
70% {transform: translateX(350px) translateY(73px) scale(0.9);} 
85% {transform: translateX(-150px) translateY(73px) scale(0.9);} 
93% {transform: translateX(0px) translateY(0px) scale(0.9);} 
100% {transform: translateX(0px) translateY(0px) rotate(0deg) scale(1);}
}
@keyframes logoSpin {
0% {transform: translateX(0) scale(1) rotate(0deg);}
5% {transform: translateX(0) scale(0.5) rotate(0deg);}
20% {transform: translateX(0) scale(0.5) rotate(450deg);}
40% {transform: translateX(0) scale(0.5) rotate(450deg);}
60% {transform: translateX(0) scale(0.5) rotate(990deg);}
80% {transform: translateX(0) scale(0.5) rotate(990deg);}
95% {transform: translateX(0) scale(0.5) rotate(1080deg);}
100% {transform: translateX(0) scale(1) rotate(1080deg);}
}
@keyframes logoTriRotate {
0% {transform: scale(1) rotate(0deg);}
10% {transform: scale(0.7) rotate(0deg);}
20% {transform: scale(0.7) rotate(90deg);}  
30% {transform: scale(0.7) rotate(180deg);}   
40% {transform: scale(0.7) rotate(270deg);} 
50% {transform: scale(0.7) rotate(360deg);} 
60% {transform: scale(0.7) rotate(450deg);} 
70% {transform: scale(0.7) rotate(540deg);} 
80% {transform: scale(0.7) rotate(630deg);} 
90% {transform: scale(0.7) rotate(720deg);}
100% {transform: scale(1) rotate(720deg);}
}

#PolivantageLogoOutline {
  stroke: none;
  stroke-width: 0px;
  fill: black;
  transform-origin: center;
}
#PolivantageLogo {
  width: 93px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s ease;
  transform-origin: center;
  animation: logoFadeIn 5s ease forwards;
}
#PolivantageLogo:hover {
  scale: 1.1;
}