CODEWITHSUNDEEP
htmlsvg
niceman
niceman

Reputation: 2673

drawing sphere in mhtml5 svg

I want to draw a bubble(well lots of bubbles actually but let's work with one first) in html5, I want to use svg because I want to scale the bubble and don't need to texture them so svg is the better option here.

But I didn't find any thing about doing a sphere in svg in pure html5 and javascript, what I found is mainly for canvas like this question or webgl like this, both of these are raster-based , vector-based is better for me here.

Is there a way to do this ? or am I stuck at using a circle instead ?

Upvotes: 3

Views: 1815

Answers (1)

ROOT
ROOT

Reputation: 11622

Unfortunately this is a bit late but I hope it will help someone looking for something like this. You will not find a standalone solution for this (or you have to write your own javascript implementation to handle all the math required to create a sphere), but you could use D3.js library and use .geo (geometry) extension (shipped by default with D3.js) a good example of this would be something like this:

var width = 500, height = width, 
    projection, path,
    svg, features, graticule;

projection = d3.geo.orthographic()
    .translate([width / 2, height / 2])
    .scale(250)
    .clipAngle(90)
    .precision(0.1)
    .rotate([0, -30]);

path = d3.geo.path()
    .projection(projection);

svg = d3.select('.globe')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .attr('viewBox', '0, 0, ' + width + ', ' + height);

features = svg.append('g');

features.append('path')
    .datum({type: 'Sphere'})
    .attr('class', 'background')
    .attr('d', path);

graticule = d3.geo.graticule();

features.append('path')
  .datum(graticule)
  .attr('class', 'graticule')
  .attr('d', path);
svg {
    width: 100%
}

path {
    fill: none;
    stroke: black
}

.background {
  fill: rgba(200,212,220,.5);
  stroke-width: .8px;
  stroke: black;
}

.graticule {
    stroke: rgba(0,0,0, .2);
    stroke-width: .5px;
}

.country {
    cursor: pointer;
}

.country .land, .state .land {
    fill: white;
    stroke: rgba(0,0,0, .2);
    stroke-width .3px;
}

.state .overlay {
    fill: blue;
    fill-opacity: 0;
}

.country .overlay {
    fill: orange;
    fill-opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div class="globe"></div>

I guess that in the following tutorial you will find version 2 of the example is the best choice for you to work with:

http://jsfiddle.net/GordyD/uwp5vu87/2/

Upvotes: 3

Related Questions