Clip-Path Polygons

Developer
Victor Freire
Size
3,704 Kb
Views
20,240
  1. Clip-Path Polygons Previews
  2. Clip-Path Polygons HTML Codes
  3. Clip-Path Polygons CSS Codes
  4. Clip-Path Polygons JS Codes

How do I make an clip-path polygons?

Playing with clip-path css property.. What is a clip-path polygons? How do you make a clip-path polygons? This script and codes were developed by Victor Freire on 15 September 2022, Thursday.

Clip-Path Polygons Previews
IQ Test

Clip-Path Polygons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clip-Path Polygons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main></main> <svg class="svg_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 411.4 74.3" enable-background="new 0 0 411.4 74.3"> <path class="path_1" d="M25.9 18.2c4.6 0 8.9 1.7 12.1 4.4l4.5-5.3c-4.5-3.8-10.3-6.1-16.6-6.1-14.3.1-25.9 11.7-25.9 25.9 0 14.3 11.6 25.9 25.9 25.9 6.3 0 12.1-2.3 16.6-6.1l-4.5-5.3c-3.3 2.8-7.5 4.4-12.1 4.4-10.5 0-18.9-8.5-18.9-18.9 0-10.4 8.4-18.9 18.9-18.9zM169 12.8h-13.9c-1.9 0-3.5 1.6-3.5 3.5v41.7c0 1.9 1.6 3.5 3.5 3.5h13.9c13.4 0 24.4-10.9 24.4-24.4 0-13.4-11-24.3-24.4-24.3zm0 41.7h-10.4v-34.8h10.4c9.6 0 17.4 7.8 17.4 17.4 0 9.6-7.8 17.4-17.4 17.4zM212.2 16.2v41.8c0 1.9 1.6 3.5 3.5 3.5h29v-7h-25.5v-13.9h16.2v-7h-16.2v-13.9h25.5v-7h-29c-1.9.1-3.5 1.6-3.5 3.5zM317.6 16.2v41.8c0 1.9 1.6 3.5 3.5 3.5h29v-7h-25.5v-13.9h16.2v-7h-16.2v-13.9h25.5v-7h-29c-2 .1-3.5 1.6-3.5 3.5zM284.4 12.8h-15.1c-1.9 0-3.5 1.6-3.5 3.5v45.2h7v-20.9h11.6c7.7 0 13.9-6.2 13.9-13.9.1-7.7-6.2-13.9-13.9-13.9zm0 20.8h-11.6v-13.9h11.6c3.8 0 7 3.1 7 7s-3.1 7-7 6.9zM404.5 12.8v35.6l-28.7-34.4c-.9-1.1-2.5-1.5-3.9-1s-2.3 1.8-2.3 3.3v45.2h7v-35.6l28.7 34.4c.7.8 1.7 1.2 2.7 1.2.4 0 .8-.1 1.2-.2 1.4-.5 2.3-1.8 2.3-3.3v-45.2h-7zM131.8 25.3c-.3-1.8-2.3-2.7-3.7-3.7l-7.9-5.3-19.2-12.8-4.5-3c-1.1-.7-2.5-.7-3.5 0l-13 8.7-18.7 12.5c-1.6 1.1-3.6 2-3.7 4.1-.1 2.5 0 4.9 0 7.4v12c0 2.1-.4 4.5 1.5 5.9 4.6 3.3 9.5 6.3 14.2 9.5l18 12c1.7 1.1 3.2 2.3 5.3 1 1.8-1.1 3.5-2.3 5.2-3.5l20-13.3c2.4-1.6 4.9-3.2 7.3-4.9 1.5-1 2.7-1.8 2.7-3.9v-20.6c.1-.6.2-1.4 0-2.1zm-37.1 19.4l-11.3-7.5 11.3-7.5 11.3 7.5-11.3 7.5zm-3.1-20.7l-13.8 9.3-11.2-7.5 25-16.7v14.9zm-19.6 13.1l-8 5.3v-10.6l8 5.3zm5.7 3.9l13.8 9.3v14.9l-25-16.7 11.2-7.5zm20.2 9.2l13.8-9.3 11.2 7.5-25 16.7v-14.9zm19.6-13.1l8-5.3v10.7l-8-5.4zm-5.7-3.8l-13.9-9.3v-14.8l25 16.7-11.1 7.4z"/> </svg> <script src="js/index.js"></script>
</body>
</html>

Clip-Path Polygons - Script Codes CSS Codes

