Moving Bus Animation

#Made by Devansh mishra# 
<!DOCTYPE html>
<html>
  <head>
    <title>Devansh Mishra</title>
    <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
  </head>
  <body>
   <!--Titles-->
   <h1 align='center'>School Bus</h1>
   <h2 align='center'>My first moving SVG</h2>
   <h3 align='center'>I hope you will like it</h3>
   
   <!--Main SVG-->
   <svg width="100%" height="500">     
 

 
      <!--Road the black background-->
      <rect x="0" y="350" width="100%" height="100" fill="black" rx="0" ry="0"/>
 
      <!--Road the white parts-->    
      <rect x="0" y="395" width="60" height="10" fill="white" rx="0" ry="0">
          <animate attributeName="x" from="0" to="960" dur="0.4s" fill="freeze" repeatCount="indefinite"/>
      </rect>
      
      <!--The bus main body-->
      <rect x="30" y="280" width="300" height="110" fill="#febc10" rx="5" ry="5" stroke="black" stroke-width="1"/>
      
      <!--The bus wheels-->
      <circle r="15px" fill="#726d82" cx="90" cy="390" stroke="#36353a" stroke-width="10">
          <animate attributeName="cy" from="389" to="391" dur="0.05s" fill="freeze" repeatCount="indefinite"/>
      </circle>    
      <circle r="15px" fill="#726d82" cx="280" cy="390" stroke="#36353a" stroke-width="10">
          <animate attributeName="cy" from="391" to="389" dur="0.05s" fill="freeze" repeatCount="indefinite"/>
      </circle> 

      <!--The bus the glass of the bus-->
      <rect x="100" y="290" width="40" height="40" fill="#c2f6ff" rx="5" ry="5" stroke="#726d82" stroke-width="2"/>
      <rect x="145" y="290" width="40" height="40" fill="#c2f6ff" rx="5" ry="5" stroke="#726d82" stroke-width="2"/>
      <rect x="190" y="290" width="40" height="40" fill="#c2f6ff" rx="5" ry="5" stroke="#726d82" stroke-width="2"/>
      <rect x="235" y="290" width="40" height="40" fill="#c2f6ff" rx="5" ry="5" stroke="#726d82" stroke-width="2"/>
      <rect x="280" y="290" width="40" height="40" fill="#c2f6ff" rx="5" ry="5" stroke="#726d82" stroke-width="2"/>

      
      <rect x="40" y="290" width="50" height="70" fill="#c2f6ff" rx="5" ry="5" stroke="#726d82" stroke-width="2"/>
      <rect x="40" y="365" width="25" height="20" fill="#c2f6ff" rx="3" ry="3" stroke="#726d82" stroke-width="2"/>
      <ellipse cx="80" cy="367" rx="5" ry="2" fill="#36353a" stroke="#726d82" stroke-width="1" /> 
       
       <!--The bus accesories-->
       <rect x="100" y="340" width="220" height="4" fill="#36353a" rx="2" ry="2">
           <animate attributeName="y" from="339.5" to="340.5" dur="0.05s" fill="remove" repeatCount="indefinite"/>
       </rect>
       <rect x="100" y="360" width="220" height="4" fill="#36353a" rx="2" ry="2">
           <animate attributeName="y" from="359.5" to="360.5" dur="0.05s" fill="remove" repeatCount="indefinite"/>
       </rect>
       <text x="160" y="357" fill="#36353a">SCHOOL BUS
           <animate attributeName="y" from="356.5" to="357.5" dur="0.05s" fill="remove" repeatCount="indefinite"/>
       </text>
       
       <!--The bus side lights-->
       <rect x="31" y="374" width="7" height="15" fill="#e83232" rx="3" ry="3" />
       <rect x="31" y="374" width="7" height="15" fill="#e83232" rx="2" ry="2" />
       <rect x="314" y="379" width="15" height="10" fill="#e83232" rx="2" ry="2" />
    </svg>
  </body>
</html>

Comments

Post a Comment

Popular posts from this blog

Chandrayan 3 Mission Special :Animation

<!--   Creator : Devansh Mishra          --> <!doctype html> <html>    <head>      <style> .full {     animation: full 2s linear 40s 1;     animation-fill-mode: forwards; } @keyframes full {     100% {         opacity: 0     } } h2 {     font-size: 30px;     color: mediumseagreen;     font-family: tahoma;     opacity: 0;     animation: ro 2s linear 50s 1;     animation-fill-mode: forwards;     text-align: center;     z-index: 10; } .rover {     width: 400px;     height: 480px;     position: absolute;     background-image: linear-gradient(to top, #eee2e2 0, #e3c09d 15%, #2f2f3a 90%);     margin: auto;     top: -500px;     left: 0;     bottom: 0;     right: 0;     ...
Read more

Python Basic Programs By Devansh Mishra.

Basic programs are given of python which is very useful for Python Beginner's.  1.Hello World print("Hello World") 2.Square Root  number = int(input("enter a number: ")) sqrt = number ** 0.5 print("square root:", sqrt) 3. cube Root def cube_root(x):         return x**(1/3) print(cube_root(27)) 4. Fahrenheit to Celsius temp = float(input("Enter temperature in Fahrenheit: ")) celsius = (temp - 32) * 5/9 print(f"{temp} in Fahrenheit is equal to {celsius} in Celsius")   5. Area of Triangle Height = float(input("Enter Height: ")) Base = float(input("Enter Base: ")) ans = (0.5) * Height * Base print("Area Of Triangle", ans) 6. Area of Circle rad = float(input("Enter Radius Of Circle :")) area = 3.14 * rad * rad print("Area of Circle", area) 7. Armstrong Number in Python from math import * number = int(input("Enter the number : ")) result = 0 n = 0 temp = number; while (temp != 0)...
Read more

" Words moving in circular motion as Tiny Particles " Animation

<!DOCtype html> <html> <style>   body {     margin: 0;     overflow: hidden;   }      a {     position: fixed;     display: inline-block;     margin-left: calc(50vw - 70px);     font-size: 20px;     z-index: 1;     color: white;   } </style> <body>   <script>     let canvas = document.createElement('canvas');     canvas.style.background = '#000'     document.body.appendChild(canvas);     let gl = canvas.getContext("webgl",     {       preserveDrawingBuffer: true     });     let clearPass = program(     {       type: gl.TRIANGLES,       vertexSize: 2,       vertices: [-1, 3, -1, -1, 3, -1], // full screen triangle       shaders: [`             attribute vec2...
Read more