如何在HTML中创建泪珠?


222

如何创建这样的形状以显示在网页上?

我不想使用图像,因为它们在缩放时会变得模糊

我需要使用HTML,CSS或SVG制作的泪珠形状

我尝试过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>

事实证明真是搞砸了。

然后我尝试使用SVG:

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

它确实得到了形状,但底部没有弯曲。

有没有一种方法可以创建此形状,以便可以在HTML页面中使用它?


12
“我不想使用图像,因为它们在缩放时会变得模糊”,为什么要缩放图像?如果您使用[srcset]<picture>元素,它们不会变得模糊。更好的是,只需链接到svg图像:<img src="tear.svg" alt="Teardrop"/>
zzzzBov

32
@zzzzBov:您是否真的推荐该picture元素?不支持 IE,不支持 Chrome的早期版本,不支持野生动物园。我应该继续吗?
jbutler483

9
@zzzzBov。why are you scaling the image?好吧,如果没有开发人员缩放图像,图像可能会变得模糊。您所需要做的就是放大浏览器。就我而言,我有一个HighDPI屏幕和大量模糊的图像。所以,是的,如果您可以避免使用SVG拍摄图像,那就去吧。
Nolonar 2015年

63
Unicode解决了所有问题... U + 1F4A7💧–
Thomas Weller

21
@Thomas我看到一个正方形:/ i.stack.imgur.com/8fXMf.png
user000001 2015年

Answers:


327

SVG方法:

使用内嵌SVG<path/>元素而<polygon/>不是不允许弯曲形状的元素,可以轻松实现双曲线。

以下示例将<path/>元素与配合使用:

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

SVG是使这种形状具有双曲线的好工具。您可以通过SVG / CSS比较来查看有关双曲线的文章。在这种情况下使用SVG的一些优点是:

  • 曲线控制
  • 填充控件(不透明度,颜色)
  • 描边控制(宽度,不透明度,颜色)
  • 代码量
  • 时间来建立和维护形状
  • 可扩展
  • 没有HTTP请求(如果像示例中那样内联使用)

嵌入式SVG的浏览器支持可追溯到Internet Explorer9。有关更多信息,请参见canIuse


它可以减少到: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ...这将填满您指定的区域,因此可能会使“胖”或“瘦”的雨滴...如有必要,请更改为固定的高度/宽度
technosaurus

1
@technosaurus减少d="..."属性中命令数量的问题是,下拉列表的顶部不再有双曲线。
web-tiki 2015年

10
+1,因为您应该为此使用SVG,而不是CSS。您需要实现的CSS功能具有与SVG大致相同的浏览器支持,因此CSS在这一点上没有优势。CSS可以做形状,但这不是设计的目的。不要仅仅为了聪明而尝试用螺丝刀锤打钉子,而只要使用专门为该工具设计的工具即可。
Simba 2015年

6
更好的是:创建一个SVG文件并<img />在超文本文档中使用。
Andreas Rejbrand

@AndreasRejbrand可能是一个好主意,具体取决于项目,但它添加了OP似乎希望避免的HTTP请求。
web-tiki 2015年

135

基本边界半径

您可以使用border-radius'和transform在CSS中相对轻松地完成此操作。您的CSS只是一点点。

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

先进的边界半径

这将与上面的非常相似,但会使其更具形状。

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


4
@zzzzBov我不完全了解它是错误的工具,OP要求使用CSS或SVG解决方案,我想出了一个与描述尽可能接近的CSS解决方案。其轻巧且易于修改。
Stewartside 2015年

12
@zzzzBov通常将CSS用于图像和精灵。生成通用的“图像”是非常少的代码。我认为这是适当的,因为它可以在网页上使用的问题规范内使用。
Stewartside 2015年

13
@zzzzBov:CSS非常适合形状。谁说这种形状用于什么用途?从语义上讲图像 -OP明确表示他们不希望使用图像,否则为什么还会提出这样的问题?
jbutler483 2015年

