Code Explainers

Code explainers tagged #svg

javascript 
function sparkline(values, { width = 200, height = 40, stroke = '#2563eb', fill = 'rgba(37,99,235,0.12)' } = {}) {
  if (!Array.isArray(values) || values.length < 2) {
    throw new RangeError('sparkline requires at least two data points');
  }

Rendering a sparkline as SVG

svg data-visualization coordinate-mapping
Intermediate 8 steps
typescript 
import { Component, HostBinding, Input } from '@angular/core';
 
type ProgressVariant = 'success' | 'warning' | 'danger';
 

A CSS-driven progress ring in Angular

host-bindings css-custom-properties input-setters
Intermediate 8 steps