मैं HTML में अश्रु कैसे बना सकता हूँ?

Question

वेबपृष्ठ पर प्रदर्शित करने के लिए मैं इस तरह की आकृति कैसे बना सकता हूं?

मैं छवियों का उपयोग नहीं करना चाहता क्योंकि वे स्केलिंग पर धुंधली हो जाएंगे

मैंने 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 viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

इसे आकार नहीं मिला, लेकिन नीचे का हिस्सा घुमावदार नहीं था।

क्या इस आकृति को बनाने का कोई तरीका है ताकि इसका उपयोग HTML पृष्ठ में किया जा सके?

Comments

"मैं छवियों का उपयोग नहीं करना चाहता क्योंकि वे स्केलिंग पर धुंधले हो जाएंगे", आप छवि को क्यों बढ़ा रहे हैं? यदि आप उपयोग [srcset]या <picture>तत्व को धुंधला नहीं करते हैं । बेहतर अभी तक, बस एक svg छवि के लिए लिंक:<img src="tear.svg" alt="Teardrop"/>

— zzzzBov

@zzzzBov: क्या आप वास्तव में pictureतत्व की सिफारिश कर रहे हैं ? कोई समर्थन आईई, के लिए कोई समर्थन क्रोम, के प्रारंभिक संस्करणों के लिए कोई समर्थन नहीं सफारी के लिए। क्या मुझे जारी रखना चाहिए?

— jbutler483

@zzzzBov। why are you scaling the image?ठीक है, छवि देव के बिना धुंधली दिखाई दे सकती है। इसके लिए आपको बस एक ब्राउज़र ज़ूम इन करना होगा। मेरे मामले में, मेरे पास एक हाईडीपीआई स्क्रीन है और बहुत से धुंधले चित्र हैं। तो, हाँ, यदि आप एसवीजी का उपयोग करके छवियों से बच सकते हैं, तो इसके लिए जाएं।

— नोलोनार

यूनिकोड यह सब हल करता है ... U + 1F4A7 it

— थॉमस वेलर

@ थोमस मुझे एक वर्ग दिखता है: / i.stack.imgur.com/8fXMf.png

— user000001

Answer 1

एसवीजी दृष्टिकोण:

आप इनलाइन SVG और <path/>एलिमेंट के साथ आसानी से डबल वक्र प्राप्त कर सकते हैं , तत्व के बजाय <polygon/>जो घुमावदार आकृतियों की अनुमति नहीं देता है।

निम्नलिखित उदाहरण के <path/>साथ तत्व का उपयोग करता है :

• 2 शीर्ष वक्रों के लिए 2 द्विघातीय बेज़ियर वक्र कमांड (साथ शुरू होने वाली रेखाएं Q)
• बड़े नीचे के लिए 1 आर्क कमांड (लाइन की शुरुआत A)

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

एसवीजी डबल कर्व्स के साथ इस तरह की आकृतियाँ बनाने के लिए एक बढ़िया उपकरण है। आप इस पोस्ट को एसवीजी / सीएसएस तुलना के साथ डबल घटता के बारे में देख सकते हैं । इस मामले में एसवीजी का उपयोग करने के कुछ फायदे हैं:

• वक्र नियंत्रण
• नियंत्रण भरें (अपारदर्शिता, रंग)
• स्ट्रोक नियंत्रण (चौड़ाई, अस्पष्टता, रंग)
• कोड की राशि
• आकार बनाने और बनाए रखने का समय
• मापनीय
• कोई HTTP अनुरोध (यदि उदाहरण में इनलाइन का उपयोग किया जाता है)

---

इनलाइन एसवीजी के लिए ब्राउज़र समर्थन इंटरनेट एक्सप्लोरर 9 पर वापस जाता है । अधिक जानकारी के लिए canIuse देखें ।

Comments

इसे कम कर सकते हैं: <svg width="100%" height="100%" viewBox="0 0 8 8" /> <path d="M4 1L3 4A1.2 2 0 1 0 5 4"/> </svg> ... यह आपके द्वारा दिए गए क्षेत्र को भर देगा, इसलिए यह "मोटा" या "पतला" वर्षावन बना सकता है ... यदि आवश्यक हो तो निश्चित ऊंचाई / चौड़ाई में परिवर्तन करें

