Vim logo animated

Developer
James Crockford
Size
3,338 Kb
Views
18,216
  1. Vim logo animated Previews
  2. Vim logo animated HTML Codes
  3. Vim logo animated CSS Codes

How do I make an vim logo animated?

Custom MacVim icon animated in svg. What is a vim logo animated? How do you make a vim logo animated? This script and codes were developed by James Crockford on 19 November 2022, Saturday.

Vim logo animated Previews
IQ Test

Vim logo animated - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vim logo animated</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html { height: 100%;
}
body { display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to bottom, #424E60 0%, #0B1116 100%);
}
.vim { width: 350px;
}
#macvim { perspective: 1000;
}
#diamond { animation: diamond 1s ease; animation-fill-mode: both; transform-origin: center;
}
#V { animation: V 1s ease; animation-fill-mode: both; animation-delay: 0.8s; transform-origin: top right;
}
#shadow { animation: shadow 1s ease; animation-delay: 1.5s; animation-fill-mode: both; transform-origin: top right;
}
@keyframes V { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes diamond { 0% { transform: scale(0); } 100% { transform: scale(1); }
}
@keyframes shadow { 0% { opacity: 0; transform: rotate(10deg); } 1% { opacity: 1; transform: rotate(10deg); } 100% { transform: rotate(0deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <main> <svg class="vim" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" version="1.1"><title>macvim</title><description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description><defs><linearGradient x1="50%" y1="3.2729195%" x2="50%" y2="98.2801476%" id="linearGradient-1"><stop stop-color="#62D200" offset="0%"/><stop stop-color="#45BC00" offset="100%"/></linearGradient><linearGradient x1="94.5728024%" y1="2.41813888%" x2="0%" y2="100%" id="linearGradient-2"><stop stop-color="#EBEBEB" offset="0%"/><stop stop-color="#FFFFFF" offset="100%"/></linearGradient></defs><g id="canvas" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="macvim"><path d="M266.538853 11.5956366C260.291456 5.34824043 250.159694 5.35097214 243.916122 11.5945445L12.1460212 243.364645C5.89922817 249.611438 5.89830551 259.738568 12.1471133 265.987376L243.707023 497.547286C249.95442 503.794682 260.086182 503.791951 266.329754 497.548378L498.099855 265.778278C504.346648 259.531484 504.347571 249.404355 498.098763 243.155547L266.538853 11.5956366Z" id="diamond" fill="url(#linearGradient-1)"/><path d="M383.991577 129.058472L169.254394 423.019043 129.664551 383.413086 383.991577 129.058472Z" id="shadow" fill-opacity="0.197179458" fill="#000000"/><path d="M77.7527511 75.7896051L77.7527511 435.308376 437.271522 75.7896051 330.884989 75.7896051 152.17659 259.589458 152.17659 75.7896051 77.7527511 75.7896051Z" id="V" fill="url(#linearGradient-2)"/></g></g></svg>
</main>
</body>
</html>

Vim logo animated - Script Codes CSS Codes

body, html { height: 100%;
}
body { display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to bottom, #424E60 0%, #0B1116 100%);
}
.vim { width: 350px;
}
#macvim { perspective: 1000;
}
#diamond { animation: diamond 1s ease; animation-fill-mode: both; transform-origin: center;
}
#V { animation: V 1s ease; animation-fill-mode: both; animation-delay: 0.8s; transform-origin: top right;
}
#shadow { animation: shadow 1s ease; animation-delay: 1.5s; animation-fill-mode: both; transform-origin: top right;
}
@keyframes V { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes diamond { 0% { transform: scale(0); } 100% { transform: scale(1); }
}
@keyframes shadow { 0% { opacity: 0; transform: rotate(10deg); } 1% { opacity: 1; transform: rotate(10deg); } 100% { transform: rotate(0deg); }
}
Vim logo animated - Script Codes
Vim logo animated - Script Codes
Home Page Home
Developer James Crockford
Username james_crockford
Uploaded November 19, 2022
Rating 3.5
Size 3,338 Kb
Views 18,216
Do you need developer help for Vim logo animated?

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!

James Crockford (james_crockford) Script Codes
Name
Inline-block masonary
Glow loading
CSS breakpoints in JS
Circular Profile
Move
Keys
A Pen by James Crockford
Hexagon switch
Drips
Hexagon Split
Create amazing web content 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!