Elegant SVG geometric art

Developer
Anna The Scavenger
Size
1,997 Kb
Views
6,072
  1. Elegant SVG geometric art Previews
  2. Elegant SVG geometric art HTML Codes
  3. Elegant SVG geometric art CSS Codes

How do I make an elegant svg geometric art?

Hand coded SVG + exploring its properties. What is a elegant svg geometric art? How do you make a elegant svg geometric art? This script and codes were developed by Anna The Scavenger on 14 December 2022, Wednesday.

Elegant SVG geometric art Previews
IQ Test

Elegant SVG geometric art - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Elegant SVG geometric art</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="svg-container">
<svg id="circles" width="450" height="450" viewBox="0 0 450 450"> <rect x="0" y="0" width="450" height="450" fill="white"/> <g id="circle_left" fill="none" stroke="black" stroke-width="1.5"> <circle cx="100" cy="225" r="25"/> <circle cx="125" cy="225" r="50"/> <circle cx="150" cy="225" r="75"/> <circle cx="175" cy="225" r="100"/> <circle cx="200" cy="225" r="125"/> <circle cx="225" cy="225" r="150"/> </g> <rect x="72" y="225" width="305" height="450" fill="white"/> <g id="circle_right" fill="none" stroke="black" stroke-width="1.5"> <circle cx="350" cy="225" r="25"/> <circle cx="325" cy="225" r="50"/> <circle cx="300" cy="225" r="75"/> <circle cx="275" cy="225" r="100"/> <circle cx="250" cy="225" r="125"/> <circle cx="225" cy="225" r="150"/> </g>
</svg>
</div>
</body>
</html>

Elegant SVG geometric art - Script Codes CSS Codes

body { background: #fff;
}
.svg-container { height: 100vh; width: 100vw; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
}
#circles { height: 100vh;
}
Elegant SVG geometric art - Script Codes
Elegant SVG geometric art - Script Codes
Home Page Home
Developer Anna The Scavenger
Username ScavengerFrontend
Uploaded December 14, 2022
Rating 3
Size 1,997 Kb
Views 6,072
Do you need developer help for Elegant SVG geometric art?

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!

Anna The Scavenger (ScavengerFrontend) Script Codes
Name
Hover over SVG
Faces SVG animation
React Game - SVG Princess Mononoke
Move the SVG eye
Move the binoculars
SVG Dia de Los Muertos tattoo hands
Create amazing video scripts 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!