Struggling to make the clip-path function properly with the logo on my website

Looking to add some animation to my company logo, giving it the appearance of being drawn. I have the original SVG with the logo paths and separate paths set up to act as a mask for the animation.

However, I'm encountering an issue where the mask doesn't seem to be covering the original logo, even though visually it should be doing so.

If anyone has any suggestions or solutions, I would greatly appreciate the help!

You can find my current code on CodePen at this link: http://codepen.io/MRSYDSTER/pen/XpWwdB

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Grip Dashing</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

    <style>
    </style>
</head>


<body>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
                    <path id="r" clip-path="url(#myClip)" fill="#44A647" d="M7.066,8.727L7.001,8.29H6.476v2.617H7.13V9.301c0.251-0.308,0.397-0.453,0.564-0.453
                        c0.076,0,0.22,0.02,0.276,0.04L8.045,8.27C7.955,8.244,7.869,8.232,7.743,8.232C7.474,8.232,7.313,8.385,7.066,8.727z"/>
                    <polygon id="i" clip-path="url(#myClip)" fill="#44A647" points="8.539,8.794 8.941,8.794 8.941,10.907 9.596,10.907 9.596,8.29 8.539,8.29     "/>
                    <path id="gp" clip-path="url(#myClip)" fill="#44A647" d="M11.56,5.534c-0.37,0-0.748,0.061-1.13,0.181c-0.384-1.318-1.596-2.245-2.996-2.245
                        c-1.403,0-2.629,0.94-3.004,2.271C4.34,5.735,4.251,5.731,4.161,5.731c-1.896,0-3.438,1.542-3.438,3.438
                        c0,0.865,0.322,1.692,0.909,2.329c0.448,0.484,0.941,0.808,1.531,0.966c0.093,0.025,0.337,0.078,0.579,0.113
                        c0.221,0.032,0.439,0.046,0.525,0.052c0.094,0.005,0.185,0.008,0.269,0.008c0.89,0,1.337-0.354,1.337-1.181V8.418
                        C5.42,8.292,5.107,8.246,4.786,8.246c-0.965,0-1.415,0.611-1.415,1.42c0,0.691,0.327,1.252,1.073,1.252
                        c0.302,0,0.522-0.106,0.774-0.318v0.947c0,0.45-0.213,0.576-0.707,0.576
                    	 .
                    	 . [Code Continues]
   
</script>

</body>
</html>
jquerycssanimationsvg

Answer №1

After extracting the clip path from the SVG file, I have generated the following output:

<svg viewBox="0 0 16 16" width="200" height="200">
  <g fill="#000" fill-opacity="0.2" stroke="#000" stroke-width="0.05">
    <path d="M10.5,8.9c0.6-0.2,1.7-0.8,1.7,0.8c0,0.8-0.6,0.9-1.6,1" />
    <path d="M9.4,8c-0.6-1.5,1.1-2.2,2.1-2.2c2.4,0.1,3.2,1.6,3.5,3.3
    c0.4,2.7-3.3,4.1-4.2,3.5c-0.3-0.2-0.5-0.7-0.6-1.7c0-1.2,0.2-1.1
    -0.1-2.7" />
    <path d="M8.5,8.5c0.5,0,0.7,0.1,0.8,0.1s-0.1,1.3,0,2.4" />
    <path d="M6.9,9.1c0.4-0.2,0.9-0.5,1.3-0.7" />
    <path d="M6.8,11c-0.1-0.9-0.2-1.9-0.3-2.8" />
    <path d="M4.7,5.8c0.2-1.3,1.5-2.1,2.8-2.1s2.2,0.9,2.7,2.1" />
    <path d="M5.2,10.3c-0.5,0-0.8,0.4-1.1,0.1c-0.4-0.3-0.4-1-0.2-1.4
    c0.4-0.7,1.4-0.7,1.7-0.4c0.1,0.1,0,0.3,0,0.3c0,1.3,0,2.6,0,
    2.7c-0.3,0.8-1.8,0.7-2.7,0.4c-1.3-0.5-2.2-2.2-1.8-3.8c0.4-1.5,
    2-2.2,3.3-2.1c1.1,0.1,1.5,0.4,1.7,0.7" />
  </g>
</svg>

It seems like you anticipated the stroke elements to be included in the masking area of the clipping path. However, that is not how clipping paths function. According to the SVG specifications,

The actual geometry of each child element within a 'clipPath' defines a 1-bit mask without considering rendering properties like ‘fill’, ‘stroke’, ‘stroke-width’. This mask represents the outline of the associated graphics. Anything outside this outline will be masked out.

In essence, the `stroke-width` attributes in your clipping path do not impact the outcome. To achieve the desired effect, you need to convert them into filled regions or transform the logo into stroked paths with no fills. The latter option may alter the appearance slightly but will align better with your intended outcome.

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

Is there a way to prevent text flipping using CSS or jQuery?

Is there a way to prevent the contents of an object from flipping when it is rotated +180°? I want to keep everything inside readable and avoid any flipping effects. ...

csstextrotationflip

What is the best way to cancel a long-polling request in jQuery?

I am currently implementing... $.getJSON(url + "&callback=?", function (b) { ....... }); for a long-term polling request. There are instances where I need to terminate the ongoing request. Is there a way to achieve this? ...

