jquery - Creación de una etiqueta con punta ''nueva'' con ráfaga de punto 24 o superior

html css (4)

Estoy tratando de hacer que un punto explote como la imagen a continuación:

Actualmente, he intentado esto usando pseudo elementos, sin embargo, solo pude generar una ráfaga de 12 puntos y no refleja lo que se muestra dentro de la imagen.

¿Hay alguna forma de crear una explosión de puntos con solo unos pocos elementos?

A continuación se muestra el código que he usado para intentar esta solución:

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>

SVG

Utilicé una sola punta como la forma (La forma roja) Ponla dentro de defs para que no se muestre.
Luego reutilizó la forma de la punta varias veces y la giró con su origen de rotación establecido en la parte inferior de la forma.
Esto crea un círculo como forma con bordes afilados.

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

Puede crear fácilmente cualquier cantidad de picos con esta solución. Solo tiene la división apropiada en la rotación:

24 puntos

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

48 puntos

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

La forma de calcular el ángulo es dividiendo los puntos con 360.
Como: 360/48 = 7.5, por lo que cada ángulo debe ser 7.5.

7.5
15,0
22,5
30
37,5
etc.

Enfoque de lienzo

También puede lograr esto usando Canvas. Los comandos para dibujar en Canvas son más o menos los mismos que en SVG. El enfoque, en un nivel muy alto, sería encontrar puntos en dos círculos (uno con radio como xy otro con un radio un poco más pequeño) y luego conectarlos para formar un camino. Cuando se llena el camino, da la apariencia de una explosión de n puntos.

En el diagrama a continuación, el círculo verde es el círculo más grande con radio como x y el círculo azul es el círculo interno más pequeño. Al trazar puntos en los círculos y conectarlos (con los comandos lineTo ), obtenemos la ruta que está en rojo. Cuando este camino se llena, tenemos la apariencia de explosión. ( Nota: Los círculos internos y externos son solo para ilustración y no están dibujados en el diagrama real).

Lógica de cálculo

Las coordenadas X e Y de cada punto en el círculo se pueden calcular utilizando la siguiente fórmula:
- x = (Radio del círculo * Cos (ángulo en radianes)) + x coordenada del centro
- y = (Radio del círculo * Sin (ángulo en radianes)) + coordenada y del centro
El ángulo en el que se trazan los puntos en el círculo se determina utilizando la siguiente lógica:
- Como se usa en las respuestas de usted y Persijn, el ángulo se calcula como (360 / no. De ráfagas). 360 se usa porque es el ángulo total dentro de un círculo.
- El ángulo de los puntos en el círculo interno debe estar a medio camino entre el punto 1 y el punto 2 en el círculo más grande y, por lo tanto, se le agrega un delta. El delta es la mitad de (360 / no. De ráfagas)
Ángulo en radianes = ángulo en grados * π / 180

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

Demo avanzada

Eche un vistazo a este CodePen para obtener una demostración avanzada con características como animación de creación de rutas, sombras, control sobre todas las características, etc.

Consejos de uso

Si desea una imagen de tamaño fijo en algún lugar de la página, Canvas es tan bueno como SVG. Sin embargo, si necesita una imagen que se pueda escalar a cualquier tamaño, el lienzo no es la opción correcta porque el lienzo está basado en ráster y se vuelve pixelado o borroso cuando se escala.

Si su forma necesitara un número dinámico de ráfagas y / o texto, Canvas sería más preferible que SVG y CSS porque no tiene que realizar ninguna manipulación DOM.

Con svg es posible con un bucle simple. Estoy usando Snap, ya que lo hace simple.

En primer lugar, cree un círculo con snap y luego con un loop encuentre los puntos que necesitamos del círculo al que hice referencia en esta pregunta para encontrar los puntos. Después de encontrar los puntos, simplemente asigne estos puntos a las líneas. Al cambiar el número en el bucle y se pueden crear puntos de valor rad de cualquier valor

Ráfaga de 24 puntos

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