SVG Animation Stroke-Dasharray

Question

I am animating this svg stroke changing the dasharray offset. Can both ends of the border be animated, instead of the left end be static and only the other end move and wrap around?

I am being forced to right more stuff here, let me know if it is clear or if I need to explain what I need in a better way. Thanks.

<style>

    .wrapper{
        --height: 185px; 
        width: 300px;
        height: var(--height);
        background: rgba(255,255,255,0);
        margin: auto;
        position: relative;
    }
    
    .image, .image-border{
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 12px !important;
    }
    
    .image{
        max-width: 96% !important;
        top: 1.3%;
        left: 1.8%;
    }
    
    .image-border{
        width: 100%;
        top: -2.3px;
    }
    
    .image-border path{
        fill: none;
        stroke: #824ad8;
        stroke-width: 2.3px;
        stroke-dasharray: 320;
        stroke-dashoffset: 320;
        transition: 1s;
    }
    
    .wrapper:hover .image-border path{
        stroke-dashoffset: 0;
        stroke-dasharray: 320;
        /*stroke-width: 2.3px;*/
    }
    
</style>

<div class="wrapper">
    
    <img class="image" src="https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/03/Screen-Shot-2021-02-12-at-10.48.49-AM.jpg" />
    
    <svg class="image-border" viewBox="0 0 103 65" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;">
        <path d="M1.146,4.244c-0,-1.71 1.388,-3.098 3.098,-3.098l93.804,-0c1.71,-0 3.098,1.388 3.098,3.098l-0,55.767c-0,1.71 -1.388,3.099 -3.098,3.099l-93.804,-0c-1.71,-0 -3.098,-1.389 -3.098,-3.099l-0,-55.767Z"/>
    </svg>
    
</div>

score 2 · Accepted Answer · answered Mar 12 '21 at 03:38

You have to change the stroke-dasharray so that it is twice smaller than when not hovered with a 0 length hole, and to move it to its initial position at the same time so that you have a full stroke correctly centered.

.image-border path{
    fill: none;
    stroke: #824ad8;
    stroke-width: 2.3px;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    transition: 1s;
}
.wrapper:hover .image-border path{
    stroke-dasharray: 160 0;
    stroke-dashoffset: 0;
}

.wrapper{
    --height: 185px; 
    width: 300px;
    height: var(--height);
    background: rgba(255,255,255,0);
    margin: auto;
    position: relative;
}

.image, .image-border{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px !important;
}

.image{
    max-width: 96% !important;
    top: 1.3%;
    left: 1.8%;
}

.image-border{
    width: 100%;
    top: -2.3px;
}

<div class="wrapper">
    
    <img class="image" src="https://wordpress-513216-1810865.cloudwaysapps.com/wp-content/uploads/2021/03/Screen-Shot-2021-02-12-at-10.48.49-AM.jpg" />
    
    <svg class="image-border" viewBox="0 0 103 65" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;">
        <path d="M1.146,4.244c-0,-1.71 1.388,-3.098 3.098,-3.098l93.804,-0c1.71,-0 3.098,1.388 3.098,3.098l-0,55.767c-0,1.71 -1.388,3.099 -3.098,3.099l-93.804,-0c-1.71,-0 -3.098,-1.389 -3.098,-3.099l-0,-55.767Z"/>
    </svg>
    
</div>

SVG Animation Stroke-Dasharray

1 Answers1