### type="rotate"

<svg width="120" height="120" viewBox="0 0 120 120">
  <polygon points="60,30 90,90 30,90" transform="translate(80)">
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 60 70"
      to="360 60 70"
      dur="10s"
      repeatCount="indefinite" />
  </polygon>
</svg>

### type="scale"

<svg width="120" height="120" viewBox="0 0 220 320">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
      attributeName="transform"
      type="scale"
      from="1"
      to="3"
      dur="2s"
      repeatCount="indefinite" />
  </polygon>
</svg>

### type="translate"

<svg width="120" height="120" viewBox="0 0 220 320">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="150 250"
      dur="2s"
      repeatCount="indefinite" />
  </polygon>
</svg>

### type="skewX"

<svg width="120" height="120" viewBox="0 0 220 220">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
      attributeName="transform"
      type="skewX"
      from="0 0"
      to="50"
      dur="2s"
      repeatCount="indefinite" />
  </polygon>
</svg>

### type="skewY"

<svg width="120" height="120" viewBox="0 0 220 220">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
      attributeName="transform"
      type="skewY"
      from="0 0"
      to="50"
      dur="2s"
      repeatCount="indefinite" />
  </polygon>
</svg>
View Compiled 
@import url(//fonts.googleapis.com/css?family=Lato:400,700,900);

svg {
  border: 3px solid red;
}

html {
  background: #68cc1f;
}

body {
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto;
  padding: 0.5rem;
}

h1, h2 {
  font-weight: 900;
  margin: 2rem 0 0 0;
  line-height: 1.1;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.