— टेक्नोस्कोरस

@technosaurus d="..."विशेषता में आदेशों की संख्या कम करने के साथ समस्या यह है कि आपके पास ड्रॉप के शीर्ष पर दोहरा वक्र नहीं है।

— वेब-टिकी

+1 क्योंकि आपको इसके लिए SVG का उपयोग करना चाहिए, CSS का नहीं। CSS फीचर्स आपको इसे प्राप्त करने की आवश्यकता होगी, इसमें एसवीजी के समान ही ब्राउज़र सपोर्ट है, इसलिए उस स्कोर पर सीएसएस के लिए कोई लाभ नहीं है। सीएसएस आकार कर सकता है, लेकिन यह वह नहीं है जिसके लिए इसे बनाया गया है; सिर्फ चालाक होने के लिए एक पेचकश के साथ एक कील में हथौड़ा करने की कोशिश न करें जब आप इसे काम के लिए डिज़ाइन किए गए उपकरण के साथ ही कर सकते हैं।

— सिम्बा

इससे भी बेहतर: एक SVG फ़ाइल बनाएँ और <img />हाइपरटेक्स्ट दस्तावेज़ में उपयोग करें ।

— एंड्रियास रिजेब्रांड

@AndreasRejbrand जो परियोजना के आधार पर एक अच्छा विचार हो सकता है, लेकिन यह एक HTTP अनुरोध जोड़ता है, जो ओपी से बचना चाहता है।

— वेब-टिकी

Answer 2

मूल सीमा-त्रिज्या

आप सीएसएस के भीतर अपेक्षाकृत आसानी से सीमा-त्रिज्या का उपयोग करके ऐसा कर सकते हैं। आपका सीएसएस अभी थोड़ा बाहर था।

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

Comments

@zzzzBov मुझे पूरी तरह से समझ नहीं आया कि यह गलत उपकरण कैसे है, ओपी ने एक सीएसएस या एसवीजी समाधान के लिए कहा और मैं एक सीएसएस समाधान के साथ आया जो विवरण को यथासंभव करीब से फिट करता है। इसके हल्के और संशोधित करने में आसान है।

— स्टीवर्टसाइड

@zzzzBov छवियों और स्प्राइट्स के लिए CSS का उपयोग करना आम उपयोग है। यह एक सामान्य "इमेज" उत्पन्न करने के लिए कोड का एक न्यूनतम टुकड़ा है। मेरा मानना ​​है कि यह उचित है क्योंकि यह एक वेब पेज पर प्रयोग करने योग्य होने के प्रश्नों के भीतर प्रयोग करने योग्य है।

— स्टीवर्टसाइड

@zzzzBov: सीएसएस आकार के लिए पूरी तरह से ठीक है। यह कहने के लिए कि इस तरह की आकृति का उपयोग किसके लिए किया जाता है? शब्दार्थ - एक छवि - ओपी ने स्पष्ट रूप से कहा है कि वे एक छवि का उपयोग नहीं करना चाहते हैं, अन्यथा ऐसा प्रश्न क्यों पूछा जाएगा?

— jbutler483

@ jbutler483, "CSS आकार के लिए पूरी तरह से ठीक है" नहीं, यह भयानक है। सिर्फ इसलिए कि आप कर सकते हैं इसका मतलब यह नहीं कि आप ऐसा करना चाहिए । यह मार्कअप में सभी प्रकार के कचरे का परिचय देता है, और बनाए रखने के लिए एक थकाऊ गड़बड़ है। छवियां बनाए रखने के लिए बहुत सरल हैं क्योंकि वे आसानी से अपने स्वयं के व्यक्तिगत-निहित फ़ाइल में अलग हो जाते हैं।

— zzzzBov 16

'मार्कअप में कचरा' तब होता है जब आप बूटस्ट्रैप या फॉन्ट भयानक आइकॉन का उपयोग करते हैं। गंभीरता से, मुझे लगता है कि जब आप (काफी स्पष्ट रूप से) यह पसंद करते हैं तो सीमा पार राशन घोषणा का उपयोग करके प्राप्त किया जा सकता है। लेकिन हाय, जो तुम्हें बताने के लिए छवियों का उपयोग नहीं है?

