Animate just a single path in an SVG file without any cropping effects

For my logo, I am incorporating an SVG and aiming to create a push-down effect on one of the letters:

body {
  background: skyblue;
}

@-webkit-keyframes push {
  0%,
  25%,
  75%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

#Path_9-2 {
  -webkit-animation: push 2s;
  animation: push 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="258.313" height="58.791" viewBox="0 0 258.313 58.791">
  <defs>
    <filter id="Path_9" x="35.958" y="17.221" width="70.528" height="41.57" filterUnits="userSpaceOnUse">
      <feOffset dx="2" dy="4" input="SourceAlpha"/>
      <feGaussianBlur stdDeviation="1" result="blur"/>
      <feFlood flood-opacity="0.161"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="Group_69" data-name="Group 69" transform="translate(-38 -19)">
    <path id="Path_7" data-name="Path 7" d="M18,17.15a13.73,13.73,0,0,0-9.31,3.42,4.3,4.3,0,0,0-4.22-3.42A4.43,4.43,0,0,0,0,21.71V47.24a4.49,4.49,0,0,0,4.56,4.62,4.44,4.44,0,0,0,4.49-4.62"...

The issue lies with cropping the 'o' when it is pushed down. I have attempted using overflow: visible and adjusting the height but to no avail.

Answer №1

I have adjusted the filter's size and position and added svg{overflow:visible} as you suggested. The missing element was the shadow of the shape. Please review.

body{background:skyBlue;}

 @-webkit-keyframes push {
0%,
25%,
75%,
100% {
-webkit-transform: translateY(0);
        transform: translateY(0);
}
50% {
-webkit-transform: translateY(8px);
        transform: translateY(8px);
}
}
#Path_9-2{

    -webkit-animation: push 2s;
    animation: push 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}


svg{overflow:visible}
<svg width="258.313" height="58.791" viewBox="0 0 258.313 58.791">
  <defs>
    <filter id="Path_9"  filterUnits="userSpaceOnUse">
      <feOffset dx="2" dy="4" input="SourceAlpha"/>
      <feGaussianBlur stdDeviation="1" result="blur"/>
      <feFlood flood-opacity="0.161"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g id="Group_69" data-name="Group 69" transform="translate(-38 -19)">
    <g transform="matrix(1, 0, 0, 1, 38, 19)" filter="url(#Path_9)">
      <path id="Path_9-2" data-name="Path 9" d="M84.61,51.79H53.83a17.29,17.29,0,0,1,0-34.57H84.61a17.29,17.29,0,0,1,0,34.57ZM53.83,25.85a8.66,8.66,0,1,0,0,17.32H84.61a8.66,8.66,0,1,0,0-17.32Z" transform="translate(0 0)" fill="#fff"/>
    </g>    
  </g>
</svg>

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

I noticed a spontaneous appearance of a circle within my CSS animation

Could someone please help me understand why there is a little blue circle appearing on the bottom right edge of the white circle at the end of my animation? I have tried resetting the animation from 100% to 0% but it hasn't helped. The code is writte ...

Different Ways to Adjust Bootstrap Image Height Based on Parent Div Height

How can I ensure that regardless of the image's dimensions, it will always be centered within a div with a height of 500px? It appears similar to the second green example. <div class="container"> <div class="r ...

Load data dynamically as the user scrolls down using Bootstrap's Model (Lazy Load) functionality

I am trying to implement an AJAX call in a Bootstrap modal that has scrolling. The goal is to load data from the server when the user scrolls to the bottom of the modal, not the entire page. I have tried using jQuery code for this purpose, but it doesn&apo ...

Tips for effectively utilizing the jQuery closest method

This webpage allows me to upload images to a database and then display them again. When uploading an image, a comment can be added to it using a textarea. When the images are displayed again, the comments are shown and editable as well. Recently, I added a ...

Unable to apply color changes with jQuery

As I delve into learning jQuery, I encountered an issue while attempting to change the color of a tr element. Strangely, I was successful in updating other CSS attributes like font-style. According to my understanding so far, we use the following syntax to ...

