(Year 3 Sem C ) Week 3 Prototyping Preparation(Part 2 )

Today, I continue my process for the technical part. I am facing some problem when working on the prototype. 

As can see from the image above , the heart shape is blocking the sphere. The heart shape will not change the position to backwards no matter how many times I adjust on the CSS or HTML. Therefore, I decided to change to another plan which using coding to draw out the heart shape.

At HTML:
<div class="heart"></div>

At CSS:
.heart {
  width: 100px;
  height: 90px;
  font-size: 50px;
  color: #fff;
  line-height: 100px;
  text-align: center;
  margin:100;
}
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
       border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
     -moz-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
       -o-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
     -moz-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
       -o-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

After that, a heart shape will appear on the screen. After that, I try adjust the size with CSS.

But , I face the problem again. The heart shape keep changing to different kind of shape and  the position will always remain at there.

Therefore, I decided to put this problem aside and focus on the sphere. Below is the step how I create a completed heart shape.

One particles equal to :

    var geometry = new THREE.SphereGeometry( 3, 10, 10 );

    var material = new THREE.MeshBasicMaterial( {color: 0xe62fac,} );

    sphere = new THREE.Mesh( geometry, material );

     sphere.position.z = -1;

     sphere.position.x = -5

     sphere.position.y = 20

     scene.add( sphere );

The completed heart shape will need 50 more of the coding and each of them is adjusted based on the position math.