Is it possible to wrap a SVG image inside a border (that is - putting a border from CSS around that image) .
Draw a <rect> round the image which is fill="none". You can use the stroke of the <rect> as the border.
Here are some examples, tested in Firefox:
<svg width="100" height="100" style="border:1px solid black">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<br><br>
<svg width="300" height="100" style="border:1px solid black">
<rect width="300" height="100" style="fill:rgb(110, 50, 25); stroke-width:4; stroke:rgb(43, 222, 221);" />
</svg>
<br><br>
<svg width="170" height="170" style="border:1px solid black">
<rect x="10" y="10" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9;" />
</svg>
Hope it helps. :)
If you want to add a border to some random geometric SVG shapes from CSS it's possible to do it with outline CSS property.
ellipse {
outline: 1px solid red;
outline-offset: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<meta
http-equiv="X-UA-Compatible"
content="ie=edge"
>
<title>Demo</title>
</head>
<body>
<svg width="224" height="112" viewBox="0 0 224 115" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="112.5" cy="84" rx="28.5" ry="28" fill="#D9D9D9"/>
<path d="M26.5 0L52.9138 45H0.0862255L26.5 0Z" fill="#D9D9D9"/>
<path d="M196.5 0L202.899 19.3475H223.605L206.853 31.305L213.252 50.6525L196.5 38.695L179.748 50.6525L186.147 31.305L169.395 19.3475H190.101L196.5 0Z" fill="#D9D9D9"/>
</svg>
</body>
</html>
Related
I want to create a mermaid class diagram in a github .md file where in I can hide/conceal certain nodes and paths/links from that node using CSS.
What I want?
I want the following where the node for the Zebra is concealed and the arrow path/link from it is also concealed. But the sibling Lion class and it's link is 100% opacity.
What I have tried:
I was able to hide nodes using the cssClass feature as below:
// CSS
<style>
.conceal {
opacity: 20% !important;
}
</style>
// ```mermaid
classDiagram
Animal <|--|> Zebra
Animal <|--|> Lion
cssClass "Zebra" conceal
// ```
This produces the following chart where Zebra is concealed while lion is not
However the path from the Zebra is still 100% opacity.
To fix the opacity of the edgePath I tried the following:
.edgePaths:has(~g>g.conceal) {
opacity: 20% !important;
}
// CSS
<style>
.conceal {
opacity: 20% !important;
}
.edgePaths:has(~g>g.conceal) {
opacity: 20% !important;
}
</style>
//```mermaid
classDiagram
Animal <|--|> Zebra
Animal <|--|> Lion
cssClass "Zebra" conceal
//```
Note: the has css selector does not work in Firefox yet.
However, this made both paths from Animal have the lowered opacity as can be seen (in Chrome):
Here is the SVG as example:
<svg aria-labelledby="chart-title-mermaid-1671893404869 chart-desc-mermaid-1671893404869" role="img" viewBox="0.000003814697265625 0.00000286102294921875 170.4431915283203 195.19317626953125" style="max-width: 170.4431915283203px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-1671893404869">
<style>
.conceal {
opacity: 20% !important;
}
.edgePaths:has(~g>g.conceal) {
opacity: 20% !important;
}
</style>
<title id="chart-title-mermaid-1671893404869">
</title>
<desc id="chart-desc-mermaid-1671893404869">
</desc>
<style>
#mermaid-1671893404869 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-1671893404869 .error-icon{fill:#552222;}#mermaid-1671893404869 .error-text{fill:#552222;stroke:#552222;}#mermaid-1671893404869 .edge-thickness-normal{stroke-width:2px;}#mermaid-1671893404869 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1671893404869 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1671893404869 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1671893404869 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1671893404869 .marker{fill:#333333;stroke:#333333;}#mermaid-1671893404869 .marker.cross{stroke:#333333;}#mermaid-1671893404869 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1671893404869 g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-1671893404869 g.classGroup text .title{font-weight:bolder;}#mermaid-1671893404869 .nodeLabel,#mermaid-1671893404869 .edgeLabel{color:#131300;}#mermaid-1671893404869 .edgeLabel .label rect{fill:#ECECFF;}#mermaid-1671893404869 .label text{fill:#131300;}#mermaid-1671893404869 .edgeLabel .label span{background:#ECECFF;}#mermaid-1671893404869 .classTitle{font-weight:bolder;}#mermaid-1671893404869 .node rect,#mermaid-1671893404869 .node circle,#mermaid-1671893404869 .node ellipse,#mermaid-1671893404869 .node polygon,#mermaid-1671893404869 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1671893404869 .divider{stroke:#9370DB;stroke:1;}#mermaid-1671893404869 g.clickable{cursor:pointer;}#mermaid-1671893404869 g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-1671893404869 g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-1671893404869 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-1671893404869 .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-1671893404869 .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-1671893404869 .dashed-line{stroke-dasharray:3;}#mermaid-1671893404869 #compositionStart,#mermaid-1671893404869 .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #compositionEnd,#mermaid-1671893404869 .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #dependencyStart,#mermaid-1671893404869 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #dependencyStart,#mermaid-1671893404869 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #extensionStart,#mermaid-1671893404869 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #extensionEnd,#mermaid-1671893404869 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #aggregationStart,#mermaid-1671893404869 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #aggregationEnd,#mermaid-1671893404869 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #lollipopStart,#mermaid-1671893404869 .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #lollipopEnd,#mermaid-1671893404869 .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 .edgeTerminals{font-size:11px;}#mermaid-1671893404869 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
</style>
<g>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker aggregation classDiagram" id="classDiagram-aggregationStart">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker aggregation classDiagram" id="classDiagram-aggregationEnd">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker extension classDiagram" id="classDiagram-extensionStart">
<path d="M 1,7 L18,13 V 1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker extension classDiagram" id="classDiagram-extensionEnd">
<path d="M 1,1 V 13 L18,7 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker composition classDiagram" id="classDiagram-compositionStart">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker composition classDiagram" id="classDiagram-compositionEnd">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker dependency classDiagram" id="classDiagram-dependencyStart">
<path d="M 5,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker dependency classDiagram" id="classDiagram-dependencyEnd">
<path d="M 18,7 L9,13 L14,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker lollipop classDiagram" id="classDiagram-lollipopStart">
<circle r="6" cy="7" cx="6" fill="white" stroke="black">
</circle>
</marker>
</defs>
<g class="root">
<g class="clusters">
</g>
<g class="edgePaths">
<path marker-end="url(#classDiagram-extensionEnd)" marker-start="url(#classDiagram-extensionStart)" style="fill:none" class="edge-pattern-solid relation" id="id1" d="M58.962245118973726,72.59658813476562L55.24552626440763,76.7632548014323C51.528807409841534,80.92992146809895,44.09536970070934,89.2632548014323,40.378650846143245,97.59658813476562C36.66193199157715,105.92992146809895,36.66193199157715,114.2632548014323,36.66193199157715,118.42992146809895L36.66193199157715,122.59658813476562">
</path>
<path marker-end="url(#classDiagram-extensionEnd)" marker-start="url(#classDiagram-extensionStart)" style="fill:none" class="edge-pattern-solid relation" id="id2" d="M116.58321081364346,72.59658813476562L120.29992966820957,76.7632548014323C124.01664852277565,80.92992146809895,131.45008623190785,89.2632548014323,135.16680508647394,97.59658813476562C138.88352394104004,105.92992146809895,138.88352394104004,114.2632548014323,138.88352394104004,118.42992146809895L138.88352394104004,122.59658813476562">
</path>
</g>
<g class="edgeLabels">
<g class="edgeLabel">
<g transform="translate(0, 0)" class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel">
</span>
</div>
</foreignObject>
</g>
</g>
<g class="edgeLabel">
<g transform="translate(0, 0)" class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel">
</span>
</div>
</foreignObject>
</g>
</g>
</g>
<g class="nodes">
<g transform="translate(87.7727279663086, 40.29829406738281)" id="classid-Animal-0" class="node default">
<rect height="64.59659194946289" width="66.34659194946289" y="-32.298295974731445" x="-33.173295974731445" class="outer title-state">
</rect>
<line y2="5.298295974731445" y1="5.298295974731445" x2="33.173295974731445" x1="-33.173295974731445" class="divider">
</line>
<line y2="21.298295974731445" y1="21.298295974731445" x2="33.173295974731445" x1="-33.173295974731445" class="divider">
</line>
<g class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
</span>
</div>
</foreignObject>
<foreignObject transform="translate( -25.673295974731445, -24.798295974731445)" height="25.59659194946289" width="51.34659194946289" class="classTitle">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
Animal
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(36.66193199157715, 154.89488220214844)" id="classid-Zebra-1" class="node default conceal">
<rect height="64.59659194946289" width="57.3238639831543" y="-32.298295974731445" x="-28.66193199157715" class="outer title-state">
</rect>
<line y2="5.298295974731445" y1="5.298295974731445" x2="28.66193199157715" x1="-28.66193199157715" class="divider">
</line>
<line y2="21.298295974731445" y1="21.298295974731445" x2="28.66193199157715" x1="-28.66193199157715" class="divider">
</line>
<g class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
</span>
</div>
</foreignObject>
<foreignObject transform="translate( -21.16193199157715, -24.798295974731445)" height="25.59659194946289" width="42.3238639831543" class="classTitle">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
Zebra
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(138.88352394104004, 154.89488220214844)" id="classid-Lion-2" class="node default">
<rect height="64.59659194946289" width="47.119319915771484" y="-32.298295974731445" x="-23.559659957885742" class="outer title-state">
</rect>
<line y2="5.298295974731445" y1="5.298295974731445" x2="23.559659957885742" x1="-23.559659957885742" class="divider">
</line>
<line y2="21.298295974731445" y1="21.298295974731445" x2="23.559659957885742" x1="-23.559659957885742" class="divider">
</line>
<g class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
</span>
</div>
</foreignObject>
<foreignObject transform="translate( -16.059659957885742, -24.798295974731445)" height="25.59659194946289" width="32.119319915771484" class="classTitle">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
Lion
</span>
</div>
</foreignObject>
</g>
</g>
</g>
</g>
</g>
</svg>
Question:
Is there a way using CSS selectors to apply the reduced opacity to only one of the edgePaths?
my problem is center elements with Tailwind Grid.
GroupTooltipIcon1/GroupTooltipIcon2 are component that contain an svg.
I have to be able to center the svg component within this grid tailwind, can you help me?
<div className="mt-[75px] grid grid-cols-2 gap-2 justify-items-center">
<div>
<div className="iconInsideTooltip">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>
const GroupTooltipIcon1 = ({
width = "48",
height = "48",
classes = "stroke-white",
}) => {
return (
<svg
className={classes}
style={{ width, height }}
viewBox={`0 0 48 48`}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_206_1350)">
<path d="M31.6027 22.5623L34.1509 20.0644C38.9389 22.0715 42.8398 19.6492 42.8398 19.6492C48.6345 14.1502 46.9798 6.58116 46.9798 6.58116L40.1784 13.3197C40.1784 13.3197 37.9889 13.3197 36.2775 11.8977C34.8555 10.1801 34.8555 7.99681 34.8555 7.99681L41.6003 1.20169C41.6003 1.20169 34.0313 -0.453049 28.5323 5.34168C28.5323 5.34168 26.11 9.24259 28.117 14.0306L23.373 18.869"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"/>
</g>
<defs>
<clipPath id="clip0_206_1350">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>
);
};
export default React.memo(GroupTooltipIcon1);
I have to be able to center the svg component within this grid tailwind, can you help me?
Thank you for help
I found a solution by doing it this way. I hope it will be useful to someone
<div className="mt-[75px] grid grid-cols-2 gap-2 items-start">
<div>
<div className="iconInsideTooltip flex justify-center">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
customClasses={{ "text-center p-5": "p5" }}
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>
Is there a simple way of having an SVG loaded from external file and overflowing?
I tried this:
<html>
<body>
<div style="width:100px;height:30px;">
<svg version="1.1"
baseProfile="full"
width="100%" height="100%"
viewBox="0 0 300 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
overflow="visible">
<rect width="100%" height="100%" fill="black" />
<circle cx="150" cy="100" r="120" fill="blue" />
</svg>
</div>
<div style="width:100px;height:30px;overflow:visible;">
<object style='width:100%;height:100%;overflow:visible;' type='image/svg+xml' data='simple.svg'></object>
</div>
</body>
</html>
where simple.svg is the same as the inline <svg> tag. As seen in this
image:
or in this https://jsfiddle.net/bhLk69wd/1/, the SVG is clipped by <object>. Previously, I tried <img> and <embed> and the SVG was also clipped.
I'm using FontAwesome's react-fontawesome like so:
<FontAwesomeIcon icon={faCaretUp} color="gray" size="lg" />
but the resulting icon has way too much space around it.
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" class="svg-inline--fa fa-caret-up fa-w-10 fa-lg " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" color="gray" style="margin: 0px auto;">
<path fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-
14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662
128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path>
</svg>
Been trying to fix it for a while but nothing works, am I doing something wrong?
Owl Carousel creates an empty space at the end of the carousel when i slide to the the last item. I am not sure whether it is default behaviour but it looks odd to me.
In this we can see the extra space I'm talking about at the end of the carousel. Here is the code I used so far :
I am using autowidth = true because i will be using the carousel code for different card types(different widths)...My issue occurs only when i slide to the last item..while sliding to the last item has an empty space
please add the items into the options,
items : 3 (The number of items you want to see on the screen.)
$('.owl-carousel').owlCarousel({
autoWidth:true,
loop:false,
items:3,
center:false,
dots: false,
merge:true,
margin:10,
lazyload:false,
nav:true,
navText: [
' <svg class="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a1{fill:#fff;stroke:#ec7f4a;stroke-width:4px;}.b1{stroke:#000;}.c1{stroke:none;}.d1{fill:none;}.e1{filter:url(#a1);}</style><filter id="a1" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-1527 -173)"><g class="e1" transform="matrix(1, 0, 0, 1, 1527, 173)"><g class="a1" transform="translate(9 6)"><circle class="c1" cx="22" cy="22" r="22"/><circle class="d1" cx="22" cy="22" r="20"/></g></g><path class="b1" d="M4,11H16.17L10.58,5.41,12,4l8,8-8,8-1.41-1.41L16.17,13H4Z" transform="translate(1570 213) rotate(180)"/></g></svg>',
' <svg class="hide-show animate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a{fill:#fff;stroke:white;stroke-width:4px;}.b{stroke:#000;}.c{stroke:none;}.d{fill:none;}.e{filter:url(#a);}.animate .d,.a{animation: load-icon 1.5s linear .4s ;stroke-dasharray: 200;animation-direction: alternate-reverse;}#keyframes load-icon {to {stroke-dashoffset:200;stroke:#EC7F4A;}}</style><filter id="a" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-11 -173)"><g class="e" transform="matrix(1, 0, 0, 1, 11, 173)"><g class="a" transform="translate(9 6)"><circle class="c" cx="22" cy="22" r="22"/><circle class="d" cx="22" cy="22" r="20"/></g></g><path class="b" d="M20,11H7.83l5.59-5.59L12,4,4,12l8,8,1.41-1.41L7.83,13H20Z" transform="translate(54 213) rotate(-180)"/></g></svg> '
]
})
Thanks,
By adding the items you can control the display items. And also based on your screen width using responsive you control the display items.
Below example I have added like that. Hope this will work for you.
$('.owl-carousel').owlCarousel({
loop:false,
center:false,
dots: false,
items:4,
merge:true,
margin:10,
lazyload:false,
margin: 10,
nav:true,
navText: [
'<svg class="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a1{fill:#fff;stroke:#ec7f4a;stroke-width:4px;}.b1{stroke:#000;}.c1{stroke:none;}.d1{fill:none;}.e1{filter:url(#a1);}</style><filter id="a1" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-1527 -173)"><g class="e1" transform="matrix(1, 0, 0, 1, 1527, 173)"><g class="a1" transform="translate(9 6)"><circle class="c1" cx="22" cy="22" r="22"/><circle class="d1" cx="22" cy="22" r="20"/></g></g><path class="b1" d="M4,11H16.17L10.58,5.41,12,4l8,8-8,8-1.41-1.41L16.17,13H4Z" transform="translate(1570 213) rotate(180)"/></g></svg>',
'<svg class="hide-show animate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a{fill:#fff;stroke:white;stroke-width:4px;}.b{stroke:#000;}.c{stroke:none;}.d{fill:none;}.e{filter:url(#a);}.animate .d,.a{animation: load-icon 1.5s linear .4s ;stroke-dasharray: 200;animation-direction: alternate-reverse;}#keyframes load-icon {to {stroke-dashoffset:200;stroke:#EC7F4A;}}</style><filter id="a" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-11 -173)"><g class="e" transform="matrix(1, 0, 0, 1, 11, 173)"><g class="a" transform="translate(9 6)"><circle class="c" cx="22" cy="22" r="22"/><circle class="d" cx="22" cy="22" r="20"/></g></g><path class="b" d="M20,11H7.83l5.59-5.59L12,4,4,12l8,8,1.41-1.41L7.83,13H20Z" transform="translate(54 213) rotate(-180)"/></g></svg> '
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 2
},
767: {
items: 3
},
1024: {
items: 4
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
</div>
</div>