SVG

Developer
James Donovan
Size
1,709 Kb
Views
16,192
  1. SVG Previews
  2. SVG HTML Codes
  3. SVG CSS Codes

How do I make an svg?

What is a svg? How do you make a svg? This script and codes were developed by James Donovan on 26 November 2022, Saturday.

SVG Previews
IQ Test

SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="svg-wrapper"> <svg height="150px" width="150px"> <circle cx="75" cy="75" r="74" class="shape" /> <img src="http://img05.shop-pro.jp/PA01105/169/product/76720289_o1.jpg?20140619205208", alt="superman" alt="superman" id="avatar" /> </svg>
</div>
</body>
</html>

SVG - Script Codes CSS Codes

html, body { height: 100%; overflow: hidden;
}
.svg-wrapper { position: relative; top: 50%; transform: translateY(-50%);	margin: 0 auto;
}
.shape { stroke-dasharray: 500; stroke-dashoffset: 500; stroke-width: 4px; fill: transparent; stroke: #19f6e8; transition: stroke-dashoffset 1s;
}
.shape:hover { stroke-dashoffset: 0;
}
#avatar { width: 150px; height: 150px; border-radius: 50%; position: fixed; left: 0; top: 0; z-index: -1;
}
SVG - Script Codes
SVG - Script Codes
Home Page Home
Developer James Donovan
Username JWDonovan
Uploaded November 26, 2022
Rating 3
Size 1,709 Kb
Views 16,192
Do you need developer help for SVG?

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!

James Donovan (JWDonovan) Script Codes
Name
404
Modal
Page Loader
Game Template
Homepage
Slideshow
South Park Hub - Slideshow
Push Menu
South Park Hub - Temp Slideshow
South Park Hub - Seasons
Create amazing captions 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!