With appreciation to @Temani Afif, we were able to implement this stunning frame. Despite the code operating smoothly, an issue has arisen that renders the code ineffective.
A staggering 90 percent of my GPU resources are being utilized! Within just 10 seconds of activation, my laptop begins overheating!
Why is this occurring and how can it be resolved?
UPDATE: It appears that the problem lies in the code continuously rendering the animation behind the image; if you comment out addimage(), this becomes evident.
You can test this yourself: Please Run the code in CodePen
Below is the code snippet: (An image is inserted onto the page using the addimage() function, with all other elements being CSS and HTML)
addimage();
function addimage() {
let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg';
var node = document.getElementsByClassName('content');
node[0].style.background = 'url("' + pictureSource + '") center/cover'
}body {
height: 100vh;
margin:0;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.box {
border-radius: 10px;
background:
repeating-linear-gradient(-45deg, white 0 7.5px, hotpink 0 15px)
0 0/21.21px 21.21px; /* 21.21px = sqrt(2) * 15px */
animation: animate 1s linear infinite;
}
.box .content {
width: calc(90vw - 30px);
height: calc(85vh - 30px);
border-radius: 10px;
box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1);
margin:15px;
}
@keyframes animate {
to {
background-position: 21.21px 21.21px;
}
}<div class="box">
<div class="content">
</div>
</div>