Como crio uma lágrima em HTML?

222

Como crio uma forma como essa para ser exibida em uma página da web?

Eu não quero usar imagens, pois elas ficam embaçadas no dimensionamento

Forma de lágrima que preciso criar com HTML, CSS ou SVG

Eu tentei com 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>

Isso acabou realmente ferrado.

E então eu tentei com SVG:

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

Ele ficou com a forma, mas a parte inferior não estava curvada.

Existe uma maneira de criar essa forma para que possa ser usada em uma página HTML?

Persijn
fonte
12
"Não quero usar imagens, pois elas ficam embaçadas ao dimensionar", por que você está dimensionando a imagem? Eles não ficam embaçados se você usar [srcset]ou o <picture>elemento Melhor ainda, apenas um link para uma imagem SVG:<img src="tear.svg" alt="Teardrop"/>
zzzzBov
32
@zzzzBov: Você está realmente recomendando o pictureelemento? Sem suporte para o IE, sem suporte para versões anteriores do Chrome, sem suporte para safari. Devo continuar?
precisa
9
@zzzzBov. why are you scaling the image?Bem, a imagem pode parecer embaçada sem que o desenvolvedor a dimensione. Tudo o que você precisa é de um navegador com zoom. No meu caso, tenho uma tela HighDPI e muitas imagens tremidas. Então, sim, se você pode evitar imagens usando SVG, faça isso.
Nolonar 8/06
63
Unicode resolve tudo ... U + 1F4A7 💧
Thomas Weller
21
@Thomas vejo um quadrado: / i.stack.imgur.com/8fXMf.png
user000001

Respostas:

327

Abordagem SVG:

Você pode obter a curva dupla facilmente com um SVG embutido e o <path/>elemento em vez do <polygon/>elemento que não permite formas curvas.

O exemplo a seguir usa o <path/>elemento com:

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

O SVG é uma ótima ferramenta para criar esse tipo de formas com curvas duplas. Você pode verificar este post sobre curvas duplas com uma comparação SVG / CSS. Algumas das vantagens de usar SVG neste caso são:

  • Controle de curva
  • Controle de preenchimento (opacidade, cor)
  • Controle de curso (largura, opacidade, cor)
  • Quantidade de código
  • Hora de construir e manter a forma
  • Escalável
  • Nenhuma solicitação HTTP (se usada em linha, como no exemplo)

O suporte do navegador ao SVG embutido volta ao Internet Explorer 9. Consulte canIuse para obter mais informações.

web-tiki
fonte
ele pode reduzir a: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... isso vai preencher a área que você dá, por isso pode fazer "gordura" ou "magro" Pingos de chuva ... mudança de altura fixa / largura, se necessário
Technosaurus
1
@technosaurus O problema com a redução do número de comandos no d="..."atributo é que você não tem mais a curva dupla no topo da gota.
Web-tiki
10
+1 porque você deve usar SVG para isso, não CSS. Os recursos de CSS que você precisa para obtê-lo têm o mesmo suporte de navegador que o SVG, portanto não há vantagem para o CSS nessa pontuação. CSS pode fazer formas, mas não é para isso que foi projetado; não tente martelar um prego com uma chave de fenda apenas por ser inteligente, quando puder fazê-lo da mesma forma com uma ferramenta projetada para o trabalho.
Simba
6
Ainda melhor: crie um arquivo SVG e use <img />no documento de hipertexto.
Andreas Rejbrand
@AndreasRejbrand que pode ser uma boa ideia, dependendo do projeto, mas adiciona uma solicitação HTTP que o OP parece querer evitar.
web-tiki
135

Raio básico da borda

Você pode fazer isso no CSS de maneira relativamente fácil usando o raio da borda e as transformações. Seu CSS ficou um pouco fora do ar.

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

Raio de borda avançado

Isso será muito semelhante ao anterior, mas dará um pouco mais 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>

Stewartside
fonte
4
@zzzzBov Eu não entendo completamente como é a ferramenta errada, o OP pediu uma solução CSS ou SVG e eu vim com uma solução CSS que se encaixa na descrição o mais próximo possível. É leve e fácil de modificar.
Stewartside
12
@zzzzBov O uso de CSS para imagens e sprites é de uso comum. É um pedaço de código muito mínimo para gerar uma "Imagem" genérica. Eu acredito que é apropriado porque é utilizável dentro das especificações de perguntas de ser utilizável em uma página da web.
Stewartside
13
@zzzzBov: CSS é perfeitamente adequado para formas. Quem pode dizer para que serve essa forma? semanticamente uma imagem - o OP declarou claramente que não deseja usar uma imagem; caso contrário, por que mais essa pergunta seria feita?
Jbutler483
46
@ jbutler483, "CSS é perfeitamente adequado para formas" não, é horrível. Só porque você pode , não significa que deveria . Introduz todo tipo de lixo na marcação e é uma bagunça tediosa de manter. As imagens são muito mais simples de manter, pois são facilmente separadas em seu próprio arquivo individual.
precisa saber é o seguinte
19
O 'lixo na marcação' ocorre quando você usa a inicialização ou os ícones impressionantes da fonte. Sério, eu acho que você está exagerando nesse tipo de coisa quando (obviamente) isso pode ser alcançado usando uma declaração de raio de borda. Mas, feno, quem lhe dirá para não usar imagens?
Jbutler483
88

