Hi,

I would like to use a rectangle that move (left to right) to reveal an element / image

like this

The white box shall be the image to display

But I’m already block at my svg animation

<svg viewBox="0 0 265.135 68.642" xmlns="http://www.w3.org/2000/svg">
<g x="-55.790085" y="0.79151762">
    <rect
       style="fill:#ffcc00;stroke-width:2.46513;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;stop-color:#000000"
       width="55.465603"
       height="151.60599"       
       transform="rotate(45)" />
       <animate
      attributeName="x"
      values="-55.790085;265"
      dur="5s"
      repeatCount="indefinite" />
  </g>
</svg>

Because the rectangle is not moving :'(

Any ideas ?

Thanks.

No comments yet!

Web Development

!webdev@programming.dev

Create post

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

  • Follow the programming.dev site rules
  • Keep content related to web development
  • If what you’re posting relates to one of the related communities, crosspost it into there to help them grow
  • If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

Wormhole

Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

Credits

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

Community stats

  • 9

    Monthly active users

  • 124

    Posts

  • 256

    Comments