Tips for designing custom dropdown menus within the WordPress menu editor

Just starting out with coding. I recently learned how to customize my website's navigation menu using menus section in the Wordpress dashboard. However, I'm struggling to create dropdown menus for child/sub pages without manually entering all th ...

What steps can I take to ensure the image remains fixed in its position when the browser width is reduced?

Recently, I encountered a challenge with my media query where I wanted to align a button next to another one when the browser width was reduced to 991px. However, instead of staying in place, the button started sliding underneath the other button as I cont ...

Placing my image on the left side, I desire to align my paragraph on the right

Despite my extensive online research, I found myself unable to achieve my desired outcome. I am struggling to align my text either to the left or right of my image. Take a look at the following code : HTML : <div class="surfooter"> ...

Steps to add a backdrop to a DIV while maintaining a see-through background for the child image

I'm looking to create a header with a centered image and a background color that doesn't show through the image. Can anyone assist me with this? Here is the HTML code: <div id="header"> <a href="home.html"><img id="headerpic" s ...

Using CSS3 keyframe animations to stop and remain on the final frame

I'm having trouble getting a CSS3 keyframe animation to stick at the last frame after it has completed. I thought setting animation-fill-mode to forwards would work, but it doesn't seem to be doing anything. .animatedSprite { .animation-nam ...

What is the most efficient way to import all scripts, stylesheets, and markup using just one JavaScript file?

In the realm of a fixed small snippet of code that cannot be altered after deployment (in an RIA), all elements are required to be loaded through a bootstrapper.js file: <div id="someDivID"></div> <script type="text/javascript" src="bootstr ...

What could be causing the labels to stay stagnant while the image moves?

What could be causing the labels to remain static while the images (front and back of human anatomy) move on Galaxy S8 and iPhones? Check out the website at . Your assistance is greatly appreciated. ...

What is the best way to retrieve the URL of a website using scrapy?

Currently, I am faced with the challenge of scraping the Amazon website using Scrapy. While I have successfully extracted items like product titles and prices, I am struggling to figure out how to extract the URL of a product (as shown in the image at the ...

Several radial progress charts in JavaScript

While attempting to recreate and update this chart, I successfully created a separate chart but encountered difficulties with achieving the second progress. The secondary chart <div id="radial-progress-vha"> <div class="circle-vha ...

What is the best way to maintain the position of an overlay on screen when dealing with multiple resolutions?

I'm struggling to find a solution that works for me - I could really use some assistance. My CSS skills are not up to par... Currently, I have a video embedded in a web page with a text overlay. The problem arises when the content is displayed on a l ...

What are the steps to modify the appearance of an input box in IE7 when it is in focus?

It's common knowledge that IE7 has its fair share of issues... I've scoured through countless posts here and on Google, all pointing me towards setting the style manually with onfocus() and onblur(). Alas, nothing seems to be working! This is t ...

Learn how to divide column layouts into precise measurements and create a container that cannot be scrolled using Angular Nebular

I am currently utilizing the nebular theme and have set a fixed header. I am attempting to split columns with specified width and height, but for some reason, my width and height properties in the local component scss are not affecting the column layouts c ...

Angular2 - Incorporating a New Attribute

I am working with the following Angular2 code: <ngx-datatable-column prop="id" name="ID"> <template ngx-datatable-cell-template let-row="row" let-value="value"> <a [routerLink]="['/devicedtls',r ...

HTML table's horizontal width does not match the header's size

I'm having an issue with my HTML table. The rows are not aligning properly with the header width. Can anyone help with fixing this? I'm not very familiar with CSS, so any guidance would be greatly appreciated. Here is an example of the HTML sour ...

jQuery iScroll: The scrolling feature does not stop when reaching the end of the content

Recently, I've been utilizing iScroll for horizontal scrolling on a list. At first, everything seems to be working fine, but as I scroll towards the end (right to left), the content reaches its conclusion yet the scrolling continues beyond that. I&apo ...