Reverse clip path with blend modes

Developer
Zach Saucier
Size
2,725 Kb
Views
56,672
  1. Reverse clip path with blend modes Previews
  2. Reverse clip path with blend modes HTML Codes
  3. Reverse clip path with blend modes CSS Codes
  4. Reverse clip path with blend modes JS Codes

How do I make an reverse clip path with blend modes?

A demo of reverse path inspired by Dash Berlin's "We Are" album art with some gifs and blend modes for style.. What is a reverse clip path with blend modes? How do you make a reverse clip path with blend modes? This script and codes were developed by Zach Saucier on 20 August 2022, Saturday.

Reverse clip path with blend modes Previews
IQ Test

Reverse clip path with blend modes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reverse clip path with blend modes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Define our SVG clip path -->
<svg width='0' height='0'> <defs> <clipPath id="cp" clipPathUnits="objectBoundingBox"> <path d="M0.500, 0.945 L0.994, 0.090 L0.006, 0.090 L0.500, 0.945 L0.500, 0.650 L0.262, 0.238 L0.738, 0.237 L0.500, 0.650z"></path> </clipPath> </defs>
</svg>
<!-- The actual elements we're using -->
<div class="triangle first"></div>
<div class="triangle second"></div> <script src="js/index.js"></script>
</body>
</html>

Reverse clip path with blend modes - Script Codes CSS Codes

html { min-height: 100%; background: #B8BEB4; background: -webkit-radial-gradient(#b8beb4, #71685f); background: radial-gradient(#b8beb4, #71685f); background-size: cover;
}
.triangle { -webkit-clip-path: url(#cp); clip-path: url(#cp); width: 50vw; height: 50vw; max-height: 75vh; max-width: 75vh; background-size: cover; background-blend-mode: screen; position: absolute; top: 50%; left: 50%;
}
.first { background-color: #C5075C; background-image: url("https://media.giphy.com/media/pE6GG0V2JCKUo/giphy.gif"); -webkit-transform: translateX(-65%) translateY(-50%); transform: translateX(-65%) translateY(-50%);
}
.second { background-color: #03B897; background-image: url("https://media1.giphy.com/media/fLg3MEWdgH5Ti/200.gif"); -webkit-transform: translateX(-35%) translateY(-50%); transform: translateX(-35%) translateY(-50%); opacity: 0.8;
}

Reverse clip path with blend modes - Script Codes JS Codes

// For more check out zachsaucier.com
Reverse clip path with blend modes - Script Codes
Reverse clip path with blend modes - Script Codes
Home Page Home
Developer Zach Saucier
Username Zeaklous
Uploaded August 20, 2022
Rating 3
Size 2,725 Kb
Views 56,672
Do you need developer help for Reverse clip path with blend modes?

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!

Zach Saucier (Zeaklous) Script Codes
Name
Prism music visualizer
Business card
CSS Callback Functions Using Iteration
Circle Snake
Single Element gif Recreation
Pausing Transitions
Circular Questionnaire
CSS-Only Full Page Slider
Changing a CSS Animation at its Current Values
Swirling dots
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!