— jbutler483

Answer 3

आपका सीएसएस कोड के साथ आपका मुख्य मुद्दा था:

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>

कृपया सीएसएस लंबाई को बचाने के लिए भी ध्यान दें, आप अपनी सीमा-त्रिज्या गुणों को फिर से लिख सकते हैं:

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

---

यह छद्म तत्वों के साथ बढ़ाया जा सकता है जैसा कि इस फिडल में दिखाया गया है

वैकल्पिक

मैंने पाया इस से विनय Challuru पर codepen।

कृपया ध्यान दें कि यहाँ तर्क के साथ, मैं लगभग किसी भी संभावित बिल्ड शेप / आदि में SVG बनाने में सक्षम था । उदाहरण के लिए, एक त्वरित आउटपुट था:

<svg viewBox='0 0 400 400'>
  <path fill="none" stroke="#333" stroke-width="5" d="M200,40 C200,115 280,180 280,240 A80,80,0 0,1,120,240 C120,180 200,115 200,40" stroke-linejoin='miter'></path>
</svg>

यह एक एसवीजी का उपयोग कर रहा है और आपको आकार को कई तरीकों से बदलने की अनुमति देता है, इसके आकार को वांछित परिणाम में बदलने की क्षमता है:

var SVG = function() {
  this.element = document.getElementsByTagName("svg")[0];
  this.namespace = "http://www.w3.org/2000/svg";
  this.width = 400;
  this.height = 400;
}

/****Let's initialise our SVG ready to draw our shape****/
var svg = new SVG();

/****This sets up the user interface - we've included the script for this as an external library for the codepen****/
var gui = new dat.GUI();

/****Here's where the code to create the shape begins!****/
var Teardrop = function() {
  this.x = svg.width * 0.5;
  this.y = svg.height * 0.1;
  this.width = svg.width * 0.4;
  this.triangleHeight = svg.height * 0.5;
  this.yCP1 = svg.height * 0.2;
  this.yCP2 = svg.height * 0.45;
  this.element = null;
  this.ctrlPoints = [];
  this.anchors = [];
  this.fill = "none";
  this.stroke = "#333";
  this.strokeWidth = 2;
  this.showCtrlPoints = true;
  this.init();
}

Teardrop.prototype.init = function() {
  this.element = document.createElementNS(svg.namespace, "path");
  svg.element.appendChild(this.element);
  this.element.setAttribute("fill", this.fill);
  this.element.setAttribute("stroke", this.stroke);
  this.element.setAttribute("stroke-width", this.strokeWidth);

  for (var i = 0; i < 3; i++) {
    this.ctrlPoints.push(document.createElementNS(svg.namespace, "circle"));
    svg.element.appendChild(this.ctrlPoints[i]);

    this.ctrlPoints[i].setAttribute("fill", this.fill);
    this.ctrlPoints[i].setAttribute("stroke", 'red');
    this.ctrlPoints[i].setAttribute("stroke-width", 1);


    this.anchors.push(document.createElementNS(svg.namespace, "line"));
    svg.element.appendChild(this.anchors[i]);

    this.anchors[i].setAttribute("stroke-width", 1);
    this.anchors[i].setAttribute("stroke", this.stroke);
    this.anchors[i].setAttribute("stroke-dasharray", "3,2");
  }

  this.draw();
}

