Docs

[belayachimarouane]

Hello,
I want to use a svg animated logo in the header. I can’t figure out how to do it so I was thinking if it was possible from the beginning. here is the code :

HTML :

<svg viewBox="0 0 800 600">
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%"
          y="35%"
          class="text--line"
          >
      SPEED
    </text>
    <text text-anchor="middle"
          x="50%"
          y="68%"
          class="text--line2"
          >
      TOUCH
    </text>
    
  </symbol>
  
  <g class="g-ants">
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
  </g>
  
  
</svg>

CSS :

HTML, BODY {
  height: 100%;
  }

$colors: #360745, #D61C59, #E7D84B, #EFEAC5, #1B8798;

BODY {
  background: hsl(200,70,11);
  background-size: .12em 100%;
  font: 16em/1 Arial;
}

.text--line {
  font-size: .5em;
  }

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  }

$max: 5;
$stroke-step: 7%; 
.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: $stroke-step $stroke-step * ($max - 1);
  stroke-width: 3px;
  
  animation: stroke-offset 9s infinite linear;
  
  @for $item from 1 through $max {
    $stroke-color: nth($colors, $item);
    
    &:nth-child(#{$item}) {
      stroke: $stroke-color;
      stroke-dashoffset: $stroke-step * $item;
      }
    }
  }

@keyframes stroke-offset {
  50% {
    stroke-dashoffset: $stroke-step * $max;  
    stroke-dasharray: 0 $stroke-step * $max*2.5;
  }
}

Thank a lot

[John Ezra]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

Alternatively, you can try and see if there is a plugin that will allow you to use SVG animations. However, the easiest way to achieve an animated logo is either by using a GIF file or using HTML5 and CSS animations.

X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[belayachimarouane]

Hello! I have achieved it with only CSS! Thank you!

[Zeshan]

Glad to hear you’ve figured it out! 🙂 Have a good day.

[Denver M]

Hi there belayachimarouane,

I’m also looking to use an animated SVG as my logo. Could you please share how you achieved this?

Thank you!

[Lely]

Hi Denver,

Animated logo was achieved using CSS animation instead of SVG. SVG is not yet supported.
This link might help:
http://www.w3schools.com/css/css3_animations.asp

Always,
X

[belayachimarouane]

Hi Denver,

I did it with CSS as well!

Cheers

[Rad]

Glad to know, cheers!

[Author]

Posts