SVG Animation for website logo (i'm not a designer)

Developer
Mark Santiago
Size
2,343 Kb
Views
6,072
  1. SVG Animation for website logo (i'm not a designer) Previews
  2. SVG Animation for website logo (i'm not a designer) HTML Codes
  3. SVG Animation for website logo (i'm not a designer) CSS Codes

How do I make an svg animation for website logo (i'm not a designer)?

Simple animated logo for personal website. What is a svg animation for website logo (i'm not a designer)? How do you make a svg animation for website logo (i'm not a designer)? This script and codes were developed by Mark Santiago on 02 November 2022, Wednesday.

SVG Animation for website logo (i'm not a designer) Previews
IQ Test

SVG Animation for website logo (i'm not a designer) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Animation for website logo (i'm not a designer)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="292" height="292" viewBox="0, 0, 292, 292"> <g id="Layer_4" transform="translate(-4, -4)"> <g> <path d="M150,295 C69.919,295 5,230.081 5,150 C5,69.919 69.919,5 150,5 C230.081,5 295,69.919 295,150 C295,230.081 230.081,295 150,295 z" fill="#FFFFFF"/> <path class="circle" d="M150,295 C69.919,295 5,230.081 5,150 C5,69.919 69.919,5 150,5 C230.081,5 295,69.919 295,150 C295,230.081 230.081,295 150,295 z" fill-opacity="0" stroke="#666666" stroke-width="3"/> </g> <path class="fn" d="M225.119,270.882 L198.18,270.882 L198.18,53.985 L163.642,189.718 L134.976,189.718 L101.129,53.985 L101.129,270.882 L74.881,270.882 L74.881,29.118 L122.888,29.118 L150.518,152.763 L178.494,29.118 L225.119,29.118 L225.119,270.882 z" fill="#808080"/> <path class="ln" d="M190,83.566 C190,83.566 142.824,80.801 129.744,86.142 C98.471,98.913 110.332,146.931 120.616,159.41 C133.319,168.897 159.372,166.853 164.48,167.875 C181.781,171.335 199.257,236.611 164.48,255.738 C154.264,261.357 103.67,259.803 103.67,259.803" fill-opacity="0" stroke="#DB4A39" stroke-width="23"/> <path class="mn" d="M159.53,241.595 L148.916,194.696 L140.586,241.595 L159.53,241.595 z M176.149,270.882 L165.806,270.882 L161.389,250.311 L138.727,250.311 L134.194,270.882 L123.851,270.882 L134.976,189.528 L163.642,189.528 L176.149,270.882 z" fill="#00A0D1"/> </g>
</svg>
</body>
</html>

SVG Animation for website logo (i'm not a designer) - Script Codes CSS Codes

svg{ position:fixed; left:50%; top:50%; margin-top:-146px; margin-left:-146px;
}
.fn,.mn{	opacity:0;	-webkit-animation:show linear 2s forwards; animation:show linear 2s forwards;
}
.fn{
}
.mn{	-webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-delay:2s; animation-delay:2s;
}
.ln{	stroke-dasharray: 920; stroke-dashoffset: 920;	-webkit-animation: dash linear forwards; animation: dash linear forwards;	-webkit-animation-duration:3s; animation-duration:3s; -webkit-animation-delay:1s; animation-delay:1s;
}
.circle{ stroke-dasharray: 920; stroke-dashoffset: 920; -webkit-animation: dash 2500ms linear 1 forwards; animation: dash 2500ms linear 1 forwards; -webkit-animation-delay:4200ms; animation-delay:4200ms;
}
@-webkit-keyframes dash { from { stroke-dashoffset: -900; } to { stroke-dashoffset: 0; }
}
@keyframes dash { from { stroke-dashoffset: -900; } to { stroke-dashoffset: 0; }
}
@-webkit-keyframes show{ from{	opacity:0; } to{ opacity:1; }
}
@keyframes show{ from{	opacity:0; } to{ opacity:1; }
}
@-webkit-keyframes show2{ from{	opacity:0;	-webkit-transform:scale(25); transform:scale(25); } to{	opacity:1; -webkit-transform:scale(1); transform:scale(1); }
}
@keyframes show2{ from{	opacity:0;	-webkit-transform:scale(25); transform:scale(25); } to{	opacity:1; -webkit-transform:scale(1); transform:scale(1); }
}
SVG Animation for website logo (i'm not a designer) - Script Codes
SVG Animation for website logo (i'm not a designer) - Script Codes
Home Page Home
Developer Mark Santiago
Username msantiago1256
Uploaded November 02, 2022
Rating 3
Size 2,343 Kb
Views 6,072
Do you need developer help for SVG Animation for website logo (i'm not a designer)?

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!

Mark Santiago (msantiago1256) Script Codes
Name
CSS Nav ideas to show team
Dribbble 2 CSS relaxer
A Pen by Mark Santiago
Adult Learning, quick intro to JS math...
Variation on first rotating frames
Work in progress...
Showing the class some basics
Bootcamp Day 1
Playing with pseudo and animate
Cute Wolverine CSS
Create amazing Facebook ads 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!