Seu principal problema com o seu código CSS foi:

  1. Você usou uma altura diferente da largura
  2. Você não girou o tamanho correto do ângulo

Portanto, 'corrigindo' esses problemas, você geraria:

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

Observe também que, para economizar no tamanho do CSS, você pode reescrever suas propriedades de raio de borda para:

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

isso poderia ser aprimorado com pseudo elementos, como mostrado neste violino

Alternativas

Encontrei isso por Vinay Challuru no codepen.

Observe que, com a lógica aqui, eu consegui criar o SVG para praticamente qualquer forma possível de construção / etc. Por exemplo, uma saída rápida foi:

Ele está usando um SVG e permite alterar a forma de várias maneiras, podendo alterar sua forma para o resultado desejado:

Isenção de responsabilidade Eu não escrevi a caneta acima, apenas a adquiri.


Versão CSS

Embora isso esteja longe de estar completo, você também poderá gerar essa forma usando CSS.

Versão SVG

Eu deveria saber que o SVG deve estar no topo desta resposta, no entanto, eu gosto de um desafio e, portanto, aqui está uma tentativa com o 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>

Alterando os pathvalores, você poderá alterar a forma do seu design de lágrima.

jbutler483
fonte
10
Tudo isso parece muito ... detalhado. A solução js é particularmente absurda.
egid 9/06/2015
4
@egid: afirmei na minha resposta que não criei a versão js. Além disso, observe a versão js é o que lhe permite alterar a forma em tempo de execução
jbutler483
55

Na IMO, esse formato requer beziers de curva a curva suaves para garantir a continuidade da curva.

A gota em questão:

Para a queda em questão,

  • curvas suaves não podem ser usadas, pois os pontos de controle não terão o mesmo comprimento. Mas ainda precisamos fazer com que os pontos de controle fiquem exatamente opostos (180 graus) aos pontos de controle anteriores, para garantir a continuidade total da curva. A figura abaixo ilustra este ponto:

insira a descrição da imagem aqui
Nota : As curvas vermelha e azul são duas curvas quadráticas diferentes.

  • stroke-linejoin="miter", para a parte superior pontiaguda.

  • Como essa forma usa apenas ccomandos sucessivos , podemos omiti-la.

Aqui está o trecho 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>

TBH , porém , as curvas de resposta aceitas não são muito contínuas.


Para IE 5-8 (VML)

Funciona apenas no IE 5-8. O VML usa comandos diferentes do SVG . Por exemplo. usa v para beziers cúbicos relativos .

Nota: este trecho também não será executado no IE 5-8. Você precisa criar um arquivo html e executá-lo diretamente no 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
fonte
"curvas suaves não podem ser usadas, pois os pontos de controle não terão o mesmo comprimento". "Suavizar" não significa apenas que as alças tangentes (pontos de controle) ficam em uma linha reta? Por que eles têm que ter o mesmo comprimento?
Niccolo M.
2
@NiccoloM. Em svg, curva suave (comandos T e S) significa que a alça é simetricamente oposta e igual ao comprimento da alça anterior . Em linguagem normal, curva suave pode significar diferentes comprimentos de pega, mas em SVG, o comprimento é também igual ao identificador curvas anterior :)
Max Payne
42

Ou, se a fonte de seus espectadores suportar, use os caracteres Unicode

