SVG Alien

Developer
A S P
Size
2,107 Kb
Views
4,048
  1. SVG Alien Previews
  2. SVG Alien HTML Codes
  3. SVG Alien CSS Codes

How do I make an svg alien?

SVG green alien head. What is a svg alien? How do you make a svg alien? This script and codes were developed by A S P on 15 January 2023, Sunday.

SVG Alien Previews
IQ Test

SVG Alien - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Alien</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container" class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice" id="scenesvg"> <defs> <radialGradient id="gradhead" cx="50%" cy="50%" r="50%" fx="80%" fy="15%"> <stop offset="40%" style="stop-color:rgb(102,255,102); stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(20,173,20); stop-opacity:1" /> </radialGradient> <radialGradient id="gradeyeleft" cx="60%" cy="40%" r="50%" fx="70%" fy="30%"> <stop offset="25%" style="stop-color:rgb(30,30,30); stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1" /> </radialGradient> <radialGradient id="gradeyeright" cx="60%" cy="40%" r="50%" fx="70%" fy="30%"> <stop offset="25%" style="stop-color:rgb(30,30,30); stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1" /> </radialGradient> </defs> <path d="M200 400 A 135 170, 0, 1, 1, 400 400 C 330 520, 270 520, 200 400 Z" id="head"/> <path d="M 285 430 C 290 435, 315 435, 335 420 C 315 415, 290 435, 285 430" id="mouth"/> <path d="M 280 330 C 270 360, 210 360, 190 300 C 220 270, 270 290, 280 330" id="eyeleft" class="eyes"/> <path d="M 320 330 C 330 360, 390 360, 410 300 C 380 270, 330 290, 320 330" id="eyeright" class="eyes"/>
</svg>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

SVG Alien - Script Codes CSS Codes

.wrapper
{ position: absolute; top: 0px; left: 0px; right: 0px; width: auto; height: auto; box-sizing: border-box; background-color: #000;
}
#container svg
{ display: block;
}
/** SVG definition below **/
#scenesvg
{ /*transform: rotate(-9deg);*/
}
#head
{ fill: url("#gradhead"); stroke: #222; stroke-width: 3;
}
#mouth
{ fill: #000;
}
.eyes
{
}
#eyeleft
{ fill: url("#gradeyeleft");
}
#eyeright
{ fill: url("#gradeyeright");
}
SVG Alien - Script Codes
SVG Alien - Script Codes
Home Page Home
Developer A S P
Username asp
Uploaded January 15, 2023
Rating 3
Size 2,107 Kb
Views 4,048
Do you need developer help for SVG Alien?

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!

A S P (asp) Script Codes
Name
SVG Snowman
Starfield using KineticJS
KeyPad
Button Pulse
Stargate CSS
Color Palettes
Laser Cat
Grid with Fixed and Resizable Columns
Typing Text
Monster Name Generator
Create amazing love letters 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!