How to generate a elongated hexagon shape with two circular sides? - css

Question

I'm trying to generate this sort of shape within my design:
In which a canvas element appears in the middle part of the circle, and this kind of elongated hexagon appears around the outside.
However, I am having some issues with the shape - primarily how I would make the shape with a gradient or background image as well (i.e. the internal puzzle piece looking bit will be an image). The outer background will be a solid background colour (#222).
Current Attempt
My current attempt is using a background gradient to generate most of the shape, and using pseudo elements for the two circlular parts either side::
var a = 100; // size of the black hole.
var b = 200; // distance of black hole from canvas center.
var c = 1; // speed of black hole rotation.
var d = 20; // the amount of stars to spawn every frame.
// ---------------------------------------------
var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d'),
stars = [],
m = {},
r = 0
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
m.x = null;
m.y = null;
ctx.strokeStyle = '#fff';
ctx.translate(0.5, 0.5);
// create stars
function createStars(n) {
if (m.x == null) return;
for (var i = 0; i < n; i++) {
var shape = {
x: m.x,
y: m.y,
r: 1,
speed: 1,
accel: 1.01,
accel2: 0.001,
angle: Math.random() * 360
}
var vel = {
x: a * Math.cos(shape.angle * Math.PI / 180),
y: a * Math.sin(shape.angle * Math.PI / 180)
};
shape.x += vel.x;
shape.y += vel.y;
stars.push(shape);
}
}
function render() {
createStars(d);
var bench = [];
// ctx.save();
// ctx.fillStyle = 'rgba(0,0,0,0.5)';
// ctx.fillRect(0, 0, canvas.width, canvas.height);
// ctx.restore();
ctx.clearRect(0, 0, canvas.width, canvas.height);
r += c;
if (r < 360) {
m = {
x: canvas.width / 2,
y: canvas.height / 2,
angle: r
}
var targetAngle = m.angle * Math.PI / 180;
m.x += b * Math.cos(targetAngle);
m.y += b * Math.sin(targetAngle);
} else {
r = 0;
}
while (stars.length) {
var star = stars.pop();
var vel = {
x: star.speed * Math.cos(star.angle * Math.PI / 180),
y: star.speed * Math.sin(star.angle * Math.PI / 180)
};
ctx.beginPath();
ctx.moveTo(star.x, star.y);
ctx.lineTo(star.x + vel.x, star.y + vel.y);
ctx.closePath();
ctx.stroke();
star.x += vel.x;
star.y += vel.y;
star.speed *= star.accel;
star.accel += star.accel2;
if (star.x < canvas.width && star.x > 0 && star.y < canvas.height && star.y > 0) {
bench.push(star);
}
}
stars = bench.slice(0).reverse();
}
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
(function animloop() {
requestAnimFrame(animloop);
render();
})();
#import url(https://fonts.googleapis.com/css?family=Hammersmith+One);
html {
margin: 0;
padding: 0;
height: 100vh;
background: #222;
color: cornflowerblue;
overflow-x: hidden;
font-size: 18px;
font-family: 'Hammersmith One', sans-serif;
}
/************************************/
#c {
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px double lightgray;
margin-left: 150px;
margin-right: 150px;
background: #222;
z-index: 10;
position: absolute;
left: 0px;
top: 50px;
}
.canwrap {
background: url(http://placekitten.com/g/300/300);
height: 300px;
width: 500px;
position: relative;
z-index: 0;
margin-left: 50px;
margin-right: 50px;
}
.canwrap:before {
content: "";
position: absolute;
width: 150px;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
background: #222;
z-index: -1;
}
.canwrap:after {
content: "";
position: absolute;
height: 100px;
width: 100px;
top: 100px;
left: -50px;
background: red;
border-radius: 50%;
box-shadow: 500px 0 20px -5px red;
}
<div class="canwrap">
<canvas id="c" class="img"></canvas>
</div>
However, this leaves me with a few issues:
Background part can't be an image
circles can't replicate the image part
gradient stop colours means there is not a 'clear edge' to the shape.
I would be really grateful to get another view/angle on constructing this shape, as I haven't been able to produce this in a way that I need to.
I know svg might be the way to do this, but I've always had a hard time getting svg's to animate properly compared to css - but if either work, I'd be happy (seeing as my design doesn't exactly allow my image design)!
As always, any suggestions would be great.

Answer 1

How about something like this i used svg Fiddle
<svg width="1000" height="500">
<polygon points="100 10, 50 245, 100 500, 200 500, 200 10,100 10" fill="orange" />
<polygon points="400 10, 460 245, 400 500, 300 500, 300 10,200 10" fill="orange" />
<circle r="50" cx="50" cy="245" fill="orange" />
<circle r="50" cx="460" cy="245" fill="orange" />
<circle r="100" cx="255" cy="245" fill="midnightblue" />
</svg>
You can also do it with image as background
<svg width="1000" height="500">
<defs>
<pattern id="pattern" patternUnits="userSpaceOnUse" width="1000" height="1000">
<image xlink:href="https://placekitten.com/g/200/300" x="-200" y="-10" width="1000" height="1000" />
</pattern>
</defs>
<polygon points="100 10, 50 245, 100 500, 200 500, 200 10,100 10" fill="url(#pattern)"/>
<polygon points="400 10, 460 245, 400 500, 300 500, 300 10,200 10" fill="url(#pattern)"/>
<circle r="50" cx="50" cy="245" fill="url(#pattern)"/>
<circle r="50" cx="460" cy="245" fill="url(#pattern)"/>
<circle r="100" cx="255" cy="245" fill="midnightblue"/>

Answer 2

although this is not for canvas but rather for html element you can do the same technique in canvas.
I assume you already know basic css 3,now since it's a lot of work to code, I'll give you the instructions:
1) head out to this link
2) create 2 Trapezoids and rotate them 90 degrees
3) create 2 small circles and position each one (relative/absolute) on the edge of the Trapezoid with z-index smaller than the Trapezoids
4) 1 circle in the middle and your done!

Answer 3

You can use svg, which simplifies the creation of shape to a large extent.
Create a path, and fill in pattern.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 65 50" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="image" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="http://www.placecage.com/g/200/300" width="50" x="-10" y="0" height="50"/>
<image xlink:href="http://www.placekitten.com/g/200/300" width="50" x="30" y="0" height="50"/>
</pattern>
</defs>
<path d="M 25 0 H 15 L 10 20 A 5.3 5.3 0 1 0 10 30 L15 50 H25 z M 40 0 H 50 L 55 20 A 5.3 5.3 0 1 1 55 30 L 50 50 H 40 z" fill="url(#image)" stroke="none"/>
</svg>
Height and width have been set to 100%, so this should be responsive. Also, the position of images can be changed using x,y attributes.