¿Cómo creo una lágrima en HTML?

223

¿Cómo creo una forma como esta para mostrar en una página web?

No quiero usar imágenes, ya que se volverían borrosas al escalar

Forma de lágrima que necesito hacer con HTML, CSS o SVG

Intenté con CSS :

.tear {
  display: inline-block;
  transform: rotate(-30deg);
  border: 5px solid green;
  width: 50px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
<div class="tear">
</div>
Expandir fragmento

Eso resultó realmente jodido.

Y luego probé con SVG:

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>
Expandir fragmento

Obtuvo la forma, pero la parte inferior no era curva.

¿Hay alguna forma de crear esta forma para que pueda usarse en una página HTML?

html css svg css-shapes Persijn
fuente
12
"No quiero usar imágenes ya que se volverían borrosas al escalar", ¿por qué escalas la imagen? No se vuelven borrosas si usas [srcset]o el <picture>elemento. Mejor aún, solo enlace a una imagen svg:<img src="tear.svg" alt="Teardrop"/>
zzzzBov
32
@zzzzBov: ¿Realmente estás recomendando el pictureelemento? Sin soporte para IE, sin soporte para versiones anteriores de Chrome, sin soporte para safari. ¿Debo continuar?
jbutler483
99
@zzzzBov. why are you scaling the image?Bueno, la imagen puede aparecer borrosa sin que el desarrollador la escale. Todo lo que necesita para eso es un zoom del navegador. En mi caso, tengo una pantalla HighDPI y muchas imágenes borrosas. Entonces, sí, si puedes evitar imágenes usando SVG, hazlo.
Nolonar
63
Unicode lo resuelve todo ... U + 1F4A7 💧
Thomas Weller
21
@Thomas veo un cuadrado: / i.stack.imgur.com/8fXMf.png
user000001

Respuestas:

327

Enfoque SVG:

Puede lograr la doble curva fácilmente con un SVG en línea y el <path/>elemento en lugar del <polygon/>elemento que no permite formas curvas.

El siguiente ejemplo usa el <path/>elemento con:

<svg width="30%" viewbox="0 0 30 42">
  <path fill="transparent" stroke="#000" stroke-width="1.5"
        d="M15 3
           Q16.5 6.8 25 18
           A12.8 12.8 0 1 1 5 18
           Q13.5 6.8 15 3z" />
</svg>
Expandir fragmento

SVG es una gran herramienta para hacer este tipo de formas con curvas dobles. Puede consultar esta publicación sobre curvas dobles con una comparación SVG / CSS. Algunas de las ventajas de usar SVG en este caso son:

  • Control de curvas
  • Control de relleno (opacidad, color)
  • Control de trazo (ancho, opacidad, color)
  • Cantidad de código
  • Hora de construir y mantener la forma
  • Escalable
  • Sin solicitud HTTP (si se usa en línea como en el ejemplo)

La compatibilidad del navegador para SVG en línea se remonta a Internet Explorer 9. Consulte canIuse para obtener más información.

web-tiki
fuente
puede reducirse a: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... esto llenará el área que le da, por lo que puede hacer gotas de lluvia "gruesas" o "delgadas" ... cambie a altura / ancho fijo si es necesario
technosaurus
1
@technosaurus, el problema con la reducción del número de comandos en el d="..."atributo es que ya no tiene la doble curva en la parte superior de la caída.
web-tiki
10
+1 porque deberías usar SVG para esto, no CSS. Las características de CSS que necesitaría para lograrlo tienen aproximadamente el mismo soporte de navegador que SVG, por lo que no hay ventaja para CSS en ese puntaje. CSS puede hacer formas, pero para eso no está diseñado; no intentes clavar un clavo con un destornillador solo por el hecho de ser inteligente cuando puedes hacerlo igual de bien con una herramienta diseñada para el trabajo.
Simba
66
Aún mejor: cree un archivo SVG y úselo <img />en el documento de hipertexto.
Andreas Rejbrand
@AndreasRejbrand puede ser una buena idea dependiendo del proyecto, pero agrega una solicitud HTTP que OP parece querer evitar.
web-tiki
136

Radio de borde básico

Puede hacer esto dentro de CSS con relativa facilidad usando border-radius 'y transforma. Tu CSS estaba solo un poco fuera.

.tear {
  width: 50px;
  height: 50px;
  border-radius: 0 50% 50% 50%;
  border: 3px solid black;
  transform: rotate(45deg);
  margin-top: 20px;
}
<div class="tear"></div>
Expandir fragmento

Radio de borde avanzado

Esto será muy similar al anterior pero le da un poco más de forma.

.tear {
  width: 50px;
  height: 50px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border: 3px solid black;
  transform: rotate(-45deg);
  margin-top: 20px;
}
<div class="tear"></div>
Expandir fragmento

Stewartside
fuente
44
@zzzzBov No entiendo completamente cómo es la herramienta incorrecta, OP solicitó una solución CSS o SVG y se me ocurrió una solución CSS que se ajusta a la descripción lo más cerca posible. Es ligero y fácil de modificar.
Stewartside
12
@zzzzBov El uso de CSS para imágenes y sprites es de uso común. Es un código muy mínimo para generar una "Imagen" genérica. Creo que es apropiado porque es utilizable dentro de las especificaciones de preguntas de ser utilizable en una página web.
Stewartside
13
@zzzzBov: CSS está perfectamente bien para las formas. ¿Quién puede decir para qué se usa esa forma? semánticamente una imagen : OP ha declarado claramente que no desea utilizar una imagen, de lo contrario, ¿por qué otra razón se haría una pregunta de este tipo?
jbutler483
46
@ jbutler483, "CSS está perfectamente bien para las formas" no, es horrible. Solo porque puedas no significa que debas . Introduce todo tipo de basura en el marcado, y es un tedioso desastre para mantener. Las imágenes son mucho más simples de mantener, ya que se separan fácilmente en su propio archivo autónomo individual.
zzzzBov
19
'Basura en el marcado' ocurre cuando usas bootstrap o iconos de fuentes increíbles. En serio, creo que vas un poco exagerado para cosas como esta cuando (obviamente) esto se puede lograr usando una declaración de radio de borde. Pero heno, ¿quién puede decirte que no uses imágenes?
jbutler483
88

Su principal problema con su código CSS fue:

  1. Usaste una altura diferente al ancho
  2. No ha girado el ángulo correcto

Entonces, al 'solucionar' estos problemas, generaría:

.tear {
  display: inline-block;
  transform: rotate(-45deg);
  border: 5px solid green;
  width: 100px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
/***for demo only***/

.tear {
  margin: 50px;
}
<div class="tear">
</div>
Expandir fragmento

Tenga en cuenta también que para ahorrar en la longitud de CSS, puede volver a escribir sus propiedades de radio de borde en:

border-radius: 50% 0 50% 50%;

esto podría mejorarse con pseudo elementos como se muestra en este violín

Alternativas

Encontré esto por Vinay Challuru en codepen.

Tenga en cuenta que con la lógica aquí, pude crear el SVG para casi cualquier forma de construcción posible, etc. Por ejemplo, una salida rápida fue:

Mostrar fragmento de código

Está utilizando un SVG y le permite alterar la forma de múltiples maneras, teniendo la capacidad de alterar su forma para obtener el resultado deseado:

Mostrar fragmento de código

Descargo de responsabilidad No escribí la pluma anterior, solo la obtuve.

Versión CSS

Aunque esto está lejos de estar completo, también puede generar esta forma usando CSS.

Mostrar fragmento de código

Versión SVG

Debería saber que SVG debería estar en la parte superior de esta respuesta, sin embargo, me gusta un desafío y aquí hay un intento con SVG.

svg {
  height: 300px;
}
svg path {
  fill: tomato;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100">

  <path d="M49.015,0.803
    c-0.133-1.071-1.896-1.071-2.029,0
    C42.57,36.344,20,43.666,20,68.367   
    C20,83.627,32.816,96,48,96
    s28-12.373,28-27.633
    C76,43.666,53.43,36.344,49.015,0.803z 
    M44.751,40.09   
    c-0.297,1.095-0.615,2.223-0.942,3.386
    c-2.007,7.123-4.281,15.195-4.281,24.537
    c0,5.055-2.988,6.854-5.784,6.854   
    c-3.189,0-5.782-2.616-5.782-5.831
    c0-11.034,5.315-18.243,10.005-24.604
    c1.469-1.991,2.855-3.873,3.983-5.749   
    c0.516-0.856,1.903-0.82,2.533,0.029
    C44.781,39.116,44.879,39.619,44.751,40.09z"/>


</svg>
Expandir fragmento

Al alterar los pathvalores, podrá alterar la forma de su diseño de lágrima.

jbutler483
fuente
10
Todo esto parece muy ... detallado. La solución js es particularmente absurda.
egid
44
@egid: Dije en mi respuesta que no creé la versión js. También tenga en cuenta que la versión js le permite alterar la forma en tiempo de ejecución
jbutler483
55

En mi opinión, esta forma requiere curvas suaves para garantizar la continuidad de la curva.

La caída en cuestión:

Para la caída en cuestión,

  • no se pueden usar curvas suaves, ya que los puntos de control no serán de la misma longitud. Pero aún necesitamos hacer que los puntos de control estén exactamente opuestos (180 grados) a los puntos de control anteriores, para garantizar la continuidad completa de la curva. La imagen que se muestra a continuación ilustra este punto:

ingrese la descripción de la imagen aquí
Nota : Las curvas rojas y azules son dos curvas cuadráticas diferentes.

  • stroke-linejoin="miter", para la parte superior puntiaguda.

  • Como esta forma solo usa ccomandos sucesivos , podemos omitirla.

Aquí está el fragmento final:

<svg height="300px" width="300px" viewBox="0 0 12 16">
  <path fill="#FFF" stroke="black" stroke-width="0.5" stroke-linejoin="miter" 
        d="M 6 1 c -2 3 -5 5 -5 9
           0 7 10 7 10 0 
           0 -4 -3 -6 -5 -9z" />
</svg>
Expandir fragmento

TBH , sin embargo , las curvas de respuesta aceptadas no son bastante continuas.

Para IE 5-8 (VML)

Solo funciona en IE 5-8. VML usa comandos diferentes que SVG . P.ej. usa v para beziers cúbicos relativos .

Nota: este fragmento tampoco se ejecutará en IE 5-8. Debe crear un archivo html y ejecutarlo directamente en el navegador.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <style> v\:* { behavior: url(#default#VML); }

    </style >
</head>
<body>
    <div style="width:240; height:320;">
        <v:shape coordorigin="0 0" coordsize="12 16" fillcolor="white" strokecolor="black" strokewidth="1"
            strokeweight="5" style="width:240; height:320" 
            path="M 6 1 v -2 3 -5 5 -5 9
           0 7 10 7 10 0 
           0 -4 -3 -6 -5 -9 x e">
        </v:shape>
    </div>
</body>
</html>
Max Payne
fuente
"no se pueden usar curvas suaves, ya que los puntos de control no serán de la misma longitud". ¿"Suavizar" no significa simplemente que las asas tangentes (puntos de control) se asientan en línea recta? ¿Por qué tienen que ser del mismo largo?
Niccolo M.
2
@NiccoloM. En svg, la curva suave (comandos T y S) significa que el controlador es simétricamente opuesto, así como igual a la longitud del controlador anterior . En lenguaje normal, la curva suave puede significar diferentes longitudes de manejador, pero en svg, la longitud también es igual al manejo de curvas anterior :)
Max Payne
42

O si la fuente de sus espectadores lo admite, use los caracteres Unicode

GOTA: 💧 ( &#128167;)

o

GOTA NEGRA: 🌢 ( &#127778;)

Escala en consecuencia!

Gnubie
fuente
Puede usar esto con @ font-face, pero luego tiene un archivo de fuente para mantener en el lugar correcto y tal.
1934286
3
SVG y un símbolo dedicado de Unicode como este es bueno. CSS para esto es malo. PNG está bien, pero no es perfecto ya que son gráficos de trama. JPG es extremadamente malo, tan malo que tendría pesadillas si lo viera.
Andreas Rejbrand
@AndreasRejbrand un PNG de 20x20 escalaría peor que un JPG de 200x200. Y, con el mismo tamaño, un JPG sin comprimir es equivalente a un PNG. Ambos son rasterizados y sufren los mismos problemas.
nico
@nico: En teoría, sí, puedes usar JPG con compresión cero. Pero Internet está lleno de desastres como este: en.wikipedia.org/wiki/Atomic_number#/media/…
Andreas Rejbrand
28

Yo personalmente usaría un SVG para esto. Puede crear SVG en la mayoría de los software de gráficos vectoriales. Yo lo recomiendo:

He hecho uno a continuación que es un seguimiento de su forma en Illustrator.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="223.14px" height="319.008px" viewBox="0 0 223.14 319.008" enable-background="new 0 0 223.14 319.008" xml:space="preserve">
  <path fill="none" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M111.57,13.291c0,0,57.179,86.984,72.719,108.819
    	c30.359,42.66,41.005,114.694,1.626,154.074c-20.464,20.463-47.533,30.293-74.344,29.488h-0.002
    	c-26.811,0.805-53.88-9.025-74.344-29.488C-2.154,236.804,8.492,164.77,38.851,122.11C54.391,100.275,111.57,13.291,111.57,13.291z" />
</svg>
Expandir fragmento

Djave
fuente
27

Lienzo HTML

Esta es una opción descubierta en este hilo hasta ahora. Los comandos utilizados para los dibujos de Canvas son muy similares a SVG (y web-tiki merece los créditos por la idea base utilizada en esta respuesta).

La forma en cuestión se puede crear utilizando los comandos de curva propios del lienzo (Cuadrático o Bézier) o la API de ruta. La respuesta contiene ejemplos para los tres métodos.

El soporte del navegador para Canvas es bastante bueno .

Usando curvas cuadráticas

window.onload = function() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.moveTo(120, 20);
    ctx.quadraticCurveTo(117.5, 30, 148, 68);
    ctx.arc(120, 88, 34.5, 5.75, 3.66, false);
    ctx.quadraticCurveTo(117.5, 35, 120, 20);
    ctx.closePath();
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.fillStyle = '#77CCEE'
    ctx.stroke();
    ctx.fill();
  }
}
canvas {
  margin: 50px;
  height: 100px;
  width: 200px;
  transform: scale(1.5);
}

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<canvas id='canvas'></canvas>
Expandir fragmento

A continuación se muestra una versión avanzada con relleno degradado y sombras. También he incluido un hoverefecto en la forma para ilustrar un inconveniente de Canvas en comparación con SVG. El lienzo está basado en ráster (píxel) y, por lo tanto, se vería borroso / pixelado cuando se escala más allá de cierto punto. La única solución para eso sería volver a pintar la forma en cada cambio de tamaño del navegador, que es una sobrecarga.

Mostrar fragmento de código

Usando curvas de Bezier

Mostrar fragmento de código

Usando la API de ruta

Mostrar fragmento de código

Nota: Como se mencionó en mi respuesta aquí , IE y Safari aún no admiten la API de ruta.

Otras lecturas:

Harry
fuente
No veo cómo svg es la mejor opción siempre. Sin duda, es una mejor opción en muchos casos como este. Pero el lienzo tiene sus propias ventajas. Buena respuesta. de su respuesta puedo entender eso, ¡ciertamente es mucho más fácil usar SVG!
Max Payne
Sí @TimKrul, es más fácil escribir / usar SVG. Canvas tiene sus propias ventajas, pero, sea lo que sea que leí, no es demasiado ventajoso cuando se usa para formas simples como logotipos, principalmente porque está basado en ráster a diferencia de SVG.
Harry
25

También encontré esto en Codepen hecho por el usuario Ana Tudor usando CSS y el box-shadowestilo y las ecuaciones paramétricas. Muy simple, muy poco código. Y muchos navegadores admiten el estilo CSS3 Box-shadow:

body {
  background-color: black;
}
.tear {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.125em;
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  box-shadow: 0em -5em red, 0.00118em -4.97592em #ff1800, 0.00937em -4.90393em #ff3000, 0.03125em -4.7847em #ff4800, 0.07283em -4.6194em #ff6000, 0.13915em -4.40961em #ff7800, 0.23408em -4.15735em #ff8f00, 0.36em -3.86505em #ffa700, 0.51777em -3.53553em #ffbf00, 0.70654em -3.17197em gold, 0.92382em -2.77785em #ffef00, 1.16547em -2.35698em #f7ff00, 1.42582em -1.91342em #dfff00, 1.69789em -1.45142em #c7ff00, 1.97361em -0.97545em #afff00, 2.2441em -0.49009em #97ff00, 2.5em 0.0em #80ff00, 2.73182em 0.49009em #68ff00, 2.93032em 0.97545em #50ff00, 3.08681em 1.45142em #38ff00, 3.19358em 1.91342em #20ff00, 3.24414em 2.35698em #08ff00, 3.23352em 2.77785em #00ff10, 3.15851em 3.17197em #00ff28, 3.01777em 3.53553em #00ff40, 2.81196em 3.86505em #00ff58, 2.54377em 4.15735em #00ff70, 2.21783em 4.40961em #00ff87, 1.84059em 4.6194em #00ff9f, 1.42017em 4.7847em #00ffb7, 0.96608em 4.90393em #00ffcf, 0.48891em 4.97592em #00ffe7, 0.0em 5em cyan, -0.48891em 4.97592em #00e7ff, -0.96608em 4.90393em #00cfff, -1.42017em 4.7847em #00b7ff, -1.84059em 4.6194em #009fff, -2.21783em 4.40961em #0087ff, -2.54377em 4.15735em #0070ff, -2.81196em 3.86505em #0058ff, -3.01777em 3.53553em #0040ff, -3.15851em 3.17197em #0028ff, -3.23352em 2.77785em #0010ff, -3.24414em 2.35698em #0800ff, -3.19358em 1.91342em #2000ff, -3.08681em 1.45142em #3800ff, -2.93032em 0.97545em #5000ff, -2.73182em 0.49009em #6800ff, -2.5em 0.0em #7f00ff, -2.2441em -0.49009em #9700ff, -1.97361em -0.97545em #af00ff, -1.69789em -1.45142em #c700ff, -1.42582em -1.91342em #df00ff, -1.16547em -2.35698em #f700ff, -0.92382em -2.77785em #ff00ef, -0.70654em -3.17197em #ff00d7, -0.51777em -3.53553em #ff00bf, -0.36em -3.86505em #ff00a7, -0.23408em -4.15735em #ff008f, -0.13915em -4.40961em #ff0078, -0.07283em -4.6194em #ff0060, -0.03125em -4.7847em #ff0048, -0.00937em -4.90393em #ff0030, -0.00118em -4.97592em #ff0018;
}
<div class="tear"></div>
Expandir fragmento

Luke Shimkus
fuente
77
Sin embargo, esto no se parece al tipo de lágrima que se solicita.
doppelgreener
20

Versión CSS

Como hay algunas pocas respuestas aquí, pensé por qué no agregarlo con otro método. Esto está utilizando HTML y CSS para crear la lágrima.

Esto le permitirá cambiar el color del borde y el fondo de la lágrima y también cambiar el tamaño de la parte superior.

Usando un solo divpodemos crear un círculo con bordery border-radius. Luego, usando pseudo elementos ( :before& :after) creamos un triángulo CSS más aquí , esto actuará como la punta de la lágrima. Usando :beforecomo borde colocamos :afteren la parte superior con un tamaño más pequeño y el color de fondo deseado.

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid;
  margin: 80px auto;
  position: relative;
}
div:before,
div:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
}
div:before {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 104px solid black;
  top: -75px;
}
div:after {
  border-left: 46px solid transparent;
  border-right: 46px solid transparent;
  border-bottom: 96px solid #fff;
  top: -66px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}
<div></div>
Expandir fragmento

Aquí hay una demostración de la lágrima con un color de fondo.

Mostrar fragmento de código

Es tan simple como poner un color de fondo divy cambiar el :after bottom-bordercolor al mismo. Para cambiar el borde, también deberá cambiar el divcolor del borde y el :beforecolor de fondo.

Rubicundo
fuente
Ruddy, al lápiz le falta un valor de color de fondo.
Persijn
2
@Persijn Harry dijo algo en el chat y lo estaba mirando en ese bolígrafo olvidando que se guarda automáticamente de vez en cuando. Jaja, lo pondré de nuevo como estaba. Hecho.
Ruddy
17

Es bastante fácil hacer esto con SVG simplemente usando un recurso de conversión de imágenes como http://image.online-convert.com/convert-to-svg , que se utilizó para crear lo siguiente:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="213.000000pt" height="300.000000pt" viewBox="0 0 213.000000 300.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.12, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1035 2944 c-143 -250 -231 -380 -508 -752 -347 -465 -432 -616 -493
-882 -91 -394 10 -753 285 -1013 508 -479 1334 -361 1677 240 126 221 165 494
105 726 -66 254 -178 452 -609 1076 -96 140 -226 335 -288 435 -155 249 -135
229 -169 170z m85 -212 c40 -69 192 -298 543 -818 268 -396 354 -593 364 -835
12 -281 -82 -509 -296 -714 -103 -99 -236 -173 -396 -221 -82 -25 -105 -27
-260 -28 -148 -1 -181 2 -255 22 -348 96 -611 357 -691 689 -41 167 -25 392
41 587 62 185 154 334 444 716 177 235 320 444 402 592 27 49 51 88 54 88 3 0
25 -35 50 -78z"/>
</g>
</svg>
Expandir fragmento

Anónimo
fuente
99
@Persijn ¿por qué sigues preguntando copiado de algún editor? Svg es svg, puedes usar la herramienta que quieras para crear una.
Abhinav Gauniyal
2
@AbhinavGauniyal: 'editores' como quieras llamarlos, agrega 'pelusa' adicional a las declaraciones. Por ejemplo, 300.000000pty metadatos que realmente no son necesarios
jbutler483
12
@Persijn, ¿qué quieres decir con mano / codificado? Alguien acaba de hacer / ilustrador manual / codificado para facilitar sus tareas de codificación, y todavía produce lo mismo. Por otra parte, cuando está usando svg en el navegador, ¿por qué no lo codifica o usa a mano usando lenguaje ensamblador? y por qué detenerse en el ensamblaje, entregarlo / codificarlo con cables o simplemente dibujarlo usted mismo. Esta no es una razón que esperaba.
Abhinav Gauniyal
2
@ jbutler483 sí y se pueden recortar. Hay muchas herramientas que hacen eso por usted, aquí hay una para usted github.com/svg/svgo
Abhinav Gauniyal
66
@persijn esta respuesta proporciona las rutas de svg necesarias. Realmente no tengo idea de cuál es tu objeción.
user428517
14

Si elige usar SVG, debe leer en las rutas. También sugeriría un editor SVG.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-0.05 0 1195.1 703" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" transform="">
    <defs id="svgEditorDefs">
        <line id="svgEditorLineDefs" stroke="black" style="fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px;"/>
    </defs>
    <rect id="svgEditorBackground" x="0" y="0" width="1195" height="703" style="fill: none; stroke: none;"/>
    <path stroke="black" id="e1_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" d="M 198 207 a 117.969 117.969 0 1 0 213 8" transform=""/>
    <path stroke="black" id="e4_circleArc" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="" d="M 411.348 215.696 a 349.677 349.677 0 0 0 -110.37 -131.718"/>
    <path stroke="black" style="fill: none; stroke-width: 1px; vector-effect: non-scaling-stroke;" transform="matrix(-0.182706 -0.983168 0.983168 -0.182706 157.664 417.408)" id="e6_circleArc" d="M 301.799 202.299 a 329.763 329.763 0 0 0 -102.951 -124.781"/>
</svg>
Expandir fragmento

Brennen Sprimont
fuente
1
¿Por qué usarías una línea dentro de una etiqueta defs? ¿Y no puedes hacer esta forma en un camino no 3 + un rect?
Persijn
6

Aquí hay cuatro formas de lágrima SVG progresivamente más simples:

ingrese la descripción de la imagen aquí

<svg viewbox="-20 -20 180 180">
  <g stroke="black" fill="none">
    
    <path transform="translate(0)"
     d="M   0  0
        C   0 10  10 17  10 27
        C  10 40 -10 40 -10 27
        C -10 17   0 10   0  0
        Z"/>

    <path transform="translate(40)"
     d="M   0  0
        C   0 16  15 25   5 34
        Q   0 38         -5 34
        C -15 25   0 16   0  0
        Z"/>
    
    <path transform="translate(80)"
     d="M   0  0
        C   0 10  18 36   0 36
        S          0 10   0  0
        Z"/>

    <path transform="translate(120)"
     d="M   0  0
        Q  18 36   0 36
        T          0  0
        Z"/>
    
    
    
    
    <g stroke-width="0.25" stroke="red">
      <g transform="translate(0)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="10"/>
        <ellipse rx="1" ry="1" cx="10"  cy="17"/>
        <ellipse rx="1" ry="1" cx="10"  cy="27"/>
        <ellipse rx="1" ry="1" cx="10"  cy="40"/>
        <ellipse rx="1" ry="1" cx="-10" cy="40"/>
        <ellipse rx="1" ry="1" cx="-10" cy="27"/>
        <ellipse rx="1" ry="1" cx="-10" cy="17"/>
        <line x1="0"   y1="0"  x2="0"   y2="10"/>
        <line x1="10"  y1="17" x2="10"  y2="40"/>
        <line x1="-10" y1="40" x2="-10" y2="17"/>
      </g>
      <g transform="translate(40)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="16"/>
        <ellipse rx="1" ry="1" cx="15"  cy="25"/>
        <ellipse rx="1" ry="1" cx="5"   cy="34"/>
        <ellipse rx="1" ry="1" cx="0"   cy="38"/>
        <ellipse rx="1" ry="1" cx="-5"  cy="34"/>
        <ellipse rx="1" ry="1" cx="-15" cy="25"/>
        <line x1="0"  y1="0"  x2="0"   y2="16"/>
        <line x1="15" y1="25" x2="0"   y2="38"/>
        <line x1="0"  y1="38" x2="-15" y2="25"/>
      </g>
      <g transform="translate(80)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="0"   cy="10"/>
        <ellipse rx="1" ry="1" cx="18"  cy="36"/>
        <ellipse rx="1" ry="1" cx="0"   cy="36"/>
        <ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/>
        <line x1="0"  y1="0"  x2="0"   y2="10"/>
        <line x1="18" y1="36" x2="0"   y2="36"/>
        <line x1="0"  y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/>
      </g>
      <g transform="translate(120)">
        <ellipse rx="1" ry="1" cx="0"   cy="0" />
        <ellipse rx="1" ry="1" cx="18"  cy="36"/>
        <ellipse rx="1" ry="1" cx="0"   cy="36"/>
        <ellipse rx="1" ry="1" cx="-18" cy="36" stroke="gray"/>
        <line x1="18" y1="36" x2="0"   y2="36"/>
        <line x1="0"  y1="36" x2="-18" y2="36" stroke="gray" stroke-dasharray="0.5"/>
      </g>
    </g>    
  </g>
  <g font-size="6" transform="translate(-1.5,-4)">
    <text x="-10" y="-8"># of unique points:</text>
    <text transform="translate(  0)">8</text>
    <text transform="translate( 40)">7</text>
    <text transform="translate( 80)">4</text>
    <text transform="translate(120)">3</text>
  </g>
</svg>
Expandir fragmento

Andrew Willems
fuente