Learning Web 08: SVG Lawn

I’m starting to get interested in actually running a lawn business. Decided to at least make a website for it instead of just some list of services.

I want to make a silly animation where some SVG grass gets mowed. Nothing super fancy, just kind of silly that might just grab attention. I’ve been thinking maybe as part of the front page where the business name is big maybe have a big mower that goes forward and mows grass that grows over time? Or maybe just some stupid thing where when you first load the page some grass is there and it gets mowed down. Maybe for brush cutting services there can be a bunch of brush that has to get cut down… I dunno.

I figure it’s a fun exercize for me to learn and maybe if someone else wants some silly thing like that on their page I’ll know how to do it a bit.

I do actually have some experience with SVG editing. A really long time ago after I’d graduated college but before my first gig I helped open a martial arts studio with my sensie at the time. I did the business side of things including vendor relations and some of the marketing stuff. One of the things I did was make a logo that we could use to make shirts and such. I downloaded and compiled sodipodi and used it to make a logo based on the Tang Soo Do patch.

But that was a long time ago so now I’m doing the learning all over again. So to make grass…

Search results

Took a bit of hunting through results but ran into this that was super easy to follow. I made a small yard of overgrown grass pretty easily after some retakes at the initial blade. Still just following the directions in the linked blog but I was just repeatedly unhappy with the way it looked until I deemed it acceptable. Once that happened the lawn was created in mere moments.

Cut grass

Just draw a div over it?

Looks good to me! I’ll be able to control that with simple css even and animate it across the screen.

The code:

<div style="border: 1px solid black; position: relative;">
  <img src="/images/learning-web-08-field-01.svg" width="100%"/>
  <div style="position: absolute; background-color: white; top: 0; right: 0; left: 0; bottom: 60%;"></div>
</div>

Animated cut

To make the cut I just change the right side of the clipping div in an animation.

<div style="position: relative;">
  <img src="/images/learning-web-08-field-01.svg" width="100%"/>
  <div id="cut0" style="position: absolute; background-color: white; top: 0; right: 100%; left: 0; bottom: 60%;"></div>
</div>

<style>

#cut0 {
  animation: move0 5s linear normal infinite;
}

@keyframes move0 {
  from {
    right: 100%;
  }
  to {
    right: 0;
  }
}
</style>

Growing

To grow I change the bottom to make it shrink up to the top. In this I used ease-in but later I end up not being able to.

<div style="position: relative;">
  <img src="/images/learning-web-08-field-01.svg" width="100%"/>
  <div id="cut1" style="position: absolute; background-color: white; top: 0; right: 0; left: 0; bottom: 60%;"></div>
</div>

<style>

#cut1 {
  animation: move1 30s ease-in 4s normal infinite;
}

@keyframes move1 {
  from {
    bottom: 60%;
  }
  to {
    bottom: 100%;
  }
}
</style>

Cut & grow

This one was harder to do because if you look up how to chain different animations together you get a few pages saying, “Oh sure, just make a bunch of animations and start them at different times with animation-delay.” Unfortunately, animation-delay only effects the start so when you go into the next loop all the timing gets munged up. I found a better solution was to split the total time into sections and program the entire sequence.

<div style="position: relative;">
  <img src="/images/learning-web-08-field-01.svg" width="100%"/>
  <div id="cut2" style="position: absolute; background-color: white; top: 0; right: 00%; left: 0; bottom: 60%;"></div>
</div>

<style>
#cut2 {
  animation: 30s move2 linear infinite;
}

@keyframes move2 {
  0% {
    right: 100%;
  }
  20% {
    right: 0;
  }
  22% {
    bottom: 60%;
  }
  100% {
    bottom: 100%;
  }
    
}
</style>

with mower

To make a “mower” I’m just going to make a div that is big enough. For real this would simply be an image that is probably animated as well. It can just have the activity constantly going around because it’s just going to move across the screen and get hidden.

I add this div with float: right to just have it always to the right side. Then I also set the containing div (what holds both the image and the clip div) to have overflow: hidden to hide the mower when it moves past the edge. Then I just set the final right side of the clip div to negative the width of the mower. The rest stays the same.

I can make the mower actually larger than the clip div even though it contains it because it is the outer div that does the hiding. This would let me have wheels on the thing and maybe even a spinning blade.

I also decided to tweak the depth setting of the mower.

<div style="position: relative; overflow: hidden;">
  <img src="/images/learning-web-08-field-01.svg" width="100%"/>
  <div id="cut3">
    <div id="mower"></div>
  </div>
</div>

<style>

#cut3 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 40%;
  right: 0;
  background-color: white;

  animation: 30s move5 linear infinite;
}

#mower {
  width: 5em;
  height: 100%;
  background-color: black;
  position: relative;
  border: 1px solid orange;
  float: right;
}

@keyframes move5 {
  0% {
    right: 100%;
  }
  20% {
    right: -5em;
  }
  22% {
    bottom: 40%;
    right: -5em;
  }
  100% {
    bottom: 100%;
    right: -5em;
  }
    
}
</style>