[LES-2.5/st-compl] svg-dasharray

matowdev · matowdev · commit a8f7f2294eb8 · 2025-06-28T20:11:52.000+03:00
Working with SVG, with the "stroke-dasharray" property.

core: B-4 / WL-AL
diff --git a/core-courses/4-web-layout-advanced-level/2-svg/2-5-svg-dasharray/index.html b/core-courses/4-web-layout-advanced-level/2-svg/2-5-svg-dasharray/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SVG and "stroke-dasharray" property</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body class="page">
+  <svg class="vk" id="Bold" viewBox="0 0 24 24" width="200" height="200" enable-background="new 0 0 24 24"
+    overflow="visible" fill="#64748B" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m19.915 13.028c-.388-.49-.277-.708 0-1.146.005-.005 3.208-4.431 3.538-5.932l.002-.001c.164-.547 0-.949-.793-.949h-2.624c-.668 0-.976.345-1.141.731 0 0-1.336 3.198-3.226 5.271-.61.599-.892.791-1.225.791-.164 0-.419-.192-.419-.739v-5.105c0-.656-.187-.949-.74-.949h-4.126c-.419 0-.668.306-.668.591 0 .622.945.765 1.043 2.515v3.797c0 .832-.151.985-.486.985-.892 0-3.057-3.211-4.34-6.886-.259-.713-.512-1.001-1.185-1.001h-2.625c-.749 0-.9.345-.9.731 0 .682.892 4.073 4.148 8.553 2.17 3.058 5.226 4.715 8.006 4.715 1.671 0 1.875-.368 1.875-1.001 0-2.922-.151-3.198.686-3.198.388 0 1.056.192 2.616 1.667 1.783 1.749 2.076 2.532 3.074 2.532h2.624c.748 0 1.127-.368.909-1.094-.499-1.527-3.871-4.668-4.023-4.878z" />
+  </svg>
+
+  <svg class="balloon" width="175" height="200" viewBox="0 0 175 200" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="stripes" x1="0" y1="0" x2="100%" y2="50%">
+        <stop stop-color="hsl(45,100%,65%)" offset="0" />
+        <stop stop-color="hsl(320,100%,65%)" offset="50%" />
+        <stop stop-color="hsl(200,100%,60%)" offset="100%" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M175 58.756c0-39.538-28.619-58.756-87.5-58.756s-87.5 19.219-87.5 58.756c0 45.469 82.331 97.925 85.831 100.131 0.006 0.006 0.019 0 0.031 0.006 0.069 0.044 0.144 0.044 0.219 0.081 0.45 0.238 0.925 0.4 1.419 0.4s0.969-0.162 1.419-0.394c0.069-0.037 0.15-0.037 0.219-0.081 0.006-0.006 0.019 0 0.031-0.006 3.5-2.213 85.831-54.663 85.831-100.137zM112.5 58.756c0 34.75-17.975 75.756-25 90.456-7.025-14.694-25-55.681-25-90.456 0-47.063 14.269-52.506 25-52.506s25 5.444 25 52.506zM56.25 58.756c0 29.981 12.369 63.381 20.819 82.725-17.138-18.106-45.819-52.85-45.819-82.725 0-29.313 11.988-45.794 37.356-50.825-8.275 9.050-12.356 25.888-12.356 50.825zM118.75 58.756c0-24.938-4.075-41.775-12.356-50.825 25.369 5.031 37.356 21.519 37.356 50.825 0 29.875-28.681 64.612-45.819 82.725 8.45-19.337 20.819-52.744 20.819-82.725zM6.25 58.756c0-24.819 12.419-40.438 38.475-47.7-13.213 9.575-19.725 25.4-19.725 47.7 0 26.269 19.594 54.95 36.487 74.831-24.113-19.175-55.237-48.937-55.237-74.831zM113.512 133.588c16.894-19.881 36.488-48.556 36.488-74.831 0-22.3-6.513-38.131-19.725-47.7 26.056 7.263 38.475 22.881 38.475 47.7 0 25.894-31.125 55.656-55.238 74.831zM71.875 168.75c-1.725 0-3.125 1.4-3.125 3.125v18.75c0 5.256 4.119 9.375 9.375 9.375h18.75c5.256 0 9.375-4.119 9.375-9.375v-18.75c0-1.725-1.4-3.125-3.125-3.125h-31.25zM100 190.625c0 1.838-1.287 3.125-3.125 3.125h-18.75c-1.838 0-3.125-1.287-3.125-3.125v-15.625h25v15.625z"
+      fill="#000000" transform="scale(.9) translate(9,9)" />
+  </svg>
+</body>
+
+</html>
diff --git a/core-courses/4-web-layout-advanced-level/2-svg/2-5-svg-dasharray/style.css b/core-courses/4-web-layout-advanced-level/2-svg/2-5-svg-dasharray/style.css
@@ -0,0 +1,45 @@
+.page {
+  padding: 20px;
+}
+
+.vk:hover {
+  fill: #F8FBFE;
+  stroke: #AC58F5;
+  stroke-width: 0.5;
+}
+
+.vk {
+  stroke: #AC58F5;
+  stroke-width: 1;
+  stroke-dasharray: 10 5;
+}
+
+.vk:hover {
+  stroke-dasharray: 10 0;
+}
+
+/* --- */
+
+.balloon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  /* border: 1px solid; */
+}
+
+.balloon path {
+  fill: none;
+  stroke: url(#stripes);
+  stroke-width: 2;
+  stroke-dasharray: 550 0;
+  animation: dasharray 5s infinite alternate;
+}
+
+@keyframes dasharray {
+  100% {
+    stroke-dasharray: 0 500;
+  }
+}