Teardrop.prototype.draw = function() {
  this.radius = this.width / 2;
  path = [
    "M", this.x, ",", this.y,
    "C", this.x, ",", this.yCP1, " ", this.x + this.width / 2, ",", this.yCP2, " ", this.x + this.width / 2, ",", this.y + this.triangleHeight,
    "A", this.radius, ",", this.radius, ",", "0 0,1,", this.x - this.width / 2, ",", this.y + this.triangleHeight,
    "C", this.x - this.width / 2, ",", this.yCP2, " ", this.x, ",", this.yCP1, " ", this.x, ",", this.y
  ];
  this.element.setAttribute("d", path.join(""));

  cpCoords = [];
  cpCoords[0] = [this.x, this.yCP1];
  cpCoords[1] = [this.x - this.width / 2, this.yCP2];
  cpCoords[2] = [this.x + this.width / 2, this.yCP2];

  anchorCoords = [];
  anchorCoords[0] = [this.x, this.y];
  anchorCoords[1] = [this.x - this.width / 2, this.y + this.triangleHeight];
  anchorCoords[2] = [this.x + this.width / 2, this.y + this.triangleHeight];

  for (var i = 0; i < 3; i++) {
    this.ctrlPoints[i].setAttribute("cx", cpCoords[i][0]);
    this.ctrlPoints[i].setAttribute("cy", cpCoords[i][1]);

    this.anchors[i].setAttribute("x1", cpCoords[i][0]);
    this.anchors[i].setAttribute("x2", anchorCoords[i][0]);
    this.anchors[i].setAttribute("y1", cpCoords[i][1]);
    this.anchors[i].setAttribute("y2", anchorCoords[i][1]);

    if (this.showCtrlPoints) {
      this.ctrlPoints[i].setAttribute("r", 2);
      this.anchors[i].setAttribute("stroke-width", 1);
    } else {
      this.ctrlPoints[i].setAttribute("r", 0);
      this.anchors[i].setAttribute("stroke-width", 0);
    }
  }
}

var teardrop = new Teardrop();

gui.add(teardrop, 'triangleHeight', 0, svg.height * 0.75);
gui.add(teardrop, 'width', 0, 200);
gui.add(teardrop, 'yCP1', 0, svg.height);
gui.add(teardrop, 'yCP2', 0, svg.height);
gui.add(teardrop, 'showCtrlPoints', 0, svg.height);

for (var i in gui.__controllers) {
  gui.__controllers[i].onChange(function() {
    teardrop.draw();
  });
}

html,
body {
  height: 100%;
}
svg {
  display: block;
  margin: 0 auto;
  background: url('http://unitedshapes.com/images/graph-paper/graph-paper.png');
}

<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<svg width='400px' height='400px'></svg>

डिस्क्लेमर मैंने उपरोक्त कलम से नहीं लिखा, केवल इसे खट्टा किया।

---

सीएसएस संस्करण

हालाँकि यह पूरी तरह से दूर है, फिर भी आप CSS का उपयोग करके इस आकृति को उत्पन्न करने में सक्षम हो सकते हैं।

.tear{
    height:200px;
    width:200px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 29%,rgba(0,0,0,1) 30%,rgba(0,0,0,1) 100%);
    border-radius:50%;
    margin:120px;
    position:relative;
}
.tear:before{
    content:"";
    position:absolute;
    top:-70%;left:0%;
    height:100%;width:50%;
    background: radial-gradient(ellipse at -50% -50%, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 100%);
}
.tear:after{
    content:"";
    position:absolute;
    top:-70%;left:50%;
    height:100%;width:50%;
    background: radial-gradient(ellipse at 150% -50%, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 100%);
}

<div class="tear"></div>

एसवीजी संस्करण

मुझे पता होना चाहिए कि एसवीजी इस जवाब के शीर्ष पर होना चाहिए, हालांकि, मुझे एक चुनौती पसंद है और इसलिए यहां एसवीजी के साथ एक प्रयास है।

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मूल्यों को बदलकर , आप अपने अश्रु डिजाइन के आकार को बदलने में सक्षम होंगे।

Comments

ये सब बहुत लगता है ... क्रिया। जेएस समाधान विशेष रूप से बेतुका है।

— egid

@egid: मैंने अपने उत्तर में बताया कि मैंने js संस्करण नहीं बनाया है। यह भी ध्यान दें कि js संस्करण आपको रन टाइम पर आकार बदलने की अनुमति दे रहा है

— jbutler483

Answer 4

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>

टीबीएच हालांकि , स्वीकार किए जाते हैं उत्तर की वक्र काफी निरंतर नहीं हैं।

---

IE 5-8 (VML) के लिए