GOTA: 💧 ( &#128167;)

ou

GOTA PRETA: 🌢 ( &#127778;)

Escale de acordo!

Gnubie
fonte
Você pode usar isso com @ font-face, mas então você tem um arquivo de fonte para manter no lugar certo e tal.
1934286
3
SVG e um símbolo Unicode dedicado como este são bons. CSS para isso é ruim. PNG é bom, mas não é perfeito, pois são gráficos rasterizados. JPG é extremamente ruim, tão ruim que eu teria pesadelos se o visse.
Andreas Rejbrand
@AndreasRejbrand um PNG de 20x20 teria uma escala pior que um JPG de 200x200. E, com o mesmo tamanho, um JPG não compactado é equivalente a um PNG. Ambos são rasterizados e sofrem dos mesmos problemas.
Nico
@nico: Em teoria, sim, você pode usar JPG com compressão zero. Mas a Internet está cheia de desastres como este: en.wikipedia.org/wiki/Atomic_number#/media/...
Andreas Rejbrand
28

Eu pessoalmente usaria um SVG para isso. Você pode criar SVGs na maioria dos softwares de gráficos vetoriais. Eu recomendo:

Fiz um abaixo que é um rastreio de sua forma no 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>

Djave
fonte
27

Tela HTML

Esta é uma opção descoberta neste segmento até o momento. Os comandos usados ​​para os desenhos do Canvas são muito semelhantes ao SVG (e o web-tiki merece os créditos pela idéia base usada nesta resposta).

A forma em questão pode ser criada usando os comandos de curva da própria tela (Quadratic ou Bezier) ou a API do caminho. A resposta contém exemplos para todos os três métodos.

O suporte do navegador para o Canvas é bastante bom .


Usando curvas quadrá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>

Abaixo está uma versão avançada com preenchimento de gradiente e sombras. Também incluí um hoverefeito na forma para ilustrar uma desvantagem do Canvas quando comparado ao SVG. A tela é baseada em varredura (pixel) e, portanto, pareceria borrada / pixelizada quando dimensionada além de um determinado ponto. A única solução para isso seria repintar a forma em cada redimensionamento de navegador, o que é uma sobrecarga.


Usando curvas de Bezier

Usando Path API

Nota: Como mencionado na minha resposta aqui , a API do Path ainda não é suportada pelo IE e pelo Safari.


Leitura adicional:

atormentar
fonte
Eu não vejo como svg é a melhor opção sempre. certamente é a melhor opção em muitos casos como este. Mas a tela tem seus próprios profissionais. Boa resposta. pela sua resposta, posso entender que, certamente, é muito mais fácil usar SVG!
Max Payne
Sim, @ TimKrul, é mais fácil escrever / usar SVG. O Canvas tem seus próprios profissionais, mas, pelo que eu li, não é muito vantajoso quando usado para formas simples de logotipo, principalmente porque é baseado em varredura, diferentemente do SVG.
Harry
25

Eu também encontrei isso no Codepen feito pela usuário Ana Tudor usando CSS e as box-shadowequações de estilo e paramétricas. Muito simples, muito pouco código. E muitos navegadores suportam o 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>

Luke Shimkus
fonte
7
Isso não se parece com o tipo de lágrima que está sendo solicitada.
doppelgreener
20

Versão CSS

Como há poucas respostas aqui, pensei em por que não adicionar um outro método. Isso está usando HTML e CSS para criar a lágrima.

Isso permitirá que você altere a cor da borda e do plano de fundo da lágrima e também redimensione a parte superior.

Usando um único div, podemos criar um círculo com bordere border-radius. Então, usando pseudo-elementos ( :before& :after), criamos um triângulo CSS mais aqui , que atuará como a ponta da lágrima. Utilizando o :beforecomo borda, colocamos :afterno topo um tamanho menor e a cor de fundo desejada.

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>


Aqui está uma demonstração da lágrima com uma cor de fundo

É tão simples quanto colocar uma cor de fundo na dive alterar :after bottom-bordera mesma. Para alterar a borda, você precisará alterar também a divcor da borda e a :beforecor do plano de fundo.

Ruddy
fonte
A caneta está com um valor de cor de plano de fundo ausente.
Persijn 10/06/2015
2
@Persijn Harry disse algo no chat e eu estava olhando na caneta esquecendo que a gravação automática é salva de vez em quando. Haha, vou colocar de volta do jeito que era. Feito.
quer
17

É muito fácil fazer isso com o SVG usando apenas um recurso de conversão de imagem como http://image.online-convert.com/convert-to-svg , que foi usado para criar o seguinte:

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

Anônimo
fonte
9
@Persijn Por que você continua perguntando copiado de algum editor? Svg é svg, você pode usar a ferramenta que deseja criar.
Abhinav Gauniyal
2
@AbhinavGauniyal: 'editores' como você quiser chamá-los, adicione 'fluff' extra às declarações. Por exemplo, 300.000000pte metadados que não é realmente necessário
jbutler483
12
@Persijn, o que você quer dizer com mão / codificado. Alguém acabou de criar um ilustrador / manual / codificado para facilitar suas tarefas de codificação, e ainda produz a mesma coisa. Então, novamente, quando você está usando svg no navegador, por que você não o codifica manualmente usando a linguagem assembly? e por que parar na montagem, codifique / codifique manualmente usando fios ou apenas desenhe você mesmo. Esta não é uma razão que eu estava esperando.
Abhinav Gauniyal
2
@ jbutler483 sim e eles podem ser aparados. Existem muitas ferramentas que fazem isso para você, aqui está um para você github.com/svg/svgo
Abhinav Gauniyal
6
@persijn esta resposta fornece os caminhos svg necessários. Eu realmente não tenho idéia de qual é a sua objeção.
user428517
14

Se você optar por usar o SVG, leia os caminhos. Eu também sugeriria um 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>

Brennen Sprimont
fonte
1
Por que você usaria uma linha dentro de uma tag defs? E você não pode fazer essa forma em um caminho, e não em 3 + um reto?
Persijn
6

Aqui estão quatro formas de lágrima SVG progressivamente mais simples:

insira a descrição da imagem aqui

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

Andrew Willems
fonte