Bootstrap Snippet 3D-Waves+Logo using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="hero">
  <svg width="110px" height="142px" viewBox="0 0 210 242" class="logo">
    <g fill="none">
      <g id="Desktop-Landscape" transform="translate(-537.000000, -234.000000)">
        <g id="Logo" transform="translate(542.000000, 240.000000)">
          <polygon id="Polygon" stroke="#FFFFFF" stroke-width="10" points="100 0 199.592921 57.5 199.592921 172.5 100 230 0.407078565 172.5 0.407078565 57.5"></polygon>
          <path d="M42.4314575,171.568542 C73.6734008,202.810486 124.326599,202.810486 155.568542,171.568542 C186.810486,140.326599 186.810486,89.6734008 155.568542,58.4314575 L148.497475,65.5025253 C175.834175,92.8392257 175.834175,137.160774 148.497475,164.497475 C121.160774,191.834175 76.8392257,191.834175 49.5025253,164.497475 C22.1658249,137.160774 22.1658249,92.8392257 49.5025253,65.5025253 L42.4314575,58.4314575 C11.1895142,89.6734008 11.1895142,140.326599 42.4314575,171.568542 Z" id="Oval" fill="#FFFFFF"></path>
          <path d="M60.109127,178.890873 C81.5879631,200.369709 116.412037,200.369709 137.890873,178.890873 C159.369709,157.412037 159.369709,122.587963 137.890873,101.109127 L130.819805,108.180195 C148.393398,125.753788 148.393398,154.246212 130.819805,171.819805 C113.246212,189.393398 84.753788,189.393398 67.1801948,171.819805 C49.6066017,154.246212 49.6066017,125.753788 67.1801948,108.180195 L60.109127,101.109127 C38.630291,122.587963 38.630291,157.412037 60.109127,178.890873 Z" id="Oval" fill="#FFFFFF"></path>
          <path d="M78.1421356,185.568542 C83.8017128,191.22812 91.3487318,194.312821 99.1935625,194.354905 C107.149643,194.397586 114.828973,191.308112 120.568542,185.568542 C132.284271,173.852814 132.284271,154.857864 120.568542,143.142136 L113.497475,150.213203 C121.307961,158.023689 121.307961,170.686989 113.497475,178.497475 C109.665906,182.329043 104.559146,184.383545 99.2472072,184.355049 C94.009919,184.326953 88.9914968,182.275768 85.2132034,178.497475 C77.4027176,170.686989 77.4027176,158.023689 85.2132034,150.213203 L78.1421356,143.142136 C66.4264069,154.857864 66.4264069,173.852814 78.1421356,185.568542 Z" id="Oval" fill="#FFFFFF"></path>
        </g>
      </g>
    </g>
  </svg>
  <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="wave">
    <path>
      <animate attributeName="d" values="M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100;    M0,60 A50,50 0 0,1 50,50 A50,50 0 0,0 100,50 L100,100 L0,100;    M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100" dur="10s" repeatCount="indefinite" rotate="auto"></animate>
    </path>
    <path>
      <animate attributeName="d" values="M0,50 A50,150 0 0,0 40,50 A50,100 0 0,1 100,50 L100,100 L0,100; M0,30 A50,300 0 0,0 40,50 A50,150 0 0,1 100,50 L100,100 L0,100; M0,50 A50,150 0 0,0 40,50 A50,100 0 0,1 100,50 L100,100 L0,100" dur="15s" repeatCount="indefinite" rotate="auto"></animate>
    </path>
  </svg>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.hero {
  height: 100vh;
  background-color: #69ACFF;
}
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wave {
  width: 100%;
  height: 50vh;
  margin-top: 50vh;
  
  path {
    fill: rgba(67, 117, 178, .15);
  }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//VARIABLES 
var renderer, scene, windowHeight, windowWidth, aspectRatio, fieldOfView, near, far, camera,cube;
var Animation = {
  duration:1.5,
  delay:.5,
  colors: {
    cube: 0xE0E0E0,
    plateform:0x9E9E9E,
    ground:0xf99d17,
    background:0xffad19
  }
};
function getDegree(degree) {
  return degree * Math.PI/180;
}
//INIT
function init(){
  newScene();
  newLights();
  newPlateform();
  newGround();
  newCube();
  render();
}
//SCENE
function newScene(){
  windowHeight = window.innerHeight;
  windowWidth = window.innerWidth;
  scene = new THREE.Scene();
  aspectRatio = windowWidth / windowHeight;
  factor = 130;
  near = 1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"3D-Waves+Logo"
Bootstrap 3.3.0 Snippet by Opeyemi15

Related: See More

Questions / Comments:

"3D-Waves+Logo" Bootstrap 3.3.0 Snippet by Opeyemi15

Related: See More

Questions / Comments:

"3D-Waves+Logo"
Bootstrap 3.3.0 Snippet by Opeyemi15