- created logo FreePlanet in SVG animation !

src/components/logo/index.ts

@@ -0,0 +1 @@
+export {default as Logo} from './logo.vue'

src/components/logo/logo.scss

@@ -0,0 +1,48 @@
+.svgclass{
+  color: white;
+  transform: translateY(0px);
+
+}
+
+.svgclass_animate {
+  transform: translateY(-70px);
+  color: red;
+}
+
+#sun {
+  animation: around 5s infinite;
+
+}
+
+@keyframes gravity{
+  0%{
+    transform: rotateY(0deg);
+  }
+  100%{
+    transform: rotateY(360deg);
+  }
+}
+
+
+@keyframes around {
+  0% {
+    cx: 20;
+    cy: 22;
+  }
+  20% {
+    cx: 25;
+    cy: 24;
+  }
+  50% {
+    cx: 40;
+    cy: 26;
+  }
+  80% {
+    cx: 55;
+    cy: 24;
+  }
+  100% {
+    cx: 60;
+    cy: 22;
+  }
+}

src/components/logo/logo.ts

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+
+require('./logo.scss')
+
+import { TimelineLite, Back } from 'gsap'
+
+@Component({
+
+})
+export default class Logo extends Vue {
+  svgclass: string = 'svgclass'
+  created() {
+    this.animate()
+  }
+
+  animate () {
+    const timeline = new TimelineLite()
+
+    timeline.to('#sun', 5, {
+      cy: 20,
+      cx: 60,
+      ease: Back.easeInOut // Specify an ease
+    })
+
+  }
+
+  public logoimg() {
+    return process.env.LOGO_REG
+  }
+
+}

src/components/logo/logo.vue

@@ -0,0 +1,7 @@
+<template>
+    <div id="logo">
+        <img id="logoimg" alt="FreePlanet" :src="`assets/${logoimg()}`">
+    </div>
+</template>
+<script lang="ts" src="./logo.ts">
+</script>