Close SVG

Developer
Francois Coron
Size
2,706 Kb
Views
18,216
  1. Close SVG Previews
  2. Close SVG HTML Codes
  3. Close SVG CSS Codes

How do I make an close svg?

What is a close svg? How do you make a close svg? This script and codes were developed by Francois Coron on 08 November 2022, Tuesday.

Close SVG Previews
IQ Test

Close SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Close SVG</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> <div class="panel">
<svg class="panel__close cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.6 55.6" enable-background="new 0 0 55.6 55.6">	<path class="cross__ico" d="M18.2 38c1 1 2.6 1 3.5 0l5.9-5.9 5.9 5.9c1 1 2.6 1 3.5 0s1-2.6 0-3.5l-5.9-5.9 5.9-5.9c1-1 1-2.6 0-3.5-1-1-2.6-1-3.5 0l-5.9 5.8-5.9-5.9c-1-1-2.6-1-3.5 0-1 1-1 2.6 0 3.5l5.9 5.9-5.9 5.9c-1 1.1-1 2.6 0 3.6z"/>	<circle class="cross__line" cx="27" cy="28" r="24"/>	</svg>	<nav class="panel__nav">	<a href="#" class="panel__nav__item">A Propos</a>	<a href="#" class="panel__nav__item">Nous contacter</a>	<a href="#" class="panel__nav__item">Aide</a>	</nav>
</div>
</body>
</html>

Close SVG - Script Codes CSS Codes

body { font-family: 'Open Sans';
}
.panel { position: relative; padding: 10px; border-bottom: 1px solid #E8EBED;
}
.panel__close { position: absolute; height: 2em; width: 2em; fill: #CCC;
}
.panel__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; overflow: hidden;
}
.panel__nav__item { padding: 10px 20px; color: #999; text-transform: uppercase; font-size: 14px; letter-spacing: .15em; text-decoration: none;
}
.panel__nav__item:hover { color: #333;
}
.panel__nav__item:nth-child(2) { border-left: none; border-right: none;
}
.cross { -webkit-transition: 400ms ease-in-out; transition: 400ms ease-in-out; cursor: pointer;
}
.cross:hover { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.cross:hover .cross__line { stroke-dashoffset: 0; stroke: #999;
}
.cross:hover .cross__ico { fill: #999;
}
.cross__line { stroke-dasharray: 160; stroke-dashoffset: 160; stroke-width: 4; fill: transparent; stroke: #CCC; -webkit-transition: 400ms ease-in-out; transition: 400ms ease-in-out;
}
.cross__ico { -webkit-transition: 400ms ease-in 100ms; transition: 400ms ease-in 100ms;
}
Close SVG - Script Codes
Close SVG - Script Codes
Home Page Home
Developer Francois Coron
Username francoiscoron
Uploaded November 08, 2022
Rating 3
Size 2,706 Kb
Views 18,216
Do you need developer help for Close 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!

Francois Coron (francoiscoron) Script Codes
Name
STAR WARS LIGHTSABER
Hover img
Light card transition on scroll
Starter CP
Buttons
UI Quotes
A Pen by Francois Coron
SVG CREAM
Starter jade
Typographie
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!