Is your animated div not responding properly with an SVG clip-path?

I'm encountering an issue with a DIV that utilizes CSS background, animation, and clip-path. Despite my efforts to make it scale responsively using vh/vw or percent units, the SVG inside does not maintain a 1:1 scale when adjusting the window's width. I need help identifying the correct SVG implementation to achieve responsive scaling without requiring JavaScript. Can you assist me in resolving this?

HTML

.imageHero {
  max-width: 100%;
    max-height: 100%;
    width: 65vh;
  height: 65vh;
  margin: 40px;
  clip-path: url('#my-clip-path');
  animation: clipRotateAnim 6s linear infinite;
  position: relative;
  overflow: hidden;
}

.imageHero::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -10%;
  right: -10%;
  background: var(--i) center;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  animation: inherit;
  animation-direction: reverse;
}

@keyframes clipRotateAnim {
  to {
    transform: rotate(360deg);
  }
}

.r0tate {
        display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; 
    vertical-align: middle; 
    overflow: hidden; 
}

.svg-content { 
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<center>
    <div class="r0tate">
    <div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
</div>

<svg class="svg-content" viewBox="0 0 616.8 599" preserveAspectRatio="xMinYMin meet" height="0" width="0">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1"></path></clipPath>
</svg>
</div>
</center>

fiddle here

htmlcss

Answer №1

One issue lies with the width and max-width definitions in your code.

To maintain the aspect ratio of your clipped image, you may consider using the aspect-ratio CSS property. However, due to imperfect browser support, we resort to the traditional aspect-ratio hack.

.imageHero::before {
        content: "";
        padding-bottom: 100%;
        width: 100%;
        display: block;
    }


.imageHero {
  max-width: 65vh;
  margin: 0 auto;
  clip-path: url('#my-clip-path');
  animation: clipRotateAnim 6s linear infinite;
  position: relative;
  overflow: hidden;
}


/* force aspect ratio 1:1 */
.imageHero::before {
  content: "";
  padding-bottom: 100%;
  width: 100%;
  display: block;
}

/* image */
.imageHero::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -10%;
  right: -10%;
  background: var(--i) center;
  background-size: cover;
  animation: inherit;
  animation-direction: reverse;
}

@keyframes clipRotateAnim {
  to {
    transform: rotate(360deg);
  }
}

.imageHero-wrp {
  position: relative;
  overflow: hidden;
  padding: 40px;
  background: #eee;
}

.svg-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
<main>
  <div class="imageHero-wrp">
    <div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
    </div>

    <svg class="svg-content" viewBox="0 0 1 1">
                <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
                    <path
                        d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1z">
                    </path>
                </clipPath>
            </svg>
  </div>
</main>

Smil animated clip-path

An alternative approach is to animate the clip-path itself using <animateTransform>

.imageHero {
  max-width: 65vh;
  margin: 40px auto;
  clip-path: url('#my-clip-path');
  position: relative;
  overflow: hidden;
}


/* force aspect ratio 1:1 */
.imageHero::before {
  content: "";
  padding-bottom: 100%;
  width: 100%;
  display: block;
}


/* image element */
.imageHero::after {
  content: "";
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  background: var(--i) center;
  background-size: cover;
}

.r0tate {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
}

.svg-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
<main>
  <div class="r0tate">
    <div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
    </div>

    <svg class="svg-content" viewBox="0 0 1 1" aria-hidden="true">
                <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
                    <path
                        d="M0.5 0.755l-0.127 0.22l0-0.254l-0.221 0.127l0.128-0.22l-0.255 0l0.22-0.128l-0.22-0.127l0.255 0l-0.128-0.22l0.221 0.127l0-0.255l0.127 0.221l0.127-0.221l0 0.255l0.221-0.127l-0.128 0.22l0.255 0l-0.22 0.127l0.22 0.128l-0.255 0l0.128 0.22l-0.221-0.127l0 0.254z">
                        <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 0.5 0.5"
                        to="360 0.5 0.5"
                        dur="6s"
                        repeatCount="indefinite"/>
                    </path>
                </clipPath>
            </svg>
  </div>
</main>

This approach could potentially offer better performance as it only involves rotating the clip-path without affecting both the image and parent element.

Answer №2

I have devised a solution, in case that is what you are referring to. .imageHero{position: absolute;} That is the only setting I have applied, along with 

r0tate{display: flex; justify-content: center;}
if you wish to center it.

.imageHero {
  max-width: 60%;
  max-height: 60%;
  width: 65vh;
  height: 65vh;
  margin: 40px;
  clip-path: url("#my-clip-path");
  animation: clipRotateAnim 6s linear infinite;
  position: absolute;
  overflow: hidden;
}

.imageHero::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -10%;
  right: -10%;
  background: var(--i) center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  animation: inherit;
  animation-direction: reverse;
}

@keyframes clipRotateAnim {
  to {
    transform: rotate(360deg);
  }
}

