SVG animation test

Developer
Pimskie
Size
3,191 Kb
Views
54,648
  1. SVG animation test Previews
  2. SVG animation test HTML Codes
  3. SVG animation test CSS Codes
  4. SVG animation test JS Codes

How do I make an svg animation test?

A little test, animating SVG with CSS. Added a little JS for fun. Tnx to @SaraSoueidan https://docs.google.com/presentation/d/1Iuvf3saPCJepVJBDNNDSmSsA0_rwtRYehSmmSSLYFVQ/present#slide=id.p. What is a svg animation test? How do you make a svg animation test? This script and codes were developed by Pimskie on 13 June 2022, Monday.

SVG animation test Previews
IQ Test

SVG animation test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG animation test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"> <g> <ellipse class="head" fill="#008bba" stroke-width="5" cx="165.29426" cy="149.57131" id="head" rx="139.78422" ry="138.07953" transform="rotate(0.48969557881355286 165.29426574706733,149.57130432128926) " stroke="#000000"/> <ellipse class="eye-left" fill="#ffffff" stroke-width="5" stroke-linejoin="null" stroke-linecap="null" cx="131" cy="116" id="eye-left" rx="36" ry="51" stroke="#000000"/> <ellipse class="eye-right" fill="#ffffff" stroke="#000000" stroke-width="5" stroke-linejoin="null" stroke-linecap="null" cx="211" cy="123" id="eye-right" rx="30" ry="41"/> <line class="mouth" fill="none" stroke="#000000" stroke-width="5" stroke-linejoin="null" stroke-linecap="null" x1="62" y1="219" x2="273.02133" y2="219" id="mouth"/> </g> </svg>
</div> <script src="js/index.js"></script>
</body>
</html>

SVG animation test - Script Codes CSS Codes

.container { width: 400px; margin: 30px auto; position: relative;
}
svg .eye-left { -webkit-transform-origin: 130px 120px; -moz-transform-origin: 130px 120px; -ms-transform-origin: 130px 120px; -o-transform-origin: 130px 120px; transform-origin: 130px 120px; -webkit-animation: blink 2s ease-in infinite; -moz-animation: blink 2s ease-in infinite; animation: blink 2s ease-in infinite;
}
svg .eye-right { -webkit-transform-origin: 230px 120px; -moz-transform-origin: 230px 120px; -ms-transform-origin: 230px 120px; -o-transform-origin: 230px 120px; transform-origin: 230px 120px; -webkit-animation: blink 2s 3s ease-in infinite; -moz-animation: blink 2s 3s ease-in infinite; animation: blink 2s 3s ease-in infinite;
}
@-webkit-keyframes blink { 0% { fill: #fff; -webkit-transform: scaleY(1); } 10% { fill: #000; -webkit-transform: scaleY(0); } 20% { fill: #fff; -webkit-transform: scaleY(1); }
}
@-moz-keyframes blink { 0% { fill: #fff; -moz-transform: scaleY(1); } 10% { fill: #000; -moz-transform: scaleY(0); } 20% { fill: #fff; -moz-transform: scaleY(1); }
}
@keyframes blink { 0% { fill: #fff; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } 10% { fill: #000; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); } 20% { fill: #fff; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); }
}

SVG animation test - Script Codes JS Codes

(function() { var R = 100, eyeLeft = document.querySelector('.eye-left'), eyeRight = document.querySelector('.eye-right'), eyeLeftPos = { x: parseInt(eyeLeft.getAttribute('cx')), y: parseInt(eyeLeft.getAttribute('cy')) }, eyeRightPos = { x: parseInt(eyeRight.getAttribute('cx')), y: parseInt(eyeRight.getAttribute('cy')) }, midX = window.innerWidth >> 1, midY = window.innerHeight >> 1, mouseX = 0, mouseY = 0, maxDist; var distanceBetween = function (x1, y1, x2, y2) { var dx = x2 - x1, dy =y2 - y1; return Math.sqrt(dx * dx + dy * dy); } var mouseMoveHandler = function (e) { mouseX = e.clientX || e.x; mouseY = e.clientY || e.y; var mouseDist = distanceBetween(midX, midY, mouseX, mouseY), applyR = R * (mouseDist / maxDist), angle = Math.atan2(mouseY - midY, mouseX - midX), diffX = Math.cos(angle) * applyR, diffY = Math.sin(angle) * applyR; eyeLeft.setAttribute('cx', eyeLeftPos.x + diffX); eyeLeft.setAttribute('cy', eyeLeftPos.y + diffY); eyeRight.setAttribute('cx', eyeRightPos.x + diffX); eyeRight.setAttribute('cy', eyeRightPos.y + diffY); } var init = function () { maxDist = distanceBetween(midX, midY, 0, midY * 2); } init(); document.addEventListener('mousemove', mouseMoveHandler);
})();
SVG animation test - Script Codes
SVG animation test - Script Codes
Home Page Home
Developer Pimskie
Username pimskie
Uploaded June 13, 2022
Rating 3
Size 3,191 Kb
Views 54,648
Do you need developer help for SVG animation test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pimskie (pimskie) Script Codes
Name
A Pen by pimskie
Circles pattern
Glitching image - USA style
Duplicate crystal
Rotatable grid
Color circles
Flowing transforming circle
A Pen by pimskie
Neon spring trails
Aizawa Attractor
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!