How to create an elongated hexagonal shape with two circular sides?

Question

I am trying to create a form like this in my design:

In which the canvas element appears in the middle of the circle, and this kind of elongated hexagon appears outside.

However, I have some problems with the shape - first of all, how I would make the shape with a gradient or background image (i.e. the inside of the puzzle piece would look like an image). The external background will be a solid background color (# 222).

Current attempt

My current attempt is to use a background gradient to generate most of the shape and use pseudo-elements for two circular parts on both sides:

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>

Run codeHide result

However, this leaves me with a few problems:

• The background part cannot be an image
• - , " ".

/ , , .

, svg , svg css, , ( )!

, .

Answer 1

- , 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>

Hide result

<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"/>

Hide result

Answer 2

, html . , css 3, , , :

1)

2) 2 90

3) 2 (/) z-, ,

4) 1 !

Answer 3

You can use svg, which makes creating a form a lot easier.

Create a path and fill out the template.

<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>

Run codeHide result

The height and width are set to 100%, so this should be responsive. In addition, the position of images can be changed using the x, y attributes.