jqueryjsonlong-polling

Steer clear of retrieving all the elements from the HTML DOM at once

Scenario I am working on a HTML5+CSS+JS slideshow project that needs to be synchronized across 50 clients in a local area network using a single wireless router. Challenge Due to the heavy content, particularly images, of the slides, I intend to dynamic ...

javascripthtmljquery

What could be causing my React Router component to display incorrect styling?

While working with react-router, I encountered an issue where the text from the routed page started appearing in the navbar. Even though I separated it as its own component and it functions correctly, this specific problem persists. As a newcomer to React, ...

javascriptcssreactjsreact-router

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

https://jsbin.com/haluhifuqe/edit?html,js,output I'm facing an issue with my HTML & JavaScript code - when I click the button, it doesn't open. Can anyone help me out? <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

javascripthtmlcss

Steps for embedding a custom function in a switch statement

I am attempting to run a switch statement based on the argument provided to the function below. I have been trying to call different functions depending on the argument passed. However, I encountered an Uncaught ReferenceError in the beginning of the .js f ...

javascriptjqueryswitch-statementaddclass

Pass the object either in JSON format or as a variable using the drag and drop feature

Here's a quick question: when using the Drag and Drop system, I'm not sure which method is better. Is it more efficient to : utilize setData and getData to transfer a JavaScript object? (Utilizing JSON conversion since setData only passes st ...

javascriptjqueryjsondrag-and-drop

Fade or animate the opacity in jQuery to change the display type to something other than block

I am currently using display: table and display: table-cell to vertically align multiple divs. However, I have encountered an issue when animating the opacity with jQuery using either fadeTo() or fadeIn. The problem is that it always adds inline style di ...

javascriptjqueryhtmlcss

What is the best way to display a loading animation until the entire wizard has finished loading in the jQuery-steps

I need help with implementing a loading animation using the jQuery-steps plugin in my wizard type form. I want the animation to be displayed until the entire wizard has loaded completely, but I'm unsure of how to enable this feature as there is a labe ...

javascriptjqueryjspjquery-pluginsjquery-steps

Tips on avoiding vertical overflow while permitting horizontal overflow

I have been working on implementing a zoom feature for images, along with displaying a set of thumbnail images at the bottom of the zoomed image. While the zoom functionality is working correctly, I am facing an issue with the overflow of the tiny images ...

htmlcss

A method for removing script files that have been loaded using the $.getScript() function

Apologies for any language errors. I am in the process of creating an interactive chess website. On this site, users can select lessons from a menu, which are then loaded using $.getScript(). Each lesson file contains a variable lesson that holds a large J ...

jquerygetscript

How can I make the Search String stand out in the mysql result?

Here's the code I've written up to now <form method="post" name="search"> <input type="search" name="k" placeholder="Enter Keywords"> <input type="submit" value="Search"> </form> <? $skw = $_POS ...

phphtmlcss

Access in-depth data by clicking on a map to get detailed information

Recently, I took on the challenge of managing a golf club website after the original creator had to step away. One urgent issue I need to address is fixing a malfunctioning flash animation that provides information about each hole on the course. My plan is ...

javascriptcsshtmldhtml

What could be the reason for the d-flex class in bootstraps preventing my div from expanding to 100% width?

I have a div where I need to display two elements next to each other: a search input field and the corresponding submit button. My attempt so far was to achieve this using the following code: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn. ...

htmlcssflexboxbootstrap-4

A reliable cross-browser solution for CSS sticky positioning

I designed a layout with 1 header and 3 vertical panels. The challenge is to ensure that all the panels can expand or contract horizontally to fill up 100% of the page width collectively, while also taking up 100% of the vertical space below the header (wh ...

cssflexboxcss-positionsticky

Continue scrolling once you reach the fixed-positioned div

live demo html <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> css .container{ margin: 0; padding: 0; ...

jqueryhtmlcss

Unable to display information in jvectormap using json format

For the past 48 hours, I've been struggling to find a solution to a persistent issue I'm facing. The problem arises when I try to integrate data from an MSSQL database into a map using the jvectormap plugin for Turkey. Despite dynamically assigni ...

javascriptjqueryjsonajaxasp.net-mvc

The PHP implementation of Google reCAPTCHA is malfunctioning when combined with AJAX

I have a form on 100.php that makes an AJAX call to 200.php. <html> <head> <!-- Include the reCAPTCHA API JavaScript library provided by Google --> <script src='https://www.google.com/recaptcha/api.js'></script ...

javascriptphpjqueryhtmlajax

What is causing the Font Awesome icons to not display in this HTML code?

Utilizing Font Awesome in HTML is my goal, however, the code snippet provided is not rendering the desired outcome. I have stored the Font Awesome directory within my project folder as well... <?php include '../config/sessionhandling.php'; // ...

htmlcssbootstrap-4font-awesome

The most efficient method for interacting with externally generated HTML in Rails

For my Rails page help documentation, I utilized the HelpNDoc help authoring tool to generate a folder containing HTML pages and additional folders for JavaScript, images, stylesheets, and libraries. Now I am seeking the most efficient way to integrate thi ...

htmlcssruby-on-rails-4helpndoc