Создание "нового" ярлыка с 24 или более точками

Я пытаюсь сделать такую вещь, как изображение ниже:

В настоящее время я пробовал это с использованием псевдоэлементов, однако я смог генерировать только 12-точечный пакет и не отражал то, что отображается в изображении.

В любом случае, чтобы создать точечный взрыв с несколькими элементами?

Ниже приведен код, который я использовал, чтобы попробовать это решение:

div{
    width:100px;
    height:100px;
    background:grey;
    transform:rotate(45deg);
    margin:50px;
}
div:after{
    position:absolute;
    content:"";
    background:grey;
    width:100px;
    height:100px;
    transform:rotate(135deg);
}
div:before{
    position:absolute;
    content:"";
    background:grey;
    width:100px;
    height:100px;
    transform:rotate(250deg);
}

<div></div>

Ответ 1

Подход к холсту

Вы также можете добиться этого с помощью Canvas. Команды для рисования на Canvas практически такие же, как в SVG. Подход на очень высоком уровне заключался бы в том, чтобы найти точки на двух кругах (один с радиусом как х, а другой с чуть меньшим радиусом), а затем соединить их вместе, чтобы сформировать путь. Когда путь заполнен, он дает появление n-точечного всплеска.

На приведенной ниже диаграмме зеленый круг представляет собой больший круг с радиусом x, а синий круг - меньшим внутренним кругом. Создавая точки на кругах и соединяя их (с командами lineTo), мы получаем путь, который находится в красном. Когда этот путь заполнен, мы получаем всплеск. ( Примечание: Внутренний и внешний круги предназначены только для иллюстрации и не отображаются на фактической диаграмме).

Логика вычислений

Координаты X и Y каждой точки на круге могут быть вычислены по следующей формуле:
- x = (Радиус круга * Cos (угол в радианах)) + координата x центра
- y = (Радиус круга * Sin (угол в радиантах)) + y координаты центра
угол, в котором точки нанесены на круг, определяются с использованием следующей логики:
- Как используется как в вашем, так и в персидском ответах, угол рассчитывается как (360/шт. всплесков). 360, потому что это полный угол внутри круга.
- Угол точек на внутреннем круге должен быть на полпути между точкой 1 и точкой 2 на большем круге и, следовательно, к нему добавляется дельта. Дельта составляет половину (360/количество всплесков).
Угол в радианах= угол в градусах * π/180

window.onload = function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var defaultBurst = 18;
  var defaultContent = "New";

  function paint(numBurst, text) {
    if (!numBurst) numBurst = defaultBurst;
    if (!text) text = defaultContent;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'crimson';
    var angleInRad = Math.PI * (360 / numBurst) / 180;
    var deltaAngleInRad = angleInRad / 2;
    ctx.beginPath();
    ctx.moveTo(75, 150);
    for (i = 0; i <= numBurst; i++) {
      x1 = 75 * Math.cos(angleInRad * i) + 150;
      y1 = 75 * Math.sin(angleInRad * i) + 150;
      x2 = 60 * Math.cos((angleInRad * i) + deltaAngleInRad) + 150;
      y2 = 60 * Math.sin((angleInRad * i) + deltaAngleInRad) + 150;
      ctx.lineTo(x1, y1);
      ctx.lineTo(x2, y2);
    }
    ctx.closePath();
    /* Add shadow only for shape */
    ctx.shadowOffsetX = -5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 5;
    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
    ctx.fill();
    ctx.font = "32px Arial";
    ctx.textAlign = "center";
    ctx.fillStyle = "gold";
    /* Nullify shadow for text */
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;
    ctx.fillText(text, 150, 160, 120);
  }
  paint();
  var slider = document.getElementById('burst');
  var textInput = document.getElementById('content');
  slider.addEventListener('change', function() {
    paint(this.value, textInput.value);
  });

  textInput.addEventListener('blur', function() {
    paint(slider.value, this.value);
  });
}

/* For demo only */

.controls {
  float: right;
  padding: 5px;
  margin: 50px 20px;
  line-height: 25px;
  border: 1px solid;
  box-shadow: 1px 1px 0px #222;
}
label,
input {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}
h3 {
  padding: 10px;
  text-align: center;
}
label {
  width: 100px;
}
input[type='range'],
input[type='text'] {
  width: 100px;
}
body {
  font-family: Calibri;
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<canvas id='canvas' height='300px' width='300px'></canvas>
<div class='controls'>
  <h3>Controls</h3>

  <label for="burst">Change Burst:</label>
  <input id="burst" class="slider" type="range" value="18" min="12" max="36" step='2' title="Adjust slider to increase or decrease burst" />
  <br/>
  <label for="content">Text Content:</label>
  <input type="text" id="content" maxlength="5" />
</div>

Ответ 2

С svg это возможно с помощью простого цикла. Я использую Snap, поскольку он делает это простым.

Прежде всего создайте круг, используя snap, а затем используя петлю, найдите нужные точки из круга i, на который ссылается этот вопрос, чтобы найти точки. После нахождения точек просто дайте линиям эти точки. Можно изменить число в петле и значениях значений радиуса любого значения.

24-точечный взрыв

var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
    fill:'tomato',
    stroke:'tomato'
})
for (var num = 0; num < 24; num++) {
    var rad1 = num * 15 * (Math.PI / 180);
    var rad2 = (num+1) * 15 * (Math.PI / 180);
    var rad3=(num+.5) * 15 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50)
    var y1 = (30 * (Math.sin(rad1)) + 50)
    var x2 = (40 * (Math.cos(rad3)) + 50)
    var y2 = (40 * (Math.sin(rad3)) + 50)
    var x3 = (30 * (Math.cos(rad2)) + 50)
    var y3 = (30 * (Math.sin(rad2)) + 50)
    var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
        'fill':'tomato'
    })
    }
var text=s.text(35,50,'New').attr({
    fill:'white'
})

div{
  width:100vw;
  height:100vh;

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
  </div>

Ответ 3

Это возможно с помощью CSS, но после 12 пунктов требуется больше одного div.

Раньше я использовал 12-точечный всплеск в проектах для предупреждений и элементов стиля продвижения распродаж.

12 Point Burst

div {
  background: red;
  width: 80px;
  height: 80px;
  position: absolute;
  text-align: center;
  top: 20px;
  left: 20px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
div:before {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}
div:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}

<div></div>

Ответ 4

SVG

Я использовал одну подобную форме шипа (красная фигура) Поместите его внутри defs, чтобы его не отображали.
Затем многократно использовала форму шипа и повернула его с помощью установки начала вращения в самой нижней части формы.
Затем создается круглая форма с острыми краями.

.POW {
  width: 250px;
  height: 250px;
  border: 1px solid black;
}

<svg class="POW" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <polygon id="spike" points="0,0, -10,-25 0,-50 10,-25"></polygon>
  </defs>
  <g class="spikes">
    <use x="50" y="50" xlink:href="#spike" transform="rotate(20 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(40 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(60 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(80 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(100 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(120 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(140 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(160 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(180 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(200 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(220 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(240 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(260 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(280 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(300 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(320 50 50)" />
    <use x="50" y="50" xlink:href="#spike" transform="rotate(340 50 50)" />
    <use x="50" y="50" fill="red" xlink:href="#spike" transform="rotate(360 50 50)" />
  </g>
</svg>