Patternplate logo animation
How do I make an patternplate logo animation?
Logo animation for the patternplate project at SinnerSchrader with SVG. What is a patternplate logo animation? How do you make a patternplate logo animation? This script and codes were developed by Daniel Gooß on 10 November 2022, Thursday.
Patternplate logo animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>patternplate logo animation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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 { background-color: #42a5f5; color: #ffffff;
}
@keyframes offset-stroke { to { stroke-dashoffset: 0; }
}
@keyframes fade-out-stroke { to { stroke-opacity: 0; }
}
@keyframes fade-in-stroke-logo { to { stroke-opacity: 1; transform: scale(1); }
}
@keyframes fade-in-fill { to { fill-opacity: 1; }
}
.svg-grid { stroke: currentColor; stroke-width: 1; stroke-opacity: 0.5; fill: none; animation: offset-stroke 3s, fade-out-stroke 0.5s 4.25s; animation-timing-function: ease-in; animation-fill-mode: both;
}
.svg-grid circle { stroke-dasharray: 314.15926536%; stroke-dashoffset: 314.15926536%; animation: inherit;
}
.svg-grid rect { stroke-dasharray: 400%; stroke-dashoffset: 400%; animation: inherit;
}
.svg-grid line { stroke-dasharray: 100%; stroke-dashoffset: 100%; animation: inherit;
}
.svg-grid line.svg-line-1to4 { stroke-dasharray: 111.80339887%; stroke-dashoffset: 111.80339887%;
}
.svg-grid line.svg-line-1to2 { stroke-dasharray: 141.42135624%; stroke-dashoffset: 141.42135624%;
}
.svg-logo { stroke: currentColor; stroke-width: 3; stroke-opacity: 0; fill: currentColor; fill-opacity: 0; transform: scale(0.5); transform-origin: 50%; animation: fade-in-stroke-logo 0.5s 3s cubic-bezier(0.6, 1.8, 0.5, 0.8) both, fade-in-fill 1s 3.25s ease-in-out both;
}
* { box-sizing: border-box;
}
body { font-family: 'Roboto', sans-serif; font-variant-ligatures: common-ligatures; font-feature-settings: 'lig', 'clig', 'dlig' 0;
}
.pp-logo { width: 100%; padding: 40px;
}
a { color: inherit; outline: 0; text-decoration: none;
}
figcaption { text-align: center;
}
.caption-title { display: block; font-weight: 700; font-size: 3.5em; transition: transform 0.3s cubic-bezier(0.6, 1.8, 0.5, 0.8);
}
.caption-title:hover { transform: scale(1.2);
}
.caption-initiator { line-height: 2.5em;
}
.caption-initiator img { display: inline-block; width: auto; height: 2em; margin-top: -0.5em; vertical-align: middle; filter: invert(1); -webkit-filter: invert(1);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <figure> <svg class="pp-logo" width="512" height="512" viewBox="0 0 512 512"> <g class="svg-grid"> <rect width="511" height="511" x=".5" y=".5" class="st0"/> <line x1="256" x2="256" y1="0" y2="512" class="st0"/> <line x1="0" x2="512" y1="256" y2="256" class="st0"/> <line x1="128" x2="128" y1="0" y2="512" class="st0"/> <line x1="384" x2="384" y1="0" y2="512" class="st0"/> <line x1="0" x2="512" y1="128" y2="128" class="st0"/> <line x1="0" x2="512" y1="384" y2="384" class="st0"/> <line x1=".5" x2="511.5" y1=".5" y2="511.5" class="st0 svg-line-1to2"/> <line x1=".5" x2="511.5" y1="511.5" y2=".5" class="st0 svg-line-1to2"/> <line x1="512" x2=".5" y1="128" y2="384" class="st0 svg-line-1to4"/> <line x1=".5" x2="512" y1="128" y2="384" class="st0 svg-line-1to4"/> <circle cx="256" cy="256" r="213.33" class="st0"/> <circle cx="256" cy="256" r="192" class="st0"/> <circle cx="256" cy="256" r="32" class="st0"/> <circle cx="64" cy="64" r="64" class="st0"/> <circle cx="128" cy="128" r="128" class="st0"/> </g> <g class="svg-logo"> <path d="M256 43.17c-117.82 0-213.33 95.51-213.33 213.33S138.18 469.83 256 469.83s213.33-95.51 213.33-213.33S373.82 43.17 256 43.17zM216 396.5h-64v-64h64v64zm0-72h-64v-64h64v64zm0-72h-64v-64h64v64zm0-72h-64v-64h64v64zm72 144h-64v-64h64v64zm0-144h-64v-64h64v64zm72 144h-64v-64h64v64zm0-72h-64v-64h64v64zm0-72h-64v-64h64v64z" class="st1"/> <!--<circle cx="256.5" cy="256.5" r="213.33" class="st1"/>--> </p> </svg> <figcaption> <a href="https://github.com/sinnerschrader/patternplate" target="_blank" class="caption-title">patternplate</a> <a href="https://sinnerschrader.com/en/careers/" target="_blank" class="caption-initiator"> <span>by</span> <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/SinnerSchrader.svg" /> </a> </figcaption>
</figure> <script src="js/index.js"></script>
</body>
</html>
Patternplate logo animation - Script Codes CSS Codes
body { background-color: #42a5f5; color: #ffffff;
}
@keyframes offset-stroke { to { stroke-dashoffset: 0; }
}
@keyframes fade-out-stroke { to { stroke-opacity: 0; }
}
@keyframes fade-in-stroke-logo { to { stroke-opacity: 1; transform: scale(1); }
}
@keyframes fade-in-fill { to { fill-opacity: 1; }
}
.svg-grid { stroke: currentColor; stroke-width: 1; stroke-opacity: 0.5; fill: none; animation: offset-stroke 3s, fade-out-stroke 0.5s 4.25s; animation-timing-function: ease-in; animation-fill-mode: both;
}
.svg-grid circle { stroke-dasharray: 314.15926536%; stroke-dashoffset: 314.15926536%; animation: inherit;
}
.svg-grid rect { stroke-dasharray: 400%; stroke-dashoffset: 400%; animation: inherit;
}
.svg-grid line { stroke-dasharray: 100%; stroke-dashoffset: 100%; animation: inherit;
}
.svg-grid line.svg-line-1to4 { stroke-dasharray: 111.80339887%; stroke-dashoffset: 111.80339887%;
}
.svg-grid line.svg-line-1to2 { stroke-dasharray: 141.42135624%; stroke-dashoffset: 141.42135624%;
}
.svg-logo { stroke: currentColor; stroke-width: 3; stroke-opacity: 0; fill: currentColor; fill-opacity: 0; transform: scale(0.5); transform-origin: 50%; animation: fade-in-stroke-logo 0.5s 3s cubic-bezier(0.6, 1.8, 0.5, 0.8) both, fade-in-fill 1s 3.25s ease-in-out both;
}
* { box-sizing: border-box;
}
body { font-family: 'Roboto', sans-serif; font-variant-ligatures: common-ligatures; font-feature-settings: 'lig', 'clig', 'dlig' 0;
}
.pp-logo { width: 100%; padding: 40px;
}
a { color: inherit; outline: 0; text-decoration: none;
}
figcaption { text-align: center;
}
.caption-title { display: block; font-weight: 700; font-size: 3.5em; transition: transform 0.3s cubic-bezier(0.6, 1.8, 0.5, 0.8);
}
.caption-title:hover { transform: scale(1.2);
}
.caption-initiator { line-height: 2.5em;
}
.caption-initiator img { display: inline-block; width: auto; height: 2em; margin-top: -0.5em; vertical-align: middle; filter: invert(1); -webkit-filter: invert(1);
}
Patternplate logo animation - Script Codes JS Codes
// No cake for you!
Developer | Daniel Gooß |
Username | daniel_gooss |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 4,795 Kb |
Views | 18,216 |
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!
Name | Size |
Mobile Navigation Pattern | 5,939 Kb |
Blog Concept | 7,663 Kb |
Web Component Switches | 4,335 Kb |
IPhone Ui | 8,602 Kb |
SVG Cheat-Sheet | 3,107 Kb |
CSS Blur Effect | 3,176 Kb |
Folded Video | 3,913 Kb |
Apple menu redesign | 25,821 Kb |
WebGL Container | 2,300 Kb |
Revolver Slideshow with Touch | 7,609 Kb |
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!
Name | Username | Size |
C.Rowe Button | Brownerd | 2,473 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
CSS Gem Badge | Orchard | 3,335 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!