SVG Logo
How do I make an svg logo?
What is a svg logo? How do you make a svg logo? This script and codes were developed by Michael on 09 January 2023, Monday.
SVG Logo Previews
SVG Logo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Logo</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="svgLogo" class="logo" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
<g> <path class="logo__green" d="M330.241,214.5c0-4.33-3.511-5.5-7.842-5.5h-21.952c-4.331,0-7.841,1.17-7.841,5.5l0,0 c0,4.33,3.51,5.5,7.841,5.5h21.952C326.73,220,330.241,218.83,330.241,214.5L330.241,214.5z"/> <path class="logo__green" d="M478.608,213.5c0-4.33-3.511-5.5-7.842-5.5h-26.777c-4.33,0-7.842,1.17-7.842,5.5l0,0 c0,4.33,3.512,5.5,7.842,5.5h26.777C475.098,219,478.608,217.83,478.608,213.5L478.608,213.5z"/> <path class="logo__red" d="M356.536,214.5c0-4.33-3.51-5.5-7.84-5.5h-5.791c-4.329,0-7.84,1.17-7.84,5.5l0,0 c0,4.33,3.511,5.5,7.84,5.5h5.791C353.026,220,356.536,218.83,356.536,214.5L356.536,214.5z"/> <path class="logo__blue" d="M500.321,214.5c0-4.33-3.511-5.5-7.842-5.5h-1.206c-4.331,0-7.841,1.17-7.841,5.5l0,0 c0,4.33,3.51,5.5,7.841,5.5h1.206C496.811,220,500.321,218.83,500.321,214.5L500.321,214.5z"/> <path class="logo__purple" d="M310.941,234.5c0-4.33-3.512-5.5-7.841-5.5h-5.066c-4.33,0-7.84,1.17-7.84,5.5l0,0 c0,4.332,3.51,5.5,7.84,5.5h5.066C307.43,240,310.941,238.832,310.941,234.5L310.941,234.5z"/> <path class="logo__green" d="M476.437,233.5c0-4.33-3.51-5.5-7.841-5.5h-9.89c-4.331,0-7.842,1.17-7.842,5.5l0,0 c0,4.331,3.511,5.5,7.842,5.5h9.89C472.927,239,476.437,237.831,476.437,233.5L476.437,233.5z"/> <path class="logo__red" d="M502.01,233.5c0-4.33-3.512-5.5-7.842-5.5h-5.065c-4.331,0-7.84,1.17-7.84,5.5l0,0 c0,4.331,3.509,5.5,7.84,5.5h5.065C498.498,239,502.01,237.831,502.01,233.5L502.01,233.5z"/> <path class="logo__blue" d="M364.257,234.5c0-4.33-3.511-5.5-7.841-5.5h-32.328c-4.329,0-7.84,1.17-7.84,5.5l0,0 c0,4.332,3.511,5.5,7.84,5.5h32.328C360.746,240,364.257,238.832,364.257,234.5L364.257,234.5z"/> <path class="logo__yellow" d="M446.04,234.5c0-4.33-3.512-5.5-7.842-5.5h-1.206c-4.33,0-7.841,1.17-7.841,5.5l0,0 c0,4.332,3.511,5.5,7.841,5.5h1.206C442.528,240,446.04,238.832,446.04,234.5L446.04,234.5z"/> <path class="logo__blue" d="M301.292,317.5c0-4.33-3.511-5.5-7.842-5.5h-5.065c-4.331,0-7.841,1.17-7.841,5.5l0,0 c0,4.33,3.51,5.5,7.841,5.5h5.065C297.781,323,301.292,321.83,301.292,317.5L301.292,317.5z"/> <path class="logo__blue" d="M512.142,317.5c0-4.331-3.511-5.5-7.842-5.5h-38.6c-4.33,0-7.84,1.169-7.84,5.5l0,0 c0,4.331,3.51,5.5,7.84,5.5h38.6C508.631,323,512.142,321.831,512.142,317.5L512.142,317.5z"/> <path class="logo__yellow" d="M335.549,317.5c0-4.33-3.511-5.5-7.841-5.5h-13.752c-4.33,0-7.84,1.17-7.84,5.5l0,0 c0,4.33,3.51,5.5,7.84,5.5h13.752C332.038,323,335.549,321.83,335.549,317.5L335.549,317.5z"/> <path class="logo__purple" d="M392.966,317.5c0-4.33-3.512-5.5-7.842-5.5h-29.189c-4.33,0-7.842,1.17-7.842,5.5l0,0 c0,4.33,3.512,5.5,7.842,5.5h29.189C389.454,323,392.966,321.83,392.966,317.5L392.966,317.5z"/> <path class="logo__green" d="M444.833,317.5c0-4.33-3.51-5.5-7.841-5.5h-1.206c-4.33,0-7.841,1.17-7.841,5.5l0,0 c0,4.33,3.511,5.5,7.841,5.5h1.206C441.323,323,444.833,321.83,444.833,317.5L444.833,317.5z"/> <path class="logo__yellow" d="M423.121,317.5c0-4.33-3.511-5.5-7.841-5.5h-8.443c-4.331,0-7.841,1.17-7.841,5.5l0,0 c0,4.33,3.51,5.5,7.841,5.5h8.443C419.61,323,423.121,321.83,423.121,317.5L423.121,317.5z"/> <path class="logo__red" d="M294.536,337.5c0-4.33-3.51-5.5-7.841-5.5h-0.724c-4.33,0-7.84,1.17-7.84,5.5l0,0c0,4.33,3.51,5.5,7.84,5.5 h0.724C291.026,343,294.536,341.83,294.536,337.5L294.536,337.5z"/> <path class="logo__yellow" d="M480.538,337.5c0-4.33-3.511-5.5-7.841-5.5h-4.825c-4.33,0-7.84,1.17-7.84,5.5l0,0 c0,4.33,3.51,5.5,7.84,5.5h4.825C477.027,343,480.538,341.83,480.538,337.5L480.538,337.5z"/> <path class="logo__green" d="M513.589,337.5c0-4.33-3.511-5.5-7.84-5.5h-12.545c-4.332,0-7.841,1.17-7.841,5.5l0,0 c0,4.33,3.509,5.5,7.841,5.5h12.545C510.078,343,513.589,341.83,513.589,337.5L513.589,337.5z"/> <path class="logo__green" d="M333.378,337.5c0-4.33-3.512-5.5-7.842-5.5h-18.334c-4.33,0-7.84,1.17-7.84,5.5l0,0 c0,4.33,3.51,5.5,7.84,5.5h18.334C329.866,343,333.378,341.83,333.378,337.5L333.378,337.5z"/> <path class="logo__yellow" d="M372.218,337.5c0-4.33-3.511-5.5-7.841-5.5h-2.653c-4.331,0-7.841,1.17-7.841,5.5l0,0 c0,4.33,3.51,5.5,7.841,5.5h2.653C368.707,343,372.218,341.83,372.218,337.5L372.218,337.5z"/> <path class="logo__green" d="M438.802,337.5c0-4.33-3.51-5.5-7.841-5.5h-46.802c-4.33,0-7.84,1.17-7.84,5.5l0,0 c0,4.33,3.51,5.5,7.84,5.5h46.802C435.292,343,438.802,341.83,438.802,337.5L438.802,337.5z"/> <path class="logo__blue" d="M309.493,358.5c0-4.329-3.51-4.5-7.84-4.5h-17.611c-4.33,0-7.84,0.171-7.84,4.5l0,0 c0,4.33,3.51,4.5,7.84,4.5h17.611C305.983,363,309.493,362.83,309.493,358.5L309.493,358.5z"/> <path class="logo__purple" d="M516.484,358.001c0-4.331-3.511-5.001-7.843-5.001h-38.599c-4.33,0-7.841,0.67-7.841,5.001l0,0 c0,4.33,3.511,4.999,7.841,4.999h38.599C512.974,363,516.484,362.331,516.484,358.001L516.484,358.001z"/> <path class="logo__yellow" d="M432.771,358.001c0-4.331-3.51-5.001-7.841-5.001h-4.824c-4.33,0-7.841,0.67-7.841,5.001l0,0 c0,4.33,3.511,4.999,7.841,4.999h4.824C429.261,363,432.771,362.331,432.771,358.001L432.771,358.001z"/> <path class="logo__red" d="M407.198,358.5c0-4.329-3.51-4.5-7.841-4.5h-31.603c-4.33,0-7.841,0.171-7.841,4.5l0,0 c0,4.33,3.511,4.5,7.841,4.5h31.603C403.688,363,407.198,362.83,407.198,358.5L407.198,358.5z"/> <path class="logo__purple" d="M330.724,358.5c0-4.329-3.511-4.5-7.842-4.5h-1.205c-4.33,0-7.841,0.171-7.841,4.5l0,0 c0,4.33,3.511,4.5,7.841,4.5h1.205C327.213,363,330.724,362.83,330.724,358.5L330.724,358.5z"/> <path class="logo__green" d="M292.606,378.5c0-4.33-3.51-5.5-7.841-5.5h-3.136c-4.33,0-7.842,1.17-7.842,5.5l0,0 c0,4.33,3.512,5.5,7.842,5.5h3.136C289.097,384,292.606,382.83,292.606,378.5L292.606,378.5z"/> <path class="logo__yellow" d="M519.138,378.5c0-4.33-3.51-5.5-7.841-5.5h-3.859c-4.331,0-7.841,1.17-7.841,5.5l0,0 c0,4.33,3.51,5.5,7.841,5.5h3.859C515.628,384,519.138,382.83,519.138,378.5L519.138,378.5z"/> <path class="logo__red" d="M494.771,378c0-4.33-3.51-5-7.84-5h-14.475c-4.331,0-7.84,0.67-7.84,5l0,0c0,4.33,3.509,5,7.84,5h14.475 C491.261,383,494.771,382.33,494.771,378L494.771,378z"/> <path class="logo__blue" d="M426.016,378c0-4.33-3.511-5-7.84-5h-14.475c-4.331,0-7.841,0.67-7.841,5l0,0c0,4.33,3.51,5,7.841,5h14.475 C422.505,383,426.016,382.33,426.016,378L426.016,378z"/> <path class="logo__yellow" d="M391.034,378.5c0-4.33-3.51-5.5-7.84-5.5h-7.479c-4.331,0-7.841,1.17-7.841,5.5l0,0 c0,4.33,3.51,5.5,7.841,5.5h7.479C387.524,384,391.034,382.83,391.034,378.5L391.034,378.5z"/> <path class="logo__red" d="M328.311,378.5c0-4.33-3.511-5.5-7.841-5.5h-15.68c-4.33,0-7.842,1.17-7.842,5.5l0,0 c0,4.33,3.512,5.5,7.842,5.5h15.68C324.8,384,328.311,382.83,328.311,378.5L328.311,378.5z"/> <path class="logo__green" d="M326.381,399.5c0-4.33-3.51-5.5-7.841-5.5h-39.322c-4.331,0-7.842,1.17-7.842,5.5l0,0 c0,4.33,3.511,5.5,7.842,5.5h39.322C322.871,405,326.381,403.83,326.381,399.5L326.381,399.5z"/> <path class="logo__green" d="M522.515,399c0-4.33-3.51-5-7.84-5h-40.771c-4.33,0-7.841,0.67-7.841,5l0,0c0,4.33,3.511,5,7.841,5h40.771 C519.005,404,522.515,403.33,522.515,399L522.515,399z"/> <path class="logo__purple" d="M392.001,399.5c0-4.33-3.512-5.5-7.842-5.5h-2.654c-4.33,0-7.84,1.17-7.84,5.5l0,0 c0,4.33,3.51,5.5,7.84,5.5h2.654C388.489,405,392.001,403.83,392.001,399.5L392.001,399.5z"/> <path class="logo__green" d="M420.467,399.5c0-4.33-3.509-5.5-7.841-5.5h-8.443c-4.33,0-7.84,1.17-7.84,5.5l0,0 c0,4.33,3.51,5.5,7.84,5.5h8.443C416.958,405,420.467,403.83,420.467,399.5L420.467,399.5z"/> <path class="logo__purple" d="M321.074,254.5c0-4.331-3.512-5.5-7.842-5.5h-17.128c-4.33,0-7.841,1.169-7.841,5.5l0,0 c0,4.331,3.511,5.5,7.841,5.5h17.128C317.562,260,321.074,258.831,321.074,254.5L321.074,254.5z"/> <path class="logo__yellow" d="M447.005,254.5c0-4.33-3.511-5.5-7.842-5.5h-9.891c-4.33,0-7.84,1.17-7.84,5.5l0,0 c0,4.33,3.51,5.5,7.84,5.5h9.891C443.494,260,447.005,258.83,447.005,254.5L447.005,254.5z"/> <path class="logo__blue" d="M504.181,254.5c0-4.33-3.512-5.5-7.842-5.5h-36.67c-4.33,0-7.84,1.17-7.84,5.5l0,0 c0,4.33,3.51,5.5,7.84,5.5h36.67C500.669,260,504.181,258.83,504.181,254.5L504.181,254.5z"/> <path class="logo__green" d="M371.494,254.5c0-4.331-3.511-5.5-7.841-5.5h-30.396c-4.331,0-7.842,1.169-7.842,5.5l0,0 c0,4.331,3.511,5.5,7.842,5.5h30.396C367.983,260,371.494,258.831,371.494,254.5L371.494,254.5z"/> <path class="logo__yellow" d="M302.257,276c0-4.331-3.512-5-7.841-5h-0.724c-4.33,0-7.842,0.669-7.842,5l0,0c0,4.331,3.512,5,7.842,5 h0.724C298.745,281,302.257,280.331,302.257,276L302.257,276z"/> <path class="logo__yellow" d="M377.284,276c0-4.331-3.511-5-7.841-5h-0.724c-4.33,0-7.84,0.669-7.84,5l0,0c0,4.331,3.51,5,7.84,5h0.724 C373.773,281,377.284,280.331,377.284,276L377.284,276z"/> <path class="logo__green" d="M481.743,275.001c0-4.331-3.51-5.001-7.84-5.001H423c-4.33,0-7.84,0.67-7.84,5.001l0,0 c0,4.33,3.51,4.999,7.84,4.999h50.903C478.233,280,481.743,279.331,481.743,275.001L481.743,275.001z"/> <path class="logo__yellow" d="M507.075,275.001c0-4.331-3.511-5.001-7.84-5.001h-5.309c-4.33,0-7.841,0.67-7.841,5.001l0,0 c0,4.33,3.511,4.999,7.841,4.999h5.309C503.564,280,507.075,279.331,507.075,275.001L507.075,275.001z"/> <path class="logo__red" d="M356.056,276c0-4.331-3.512-5-7.842-5h-33.292c-4.331,0-7.841,0.669-7.841,5l0,0c0,4.331,3.51,5,7.841,5 h33.292C352.544,281,356.056,280.331,356.056,276L356.056,276z"/> <path class="logo__green" d="M331.447,296.637c0-4.33-3.512-5.637-7.841-5.637h-32.086c-4.33,0-7.841,1.307-7.841,5.637l0,0 c0,4.332,3.511,6.363,7.841,6.363h32.086C327.936,303,331.447,300.969,331.447,296.637L331.447,296.637z"/> <path class="logo__purple" d="M425.774,296.139c0-4.33-3.511-5.139-7.84-5.139h-2.654c-4.33,0-7.841,0.809-7.841,5.139l0,0 c0,4.33,3.511,5.861,7.841,5.861h2.654C422.264,302,425.774,300.469,425.774,296.139L425.774,296.139z"/> <path class="logo__yellow" d="M462.686,296.139c0-4.33-3.511-5.139-7.841-5.139h-17.128c-4.331,0-7.841,0.809-7.841,5.139l0,0 c0,4.33,3.51,5.861,7.841,5.861h17.128C459.175,302,462.686,300.469,462.686,296.139L462.686,296.139z"/> <path class="logo__red" d="M509.971,296.139c0-4.33-3.512-5.139-7.842-5.139h-26.778c-4.329,0-7.84,0.809-7.84,5.139l0,0 c0,4.33,3.511,5.861,7.84,5.861h26.778C506.459,302,509.971,300.469,509.971,296.139L509.971,296.139z"/> <path class="logo__blue" d="M385.245,296.637c0-4.33-3.51-5.637-7.841-5.637h-33.292c-4.33,0-7.841,1.307-7.841,5.637l0,0 c0,4.332,3.511,6.363,7.841,6.363h33.292C381.735,303,385.245,300.969,385.245,296.637L385.245,296.637z"/>
</g>
</svg>
</body>
</html>
SVG Logo - Script Codes CSS Codes
:root { display: flex; height: 100%; align-items: center; justify-content: center;
}
.logo { display: block; width: 60vw;
}
.logo__green { fill: #B9D56E; animation: animateOne 2s;
}
.logo__red { fill: #EB3E6D; animation: animateTwo 2.1s;
}
.logo__blue { fill: #7CD7E7; animation: animateThree 2.2s;
}
.logo__purple { fill: #9179D8; animation: animateFour 2.3s;
}
.logo__yellow { fill: #E6DB74; animation: animateFive 2.4s;
}
.logo * { animation-iteration-count: infinite;
}
@keyframes animateOne { 0% { fill: #B9D56E; } 25% { fill: #EB3E6D; } 50% { fill: #7CD7E7; } 75% { fill: #9179D8; } 100% { fill: #E6DB74; }
}
@keyframes animateTwo { 0% { fill: #EB3E6D; } 25% { fill: #7CD7E7; } 50% { fill: #9179D8; } 75% { fill: #E6DB74; } 100% { fill: #B9D56E; }
}
@keyframes animateThree { 0% { fill: #7CD7E7; } 25% { fill: #9179D8; } 50% { fill: #E6DB74; } 75% { fill: #B9D56E; } 100% { fill: #EB3E6D; }
}
@keyframes animateFour { 0% { fill: #9179D8; } 25% { fill: #E6DB74; } 50% { fill: #B9D56E; } 75% { fill: #EB3E6D; } 100% { fill: #7CD7E7; }
}
@keyframes animateFive { 0% { fill: #E6DB74; } 25% { fill: #B9D56E; } 50% { fill: #EB3E6D; } 75% { fill: #7CD7E7; } 100% { fill: #9179D8; }
}
| Developer | Michael |
| Username | mjtweaver |
| Uploaded | January 09, 2023 |
| Rating | 3 |
| Size | 4,523 Kb |
| Views | 4,048 |
Do you need developer help for SVG Logo?
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!
Michael (mjtweaver) Script Codes
| Name | Size |
| Coburg Banks SVG Logo | 3,875 Kb |
| Product Magnification without JavaScript | 2,627 Kb |
| Slick Slider - Progress Bar | 2,992 Kb |
| Using Level 4 CSS Validity Pseudo-Classes to Improve Form UX. | 2,710 Kb |
| Masonry debugging | 21,323 Kb |
| Building an Accordion without JavaScript - Part I | 1,596 Kb |
| Filtering | 2,444 Kb |
| Building an Accordion without JavaScript - Part II | 3,800 Kb |
| A Pen by Michael | 1,914 Kb |
Create amazing marketing copy 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!
Similar Scripts & Codes
| Name | Username | Size |
| Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
| Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
| Arrow Navigation | Hinducows | 1,973 Kb |
| CSS3 Form Page Design | Rssatnam | 3,613 Kb |
| Dribbble Template | ExtremelyGinger | 2,204 Kb |
| SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
| Loading animation | Codeams | 2,408 Kb |
| Playing with FlexBox | _Billy_Brown | 3,162 Kb |
| Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
| Slick Slider | Wearebold | 5,913 Kb |
Do you want hide your ip address?
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!