.r0tate {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

.svg-content {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <center>
      <div class="r0tate">
        <div
          class="imageHero"
          style="--i: url(https://source.unsplash.com/600x600?summer)"
          width="100%"
          height="100%"
        ></div>

        <svg
          class="svg-content"
          viewBox="0 0 616.8 599"
          preserveAspectRatio="xMinYMin meet"
          height="0"
          width="0"
        >
          <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
            <path
              d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1"
            ></path>
          </clipPath>
        </svg>
      </div>
    </center>
  </body>
</html>

jsfiddle: https://jsfiddle.net/rmcnt9a1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

.htaccess file encounters an error when attempting to incorporate an argument related to HTTP 451

My website includes a .htaccess file with the following contents: <Files .htaccess> order allow,deny deny from all </Files> ErrorDocument 404 /websites/404/index.php Adding additional ErrorDocument lines should work, like so: <Files .hta ...

phphtml.htaccess

showing errors in case the username does not match the specified pattern

As I work with symfony, one of the challenges is displaying errors when the username does not fit the specified pattern. How can this be achieved? {{ form_widget(form.username, {'attr':{'pattern': '[a-zA-Z]*'} }) }} ...

angularjsregexhtmlsymfony

Attempting to implement scroll-based animation on my webpage

Having trouble integrating this animation (from codepen) into my website. It works fine on its own, but when I try to add it to my site, it doesn't show up. I want it to appear in the middle at the bottom of the background image. Check out the codepe ...

htmlcssanimation

Steps for customizing a button's look

After installing the MemberPress plugin, I noticed that when I add my custom class, the "Login" button does not change. How can I rectify this issue and ensure that everything functions correctly? Original code <div class="submit"> <input t ...

phpcsswordpress

Utilize a Chrome Content Script to intercept jQuery delegated event handlers and take control

After developing a Chrome extension that intercepts form submissions in specific circumstances, I encountered an issue with a particular website utilizing jQuery's delegate function. My extension is built with raw JavaScript, excluding jQuery to prev ...

javascriptjqueryhtmlajaxforms

Aligning a left-aligned span with inline input buttons while floating to the right

I am struggling with aligning buttons to the right side of a div while keeping everything displayed in line. Currently, the buttons appear below the span rather than beside it. I have attempted setting the button's display to "inline" and "inline-bloc ...

htmlcssasp.netforms

What is the functionality of CSS radio tabs?

Can anyone provide a breakdown of how the final section of this code operates? Specifically: [type=radio]:checked { } [type=radio]:checked ~ .content { z-index: 1; } I am brand new to CSS and wanted to experiment with creating interactive CSS tabs, whi ...

htmlcsstabsradio-button

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width ...

javascripthtmlcssgoogle-chrome-extensionsidebar

Can you simulate a line break without actually using a line break tag?

Could you please review the following code snippet: <span class="something"> <label>test1</label><br/> <label>test2</label><br/> <label>test3</label> </span> Instead of using <br& ...

css

Obtaining URL content in PHP using file_get_contents from a dynamically generated URL in an HTML document

Is there a way to retrieve information using file_get_contents from a dynamically created URL within the source code of a webpage that has already been fetched with file_get_contents? Here is an example scenario: $link = $_POST['link']; $html = ...

phphtmlregexfile-get-contents

Auto-scroll feature malfunctioning

My auto scroll function using jQuery isn't working, here is my CSS: #convo_mes{ text-align:left; width:98%; height:80%; background:#fff; border:1px solid #000; overflow-x:auto; } And in my JavaScript: $(".mes").click(functio ...

javascriptjquerycss

Selecting a specific element from a group of elements sharing the same class using JQuery

Is there a way to target individual elements from a group of elements that share the same classes or other properties without assigning different classes to each element? I need to be able to work on each element separately. I have attempted this approach, ...

javascriptjqueryhtmlcss

Ways to change the background color of a Bootstrap row excluding column padding

I'm working on adjusting the background to fit within bootstrap's column sizes while still extending across the entire row. Does anyone have suggestions on how to achieve this? Here is what I've tried: .yourcontent { margin-bottom: 5px ...

htmlcsstwitter-bootstrap

Fade effect on vectorial HTML map with Javascript (mouseover)

I am trying to add a fade in and fade out effect to my image switching function, but I have not been able to adapt other fade methods into mine successfully. Do you have any suggestions on how I can achieve this? Here is an example of what I currently ha ...

javascriptjqueryhtmlfadeinonmouseover

"Experiencing technical difficulties: Website not functioning properly on

I recently created this website. While it functions perfectly on desktop computers, I am encountering issues when trying to access it on mobile or tablet devices. My instinct tells me that the problem may be related to a large css animation on the homepa ...

htmlcssanimationmobilecrash

Automating Jenkins Login in C# Script

Accessing jobs in Jenkins requires logging in with a username and password first, as I am unable to access them directly otherwise. When attempting to reach a job at "localhost:xxx/job/some_job_1," I receive a 404 Error unless I am logged in. Using the We ...

c#html.netjenkinsjenkins-plugins

Should input fields be placed inside separate columns or share a column in Bootstrap to keep them together while being right justified?

When using Bootstrap, is it better to place separate input fields inside their own col or share a col to keep them together and right-justified? I have a combo and input that I want to display on the same row at the right-hand side of the screen. If I put ...

htmlcssbootstrap-5

How do I apply border-radius to a grid table that overflows and is scrollable?

CodePen Link I have designed a table using Grid CSS. However, I am facing an issue where I cannot apply border-radius to it due to the overflow: auto property that is necessary. Current Table Design: https://i.sstatic.net/dNehv.png Desired Table Design ...

htmlcss

What is the best way to adjust the height of a row in a Material UI table using CSS

I've been attempting to establish a row height of 30px for a table (https://material-ui.com/components/tables/), but it seems that the minimum I can set is 53. Why is this restriction in place? How can I adjust the row height to 30px using CSS based ...

cssmaterial-ui

What are the best ways to integrate jQuery into a React application?

I am in the process of developing a responsive menu for my react app, but I'm facing some challenges as a newcomer to react. In order to achieve the desired functionality, I am trying to incorporate jQuery for menu toggling. However, when I attempt to ...

jqueryhtmlcssreactjs