46
@ jbutler483,“ CSS非常适合形状”不,太糟糕了。仅仅因为你能做并不意味着你应该。它在标记中引入了各种垃圾,并且维护起来很麻烦。图像易于维护,因为它们很容易分成各自的独立文件。
zzzzBov

19
当您使用引导程序或字体真棒图标时,会发生“标记中的垃圾”。认真地说,我认为当(很明显)可以使用边界半径声明来实现此功能时,您会在诸如此类的操作上走高一点。但是干草,谁告诉你不要使用图像呢?
jbutler483

88

CSS代码的主要问题是:

  1. 您使用的高度与宽度不同
  2. 您尚未旋转正确的角度大小

因此,通过“修复”这些问题,您将生成:

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

另请注意,为了节省CSS长度,您可以将border-radius属性重写为:

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

如本文提要所示,可以使用伪元素来增强此效果

备择方案

我发现这个维奈Challuru上codepen。

请注意,通过这里的逻辑,我几乎可以创建任何形状的SVG。例如,快速输出为:

它使用SVG,可让您以多种方式更改形状,并具有将形状更改为所需结果的能力:

免责声明我没有写上述笔,只是提供了它。


CSS版本

尽管这还远未完成,但是您也可以使用CSS生成此形状。

SVG版本

我应该知道SVG应该是这个答案的首要问题,但是,我喜欢挑战,因此这里是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>

更改path值,您将能够更改泪滴设计的形状。


10
这些看起来都很...冗长。js解决方案特别荒谬。
egid 2015年

4
@egid:我确实在回答中指出我没有创建js版本。还要注意,js版本允许您在运行时更改形状
jbutler483

55

IMO这种形状需要平滑的曲线到贝塞尔曲线,以确保曲线的连续性。

有问题的掉落:

对于下降的问题,

  • 由于控制点的长度相同,因此不能使用平滑曲线。但是我们仍然需要使控制点与先前的控制点完全相反(180度),以确保曲线完全连续性。下图显示了该点:

在此处输入图片说明
注意:红色和蓝色曲线是两条不同的二次曲线。

  • stroke-linejoin="miter",用于尖的顶部。

  • 由于此形状仅使用连续的c命令,因此我们可以忽略它。

这是最后一个片段:

<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的可接受答案曲线不是很连续。


对于IE 5-8(VML)

仅适用于IE 5-8。VML使用与SVG不同的命令。例如。它使用v表示相对三次贝塞尔曲线

注意:此代码段也不会在IE 5-8中运行。您需要创建一个html文件并直接在浏览器中运行它。

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

“不能使用平滑曲线,因为控制点的长度将相同。” “平滑”是否仅意味着切线手柄(控制点)位于一条直线上?为什么它们必须具有相同的长度?
Niccolo M.

2
@NiccoloM。在svg中,平滑曲线(T和S命令)表示手柄对称相对,并且等于先前手柄的长度。在正常语言中,平滑曲线可能意味着不同的手柄长度,但是在svg中,该长度也等于以前的曲线手柄:)
Max Payne

42

或者,如果观众的字体支持,则使用Unicode字符

