SVG Animation Test

Developer
Todd Moy
Size
3,102 Kb
Views
24,288
  1. SVG Animation Test Previews
  2. SVG Animation Test HTML Codes
  3. SVG Animation Test CSS Codes

How do I make an svg animation test?

What is a svg animation test? How do you make a svg animation test? This script and codes were developed by Todd Moy on 14 October 2022, Friday.

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="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg id="server" width="40px" height="40px" viewBox="668 532 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="icon-serverMail" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(668.000000, 532.000000)"> <g id="envelope" transform="translate(20.000000, 25.000000)" stroke="#1982E2"> <path d="M19.1666667,11.6666667 C19.1666667,13.0466667 18.0466667,14.1666667 16.6666667,14.1666667 L3.33333333,14.1666667 C1.95333333,14.1666667 0.833333333,13.0466667 0.833333333,11.6666667 L0.833333333,3.33333333 C0.833333333,1.955 1.95333333,0.833333333 3.33333333,0.833333333 L16.6666667,0.833333333 C18.0466667,0.833333333 19.1666667,1.955 19.1666667,3.33333333 L19.1666667,11.6666667 L19.1666667,11.6666667 Z" id="Shape"></path> <polyline id="Shape" points="15 5 10 9.16666667 5 5"></polyline> <path d="M15,10 L12.2716667,7.27333333" id="Shape"></path> <path d="M5,10 L7.72166667,7.28" id="Shape"></path> </g> <g id="servers"> <g id="foot" transform="translate(1.000000, 25.000000)"> <path d="M8.16666667,7.5 L16.5,7.5" id="Shape" stroke="#294561"></path> <path d="M14.8333333,0.833333333 L14.8333333,7.5" id="Shape" stroke="#294561"></path> <path d="M1.5,6.66666667 C1.04,6.66666667 0.666666667,7.03833333 0.666666667,7.5 C0.666666667,7.96 1.04,8.33333333 1.5,8.33333333 C1.96,8.33333333 2.33333333,7.96 2.33333333,7.5 C2.33333333,7.03833333 1.96,6.66666667 1.5,6.66666667 L1.5,6.66666667 L1.5,6.66666667 Z" id="Shape" fill="#294561"></path> <path d="M4.83333333,6.66666667 C4.37333333,6.66666667 4,7.03833333 4,7.5 C4,7.96 4.37333333,8.33333333 4.83333333,8.33333333 C5.29333333,8.33333333 5.66666667,7.96 5.66666667,7.5 C5.66666667,7.03833333 5.29333333,6.66666667 4.83333333,6.66666667 L4.83333333,6.66666667 L4.83333333,6.66666667 Z" id="Shape" fill="#294561"></path> </g> <g class="server-middle" transform="translate(0.000000, 9.000000)" stroke="#294561"> <polyline class="outline" points="30.8333333 8.5 0.833333333 8.5 0.833333333 0.166666667 30.8333333 0.166666667 30.8333333 13.5"></polyline> <circle class="led-left" cx="15.8333333" cy="4.33333333" r="0.833333333"></circle> <circle class="led-middle" cx="20.8333333" cy="4.33333333" r="0.833333333"></circle> <circle class="led-right" cx="25.8333333" cy="4.33333333" r="0.833333333"></circle> <ellipse class="power" cx="5.83333333" cy="4.33333333" rx="1.66666667" ry="1.66666667"></ellipse> </g> <g class="server-bottom" transform="translate(0.000000, 17.000000)" stroke="#294561"> <polyline class="outline" points="0.833333333 0.5 0.833333333 8.83333333 17.5 8.83333333"></polyline> <ellipse class="led-left" cx="15.8333333" cy="4.66666667" rx="0.833333333" ry="0.833333333"></ellipse> <ellipse class="led-middle" cx="20.8333333" cy="4.66666667" rx="0.833333333" ry="0.833333333"></ellipse> <ellipse class="led-right" cx="25.8333333" cy="4.66666667" rx="0.833333333" ry="0.833333333"></ellipse> <ellipse class="power" cx="5.83333333" cy="4.66666667" rx="1.66666667" ry="1.66666667"></ellipse> </g> <g class="server-top" stroke="#294561"> <polyline class="outline" points="0.833333333 9.16666667 0.833333333 0.833333333 30.8333333 0.833333333 30.8333333 9.16666667"></polyline> <ellipse class="led-left" cx="15.8333333" cy="5" rx="0.833333333" ry="0.833333333"></ellipse> <ellipse class="led-middle" cx="20.8333333" cy="5" rx="0.833333333" ry="0.833333333"></ellipse> <ellipse class="led-right" cx="25.8333333" cy="5" rx="0.833333333" ry="0.833333333"></ellipse> <ellipse class="power" cx="5.83333333" cy="5" rx="1.66666667" ry="1.66666667"></ellipse> </g> </g> </g>
</svg>
</body>
</html>

SVG Animation Test - Script Codes CSS Codes

html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #F4F6F7; box-shadow: inset 0px 0px 91px 30px rgba(40, 68, 97, 0.1);
}
.led-left,
.led-middle,
.led-right { -webkit-animation: blinky-lights 0.9s linear infinite; animation: blinky-lights 0.9s linear infinite;
}
.led-left { -webkit-animation-delay: 0s; animation-delay: 0s;
}
.led-middle { -webkit-animation-delay: 0.3s; animation-delay: 0.3s;
}
.led-right { -webkit-animation-delay: 0.6s; animation-delay: 0.6s;
}
@-webkit-keyframes blinky-lights { 0% { stroke: #294561; fill: #fff; } 1% { stroke: #00ff00; fill: #00ff00; } 33% { stroke: #00ff00; fill: #fff; } 34% { stroke: #294561; fill: #fff; } 100% { stroke: #294561; fill: #fff; }
}
@keyframes blinky-lights { 0% { stroke: #294561; fill: #fff; } 1% { stroke: #00ff00; fill: #00ff00; } 33% { stroke: #00ff00; fill: #fff; } 34% { stroke: #294561; fill: #fff; } 100% { stroke: #294561; fill: #fff; }
}
SVG Animation Test - Script Codes
SVG Animation Test - Script Codes
Home Page Home
Developer Todd Moy
Username toddmoy
Uploaded October 14, 2022
Rating 3
Size 3,102 Kb
Views 24,288
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!

Todd Moy (toddmoy) Script Codes
Name
Modal Interaction Test
Logo Animation
A Pen by Todd Moy
Menu Test
Chrome Store Copy
Experiment
Subscribe Button
Hidden Menu Test
Flexbox test
Experiment
Create amazing blog posts 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!