SVG simple animations

Question

I'm trying to learn how to use SVG elements so I've made simple icon/logo in Illustrator. Then I've used this SVG icon in my example:

@import url(http://fonts.googleapis.com/css?family=Lato);
 body {
  background-color: #2F2724;
  font-family: lato, sans-serif;
}
.main {
  text-align: center;
}
.letterS {
  fill: #fff;
  font-size: 180px;
  text-shadow: 0px 2px 2px #000;
}
#svgHex {
  display: block;
  margin: 40px auto;
  width: 350px;
}
.slogan {
  color: #D0E799;
  font-size: 60px;
  margin-top: 40px;
  margin-bottom: 0px;
  text-shadow: 0px 2px 2px #000;
}
.pSlogan {
  margin-top: 0px;
  font-size: 36px;
  color: #fff;
  text-shadow: 0px 2px 2px #000;
}

<div class="main">

  <svg version="1.1" id="svgHex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="325.099px" height="289.284px" viewBox="-36.337 0 325.099 289.284" enable-background="new -36.337 0 325.099 289.284" xml:space="preserve">

    <g id="Layer_2">
      <polygon fill="none" stroke="#D0E39A" stroke-width="8" stroke-miterlimit="10" points="4.969,74.618 126.212,4.618 
  247.455,74.618 247.455,214.618 126.212,284.618 4.969,214.618  " />
    </g>
    <g>
      <polygon display="none" fill="#FFFFFF" points="-4.712,158.921 -36.337,140.662 -36.337,68.452 -3.882,68.452 -4.712,68.931  " />
      <polygon fill="#FFFFFF" points="-4.712,171.388 -4.712,201.722 -36.337,183.462 -36.337,153.129  " />
      <polygon fill="#FFFFFF" points="21.379,261.787 67.138,261.787 114.762,289.283 69.002,289.283  " />
      <polygon fill="#FFFFFF" points="-36.337,228.302 -36.337,195.93 -4.712,214.189 -4.712,220.305 53.858,254.12 8.381,254.12  " />
    </g>
    <g>
      <polygon display="none" fill="#FFFFFF" points="257.137,158.921 288.762,140.662 288.762,68.452 256.307,68.452 257.137,68.931  
  " />
      <polygon fill="#FFFFFF" points="257.137,171.388 257.137,201.722 288.762,183.462 288.762,153.129  " />
      <polygon fill="#FFFFFF" points="231.046,261.787 185.286,261.787 137.663,289.283 183.423,289.283  " />
      <polygon fill="#FFFFFF" points="288.762,228.302 288.762,195.93 257.137,214.189 257.137,220.305 198.568,254.12 244.044,254.12  
  " />
    </g>
    <text transform="matrix(1 0 0 1 78.5125 208.6184)" class="letterS">S</text>
  </svg>

  <h1 class="slogan">BEST DESIGNS</h1>
  <p class="pSlogan">for your bussines</p>
</div>

Almost all code inside is generated by Illustrator. I've added id="svgHex" to SVG and class="letterS" to the "S" letter inside hexagon.

Now I want to animate those white elements outside hexagon but I don't know how to access them in CSS. I've tried to add a class to individual polygons and play with display but nothing worked so far. I don't really care about any specific animation, just want to learn how to use them at all.

I'm no sure if im doing it all good or its all a bad approach and there is a better way to make this kind of icon animations.

Any advice will be appreciated. I'm a beginner so don't hate, please :)

Answer 1

In addition to @web-tiki's answer, you can also apply :hover and keyframed animations to selected 'components / elements' of the SVG by applying IDs & Classes.

Hover the "S" for instance.

JSfiddle Demo

@import url(http://fonts.googleapis.com/css?family=Lato);
 body {
  background-color: #2F2724;
  font-family: lato, sans-serif;
}
.main {
  text-align: center;
}
.letterS {
  fill: #fff;
  font-size: 180px;
  text-shadow: 0px 2px 2px #000;
}
#svgHex {
  display: block;
  margin: 40px auto;
  width: 350px;
}
.slogan {
  color: #D0E799;
  font-size: 60px;
  margin-top: 40px;
  margin-bottom: 0px;
  text-shadow: 0px 2px 2px #000;
}
.pSlogan {
  margin-top: 0px;
  font-size: 36px;
  color: #fff;
  text-shadow: 0px 2px 2px #000;
}
svg text {
  transition: fill 0.5s ease;
}
svg text:hover {
  fill: red;
}
@keyframes blinky {
  0% {
    fill: none;
  }
  100% {
    fill: white;
  }
}
#vert-l,
#vert-r {
  animation: blinky 2s infinite;
}

<div class="main">

  <svg version="1.1" id="svgHex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="325.099px" height="289.284px" viewBox="-36.337 0 325.099 289.284" enable-background="new -36.337 0 325.099 289.284" xml:space="preserve">

    <g id="Layer_2">
      <polygon fill="none" stroke="#D0E39A" stroke-width="8" stroke-miterlimit="10" points="4.969,74.618 126.212,4.618 
  247.455,74.618 247.455,214.618 126.212,284.618 4.969,214.618  " />
    </g>
    <g>
      <polygon id="vert-l" fill="none" points="-4.712,158.921 -36.337,140.662 -36.337,68.452 -3.882,68.452 -4.712,68.931  " />
      <polygon fill="#FFFFFF" points="-4.712,171.388 -4.712,201.722 -36.337,183.462 -36.337,153.129  " />
      <polygon fill="#FFFFFF" points="21.379,261.787 67.138,261.787 114.762,289.283 69.002,289.283  " />
      <polygon fill="#FFFFFF" points="-36.337,228.302 -36.337,195.93 -4.712,214.189 -4.712,220.305 53.858,254.12 8.381,254.12  " />
    </g>
    <g>
      <polygon id="vert-r" fill="none" points="257.137,158.921 288.762,140.662 288.762,68.452 256.307,68.452 257.137,68.931  
  " />
      <polygon fill="#FFFFFF" points="257.137,171.388 257.137,201.722 288.762,183.462 288.762,153.129  " />
      <polygon fill="#FFFFFF" points="231.046,261.787 185.286,261.787 137.663,289.283 183.423,289.283  " />
      <polygon fill="#FFFFFF" points="288.762,228.302 288.762,195.93 257.137,214.189 257.137,220.305 198.568,254.12 244.044,254.12  
  " />
    </g>
    <text transform="matrix(1 0 0 1 78.5125 208.6184)" class="letterS">S</text>
  </svg>

  <h1 class="slogan">BEST DESIGNS</h1>
  <p class="pSlogan">for your bussines</p>
</div>

I should mention that if you use multiple named layers in Illustrator, I believe that these layer names are exported out as ID's directly into the SVG code.