SVG SMIL Logo Animation

Developer
Bramus
Size
3,788 Kb
Views
34,408
  1. SVG SMIL Logo Animation Previews
  2. SVG SMIL Logo Animation HTML Codes
  3. SVG SMIL Logo Animation CSS Codes

How do I make an svg smil logo animation?

What is a svg smil logo animation? How do you make a svg smil logo animation? This script and codes were developed by Bramus on 23 July 2022, Saturday.

SVG SMIL Logo Animation Previews
IQ Test

SVG SMIL Logo Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG SMIL Logo Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg width="300" height="400" viewBox="0 0 198.425 255.118" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- definitions --> <defs> <!-- linear gradient from blue to brown --> <linearGradient id="gradient-bluebrown" x1="0%" y1="0%" x2="100%" y2="50%"> <stop offset="0%" style="stop-color:#82d5e2;" /> <stop offset="70%" style="stop-color:#a68469;" /> <animate attributeName="y2" values="50%; 100%; 0%; 100%; 50%" dur="20s" fill="freeze" repeatCount="indefinite" /> </linearGradient> <!-- HM logo clippath --> <clipPath id="hm-logo-clip"> <!-- H --> <path d="M87.165,125.788h8.534V40.749h-8.534V125.788z M53.191,83.265h25.586v-8.503H53.191V83.265z M36.197,125.788h8.529V40.749 h-8.529V125.788z"/> <!-- M --> <rect x="129.74" y="40.748" width="8.529" height="42.521"/> <rect x="104.254" y="40.749" width="8.534" height="85.039"/> <rect x="155.222" y="40.749" width="8.534" height="85.039"/> <!-- HARVEST MANAGEMENT --> <polygon points="43.064,187.755 43.064,182.707 45.373,182.707 45.373,196.446 43.064,196.446 43.064,190.041 38.486,190.041 38.486,196.446 36.197,196.446 36.197,182.707 38.486,182.707 38.486,187.755 "/> <path d="M56.295,187.755c0-2.02-1.031-2.986-2.289-2.986s-2.288,0.967-2.288,2.986v1.832h4.577V187.755z M51.718,196.446h-2.289 v-8.691c0-3.4,2.062-5.273,4.577-5.273c2.536,0,4.598,1.873,4.598,5.273v8.691h-2.309v-4.573h-4.577V196.446z"/> <path d="M69.3,187.302c0-1.279-1.032-2.308-2.289-2.308H64.95v4.593h2.061C68.268,189.587,69.3,188.558,69.3,187.302 M72.743,196.446h-2.806l-3.298-4.573H64.95v4.573h-2.291v-13.739h4.352c2.517,0,4.578,2.062,4.578,4.595 c0,1.75-0.989,3.315-2.496,4.058L72.743,196.446z"/> <polygon points="79.562,196.673 79.109,196.673 73.603,182.707 76.077,182.707 79.335,191.009 82.594,182.707 85.068,182.707 "/> <polygon points="86.836,182.707 93.703,182.707 93.703,184.994 89.125,184.994 89.125,187.755 93.703,187.755 93.703,190.041 89.125,190.041 89.125,194.16 93.703,194.16 93.703,196.446 86.836,196.446 "/> <path d="M100.938,196.673c-1.487,0-2.601-0.474-3.88-1.462l0.27-2.039c1.381,0.741,2.517,1.216,3.689,1.216 c1.032,0,2.353-0.557,2.353-1.67c0-2.617-6.497-1.605-6.497-6.199c0-2.391,2.104-4.037,4.539-4.037c1.544,0,2.597,0.533,4.02,1.646 l-0.722,1.813c-0.969-0.64-2.125-1.195-3.217-1.195c-1.381,0-2.227,0.742-2.227,1.567c0,2.449,6.517,1.832,6.517,6.054 C105.782,195.191,103.409,196.673,100.938,196.673"/> <polygon points="107.116,184.994 107.116,182.707 117.199,182.707 117.199,184.994 113.303,184.994 113.303,196.446 111.015,196.446 111.015,184.994 "/> <polygon points="45.477,216.271 45.477,207.989 42.156,214.209 41.703,214.209 38.383,207.989 38.383,216.271 36.197,216.271 36.197,202.531 38.074,202.531 41.929,209.761 45.786,202.531 47.663,202.531 47.663,216.271 "/> <path d="M58.584,207.577c0-2.02-1.033-2.986-2.289-2.986c-1.259,0-2.289,0.967-2.289,2.986v1.833h4.578V207.577z M54.006,216.271 h-2.29v-8.693c0-3.398,2.063-5.273,4.579-5.273c2.536,0,4.598,1.875,4.598,5.273v8.693h-2.309v-4.574h-4.578V216.271z"/> <polygon points="72.062,202.531 74.125,202.531 74.125,216.271 72.392,216.271 67.01,207.494 67.01,216.271 64.947,216.271 64.947,202.531 66.659,202.531 72.062,211.306 "/> <path d="M85.046,207.577c0-2.02-1.03-2.986-2.288-2.986s-2.289,0.967-2.289,2.986v1.833h4.577V207.577z M80.469,216.271h-2.29 v-8.693c0-3.398,2.063-5.273,4.579-5.273c2.536,0,4.6,1.875,4.6,5.273v8.693h-2.312v-4.574h-4.577V216.271z"/> <path d="M98.527,211.696h-2.312v-2.286h4.602v6.86h-0.702l-0.475-0.844c-0.845,0.678-1.878,1.07-2.888,1.07 c-3.32,0-5.567-3.193-5.567-7.087c0-3.892,2.247-7.106,5.567-7.106c1.631,0,3.322,1.051,4.248,2.637l-1.36,1.279 c-0.886-1.136-1.773-1.629-2.745-1.629c-1.73,0-3.193,1.832-3.193,4.819c0,2.967,1.463,4.799,3.193,4.799 c0.561,0,1.096-0.163,1.633-0.534V211.696z"/> <polygon points="104.643,202.531 111.509,202.531 111.509,204.817 106.932,204.817 106.932,207.577 111.509,207.577 111.509,209.863 106.932,209.863 106.932,213.984 111.509,213.984 111.509,216.271 104.643,216.271 "/> <polygon points="124.868,216.271 124.868,207.989 121.547,214.209 121.093,214.209 117.774,207.989 117.774,216.271 115.586,216.271 115.586,202.531 117.464,202.531 121.32,209.761 125.175,202.531 127.053,202.531 127.053,216.271 "/> <polygon points="131.104,202.531 137.973,202.531 137.973,204.817 133.393,204.817 133.393,207.577 137.973,207.577 137.973,209.863 133.393,209.863 133.393,213.984 137.973,213.984 137.973,216.271 131.104,216.271 "/> <polygon points="149.164,202.531 151.225,202.531 151.225,216.271 149.494,216.271 144.112,207.494 144.112,216.271 142.05,216.271 142.05,202.531 143.761,202.531 149.164,211.306 "/> <polygon points="153.672,204.817 153.672,202.531 163.756,202.531 163.756,204.817 159.857,204.817 159.857,216.271 157.568,216.271 157.568,204.817 "/> </clipPath> </defs> <!-- circle, with the blue-brown gradient as background, and the HM logo clipped on top --> <ellipse cx="99" cy="128" rx="255" ry="255" fill="url(#gradient-bluebrown)" id="circle-bluebrown" x="0" style="clip-path:url(#hm-logo-clip)" opacity="0" /> <!-- animate the HM gradient logo --> <animate xlink:href="#circle-bluebrown" attributeName="cx" values="-55; 200; -55" dur="20s" begin="1s" repeatCount="indefinite" fill="remove" id="circle-bluebrown-animation"/> <animate xlink:href="#circle-bluebrown" attributeName="opacity" begin="2s" dur="1s" from="0" to="1" id="circle-bluebrown-animation" fill="freeze" /> <!-- slide in the hm-logo --> <animateTransform xlink:href = "#hm-logo" attributeName = "transform" attributeType = "XML" type = "translate" begin = "0s" dur = "2s" from = "-500" to = "0" id = "hm-logo-step1-slidein" calcMode = "spline" keySplines = "0 0.75 0.25 1" keyTimes = "0; 1" /> <animate xlink:href="#hm-logo" attributeName="opacity" begin="3s" dur="3s" from="1" to="0" id="hm-logo-step2-opacity" fill="freeze" /> <g id="hm-logo" fill="#a68469"> <!-- H --> <path d="M87.165,125.788h8.534V40.749h-8.534V125.788z M53.191,83.265h25.586v-8.503H53.191V83.265z M36.197,125.788h8.529V40.749	h-8.529V125.788z"/> <!-- M --> <rect x="129.74" y="40.748" width="8.529" height="42.521"/> <rect x="104.254" y="40.749" width="8.534" height="85.039"/> <rect x="155.222" y="40.749" width="8.534" height="85.039"/> <!-- HARVEST MANAGEMENT --> <polygon points="43.064,187.755 43.064,182.707 45.373,182.707 45.373,196.446 43.064,196.446 43.064,190.041 38.486,190.041	38.486,196.446 36.197,196.446 36.197,182.707 38.486,182.707 38.486,187.755 "/> <path d="M56.295,187.755c0-2.02-1.031-2.986-2.289-2.986s-2.288,0.967-2.288,2.986v1.832h4.577V187.755z M51.718,196.446h-2.289	v-8.691c0-3.4,2.062-5.273,4.577-5.273c2.536,0,4.598,1.873,4.598,5.273v8.691h-2.309v-4.573h-4.577V196.446z"/> <path d="M69.3,187.302c0-1.279-1.032-2.308-2.289-2.308H64.95v4.593h2.061C68.268,189.587,69.3,188.558,69.3,187.302 M72.743,196.446h-2.806l-3.298-4.573H64.95v4.573h-2.291v-13.739h4.352c2.517,0,4.578,2.062,4.578,4.595	c0,1.75-0.989,3.315-2.496,4.058L72.743,196.446z"/> <polygon points="79.562,196.673 79.109,196.673 73.603,182.707 76.077,182.707 79.335,191.009 82.594,182.707 85.068,182.707 "/> <polygon points="86.836,182.707 93.703,182.707 93.703,184.994 89.125,184.994 89.125,187.755 93.703,187.755 93.703,190.041	89.125,190.041 89.125,194.16 93.703,194.16 93.703,196.446 86.836,196.446 "/> <path d="M100.938,196.673c-1.487,0-2.601-0.474-3.88-1.462l0.27-2.039c1.381,0.741,2.517,1.216,3.689,1.216	c1.032,0,2.353-0.557,2.353-1.67c0-2.617-6.497-1.605-6.497-6.199c0-2.391,2.104-4.037,4.539-4.037c1.544,0,2.597,0.533,4.02,1.646	l-0.722,1.813c-0.969-0.64-2.125-1.195-3.217-1.195c-1.381,0-2.227,0.742-2.227,1.567c0,2.449,6.517,1.832,6.517,6.054	C105.782,195.191,103.409,196.673,100.938,196.673"/> <polygon points="107.116,184.994 107.116,182.707 117.199,182.707 117.199,184.994 113.303,184.994 113.303,196.446	111.015,196.446 111.015,184.994 "/> <polygon points="45.477,216.271 45.477,207.989 42.156,214.209 41.703,214.209 38.383,207.989 38.383,216.271 36.197,216.271	36.197,202.531 38.074,202.531 41.929,209.761 45.786,202.531 47.663,202.531 47.663,216.271 "/> <path d="M58.584,207.577c0-2.02-1.033-2.986-2.289-2.986c-1.259,0-2.289,0.967-2.289,2.986v1.833h4.578V207.577z M54.006,216.271	h-2.29v-8.693c0-3.398,2.063-5.273,4.579-5.273c2.536,0,4.598,1.875,4.598,5.273v8.693h-2.309v-4.574h-4.578V216.271z"/> <polygon points="72.062,202.531 74.125,202.531 74.125,216.271 72.392,216.271 67.01,207.494 67.01,216.271 64.947,216.271	64.947,202.531 66.659,202.531 72.062,211.306 "/> <path d="M85.046,207.577c0-2.02-1.03-2.986-2.288-2.986s-2.289,0.967-2.289,2.986v1.833h4.577V207.577z M80.469,216.271h-2.29	v-8.693c0-3.398,2.063-5.273,4.579-5.273c2.536,0,4.6,1.875,4.6,5.273v8.693h-2.312v-4.574h-4.577V216.271z"/> <path d="M98.527,211.696h-2.312v-2.286h4.602v6.86h-0.702l-0.475-0.844c-0.845,0.678-1.878,1.07-2.888,1.07	c-3.32,0-5.567-3.193-5.567-7.087c0-3.892,2.247-7.106,5.567-7.106c1.631,0,3.322,1.051,4.248,2.637l-1.36,1.279	c-0.886-1.136-1.773-1.629-2.745-1.629c-1.73,0-3.193,1.832-3.193,4.819c0,2.967,1.463,4.799,3.193,4.799	c0.561,0,1.096-0.163,1.633-0.534V211.696z"/> <polygon points="104.643,202.531 111.509,202.531 111.509,204.817 106.932,204.817 106.932,207.577 111.509,207.577	111.509,209.863 106.932,209.863 106.932,213.984 111.509,213.984 111.509,216.271 104.643,216.271 "/> <polygon points="124.868,216.271 124.868,207.989 121.547,214.209 121.093,214.209 117.774,207.989 117.774,216.271	115.586,216.271 115.586,202.531 117.464,202.531 121.32,209.761 125.175,202.531 127.053,202.531 127.053,216.271 "/> <polygon points="131.104,202.531 137.973,202.531 137.973,204.817 133.393,204.817 133.393,207.577 137.973,207.577	137.973,209.863 133.393,209.863 133.393,213.984 137.973,213.984 137.973,216.271 131.104,216.271 "/> <polygon points="149.164,202.531 151.225,202.531 151.225,216.271 149.494,216.271 144.112,207.494 144.112,216.271 142.05,216.271	142.05,202.531 143.761,202.531 149.164,211.306 "/> <polygon points="153.672,204.817 153.672,202.531 163.756,202.531 163.756,204.817 159.857,204.817 159.857,216.271	157.568,216.271 157.568,204.817 "/> </g>
</svg>
</body>
</html>

SVG SMIL Logo Animation - Script Codes CSS Codes

html, body { width: 100%; height: 100%; margin: 0; padding: 0;
}
svg { background: #a2dce4; border: 1px solid #ccc;
}
SVG SMIL Logo Animation - Script Codes
SVG SMIL Logo Animation - Script Codes
Home Page Home
Developer Bramus
Username bramus
Uploaded July 23, 2022
Rating 3
Size 3,788 Kb
Views 34,408
Do you need developer help for SVG SMIL Logo Animation?

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!

Bramus (bramus) Script Codes
Name
Bouncing Ball Animation
Pythagoras
Canvas multiline fillText
Photosphere Demo
Scroll Animations
Scrolling Horizontal Isotope
Skrollr basic implementation, alternative
Simple Flexbox Grid System
CSS Revolving Door
CSS Glitch
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!