SVG Line Drawing

Developer
Angela Velasquez
Size
2,768 Kb
Views
30,360
  1. SVG Line Drawing Previews
  2. SVG Line Drawing HTML Codes
  3. SVG Line Drawing CSS Codes
  4. SVG Line Drawing JS Codes

How do I make an svg line drawing?

This is a SVG logo animation for a new project. I designed the logo, and took reference to animate it from here:. What is a svg line drawing? How do you make a svg line drawing? This script and codes were developed by Angela Velasquez on 07 September 2022, Wednesday.

SVG Line Drawing Previews
IQ Test

SVG Line Drawing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Line Drawing</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<svg width="300px" height="300px" viewBox="-50 -50 400 400" version="1.1" id="jelly">	<path d="M105.092,59.107 C110.611,59.107 115.092,63.588 115.092,69.107 C115.092,74.626 110.611,79.107 105.092,79.107 C99.573,79.107 95.092,74.626 95.092,69.107 C95.092,63.588 99.573,59.107 105.092,59.107 Z" id="eye" class="jelly__eye" fill="#FF2D3E"></path>	<path d="M179.75,145 C179.75,145 179.5,132.5 190.25,125 C201,117.5 211.5,105.75 210.5,89 C209.5,72.25 198.999023,60.7490234 190.25,55.75 C181.500977,50.7509766 170.75,51.5 170.75,51.5 C170.75,51.5 158,27.5 128.5,21.25 C99,15 81.75,28.25 76.7509766,31.5 C71.7519531,34.75 63.75,45.2480469 59.25,50.4990234 C54.75,55.75 53.7480469,61.7480469 42.2490234,59.4990234 C30.75,57.25 29.7490234,44.7490234 29.7490234,37.75 L29.7490234,12 C29.7490234,12 28.25,0 16,0 C3.75,0 2.89805256e-14,9.75 2.84217094e-14,18.5 L2.84217094e-14,55.7490234 C2.84217094e-14,55.7490234 1.25097656,76.25 11.5,93.75 C21.7490234,111.25 31.5,126.75 57.25,139.75 C83,152.75 113.25,150 113.25,150 C113.25,150 109.999023,165.748047 109.999023,174.749023 L109.999023,245.499023 C109.999023,245.499023 108.75,260.5 123,260.5 L148.5,260.5 C148.5,260.5 157.75,260.5 160.75,249.5 C161.405146,247.097798 162,243.25 163.75,240 C168.62737,230.942027 178.000977,220.5 194,220.5 C218.25,220.5 227.75,238.75 229.000977,247.25 C230.251953,255.75 233.25,260.125 241.25,260.125 L268.031297,260.125 C268.031297,260.125 280.25,261.5 280.25,245.499023 C280.25,229.498047 280.25,177.5 280.25,177.5 C280.25,177.5 280,149.75 265.5,128 C251,106.25 225.750977,94.75 225.750977,94.75" id="body" class="line jelly__body" fill="none" stroke="#FF2D3F" stroke-width="10"></path>	</svg>
</div> <script src="js/index.js"></script>
</body>
</html>

SVG Line Drawing - Script Codes CSS Codes

.container {	height: 300px;	width: 300px;	margin: 20vh auto;
}
.jelly__eye {	opacity: 0;	animation: wink .45s ease-in-out 2s 2 forwards;
}
.line {	stroke-dasharray: 1200;	stroke-dashoffset: 1200;	animation: dash 2.5s ease-in-out forwards;
}
@keyframes dash { 0% { stroke-dashoffset: 1200; stroke-width: 5; } 100% { stroke-dashoffset: 0; stroke-width: 10; }
}
@keyframes wink { 0% { opacity: 0; } 100% { opacity: 1; }
}

SVG Line Drawing - Script Codes JS Codes

// This is a SVG logo animation for a new project.
//I designed the logo, and took reference to animate it from here: https://medium.com/bitmatica-lab/svg-line-animation-for-the-uninitiated-5a65d91c6044#.c8vowi1dh
//Here is the original design: https://dribbble.com/shots/3348888-Jellyphant
SVG Line Drawing - Script Codes
SVG Line Drawing - Script Codes
Home Page Home
Developer Angela Velasquez
Username AngelaVelasquez
Uploaded September 07, 2022
Rating 3
Size 2,768 Kb
Views 30,360
Do you need developer help for SVG Line Drawing?

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!

Angela Velasquez (AngelaVelasquez) Script Codes
Name
Dancing Pug
CSS - Cat on ride
CSS - Cat in the sky
My Valentine
CSS Switch Day and Night - Cat
CSS radio buttons
CSS - Cat on the Moon
CSS Fruit Background - Pineapple
CSS - Cat with balloon
Form with SVG radio buttons
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!