केवल IE 5-8 में काम करता है। वीएमएल एसवीजी की तुलना में विभिन्न कमांड का उपयोग करता है । उदाहरण के लिए। यह सापेक्ष घन beziers के लिए 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>

Comments

"चिकनी घटता का उपयोग नहीं किया जा सकता है, क्योंकि नियंत्रण बिंदु समान लंबाई के नहीं होंगे।" क्या "चिकनी" का मतलब यह नहीं है कि स्पर्शरेखा हैंडल (नियंत्रण बिंदु) एक सीधी रेखा पर बैठते हैं? उन्हें एक ही लंबाई का क्यों होना चाहिए?

— निकोलो एम।

@NiccoloM। एसवीजी में, चिकनी वक्र (टी और एस कमांड) का मतलब है कि संभाल सममित रूप से विपरीत है, साथ ही पिछले हैंडल की लंबाई के बराबर है । सामान्य भाषा में, चिकनी वक्र का मतलब अलग-अलग हैंडल लंबाई हो सकता है, लेकिन svg में, लंबाई भी पिछले घटता हैंडल के बराबर है :)

— मैक्स पायने

Answer 5

या यदि आपके दर्शकों का फ़ॉन्ट इसका समर्थन करता है, तो यूनिकोड वर्णों का उपयोग करें

DROPLET: 💧 ( 💧)

या

ब्लैक ड्रॉप: ET ( 🌢)

तदनुसार वेतनमान!

Comments

आप @ फॉन्ट-फेस के साथ इसका उपयोग कर सकते हैं, लेकिन फिर आपके पास सही जगह पर रखने के लिए एक फॉन्ट फाइल है और ऐसा है।

— 1934286

एसवीजी और इस तरह का एक समर्पित यूनिकोड प्रतीक अच्छा है। इसके लिए CSS खराब है। PNG ठीक है, लेकिन सही नहीं है क्योंकि यह रेखापुंज ग्राफिक्स है। JPG बेहद खराब है, इतनी खराब है कि अगर मैंने देखा तो मुझे बुरे सपने आते हैं।

— एंड्रियास रिबब्रांड

@AndreasRejbrand 20x20 PNG 200x200 JPG से भी खराब होगा। और, एक ही आकार के साथ, एक असम्पीडित JPG एक PNG के बराबर है। वे दोनों रेखापुंज हैं और वे एक ही मुद्दे से पीड़ित हैं।

— निको

@ निको: सिद्धांत रूप में, हाँ, आप शून्य संपीड़न के साथ जेपीजी का उपयोग कर सकते हैं। लेकिन इंटरनेट इस तरह की आपदाओं से भरा है: en.wikipedia.org/wiki/Atomic_number#/media/…

— Andreas Rejbrand

Answer 6

मैं व्यक्तिगत रूप से इसके लिए एक एसवीजी का उपयोग करूँगा। आप सबसे वेक्टर ग्राफिक्स सॉफ्टवेयर में एसवीजी बना सकते हैं। मैं सुझाऊंगा:

• इंकस्केप
• स्केच
• एडोब इलस्ट्रेटर

मैंने नीचे एक बनाया है जो इलस्ट्रेटर में आपके आकार का एक अनुरेखण है।

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

Answer 7

HTML कैनवास

यह इस धागे में अब तक खुला एक विकल्प है। कैनवस ड्रॉइंग के लिए उपयोग किए जाने वाले कमांड एसवीजी के समान हैं (और वेब-टिकी इस उत्तर में उपयोग किए गए आधार विचार के लिए क्रेडिट के हकदार हैं)।

प्रश्न के आकार को या तो कैनवास के स्वयं के वक्र कमांड (द्विघात या बेजियर) या पथ एपीआई का उपयोग करके बनाया जा सकता है। उत्तर में तीनों विधियों के उदाहरण हैं।

कैनवास के लिए ब्राउज़र समर्थन काफी अच्छा है ।

---

द्विघात वक्रों का उपयोग करना

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एसवीजी की तुलना में कैनवस की एक खामी को चित्रित करने के लिए आकार पर एक प्रभाव भी शामिल किया है । कैनवस रेखापुंज (पिक्सेल) आधारित है और इसलिए एक निश्चित बिंदु से परे स्केल किए जाने पर धुंधला / पिक्सेलयुक्त दिखाई देगा। इसका एक ही उपाय है कि प्रत्येक ब्राउज़र पर आकार को फिर से लिखा जा सके जो कि एक उपरि है।