* { margin: 0; padding: 0; outline: 0; overflow: hidden; box-sizing: border-box;
}
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #7d0632;
}
main { width: 50vmin; height: 50vmin; background: rgba(0, 0, 0, 0.3); -webkit-clip-path: polygon(50% 0%, 70% 0%, 50% 0%, 100% 100%, 100% 100%, 30% 100%, 0% 100%, 0% 100%); clip-path: polygon(50% 0%, 70% 0%, 50% 0%, 100% 100%, 100% 100%, 30% 100%, 0% 100%, 0% 100%); -webkit-animation: poly 8s ease-in-out 2s forwards; animation: poly 8s ease-in-out 2s forwards;
}
.svg_1, .path_1 { -webkit-animation: fade-blur 1s ease-out 7.2s forwards; animation: fade-blur 1s ease-out 7.2s forwards;
}
.svg_1 { position: absolute; top: 50%; left: 50%; width: 100vmin; -webkit-filter: blur(8px); filter: blur(8px); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.path_1 { fill: white; opacity: 0;
}
@-webkit-keyframes poly { 5% { -webkit-clip-path: polygon(0% 0%, 70% 0%, 50% 0%, 100% 100%, 100% 100%, 30% 100%, 0% 100%, 0% 100%); clip-path: polygon(0% 0%, 70% 0%, 50% 0%, 100% 100%, 100% 100%, 30% 100%, 0% 100%, 0% 100%); } 10% { -webkit-clip-path: polygon(0% 0%, 70% 0%, 100% 0%, 100% 100%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); clip-path: polygon(0% 0%, 70% 0%, 100% 0%, 100% 100%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); } 15% { -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 0%, 100% 70%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 0%, 100% 70%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); } 20% { -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); } 25% { -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 100%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 100%, 0% 30%); } 30% { -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } 35% { -webkit-clip-path: polygon(50% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(50% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } 40% { -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } 45% { -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 30% 100%, 0% 70%, 0% 30%); } 50% { -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0% 70%, 0% 30%); clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0% 70%, 0% 30%); } 55% { width: 50vmin; height: 50vmin; -webkit-transform: none; transform: none; } 65%,100% { width: 17vmin; height: 17vmin; -webkit-transform: translateX(-27vmin); transform: translateX(-27vmin); -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0% 70%, 0% 30%); clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0% 70%, 0% 30%); }
}
@keyframes poly { 5% { -webkit-clip-path: polygon(0% 0%, 70% 0%, 50% 0%, 100% 100%, 100% 100%, 30% 100%, 0% 100%, 0% 100%); clip-path: polygon(0% 0%, 70% 0%, 50% 0%, 100% 100%, 100% 100%, 30% 100%, 0% 100%, 0% 100%); } 10% { -webkit-clip-path: polygon(0% 0%, 70% 0%, 100% 0%, 100% 100%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); clip-path: polygon(0% 0%, 70% 0%, 100% 0%, 100% 100%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); } 15% { -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 0%, 100% 70%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 0%, 100% 70%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); } 20% { -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 100% 100%, 30% 100%, 0% 100%, 0% 30%); } 25% { -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 100%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 100%, 0% 30%); } 30% { -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } 35% { -webkit-clip-path: polygon(50% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(50% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } 40% { -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } 45% { -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 30% 100%, 0% 70%, 0% 30%); clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 30% 100%, 0% 70%, 0% 30%); } 50% { -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0% 70%, 0% 30%); clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0% 70%, 0% 30%); } 55% { width: 50vmin; height: 50vmin; -webkit-transform: none; transform: none; } 65%,100% { width: 17vmin; height: 17vmin; -webkit-transform: translateX(-27vmin); transform: translateX(-27vmin); -webkit-clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0% 70%, 0% 30%); clip-path: polygon(50% 0%, 50% 0%, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0% 70%, 0% 30%); }
}
@-webkit-keyframes fade-blur { to { opacity: 1; -webkit-filter: none; filter: none; }
}
@keyframes fade-blur { to { opacity: 1; -webkit-filter: none; filter: none; }
}

Clip-Path Polygons - Script Codes JS Codes

// You can't see the polygons?
// Try a -webkit- browser (except MS Edge). ;)
Clip-Path Polygons - Script Codes
Clip-Path Polygons - Script Codes
Home Page Home
Developer Victor Freire
Username victorfreire
Uploaded September 15, 2022
Rating 4
Size 3,704 Kb
Views 20,240
Do you need developer help for Clip-Path Polygons?

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!

Victor Freire (victorfreire) Script Codes
Name
SCSS Grid
Archery
Save for later...
Wi-Fi Icon Spinner inspired by Material Design
Google Dots Radio Buttons
Search Box and Button Animated
Gooey Light Rings Loader
Create amazing web content 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!