水滴:💧(&#128167;

要么

黑色滴:🌢(&#127778;

相应缩放!


您可以将其与@ font-face一起使用,但是可以将字体文件保存在正确的位置等等。
1934286 2015年

3
SVG和这样的专用Unicode符号很好。CSS不好。PNG可以,但是由于它是栅格图形,因此并不完美。JPG非常糟糕,非常糟糕,一见到我就会做噩梦。
Andreas Rejbrand 2015年

@AndreasRejbrand 20x20 PNG的缩放比例会比200x200 JPG的缩放比例更差。并且,在相同大小的情况下,未压缩的JPG等效于PNG。它们都是栅格,并且遭受相同的问题。
nico

@nico:从理论上讲,是的,您可以使用零压缩的JPG。但是,互联网是充满像这样的灾难:en.wikipedia.org/wiki/Atomic_number#/media/...
安德烈亚斯Rejbrand

28

我个人将使用SVG。您可以在大多数矢量图形软件中创建SVG。我建议:

我在下面做了一个说明您在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>


27

HTML画布

到目前为止,此线程中没有发现此选项。用于Canvas绘图的命令与SVG非常相似(Web-tiki应归功于此答案中使用的基本概念)。

可以使用画布自己的曲线命令(Quadratic或Bezier)或Path API创建相关形状。答案包含所有三种方法的示例。

浏览器对Canvas的支持非常好


使用二次曲线

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>

以下是具有渐变填充和阴影的高级版本。我还包括了hover对形状的影响,以说明与SVG相比Canvas的一个缺点。画布基于栅格(像素),因此在缩放到超过特定点时将看起来模糊/像素化。唯一的解决方案是在每次浏览器调整大小时重新绘制形状,这是一项开销。


使用贝塞尔曲线

使用路径API

注意:如我在此处的答复所述,IE和Safari尚不支持Path API。


进一步阅读:


我看不到svg总是更好的选择。在许多情况下,这当然是更好的选择。但是画布有其自身的优点。好答案。从您的回答中我可以看出,使用SVG肯定容易得多!
Max Payne 2015年

是的@TimKrul,它更易于编写/使用SVG。画布具有自己的优点,但据我所读,使用SVG等简单徽标之类的形状时并不太有利,主要是因为它基于栅格。
哈里

25

我还在用户Ana Tudor使用CSS以及样式和参数方程式制作的Codepen上找到了这一点。非常简单,很少的代码。许多浏览器都支持CSS3 Box-shadow样式: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>


7
不过,这与所要求的泪珠不同。
doppelgreener 2015年

20

CSS版本

由于这里的回答很少,我想为什么不使用另一种方法来添加它。这同时使用HTMLCSS来创建泪滴。

这将允许您更改边框的颜色和背景,并重新调整其顶部的大小。

使用单个,div我们可以使用border和创建一个圆border-radius。然后,使用伪元素(:before:after在此处创建更多 CSS三角形 ,这将成为水滴的尖端。使用边框作为边框,我们以较小的尺寸和所需的背景色放在上面。:before:after

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>


这是具有背景色的泪滴演示

就像将背景色放在上div并将:after bottom-border颜色更改为相同一样简单。要更改边框,您还需要更改div边框颜色和:before背景颜色。


红润笔缺少背景颜色值。
2015年

2
@Persijn Harry在聊天中说了些什么,而我当时在那只笔上看着它,忘记了它不时自动保存。哈哈,我会把它恢复原样。做完了
红润

17

仅通过使用图像转换资源(例如用于创建以下内容的http://image.online-convert.com/convert-to-svg),使用SVG即可轻松做到这一点:

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


9
@Persijn为什么您不断询问某位编辑的副本?svg是svg,您可以使用要创建的任何工具。
Abhinav Gauniyal

2
@AbhinavGauniyal:您喜欢称呼“编辑者”,在声明中添加额外的“绒毛”。例如,300.000000pt以及真正不需要的元数据
jbutler483

12
@Persijn用手/编码是什么意思。有人刚刚制作/手工/编码插图画家来简化他们的编码任务,但它仍然产生相同的结果。再说一次,当您在浏览器中使用svg时,为什么不自己使用汇编语言来手工/编码呢?以及为什么停止组装,使用导线手工/编码或自己绘制。这不是我所期望的原因。
Abhinav Gauniyal

2
@ jbutler483是的,可以将它们修剪掉。有很多工具可以帮助您完成此任务,这是一个适合您的工具github.com/svg/svgo
Abhinav Gauniyal 2015年

6
@persijn此答案提供了所需的svg路径。我真的不知道您的反对意见是什么。
user428517 2015年

14

如果确实选择使用SVG,则应该阅读路径。我还建议使用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>


1
为什么要在defs标记内使用一行?难道您不能一成不变地做成这种形状吗?不是3 +矩形吗?
Persijn 2015年

6

这是四个逐渐简化的SVG泪滴形状:

在此处输入图片说明

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.