window.onload = function() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var lineargradient = ctx.createRadialGradient(135, 95, 1, 135, 95, 10);
    lineargradient.addColorStop(0, 'white');
    lineargradient.addColorStop(1, '#77CCEE');      
    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 = '#333';
    ctx.lineWidth = 3;
    ctx.fillStyle = lineargradient;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = "rgba(50, 50, 50, 0.5)";      
    ctx.stroke();
    ctx.fill();
  }
}

canvas {
  margin: 50px;
  height: 100px;
  width: 200px;
  transform: scale(1.5);
}


/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

canvas{
  transition: all 1s;
}

canvas:hover{
  transform: scale(2);
}

<canvas id='canvas'></canvas>

---

बेज़ियर कर्व्स का उपयोग करना

window.onload = function() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var lineargradient = ctx.createRadialGradient(135, 95, 1, 135, 95, 10);
    lineargradient.addColorStop(0, 'white');
    lineargradient.addColorStop(1, '#77CCEE');
    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.arc(120, 88, 35, 5.74, 3.66, false);
    ctx.bezierCurveTo(100, 55, 122, 27.5, 120, 20);
    ctx.bezierCurveTo(122, 27.5, 121, 31.5, 150, 70);
    ctx.closePath();
    ctx.strokeStyle = 'rgba(109,195,250,0.2)';
    ctx.lineWidth = 1;
    ctx.fillStyle = lineargradient;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = "rgba(50, 50, 50, 0.5)";
    ctx.stroke();
    ctx.fill();
  }
}

canvas {
  margin: 75px;
  height: 300px;
  width: 300px;
  transform: scale(1.5);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<canvas id='canvas' height='300' width='300'></canvas>

पाथ एपीआई का उपयोग करना

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

    ctx.lineJoin = 'miter';
    var p = new Path2D("M120 20 Q117.5 30 146 68 A34 34 0 1 1 92 68 Q117.5 35 120 20z");
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.fillStyle = '#77CCEE'
    ctx.stroke(p);
    ctx.fill(p);
  }
}

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>

^{नोट: जैसा कि यहां मेरे उत्तर में बताया गया है , पथ एपीआई अभी तक IE और सफारी द्वारा समर्थित नहीं है।}

---

आगे की पढाई:

• कैनवस के बजाय SVGs पर विचार करने के लिए 7 कारण
• एचटीएमएल 5 कैनवस बनाम एसवीजी: नौकरी के लिए सर्वश्रेष्ठ उपकरण चुनें
• एसवीजी और एचटीएमएल 5 कैनवस के बीच अंतर क्या है?

Comments

मैं नहीं देखता कि svg हमेशा बेहतर विकल्प कैसे होता है। यह निश्चित रूप से इस तरह के कई मामलों में बेहतर विकल्प है। लेकिन कैनवास के अपने पेशेवरों हैं। अच्छा उत्तर। आपके जवाब से मैं यह सुनिश्चित कर सकता हूं, यह निश्चित रूप से एसवीजी का उपयोग करना बहुत आसान है!

— मैक्स पायने

हां @TimKrul, SVG लिखना / उपयोग करना आसान है। कैनवस के अपने पेशेवर हैं लेकिन मैंने जो कुछ भी पढ़ा है वह मुख्य रूप से आकृतियों जैसे सरल लोगो का उपयोग करते समय बहुत फायदेमंद नहीं है क्योंकि यह एसवीजी के विपरीत रेखापुंज है।

— हैरी

Answer 8

मैंने इसे CSS और स्टाइल और पैरामीट्रिक समीकरणों का उपयोग करके उपयोगकर्ता एना ट्यूडर द्वारा बनाए गए कोडपेन पर भी पाया । बहुत सरल, बहुत कम कोड। और कई ब्राउज़र 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>

Comments

हालांकि यह उस तरह के अश्रु के समान नहीं है, जो पूछा जा रहा है।

— doppelgreener

Answer 9

सीएसएस संस्करण

जैसा कि यहाँ कुछ उचित जवाब हैं मैंने सोचा कि क्यों न इसे किसी अन्य विधि के साथ जोड़ा जाए। यह HTML और CSS दोनों का उपयोग कर रहा है आंसू बनाने के लिए ।

यह आपको सीमा के रंग और अश्रु की पृष्ठभूमि को बदलने की अनुमति देगा और इसके शीर्ष भाग को भी फिर से आकार देगा।

एकल का उपयोग करके divहम एक सर्कल बना सकते हैं borderऔर साथ में border-radius। फिर छद्म तत्वों ( :beforeऔर :after) का उपयोग करते हुए हम ^यहां एक सीएसएस त्रिकोण बनाते ^हैं , यह अश्रु की नोक के रूप में कार्य करेगा। सीमा के :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 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid;
  background: red;
  margin: 80px;
  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: 100px solid black;
  top: -70px;
}
div:after {
  border-left: 46px solid transparent;
  border-right: 46px solid transparent;
  border-bottom: 96px solid red;
  top: -66px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

<div></div>

यह उतना ही सरल है जितना कि बैकग्राउंड कलर लगाना divऔर :after bottom-borderउसी में कलर बदलना । बॉर्डर बदलने के लिए आपको divबॉर्डर कलर और :beforeबैकग्राउंड कलर भी बदलना होगा ।

Comments

रूडी पेन एक पृष्ठभूमि रंग मान को याद कर रहा है।

— फारसिन

@Persijn हैरी ने चैट में कुछ कहा और मैं उस पेन को देख रहा था कि यह भूल गया कि ऑटो हर समय बचाता है। हाहा, मैं इसे वापस रख दूंगा जिस तरह से यह था। किया हुआ।

— रुड्डी

Answer 10

एसवीजी के साथ ऐसा करना बहुत आसान है, बस http://image.online-convert.com/convert-to-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>

Comments

@Persijn आप किसी संपादक से कॉपी करके क्यों पूछते रहते हैं? Svg svg है, आप जिसे भी बनाना चाहते हैं, उसका उपयोग कर सकते हैं।

— अभिनव गौनियाल

@AbhinavGauniyal: 'संपादक' जैसा कि आप उन्हें कॉल करना चाहते हैं, घोषणाओं में अतिरिक्त 'फ़ुल' जोड़ें। उदाहरण के लिए, 300.000000ptऔर मेटाडाटा की वास्तव में जरूरत नहीं है

— jbutler483

@Persijn आप हाथ / कोडित से क्या मतलब है। किसी ने सिर्फ अपने कोडिंग कार्यों को आसान बनाने के लिए बस हाथ / कोडेड इलस्ट्रेटर बनाया, और यह अभी भी एक ही चीज का उत्पादन करता है। फिर जब आप ब्राउज़र में svg का उपयोग कर रहे हैं, तो आप खुद को असेंबली भाषा का उपयोग करते हुए इसे हाथ / कोड क्यों नहीं करते? और विधानसभा में क्यों रोकें, तारों का उपयोग करके इसे हाथ / कोड करें या बस इसे स्वयं खींचें। यह एक कारण नहीं है कि मैं उम्मीद कर रहा था।

— अभिनव गौनियाल

@ jbutler483 हाँ और उन्हें ट्रिम किया जा सकता है। कई उपकरण हैं जो आपके लिए करते हैं, यहाँ आपके लिए एक है github.com/svg/svgo

— अभिनव गुनियाल

@persijn इस उत्तर के लिए आवश्यक svg पथ प्रदान करता है। मुझे वास्तव में कोई आपत्ति नहीं है कि आपकी आपत्ति क्या है।

— user428517

Answer 11

यदि आप 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>

Comments

आप किसी डिफेन्स टैग के अंदर एक लाइन का उपयोग क्यों करेंगे? और क्या आप इस आकृति को एक पथ में 3 नहीं कर सकते?

— Persijn

Answer 12

यहाँ चार उत्तरोत्तर सरल एसवीजी अश्रु आकृतियाँ हैं:

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